На первый взгляд — просто, а на практике всё сложнее.
При вставке блока кнопка, вместо ожидаемой кнопки появляется просто небольшой пустой прямоугольник, а все размеры, цвета и отступы приходится выставлять вручную через ограниченный функционал конструктора. Поэтому даже простая задача превращается в долгий и неудобный процесс🤯
❗️Но есть способ проще — создать свою кнопку с помощью 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 и в меню редактора. После сохранения можно перейти к просмотру результата нажав на глаз.
Теперь ваш конверсионный элемент в виде кнопки будет заметен, и ученики точно не пропустят важное действие.
⭐ А если не хочется тратить время на самостоятельную стилизацию или нужно комплексное оформление курса, — в коллекциях магазина Гетшоп уже есть готовые решения.
У нас вы найдёте не только кнопки разного формата (вертикальные и горизонтальные), но и целый набор элементов, которые удобно настраивать под свой фирменный стиль: цвета, шрифты и многое другое меняются буквально в пару кликов.
👉 Заглянуть в Гетшоп
👍 Если пост был полезен, ставьте лайк и сохраняйте его в избранное — так инструкция всегда будет под рукой.
Остались вопросы? Смело пишите в комментариях, мы всегда рады вашей активности и готовы помочь!
#СоветыОтГетшоп #формыикнопки
24