Хотели бы вы публиковать сообщения блога в Divi?
Сегодня мы собираемся показать вам творческий способ представления постов в блоге в виде плавающих карточек в Divi. Каждый блог или Веб-сайт должен стремиться к отличному содержание привлекательным и, возможно, столь же важным или доступным.
Один из способов гарантировать, что содержание остается доступным для пользователей, нужно сделать его плавающим на странице.
А блоггерам мы покажем, как презентовать статьи из ваш блог в виде плавающих карточек, чтобы они оставались видимыми при прокрутке страницы.
Пойдем.
обследование
Вот краткий обзор результата, который мы получим в конце этого урока.
Что нужно для начала
Прежде чем вы начнете создавать этот дизайн в Divi, вам нужно будет сделать следующее:
- Создайте новую страницу, дайте соответствующее имя и нажмите «Использовать Divi Builder».
- Выберите опцию Выберите макет".
- Найти и выбрать макет 'целевая страница блогера».
- Нажмите на кнопку Выберите макет чтобы загрузить его на страницу.
После этого у вас будет готовый макет, готовый к использованию в этом уроке.
Как создать плавающие карточки для сообщений в блоге с помощью модуля блога Divi
Теперь, когда макет загружен на страницу, мы готовы создать плавающие карточки для постов в блоге.
Читайте также: Как создать липкий глобальный заголовок в Divi
Создайте новый раздел в самом низу макета.
Затем добавьте в раздел новую строку с одним столбцом.
Добавьте модуль блога и заголовок в строку/столбец
Вместо того, чтобы создавать здесь новый модуль блога, прокрутите вверх и найдите существующий модуль блога, в котором отображаются три сообщения блога (он находится в третьем разделе в середине страницы). Открытым " Другие параметры модуля »И выберите« Копия модуля".
Затем вставьте модуль в новую строку с одним столбцом, которую мы создали внизу страницы, щелкнув правой кнопкой мыши значок серого плюса и выбрав « Вставить модуль".
Далее мы добавим заголовок над нашими сообщениями в блоге, который также будет плавать над карточками блога. Для этого скопируйте существующий модуль «Текст» с небольшим текстом заголовка « Образ жизни".
Затем вставьте модуль прямо над новым модулем блога, который мы только что добавили.
Затем отредактируйте текст заголовка, чтобы описать тип сообщений в блоге, которые вы хотите показать. В этом примере мы просто будем использовать " Основной момент".
Настройка линии с фиксированным положением и пользовательской шириной
Мы хотим уменьшить размер плавающих сообщений блога, чтобы они не занимали слишком много места на странице, когда имеют фиксированное положение. Это было бы занимательно. Для этого откройте настройки линии и обновите следующее:
Чтобы элементы плавали, нам нужно придать линии фиксированное положение. На вкладке «Дополнительно» обновите следующее:
- Позиция: Фиксированная
- Расположение: внизу справа
- Вертикальное смещение: 20 пикселей
- Горизонтальное смещение: 20 пикселей
- Индекс Z: 12
Обновленный модуль блога с минимальным содержанием и box-shadow.
Как правило, модуль «Блог» уже имеет макет сетки из трех столбцов и приятный стиль, который поставляется с выбранным нами пакетом макетов. Но есть несколько вещей, которые нам нужно сделать.
См. Также: Как создать глобальный заголовок с формой входа в Divi
Прежде всего, нам нужно уменьшить размер карт (по вертикали) и удалить некоторые элементы из содержание.
Для этого откройте настройки блога и скройте все элементы, кроме избранного изображения. Это заставит пост показывать только избранное изображение и заголовок.
На вкладке «Стиль» настройте тень блока следующим образом:
- Поле теней: см. снимок экрана
- Box Shadow Blur Strength: 28px
- Цвет шрифта субтитров: rgba(0,0,0,0.19)
обследование
Вот предварительный просмотр результата, который мы имеем до сих пор.
Сделать так, чтобы строка статей отображалась при наведении
Наконец, мы можем добавить приятный эффект наведения, который побуждает пользователей взаимодействовать с плавающими статьями.
Читайте также: Как создать страницу блога с помощью модуля «Блог» в Divi
Откройте настройки линии и параметры обновления:
Для офиса
- Трансформация: 50%
Для состояния наведения
- Преобразование: 0%
Первоначально это выведет всю строку за пределы области просмотра браузера на 50%. Как только пользователь наводит курсор на строку, она полностью возвращается в поле зрения.
Скрыть строку на мобильном устройстве
Если вы не хотите публиковать один пост в блоге, нет смысла публиковать эти посты в блоге на мобильных устройствах. Вероятно, это заняло бы слишком много места и вызвало бы проблемы при попытке прокрутки.
См. Также: Как добавить контактную форму в глобальный заголовок в Divi
Чтобы скрыть карты на мобильном телефоне, откройте настройки раздела и отключите видимость раздела на телефоне и планшете.
Конечный результат
Скачайте DIVI прямо сейчас!!!
Заключение
Так ! В этом уроке мы показали вам творческий и оригинальный способ представления сообщений в блоге, которые вы хотите выделить.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
