На первый взгляд — просто, а на практике всё сложнее.

При вставке блока кнопка, вместо ожидаемой кнопки появляется просто небольшой пустой прямоугольник, а все размеры, цвета и отступы приходится выставлять вручную через ограниченный функционал конструктора. Поэтому даже простая задача превращается в долгий и неудобный процесс🤯

❗️Но есть способ проще — создать свою кнопку с помощью HTML и CSS, буквально за пару минут. Вот подробная инструкция для новичков.

1️⃣ Открываем редактор старого конструктора:

➖ Перейдите в список тренингов или список уроков, где хотите установить кнопку.
➖ Нажмите кнопку «Действие» → «Настроить вид».
➖ Откроется специальное меню редактора, где мы будем работать с HTML и CSS.

2️⃣ Добавьте HTML-блок:

➖В открывшемся редакторе выберите «добавить блок» → «вставка» → «HTML-блок».
➖Скопируйте и вставьте туда этот код:

<a href="ВАША_ССЫЛКА_ЗДЕСЬ" class="my-shiny-button" target="_blank">
Текст вашей кнопки
</a>

⚠️ Замените текст кнопки и вставьте свою ссылку вместо ВАША_ССЫЛКА_ЗДЕСЬ (оставьте кавычки!) — например, на MAX, запись на консультацию и т.д.

3️⃣ Добавьте CSS-код для стиля кнопки:

➖В правом меню редактора найдите значок </>
➖Кликните на него и вставьте следующий CSS-код:

.my-shiny-button {
display: inline-block;
background: #ffb01b; /* фон кнопки */
color: #fff; /* цвет текста */
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
box-shadow: 0 3px 9px rgba(0,0,0,0.07);
transition: background 0.2s, box-shadow 0.2s;
}
.my-shiny-button:hover {
background: #ffc94a; /* фон при наведении */
box-shadow: 0 5px 15px rgba(0,0,0,0.11);
color: #232323; /* цвет текста при наведении */
}

4️⃣ Меняйте внешний вид кнопки под себя:

➖ Цвет кнопки (background) и цвет текста (color) можно изменить на любые — при необходимости, замените код цветов на подходящие под ваш стиль.

➖ В блоке .my-shiny-button:hover указаны цвета кнопки и текста при наведении мышкой.

📌 После внесения изменений не забудьте сохранить результат в блоке CSS и в меню редактора. После сохранения можно перейти к просмотру результата нажав на глаз.

Теперь ваш конверсионный элемент в виде кнопки будет заметен, и ученики точно не пропустят важное действие.

⭐ А если не хочется тратить время на самостоятельную стилизацию или нужно комплексное оформление курса, — в коллекциях магазина Гетшоп уже есть готовые решения.

У нас вы найдёте не только кнопки разного формата (вертикальные и горизонтальные), но и целый набор элементов, которые удобно настраивать под свой фирменный стиль: цвета, шрифты и многое другое меняются буквально в пару кликов.

👉 Заглянуть в Гетшоп

👍 Если пост был полезен, ставьте лайк и сохраняйте его в избранное — так инструкция всегда будет под рукой.

Остались вопросы? Смело пишите в комментариях, мы всегда рады вашей активности и готовы помочь!

#СоветыОтГетшоп #формыикнопки

Не раз сталкивалась с такой ситуацией: приходит клиент и спрашивает «сделайте мне вот так», а «а вообще так можно? это реально?».

В этот раз запрос был такой:

«Мне нужно, чтобы мои выпускники были доступны для поиска любому желающему. Поэтому хочу, чтобы их данные автоматически собирались в единую таблицу на лендинге.

Как только я добавляю нового ученика в группу, его информация сразу подтягивается в эту таблицу.

Всё должно обновляться само, без ручного труда.

В таблице важно, чтобы можно было делать фильтрацию по разным параметрам и переходить к подробной информации о каждом выпускнике»

Я взяла задачу «на подумать» — начала разбирать, какие есть варианты, насколько это вообще возможно. Искала способы, как всё сделать в рамках платформы, без нарушений по персональным данным, чтобы не затрагивать то, на что человек не давал согласия.

Для страницы с доп. информацией я решила использовать открытый профиль.

Обсудила эту идею с клиентом — и тут начались дополнительные желания:
— «А можно добавить ещё в профиль их сторонние дипломы?»
— «А можно оформить страницу открытого профиля красивее? (уйти от базового оформления)»

С каждым новым вопросом вариантов становилось всё больше, а ясности — не особо прибавлялось. Время уходит, а по сути, это пока только подготовительный этап: я даже не знаю, возможно ли собрать всё, что хочет клиент. И, конечно, пока ни о какой оплате речи не идёт — ведь нет гарантии результата.

Это тот случай, когда ты вкладываешься, разбираешься, а чем закончится — до конца не ясно ни тебе, ни заказчику.

В итоге я потратила внушительное количество времени на тесты, вопросы в поддержку, пробные решения и доработки. Клиенту отправила своё видение и вариант реализации… и в ответ — тишина.

В такие моменты появляется вопрос:

Что делать с такими кейсами? Как относиться к тому, что ты уже вложился, и, возможно, не получишь от этого никакой отдачи ни в формате оплаты, ни обратной связи?

Я для себя нашла выход: не просто «отпускать» такие задачи, а превращать всё, что удалось наработать, в готовые шаблоны для магазина Гетшоп.

Решения, которые не пригодились одному клиенту, могут стать полезными десяткам или сотням других. Так опыт не теряется, а моя библиотека пополняется крутыми инструментами

А еще, благодаря этому у нас скоро появится шаблон оформления страницы открытого профиля (себе уже оформила)🎨

👀 Если интересно посмотреть, что в итоге получилось (и как решилась, казалось бы, нерешаемая задача), вот ссылка на первичную реализацию.

❓А как у вас — удаётся ли монетизировать такие открытия? Берёте ли деньги за «исследовательский» этап или воспринимаете это как инвестицию в будущие продукты? Делитесь своим опытом — уверена, этот вопрос близок многим.

Кстати, если у вас есть крутые решения которыми вы готовы поделиться с миром, вы можете разместить свою работу в Гетшоп 👈

Привет, друзья! На связи Настя Соло. 👋

🚀 У меня для вас потрясающие новости! В нашем магазине готовых решений Гетшоп долгожданное пополнение. Мы выпустили новую, пятую тему для нашей самой масштабной и популярной коллекции «Золотое свечение».

Если вы до сих пор думаете, что готовый дизайн — это жесткий шаблон, в котором нельзя ничего изменить, то эта коллекция перевернет ваше представление.

💎 Наши коллекции работают как настоящий умный конструктор. Вы сами выбираете только те элементы, которые нужны вашему проекту, миксуете их между собой и получаете абсолютно уникальное оформление.

Внутри коллекции «Золотое свечение» вам доступна невероятная вариативность: целых 3 вида оформления списка тренингов и 3 варианта отображения уроков. Вы можете выводить уроки аккуратными плашками, плитками с нумерацией, делать их большими или маленькими.

🖼️ Каждое оформление можно использовать как с картинками, так и без них. Достаточно просто загрузить свои обложки, и шаблон мгновенно перестроится, создав совершенно новый визуальный стиль. В несколько кликов вы можете полностью изменить шрифты, цвета и адаптировать каркас под конкретные задачи вашего проекта.

Новая Тема 5 выполнена в благородных светло-голубых тонах. Это идеальная базовая гамма, которая выглядит дорого и свежо. Она универсальна и без изменения цветовой схемы подойдет абсолютно для любой ниши — от серьезного бизнеса до бьюти-сферы.

📱 При этом все наши шаблоны полностью адаптивны. Они безупречно отображаются на любых смартфонах и планшетах, а также отлично работают внутри официального мобильного приложения Геткурс.

Отдельная моя любовь в Теме 5 — это продуманная система мотивации студентов. Мы детально проработали путь ученика и добавили элементы, которые вызывают привыкание в хорошем смысле слова.

🎨 Цветовые статусы уроков. Для каждого статуса («пройден», «на проверке», «стоп-урок») мы настроили индивидуальные цвета. Ученик визуально видит свой путь. Это работает как легальный дофамин: загорается заветный зеленый цвет, и внутри сразу рождается приятное чувство «Ура, я молодец, я сделал это!».

📊 Прогресс-бары и календари. Шкала завершенности курса и наглядное расписание дают студенту ощущение целостности продукта. Он понимает, где находится сейчас и сколько осталось до финала, что защищает от выгорания и повышает доводимость до конца.

Напоминаю, что в Гетшоп действует гибкая система сборки. Вы можете приобрести как один элемент, так и всю коллекцию целиком. И здесь работает простое правило: чем больше элементов вы выбираете в свой конструктор, тем выше ваша персональная скидка — она может достигать 25%!

➡️ Переходите на сайт Гетшоп и собирайте свой идеальный Геткурс легко и без переплат дизайнерам 👇

[Ссылка на коллекцию «Золотое свечение»]

Коллеги, а что для вас важнее в оформлении: визуальный стиль или чтобы интерфейс помогал ученику быстрее проходить уроки?

#Коллекции #НовостиГетшоп

В большинстве шаблонов вы можете легко изменить цвета, шрифты, фон и некоторые другие параметры.

Мы специально закладываем эту возможность, чтобы любой шаблон можно было адаптировать к вашему стилю и задачам — без долгих доработок и сложных настроек.

Чтобы быстро и наглядно менять оформление под себя, мы предлагаем использовать браузерные расширения для работы со стилями.

Сегодня расскажем, как это работает на примере расширения Magic CSS, но вы можете пользоваться и аналогами.

1️⃣ С чего начать:

➖Прежде, чем начать менять цвета, установите приобретенный шаблон себе на Геткурс.

2️⃣ Перейдите к элементам которые будете менять.

➖Например, если меняете оформление тренингов, то перейдите на страницу где видно оформление тренингов.

➖Находясь на нужной странице запустите расширение.

3️⃣ Вставляем код который будем менять:

➖Если вы меняете цвета в шаблонах из коллекций — скопируйте единый файл управления темой и вставьте его целиком в рабочую область расширения.

➖Если вы меняете цвета в других шаблонах — скопируйте CSS шаблона и вставьте его в рабочую область расширения.

4️⃣ Меняем цвета:

➖Находите переменные того элемента, который хотите поменять — все они подписаны для удобства и подбираете цвет прямо в редакторе Magic CSS.

Например, хотите изменить цвет кнопки в тренингах — находите соответствующие переменные и задаёте свои цвета. Все изменения вносимые в расширение вы будете видеть сразу на странице.

О том, как обозначаются цвета и как сделать свой градиент мы рассказывали в предыдущем посте.

5️⃣ Сохраняем результат:

➖Когда подобрали нужные цвета, просто перенесите обновленный код на GetCourse.

Если вы делали оформление с помощью коллекций и хотите использовать разные цвета для разных тренингов, посмотрите наш пост о том, как оптимизировать этот процесс.

💘 Было полезно? Ставьте лайк, пишите вопросы и делитесь впечатлениями в чате — ваши реакции помогают нам делать материалы ещё лучше!

#СоветыОтГетшоп #Коллекции