Знание того, как добавить динамический заголовок сайта и слоган в глобальный заголовок Divi, будет полезно при создании веб-сайтов Divi. И для этого есть несколько веских причин. С одной стороны, не все сайты имеют логотип. Заголовок сайта - хорошая замена логотипу. Другая причина - продвигать свой бренд, размещая важную информацию на своем сайте, где ее увидят все.
В этом уроке мы покажем вам, как добавить динамический заголовок и слоган сайта в глобальный заголовок Divi. Это решение будет динамически извлекать заголовок и слоган сайта из серверной части WordPress. Кроме того, у вас будут все мощные возможности дизайна Divi, чтобы настроить заголовок и слоган так, как вы хотите!
Возможный результат
Вот предварительный просмотр дизайна, который мы создадим в этом уроке.
Обратите внимание на заголовок сайта и слоган в верхней середине заголовка, который отображается динамически.
Бесплатная загрузка
Присоединяйтесь к Divi Newlsetter, и мы отправим вам по электронной почте копию набора макетов целевой страницы Divi Ultimate, а также множество других материалов. Ressources, бесплатные и удивительные советы и рекомендации Divi. Следуйте ему, и вы мгновенно станете Мастером Диви. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.СКАЧАТЬ
Чтобы импортировать шаблон, перейдите в Divi> Theme generator.
Щелкните значок переносимости в правом верхнем углу страницы.
Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки с вашего компьютера.
Затем нажмите кнопку импорта.
После завершения общий шаблон заголовка будет доступен в Divi Theme Builder.
Далее мы перейдем к дизайну.
Название сайта и слоган на WordPress
У каждого сайта WordPress есть заголовок и слоган. Название сайта - это в основном название сайта, а слоган - это короткая фраза, которая обычно объясняет, что это такое.
Нередко при установке WordPress добавляют заголовок сайта и забывают его.
И некоторые люди даже не подозревают, что слоган существует, не говоря уже о том, чтобы потратить время на его обновление. Кроме того, при использовании Диви тема, заголовок сайта и слоган не будут отображаться на вашем сайте по умолчанию, поэтому их легко не заметить. Тем не менее, название сайта и слоган являются важными элементами веб-сайта и будут распознаваться поисковыми системами.
Вы можете найти и обновить заголовок и слоган сайта в WordPress в любое время, перейдя на панель управления WordPress и выбрав «Настройки»> «Общие».
Или вы можете выбрать другой маршрут, используя настройщик темы, чтобы обновить заголовок сайта в общих настройках.
Теперь, когда мы знаем, где находится заголовок сайта и слоган на бэкэнде WordPress, давайте посмотрим, как мы можем добавить их в заголовок Divi!
Как добавить динамический заголовок сайта и слоган в глобальный заголовок в Divi
Импорт предварительно разработанного шаблона глобального заголовка
В этом руководстве мы сосредоточимся на том, как добавить динамический заголовок и слоган сайта в существующий заголовок вместо того, чтобы создавать полный заголовок с нуля. Это сэкономит ваше время и улучшит четкость. Итак, чтобы начать разработку этого заголовка, мы собираемся импортировать предопределенный глобальный шаблон заголовка из нашего четвертый генератор тем .
Когда у вас есть скачал пачку создание тема , разархивируйте файл и найдите JSON-файл шаблон сайта По умолчанию.
Затем перейдите в Divi> Theme Builder.
Щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите файл JSON из шаблон сайта по умолчанию и нажмите кнопку Импорт.
После добавления шаблона в конструктор тем удалите шаблон нижнего колонтитула и щелкните, чтобы изменить общий заголовок.
Добавление динамического названия сайта и слогана в заголовок
Внутри редактора макета шаблона вы увидите уже созданный готовый заголовок. Мы можем сразу приступить к настройке.
Переместить логотип
Для начала перетащите модуль изображения, отображающий логотип (динамически) из среднего столбца верхней строки в левый столбец верхней строки.
Добавьте модуль призыва к действию для отображения заголовка и слогана сайта.
Затем добавьте новый модуль призыва к действию в средний столбец верхней строки (там, где был логотип).
Мы будем использовать модуль призыва к действию для отображения заголовка и слогана сайта.
Но прежде чем начать добавлять контент, сначала выберите НЕТ, чтобы использовать цвет фона.
Добавить динамический заголовок сайта
В настройках содержимого наведите указатель мыши на поле ввода заголовка и щелкните значок «Использовать динамический контент». Затем выберите «Заголовок сайта» из списка.
Добавить динамический слоган сайта
Затем наведите указатель мыши на область тела и выберите значок «Использовать динамическое содержимое». Затем выберите из списка «Слоган сайта».
Добавить динамическую ссылку на главную страницу
Обычно заголовок сайта перенаправляется на главную страницу при нажатии, особенно если вы заменяете логотип. Чтобы перенаправить весь курс на домашнюю страницу, добавьте ссылку на домашнюю страницу как динамическое содержимое в URL-адрес ссылки на курс.
Дизайн текста заголовка и слогана сайта
Теперь заголовок сайта и слоган отображаются в заголовке динамически. Все, что мы должны сделать сейчас, это добавить немного стиля. Помните, нам нужно настроить текст заголовка для оформления заголовка сайта и основной текст для оформления слогана.
Перейдите на вкладку дизайна и обновите следующее:
- Название шрифта: Heebo
- Название шрифта Вес: жирный
- Стиль шрифта заголовка: TT
- Размер текста заголовка: 32px (рабочий стол), 24px (планшет и телефон)
- Расстояние между заглавными буквами: 0.3em
- Body Font: Робото
- Стиль шрифта тела: курсив
- Цвет основного текста:
- Размер основного текста: 13 пикселей
- Расстояние между буквами тела: 0.1em
- Высота Линии Тела: 1em
Чтобы помочь с центрированием, уберите отступ по умолчанию под основным текстом, добавив следующий пользовательский CSS в описание промо:
padding-bottom: 0 пикселей
Дополнительные корректировки дизайна
В этой последней части руководства мы собираемся внести некоторые дополнительные изменения в дизайн заголовка, чтобы убедиться, что элементы остаются вертикально центрированными в каждом столбце, и дать кнопке уникальный дизайн. Мы также добавим волнистую линию до и после в слоган (только для ударов ногами).
Вертикальное центрирование столбцов / содержимого
Прямо сейчас в верхнем ряду находится актив «Выровнять высоту столбца», который использует свойство flex. Мы можем извлечь выгоду из этого, добавив небольшой фрагмент кода CSS, чтобы убедиться, что все столбцы остаются вертикально центрированными внутри строки. Для этого откройте настройки для верхней строки и добавьте следующий CSS в основной элемент:
align-items: center;
Обновление столбца с помощью кнопки
Затем откройте настройки для столбца 3 в верхней строке и уберите цвет фона и отступы.
Обновление фона кнопки
Затем откройте настройку модуля кнопок и обновите фон новым градиентом фона следующим образом:
- Цвет градиента слева Цвет: #ffffff
- Правильный цвет градиента фона: # 1dbf73
- Направление градиента: 135deg
- Начальная позиция: 10%
- Конечная позиция: 0%
Добавление символов до и после в слоган
Каждый элемент динамического содержимого можно изменить, щелкнув значок шестеренки. Чтобы добавить символы до и после слогана, откройте настройки модуля призыва к действию, содержащего слоган, и щелкните значок редактирования на динамическом содержании слогана сайта. Затем добавьте символы до и после записей.
Конечный результат
Чтобы увидеть результат, откройте любую страницу своего сайта. Вы должны увидеть красиво отображаемый динамический заголовок и слоган!
Заключительные мысли
Очень приятно, что вы можете настроить общий заголовок с динамическим заголовком и слоганом сайта. Это похоже на то, что будет полезно для многих сайтов. Мне также нравится идея включения названия сайта и слогана в дополнение к логотипу для еще более сильного представления бренда.
Источник: Элегантная тема
