Как включить фиксированную боковую панель во всю высоту в шаблон сообщения в блоге

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

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон фиксированной боковой панели во всю высоту БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Создать виджет боковой панели

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

Открыть конструктор виджетов

Щелкните «Внешний вид» и выберите «Виджеты».

Добавить элементы в виджет боковой панели

Перетащите элементы «Последние сообщения» и «Категории» в виджет боковой панели.

Настройте параметры элемента в виджете

Выберите отображение только 3 последних сообщений и добавьте заголовок. Добавьте заголовок к виджету категорий и не забудьте нажать «Сохранить» в обоих полях, когда закончите.

• Заголовок последних сообщений: Подробнее:
• Категории Название: Обзор

2. Начните работу с построителем тем.

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

Пришло время воссоздать фиксированный шаблон боковой панели в полный рост! Сначала откройте свой конструктор тем и добавьте новый шаблон.

Установить настройки шаблона

В настройках шаблона выберите «Все сообщения блога». Если вы хотите использовать шаблон для определенной категории или тега, измените настройки шаблона соответствующим образом.

Добавить собственное тело

Затем нажмите «Добавить пользовательское тело».

Выберите Build Custom Body

Мы воссоздадим этот шаблон с нуля, поэтому выберите «Создать пользовательское тело».

Строить с нуля

Оказавшись внутри визуального конструктора, выберите вариант создания с нуля еще раз.

Восстановите шаблон с фиксированной боковой панелью во всю высоту

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

Фон

Откройте существующий раздел в редакторе шаблонов и добавьте градиентный фон.

• Фоновый градиент
  • Цвет 1: белый #ffffff
  • Цвет 2: светло-серый #eaeaea

Интервал

Также добавьте отступы.

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

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

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

Теперь добавьте строку со структурой 3/4 - 1/4 столбца.

Размеры

Отрегулируйте размер ряда следующим образом.

• Пользовательская ширина желоба: 2
• Ширина:
  • Настольные ПК и планшеты: 90%
  • Телефон: 100%
• Максимальная ширина:
  • Рабочий стол: 1920 пикселей
• Мин. Высота: 100vh

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

Интервал

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

• Отступ слева и справа
  • Таблетка: 2%
  • Телефон: 8%

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

Фон

Затем добавьте цвет фона в столбец 2.

• Цвет фона: белый #ffffff

Интервал

Включите также некоторый интервал.

• Отступ слева и справа
  • ПК: 3%
  • Планшет и телефон: 14%

Граница

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

• Закругленные углы
  • Планшет и рабочий стол: 15 пикселей

Пользовательские CSS

Перейдите на вкладку «Дополнительно» и добавьте несколько строк кода CSS к основному элементу. Это поможет нам создать боковую панель во всю высоту на рабочем столе.

• Главный элемент
  • мин-высота: 100%

min-height: 100%;

Позиция

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

• Позиция
  • Рабочий стол: фиксированный
  • Планшет и телефон: по умолчанию
• Расположение: вверху справа

Добавить модуль заголовка сообщения №1

Элементы

Пора добавлять модули! Начните с первого модуля заголовка сообщения в столбце 1 и включите только заголовок.

• Название шоу: Да

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

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

Текст заголовка

Стиль настройки текста заголовка.

• Шрифт заголовка: Bai Jamjuree
• Стиль шрифта заголовка: прописные
• Цвет текста заголовка: # e98074
• Размер текста заголовка:
  • Рабочий стол: 45 пикселей
  • Таблетка: 35 пикселей
  • Телефон: 25px
• Интервал между заглавными буквами: 3 пикселя
• Высота строки заголовка: 1,3 мкм

Интервал

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

• Верхняя обивка: 20%
• Нижняя обивка: 20%

Граница

Включите также закругленные углы.

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

Заголовок CSS

И завершите настройки модуля, добавив три строки кода CSS в элемент заголовка модуля на вкладке «Дополнительно».

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Добавить модуль заголовка сообщения №2

Элементы

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

• Мета
• Автор
• Категории сообщений

Мета-текст

Откройте вкладку дизайна и задайте стиль метатексту.

• Шрифт: Bai Jamjuree
• Вес: средний
• Цвет: серый # 8e8d8a
• Размер
  • Рабочий стол: 20 пикселей
  • Планшет и телефон: 15 пикселей
• Расстояние между буквами: 2 пикселя

Размеры

Также отрегулируйте размер.

• Ширина: 90%
• Выравнивание модуля: по центру

Интервал

Завершите настройки этого модуля с некоторым интервалом.

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

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

Фон

Затем добавьте модуль содержимого сообщения с белым фоном.

• Цвет фона: белый #ffffff

Текст

Теперь стилизуйте основной текст.

• Шрифт: Lato
• Цвет: серый # 8e8d8a
• Размер: 16 пикселей

Текст заголовка

Продолжайте, задавая стили для всех стилей текста заголовков.

• H1
  • Шрифт: Bai Jamjuree
  • Вес: средний
  • Цвет: Coral # e98074.
  • Размер
    • Рабочий стол: 45 пикселей
    • Таблетка: 33px
    • Телефон: 30 пикселей
  • Расстояние между буквами: 1 пиксель
• H2
  • Шрифт: Bai Jamjuree
  • Вес: средний
  • Цвет: Coral # e98074.
  • Размер
    • Рабочий стол: 35 пикселей
    • Планшет и телефон: 25 пикселей
  • Расстояние между буквами: 1 пиксель
• H3
  • Шрифт: Bai Jamjuree
  • Вес: Обычный
  • Цвет: темно-серый # 606060
  • Размер
    • Рабочий стол: 25 пикселей
    • Планшет и телефон: 22 пикселя
  • Расстояние между буквами: 1 пиксель
• H4
  • Шрифт: Bai Jamjuree
  • Вес: Обычный
  • Цвет: темно-серый # 606060
  • Размер
    • Рабочий стол: 22 пикселя
    • Таблетка: 20 пикселей
    • Телефон: 18px
  • Расстояние между буквами: 1 пиксель
• H5
  • Шрифт: Bai Jamjuree
  • Вес: средний
  • Цвет: темно-серый # 606060
  • Размер: 16 пикселей
  • Расстояние между буквами: 1 пиксель
• H6
  • Шрифт: Bai Jamjuree
  • Вес: Обычный
  • Цвет: темно-серый # 606060
  • Размер: 16 пикселей
  • Расстояние между буквами: 1 пиксель

Интервал

Также добавьте некоторые настройки интервала.

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

Граница

И последнее, но не менее важное: добавьте закругленные углы.

• Закругленная граница: 15 пикселей

Модуль добавления комментариев

Элементы

Чтобы заполнить первый столбец, добавьте модуль комментариев. Включите следующие элементы:

• Кнопка ответа
• Количество комментариев

Поля

На вкладке «Дизайн» задайте стиль для полей.

• Цвет фона: светло-серый # f7f7f7
• Цвет текста: серый # 8e8d8a
• Шрифт: Bai Jamjuree
• Размер текста: 17 пикселей
• Закругленные углы: 15 пикселей

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

Также задайте стиль для текста счетчика комментариев.

• Уровень заголовка: H3
• Шрифт: Bai Jamjuree
• Цвет: Coral # e98074.
• Размер: 22 пикс.
• Расстояние между буквами: 1 пиксель

Текст заголовка формы

Затем заголовок формы.

• Уровень заголовка: H3
• Шрифт: Bai Jamjuree
• Цвет: Coral # e98074.
• Размер: 18 пикселей
• Расстояние между буквами: 1 пиксель

Мета-текст

Также стилизуйте метатекст.

• Шрифт: Bai Jamjuree
• Цвет: # 606060
• Размер: 14 пикселей
• Расстояние между буквами: 1 пиксель

Текст комментария

Не забудьте текст комментария.

• Шрифт: Bai Jamjuree
• Размер: 1 пикс.

Кнопка

Теперь стилизуйте кнопки.

• Пользовательские стили
• Размер текста: 18 пикселей
• Цвет текста: белый #ffffff
• Цвет фона: Coral # e98074
• Радиус границы кнопки: 15 пикселей
• Шрифт кнопки: Bai Jamjuree

Размеры

Также отрегулируйте размер строки.

• Ширина: 90%

Интервал

А также настройки интервала.

• Верхняя набивка: 8%
• Отступ слева и справа: 4%

Добавить модуль человека

Текст

Перейдите к фиксированной колонке боковой панели и добавьте модуль человека.

• Имя: Автор динамического сообщения
• До: Написал:

Текст заголовка

На вкладке «Дизайн» задайте стиль текста заголовка следующим образом:

• Уровень заголовка: H4
• Шрифт: Bai Jamjuree
• Цвет: Coral # e98074.
• Размер: 2vh
• Расстояние между буквами: 2 пикселя

Размеры

Затем отрегулируйте размер.

• Мин. Высота:
  • Рабочий стол: 3vh
  • Планшет и телефон: авто
• Максимальная высота:
  • Рабочий стол: 3vh
  • Планшет и телефон: авто

Интервал

Также добавьте нестандартный интервал.

• Верхнее поле
  • Рабочий стол: 6vh
  • Планшет и телефон: 10vh

Добавить модуль изображения

Изображение

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

• Изображение: динамическое изображение профиля автора

Выравнивание

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

• Выравнивание изображения: по левому краю

Размеры

Затем отрегулируйте размер модуля.

• Максимальная ширина: 15vh
• Выравнивание модуля: слева
• Максимальная высота
  • Рабочий стол: 15vh

Граница

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

• Закругленные углы: 15 пикселей

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

Содержание

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

• Область виджетов: Боковая панель

Макет

Сначала настройте макет.

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

Текст заголовка

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

• Шрифт: Bai Jamjuree
• Вес: средний
• Цвет: Coral # e98074.
• Размер: 2vh
• Расстояние между буквами: 2 пикселя

Основной текст

Продолжайте основной текст.

• Шрифт: Bai Jamjuree
• Вес: легкий
• Цвет: темно-серый # 7f7f7f
• Цвет наведения: Коралловый # e98074
• Размер: 1.5vh
• Расстояние между буквами: 1 пиксель
• Высота линии: 1,8 м

Размеры

Также отрегулируйте размер модуля.

• Мин. Высота
  • Рабочий стол: 12vh
  • Планшет и телефон: авто
• Максимальная высота
  • Рабочий стол: 12vh
  • Планшет и телефон: авто

Интервал

Не забудьте добавить некоторый интервал.

• Верхняя обивка
  • Рабочий стол: 1vh
  • Планшет и телефон: 3vh

Пользовательские CSS

И последнее, но не менее важное: включите несколько строк кода CSS в расширенную вкладку.

• Виджет: padding-bottom: 0vh;

padding-bottom: 0vh;

• Название: padding-bottom: 2vh;

padding-bottom: 2vh;

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

Текст

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

• Название: Обновления
• Кнопка: подписаться

Адрес электронной почты

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

• Поставщик услуг: ваш поставщик услуг электронной почты
• Список: выбранный вами список

Поля

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

• Показать поле имени

Фон

Затем отключите фон по умолчанию.

• Использовать цвет фона: нет

Макет

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

• Макет: корпус сверху, форма снизу
• Полная ширина имени: Нет
• Полная ширина электронной почты: Нет

Поля

Затем стилизуйте поля следующим образом:

• Цвет фона: Light Gre # f7f7f7
• Цвет текста: # 606060
• Набивка сверху и снизу: 1vh
• Левый отступ: 1vh
• Шрифт: Bai Jamjuree
• Размер текста: 1.5vh
• Расстояние между буквами: 1 пиксель
• Закругленные углы: 15 пикселей

Текст заголовка

Также стилизуйте текст заголовка.

• Уровень заголовка: H4
• Шрифт: Bai Jamjuree
• Цвет: Coral # e98074.
• Размер: 2vh
• Расстояние между буквами: 2 пикселя
• Высота линии: 1em

Кнопка

Затем кнопка.

• Пользовательские стили
• Размер текста: 1.5vh
• Цвет текста: белый #ffffff
• Цвет фона: Coral # e98074
• Радиус границы: 15 пикселей
• Расстояние между буквами: 2 пикселя
• Шрифт: Bai Jamjuree
• Набивка сверху и снизу: 1vh

Интервал

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

• Верхняя обивка
  • Настольный компьютер и планшет: 0vh
• Нижняя обивка
  • Рабочий стол: 2vh
  • Планшет и телефон: 6vh
• Отступ слева и справа
  • Настольный компьютер и планшет: 0vh

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

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

Рабочий стол

Мобильный

Это обертка!

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

Вы человек с боковой панелью или без нее? Сообщите нам в комментариях, если у вас возникнут какие-либо мысли или вопросы!