Как создать липкую боковую панель для шаблона сообщения в блоге с помощью Divi

При создании любого типа веб-сайта высока вероятность, что вы захотите иногда вести блог и на этом веб-сайте. Помимо того, что вам нужна страница блога, на которой все ваши сообщения блога представлены в виде списка, вам понадобится шаблон сообщения блога, который вы можете автоматически назначать новым сообщениям блога, которые вы создаете. Создать шаблон сообщения в блоге с помощью Divi Theme Builder невероятно просто. А теперь, с новыми липкими опциями Divi, вы также можете сразу же сделать свою боковую панель липкой! В сегодняшнем руководстве мы покажем вам, как именно это сделать, и вы также сможете бесплатно загрузить файл JSON шаблона сообщения в блоге!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО шаблоны для сообщений блога The Sticky Sidebar

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

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

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

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

СКАЧАТЬ

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

https://youtu.be/8hTA3ogf3ZQ

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

1. Перейдите в Divi Theme Builder и добавьте новый шаблон.

Перейдите в конструктор тем Divi и добавьте новый шаблон

Начните с перехода к Divi Theme Builder и добавления нового шаблона.

Использовать шаблон для всех сообщений

Используйте этот новый шаблон для всех сообщений.

• Использовать: все сообщения

Начать создание тела шаблона

Затем начните создавать собственное тело вашего шаблона сообщения.

2. Начните создание тела сообщения в блоге (правая боковая панель)

Раздел № 1 Настройки

Градиентный фон

Оказавшись внутри редактора шаблонов, вы можете приступить к созданию дизайна. Откройте раздел, который вы можете заметить в верхней части шаблона, и примените градиентный фон.

• Цвет 1: # 8995ff
• Цвет 2: # 6163b5
• Направление градиента: 150 градусов

Интервал

Перейдите на вкладку дизайна раздела и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и примените цвет фона.

• Цвет фона: # 8995ff

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Левый отступ: 3%
• Правое заполнение: 3%

Граница

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

• Все углы: 20 пикселей

Коробка Тень

Также примените тень блока.

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Преобразовать Перевести

И завершите настройки строки, соответствующим образом изменив настройки преобразования преобразования:

• Справа: 50 пикселей

Добавить текстовый модуль в столбец 1

Динамический контент

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

• Динамический контент: категории сообщений

Настройки текста

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

• Шрифт текста: Alata
• Цвет текста: #ffffff
• Размер текста: 1 бэр
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2em

Настройки текста ссылки

Также измените цвет текста ссылки.

• Цвет текста ссылки: #ffffff

Клонировать текстовый модуль дважды и размещать дубликаты в оставшихся столбцах

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

Изменить динамическое содержимое

Измените динамический контент для каждого дубликата.

• Первый дубликат: дата публикации публикации

• Второй дубликат: количество комментариев
• После: Комментарии
• Ссылка на область комментариев: Да

Добавить раздел # 2

Интервал

Добавьте еще один раздел прямо под предыдущим. Откройте настройки раздела и примените следующие значения верхнего и нижнего отступов:

• Верхний отступ: 0 пикселей
• Нижний отступ: 150 пикселей

Добавить новую строку

Структура столбца

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 2580 пикселей

Интервал

Затем добавьте несколько значений пользовательской маржи.

• Верхнее поле: 100 пикселей
• Нижняя маржа:
  • Рабочий стол: 100 пикселей
  • Планшет и телефон: 50 пикселей

Столбец 1 Настройки

Интервал

Затем откройте настройки столбца 1 и примените отступы слева и справа.

• Левый отступ: 5%
• Правое заполнение: 5%

Столбец 2 Настройки

Фоновый цвет

Перейдите к настройкам столбца 2 и примените белый цвет фона.

• Цвет фона: #ffffff

Интервал

Включите также некоторые пользовательские значения заполнения.

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Далее перейдите к настройкам границы и примените следующие настройки:

• Все углы: 20 пикселей
• Верхняя граница:
  • Ширина верхней границы:
    • Рабочий стол: 0px
    • Планшет и телефон: 5 пикселей
  • Цвет верхней границы: # 8995ff
• Левая граница:
  • Ширина левой границы:
    • Рабочий стол: 5 пикселей
    • Планшет и телефон: 0 пикселей
  • Цвет левой границы: # 8995ff

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Добавить текстовый модуль №1 в столбец 1

H1 динамический контент

Пора добавить модули, начиная с текстового модуля в столбце 1. Выберите следующий динамический контент:

• Динамический контент: заголовок публикации / архива
• Раньше: <H1>
• После: </H1>

Настройки текста H1

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

• Шрифт заголовка: Alata
• Размер текста заголовка:
  • Рабочий стол: 4.8rem
  • Таблетка: 3,2 бэр
  • Телефон: 2.3rem
• Расстояние между буквами заголовка: -2 пикселя

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 100 пикселей

Добавить текстовый модуль №2 в столбец 1

Оставьте поле содержимого пустым

Добавьте еще один текстовый модуль в столбец 1 и оставьте поле содержимого пустым.

Динамическое фоновое изображение

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

• Динамическое фоновое изображение: избранное изображение
• Размер фонового изображения: обложка

Интервал

Перейдите на вкладку дизайна модуля и примените следующие значения отступов:

• Верхний отступ: 250 пикселей
• Нижний отступ: 250 пикселей

Граница

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

• Все углы: 20 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Добавить модуль содержимого публикации в столбец 1

Настройки основного текста

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

• Шрифт текста: Lato
• Размер текста: 1,1 бэр
• Высота текстовой строки: 2.3em

Настройки текста заголовка

Измените также шрифт заголовка.

• Шрифт заголовка: Alata

Интервал

И удалите нижнее поле по умолчанию.

• Нижнее поле: 0 пикселей

CSS-класс

И последнее, но не менее важное: перейдите на вкладку «Дополнительно» и примените следующий класс CSS:

• Класс CSS: содержание сообщения блога

Добавить модуль кода в столбец 1

Добавить CSS-код для промежутка между заголовками и содержимым абзаца

Мы используем класс CSS, который мы назначили модулю содержимого публикации, чтобы добавить пространство между заголовками и абзацами. Добавьте модуль кода прямо под модулем содержимого публикации и поместите в модуль следующий код CSS:

<style>
.blog-post-content p,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Добавить модуль боковой панели в столбец 2

Макет

Переходим к следующему столбцу. Там мы добавим модуль боковой панели. Перейдите на вкладку дизайна модуля и скройте разделитель границ.

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

Настройки текста заголовка

Затем измените шрифт заголовка.

• Шрифт заголовка: Alata

Настройки основного текста

Вместе с основным шрифтом.

• Шрифт тела: Lato

Добавить модуль подписки по электронной почте в столбец 2

Добавить содержимое

Прямо под модулем боковой панели мы добавим модуль подписки на электронную почту. Добавьте какую-нибудь копию по вашему выбору.

Добавить аккаунт

Затем привяжите свою учетную запись электронной почты.

Удалить цвет фона

Затем удалите цвет фона.

Настройки полей

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

• Шрифт полей: Lato

• Тень коробки: первый вариант
• Цвет тени: rgba (0,0,0,0.06)

Настройки текста

Мы также меняем цвет текста в настройках текста.

• Цвет текста: темный

Настройки текста заголовка

Затем мы изменим настройки текста заголовка.

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Alata
• Размер текста заголовка: 1,5 бэр

Настройки кнопок

Далее мы стилизуем кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: #ffffff
• Цвет градиента 1: # 8995ff
• Цвет градиента 2: # 6163b5
• Тип градиента: линейный
• Направление градиента: 150 градусов
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 5 пикселей
• Шрифт кнопки: Lato

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ слева: 0 пикселей
• Правый отступ: 0 пикселей

Добавить раздел # 3

Градиентный фон

Переходим к следующему и последнему разделу. Добавьте следующий градиентный фон:

• Цвет 1: # 8995ff
• Цвет 2: # 6163b5
• Тип градиента: линейный
• Направление градиента: 150 градусов

Интервал

Перейдите на вкладку дизайна раздела и удалите верхнее заполнение по умолчанию.

• Верхний отступ: 0 пикселей

Добавить новую строку

Структура столбца

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и примените цвет фона.

• Цвет фона: # 8995ff

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 2580 пикселей

Интервал

Измените значения отступов соответствующим образом:

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

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

• Все углы: 20 пикселей

Коробка Тень

Мы также добавим тень от коробки.

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Преобразовать Перевести

И мы завершим настройки строки, применив следующие значения преобразования:

• Справа: -100 пикселей

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

Настройки полей

Единственный модуль, который нам нужен в строке, - это модуль комментариев. Перейдите на вкладку дизайна модуля и задайте стиль для полей:

• Цвет фона полей: rgba (255,255,255,0.09)
• Цвет текста полей: #ffffff
• Шрифт полей: Lato

• Поля со скругленными углами: 10 пикселей (все углы)
• Ширина нижней границы поля: 5 пикселей
• Цвет нижней границы полей: #ffffff

• Fields Box Shadow: первый вариант
• Цвет тени: rgba (0,0,0,0.06)

Настройки изображения

Измените также настройки изображения.

• Закругленные углы изображения: 100 пикселей (все углы)

Настройки текста

Затем измените цвет текста в настройках текста.

• Цвет текста: светлый

Параметры текста счетчика комментариев

Мы также изменяем настройки текста счетчика комментариев.

• Количество комментариев Уровень заголовка: H2
• Шрифт счетчика комментариев: Alata
• Количество комментариев Размер текста: 2rem
• Высота строки счетчика комментариев: 1.4em

Настройки текста заголовка формы

Наряду с настройками текста заголовка формы.

• Уровень заголовка заголовка формы: H3
• Шрифт заголовка формы: Alata

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

Затем настройки метатекста.

• Мета-шрифт: Alata
• Размер метатекста: 1,2 бэр

Настройки текста комментария

Мы также изменим настройки текста комментария.

• Шрифт комментария: Lato
• Размер текста комментария: 1.1rem
• Высота строки комментария: 2em

Настройки кнопок

И мы стилизуем кнопку соответственно:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1,1 бэр
• Цвет текста кнопки: # 8995ff
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 5 пикселей

• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Lato

• Отступ кнопки сверху: 20 пикселей
• Отступ кнопки снизу: 20 пикселей

CSS тела комментария

И последнее, но не менее важное: мы завершим настройку модуля, применив следующую строку кода CSS к тексту комментария на вкладке «Дополнительно»:

margin-top: 50px;

3. Примените эффект закрепления к столбцу боковой панели.

Открыть столбец боковой панели

Теперь, когда дизайн нашего шаблона сообщения в блоге завершен, мы собираемся закрепить столбец боковой панели, используя закрепленные параметры Divi. Откройте настройки столбца 2.

Применить липкий эффект

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

• Липкая позиция:
  • Рабочий стол: Придерживайтесь вершины
  • Планшет и телефон: не липнет
• Нижний липкий предел: строка
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

4. Разместите боковую панель слева.

Перетащите столбец боковой панели над столбцом 1

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

Изменить границу столбца боковой панели

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

• Ширина правой границы:
  • Рабочий стол: 5 пикселей
  • Планшет и телефон: 0 пикселей
• Цвет правой границы: # 8995ff
• Ширина левой границы: нет

Применить обратный столбец, если требуется

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

Предварительный просмотр

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

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как максимально эффективно использовать дизайн шаблона поста в блоге, который вы создаете с помощью Divi Theme Builder. В частности, мы шаг за шагом показали вам, как добавить липкую боковую панель, что стало возможным благодаря липким параметрам Divi. Липкая боковая панель будет следить за вашими посетителями, пока они читают содержимое публикации, что позволяет им видеть связанные сообщения, ваш вариант электронной почты или все, что вы решите разместить на своей липкой боковой панели. Вы также смогли бесплатно скачать файл шаблона JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.