Делаем из стандартного блока Геткурс «Картинка — подзаголовок — заголовок — текст» компактную и адаптивную плитку в виде мозайки.
Для этого мы будем использовать сторонний плагин – https://masonry.desandro.com/
Для того чтобы все получилось необходимо выполнить настройку из предыдущих статей:
Шаг 1.
Подключаем плагин к странице
Для этого заходим в настройки всей страницы и и добавляем данный код в поле «Теги в разделе HEAD».
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js">
Сохраняем страницу!
Шаг 2.
Запускаем плагин на странице
Заходим в редактор страницы и создаем новый JS-блок.
Далее в него добавляем следующий код:
$('.pl .flex-row').masonry({
itemSelector: '.lt-tsr-block ',
horizontalOrder: true,
percentPosition: true
});
где .pl - это класс блока с плитками из предыдущей статьи.
Важно! У вас это может быть другое название класса блока с плитками, поэтому на это необходимо обратить внимание!
Шаг 3.
Добавляем дополнительный код в CSS-блок для придания ширины плиткам.
После добавления кода, который иницилизирует плагин, содержимое страницы геткурс будет выглядеть следующим образом:
Для того, чтобы плитки выглядели подобающим образом, необходимо добавить данный код в блок CSS.
@media (min-width: 1024px) {
.pl .lt-tsr-block {
width: 33.3%;
}
}
@media (max-width: 1024px) {
.pl .lt-tsr-block {
width: 33.3%;
}
}
@media (max-width: 760px) {
.pl .lt-tsr-block {
width: 50%;
}
}
Шаг 4.
Включаем настройку «гибкая верстка»
Заходим в стили блока «плитки», и указываем галочку «гибкая верстка». Если у вас она была включена, то уже на 3 шаге, все должно работать.
Плитки геткурс – настройка стилей
Публикуем страницу и смотрим результат!
🧞♂️
Теперь вы сможете добавлять неограниченное количество блоков, не задумываясь о кол-ве знаков текста внутри каждой плитки. Плитки будут аккуратно выстраиваться в виде кирпичной кладки, эффективно экономя место на странице.
авторизуйтесь