Как создать прокручиваемую область виджетов последних сообщений в Divi

Модуль боковой панели Divi - чрезвычайно полезный инструмент для интеграции пользовательских областей виджетов в ваш дизайн. Это позволяет отображать любой виджет WordPress внутри макета Divi. В этом уроке я покажу вам, как создать прокручиваемую область виджетов последних сообщений в Divi. Я буду создавать раздел «Из нашего блога» с областью виджета последних сообщений в правой части модуля блога. Это идеально подходит для демонстрации нескольких ваших последних сообщений в блоге на главной или целевой странице.

Давайте начнем!

Sneak Peek

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

Скачайте БЕСПЛАТНО макет прокручиваемых последних сообщений

Чтобы ознакомиться с прокручиваемым дизайном макета последних сообщений из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Подпишитесь на наш канал Youtube

Создание области виджетов последних сообщений

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

Чтобы создать область виджетов последних сообщений, перейдите в «Внешний вид»> «Виджеты». Затем создайте новую область виджетов, присвоив области виджетов имя (назовите это «недавние сообщения», если хотите) и нажав кнопку «Создать». Обновите страницу, чтобы увидеть новую доступную область виджетов.

Откройте переключатель виджета недавних сообщений, который поставляется с WordPress, в левой части страницы. Затем выберите из списка область виджетов «Последние сообщения» и нажмите «Добавить виджет», чтобы добавить виджет в область виджетов.

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

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

Создание раздела «Из нашего блога» с прокручиваемой областью виджетов последних сообщений

Разработка заголовочного раздела

Создайте новый обычный раздел со строкой в ​​одну колонку.

Перед добавлением модуля обновите раздел следующим образом:

Цвет фона: # 333333
Пользовательский отступ: 0 пикселей внизу

Затем удалите нижний отступ строки, обновив настройки строки:

Пользовательский отступ: 0 пикселей внизу

Затем добавьте в строку текстовый модуль.

Затем обновите следующие параметры текста:

Для содержимого добавьте следующий заголовок h2 html:

<h2>From our Blog</h2>

Затем обновите следующие параметры текста:

Шрифт заголовка 2: Roboto
Стиль шрифта заголовка 2: TT
Цвет текста заголовка 2: #ffffff
Размер текста заголовка 2: 40 пикселей
Заголовок 2 Расстояние между буквами: 2 пикселя

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

Создание специального раздела

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

Идите вперед и добавьте специальный раздел с расположением столбцов правой боковой панели следующим образом:

Затем добавьте в раздел строку из одного столбца.

Перед добавлением модуля давайте обновим настройки раздела и строки.

Настройка параметров раздела

Откройте настройки для раздела специальности и обновите следующее:

Цвет фона: # 333333
Ширина желоба: 2
Пользовательские отступы: сверху 0 пикселей
Пользовательское заполнение столбца 2: 0 пикселей сверху, 0 пикселей снизу.

Настройте параметры строки

Затем откройте настройки строки и обновите следующее:

Высота: 640 пикселей
Ширина верхней границы: 8 пикселей
Цвет верхней границы: # 444444.
Ширина нижней границы: 8 пикселей
Цвет нижней границы: # 444444

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

Добавление модуля блога

В строке с одним столбцом слева добавьте модуль блога.

Затем обновите настройки модуля блога следующим образом:

Количество сообщений: 2

Макет: сетка
Шрифт заголовка: Roboto
Мета-шрифт: Roboto
Толщина мета-шрифта: легкий
Стиль мета-шрифта: TT
Шрифт разбивки на страницы: Roboto
Стиль шрифта разбивки на страницы: TT
Цвет текста разбивки на страницы: #ffffff
Размер текста разбивки на страницы: 18 пикселей
Интервал между буквами при разбивке на страницы: 2 пикселя

Добавление прокручиваемой области виджетов последних сообщений

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

Затем выберите область виджетов «Последние сообщения», которую вы создали ранее, выбрав ее в раскрывающемся списке «Область виджетов» на вкладке содержимого.

Затем обновите дизайн заголовка и основного текста следующим образом:

Шрифт заголовка: Roboto
Стиль шрифта заголовка: TT
Цвет текста заголовка: #ffffff
Интервал между заглавными буквами: 2 пикселя
Шрифт тела: Roboto
Стиль основного шрифта: подчеркивание

Затем скройте разделитель границ следующим образом:

Показать разделитель границ: НЕТ

Затем задайте модулю боковой панели максимальную высоту и настраиваемое заполнение следующим образом:

Макс.высота: 640 пикселей
Пользовательские отступы: 30 пикселей сверху, 30 пикселей снизу, 5% справа.

Максимальная высота 640 пикселей соответствует пользовательской высоте 640 пикселей, заданной для соседней строки.

Теперь, когда мы дали модулю боковой панели максимальную высоту 640 пикселей, нам нужно настроить вертикальное переполнение для прокрутки, чтобы получить нашу прокручиваемую функциональность. Для этого перейдите на вкладку Advanced и обновите следующее:

Вертикальное переполнение: прокрутка

Конечный результат

Вот и все! Теперь посмотрим на окончательный результат.

Дополнительный вариант: добавление пользовательского CSS на полосу прокрутки дизайна (поддерживается не всеми браузерами)

Стилизация полосы прокрутки в WordPress - это своего рода боль, если вам нужна кроссбраузерная поддержка. Так что в большинстве случаев вы захотите оставить это в стилях браузера по умолчанию и прекратить это. Но если вы хотите настроить полосу прокрутки в соответствии с дизайном вашей страницы, вы можете добавить собственный CSS. К сожалению, поддержка браузеров ограничена браузерами, которые поддерживают свойства CSS с префиксом :: webkit (в основном это Safari и Chrome). Вот как это сделать.

Откройте настройки раздела специальности и добавьте следующий класс CSS:

Класс CSS: cust-scroll

Затем откройте модальное окно настроек страницы и добавьте на страницу следующий настраиваемый CSS.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Это изменяет ширину полосы прокрутки до 8 пикселей и настраивает цвета дорожки и ручки. Не стесняйтесь экспериментировать с большим количеством дизайнов и цветов по своему усмотрению.

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

Последние мысли

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

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

Я с нетерпением жду вашего ответа в комментариях ниже.

Ваше здоровье!