100 идей для акции в онлайн-школе.
Готовые решения для мозгового штурма.
Стратегический разбор по работе с базой.
Как выстроить системную работу с базой и получать с нее 100% прибыли каждый месяц.
Оцените потенциал роста онлайн-школы.
7 вопросов для самоаудита.
Почему нужно работать с базой всем?
Или основы масштабирования с гарантией 100%
услуги
↳ Канал Telegram — 340 записей
↳ pdf-книга «Работа с базой»
↳ Антикризисный гайд
↳ Чек-лист по увеличению конверсий
↳ Тактическая карта для онлайн-школ
↳ Как акции усиливают маркетинг
↳ Сборник записей по распродажам
↳ Кейс «Серия распродаж на 22 млн»
↳ 12 точек масштабирования трафика
Выступаю:
- на конференциях
- в уроках курса
- в вебинарах
- клубных встречах
Мне интересны темы:
- работа с базой
- методы масштабирования
- аналитика монетизации подписчиков
- процессы в онлайн-школах
- построение отделов внутреннего маркетинга
- продающие мероприятия
- системы запусков
- акции и распродажи
- закупка трафика
Пишите мне @sedovartem
Попробуй инструмент «Колесо фортуны»
Не нужно уже смотрелДелаем из стандартного блока Геткурс «Картинка — подзаголовок — заголовок — текст» красивую плитку с фоновыми иконками.
Стало. Вариант 1
Шаг 1.
Создаем страницу на геткурс и добавляем виджет “плитка”:
Шаг 2.
Даем название CSS-классу блока. Название должно содержать латинские буквы, начинаться с буквы. Рекомендуем использовать 2-3 латинские буквы, чтобы максимально исключить пересечение с системными классами геткурса:
Мы будем использовать название «pl»
Шаг 3.
Указываем отступы, и фон блока. Больше ни какие настройки трогать не нужно. Нажимаем «сохранить и закрыть».
Шаг 4.
Добавляем блок CSS-кода:
Шаг 5.
Меняем стили контейнера, в котором находятся плитки. Для этого добавляем в блок CSS следующий код:
.pl .flex-row {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-align: stretch!important;
-ms-flex-align: stretch!important;
align-items: stretch!important;
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
-webkit-box-pack: start!important;
-ms-flex-pack: start!important;
justify-content: flex-start!important;
}
Шаг 6.
Добавляем стили для контейнера контентной части каждой плитки:
.pl .lt-tsr-content {
background-color: #f4f7f9;
position: relative;
border-radius: 10px;
padding: 20px;
height: 100%;
}
где:
background-color: #f4f7f9; — цвет фона плитки, его можно менять в зависимости от предпочтений по дизайну.
Не забывайте сохранять блок CSS, куда добавляете код. Сейчас плитки должны приобрести вот такой вид:
Шаг 7.
Придаем блоку абсолютное позиционирование внутри общего блока контентной части, и растягиваем его по всей площади. Добавляем в тот же CSS-блок код для родительского блока, внутри которого находится изображение:
.pl .lt-tsr-block .image-card {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Если вы все сделали правильно, то изображения плитки должны накрыть текст, став как бы поверх остального контента плитки.
Шаг 8.
Позиционируем изображение по верхнему правому углу и масштабируем его с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. Добавляем код для красивых иконок:
.pl .lt-tsr-block .image-wrapper div.image {
width: 100%;
height: 100%;
background-position: right top;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.5; делаем изображение наполовину прозрачным
}
Как раз что нам нужно, для красивого отображения иконок!
Шаг 9.
Добавляем отступы к изображениям в виде иконок:
.pl .lt-tsr-block .image-wrapper {
width: 100%;
position: absolute!important;
padding: 20px;
}
Параметр padding: 20px; необходимо закомментировать если будете использовать фоновое изображение, вот так /*padding: 20px;*/
Шаг 11.
Можно добавить код, где вы сможете поменять размер шрифта текста и кнопок по отдельности:
/*.pl .f-subheader {font-size: 15px;}
.pl .f-header {font-size: 15px;}
.pl .f-description {font-size: 15px;}
.pl .button button {font-size: 15px;}*/
Данный код закомментирован, чтобы использовались стандартные размеры прописанные системой геткурс. Для того чтобы внести свои размеры необходимо удалить “/*” с обеих сторон кода, ввести свои размеры и сохранить блок CSS.
Шаг 12.
Заменяем картинки на иконки, как представлено на примере. Для этого переходим на сайт, например, icons8.com или flaticon.com, скачиваем нужные иконки в формате png с прозрачным фоном и добавляем вместо изображения.
Шаг 13.
Меняем размер иконки. Для этого нужно поменять «Настройки контейнера тизера». Этот параметр влияет на высоту картинки. Уменьшив значение вы сможете уменьшить саму иконку:
Шаг 14.
Увеличиваем прозрачность изображения, уменьшив значение данного параметра opacity с 0.5 до 0.1:
.pl .lt-tsr-block .image-wrapper div.image {
width: 100%;
height: 100%;
background-position: right top;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.1;
padding: 20px;
}
🧞♂️
После игры с параметрами, прозрачностью и цветами получилась вот такая аккуратная плитка на странице https://sedov.link/hello
И еще кое что...
Мы можем заменить иконку на фоновое изображение и получить плитку такого вида:
Шаг 15.
Меняем настройку стилей «колонок в ряду» с автоматической на фактическое значение. Например в 3 колонки.
Шаг 16.
Комментируем параметр padding, про это мы описывали в 9 шаге, и добавляем парамтер высоты изображения height: 100%;.
.pl .lt-tsr-block .image-wrapper {
width: 100%;
position: absolute!important;
/*padding: 20px;*/
height: 100%; /* высота контейнера изображения */
}
В зависимости от изображения или дизайна регулируем параметр opacity, тем самым повышая или уменьшая прозрачность картинки.
.pl .lt-tsr-block .image-wrapper div.image {
width: 100%;
height: 100%;
background-position: right top;
background-size: contain;
background-repeat: no-repeat;
opacity: 1; /* регулируем прозрачность */
padding: 20px;
}
Шаг 17.
Меняем цвет текста, если изображение имеет темный фон, с помощью добавления параметра color.
.pl .f-subheader {font-size: 15px; color: #fff;}
.pl .f-header {font-size: 15px; color: #fff;}
.pl .f-description {font-size: 15px; color: #fff;}
И добавляем данный код, чтобы растянуть изображение по всему блоку
.tsr-auto-image-height.pl .lt-tsr-block .image-wrapper div.image {
background-size: cover;
}
🧞♂️
Меняем иконку на обычное изображение и получаем совершенно другой результат:
Готовый код для импорта
Автоматизированные отчеты
Платформа сквозной аналитики для Getcourse
Моя команда подключит платформу без дополнительных оплат за 1 день. Четыре готовых модуля для разных задач и разных сотрудников.
авторизуйтесь