Как добавить динамический заголовок и слоган сайта в глобальный заголовок Divi

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

В этом руководстве мы покажем вам, как добавить динамический заголовок и слоган сайта в глобальный заголовок Divi. Это решение будет динамически извлекать заголовок и слоган сайта из серверной части WordPress. Кроме того, у вас будут все мощные возможности дизайна Divi, чтобы настроить заголовок и слоган так, как вы хотите!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

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

Загрузите БЕСПЛАТНО динамический заголовок сайта и шаблон глобального заголовка Divi

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать шаблон, перейдите в Divi> Theme Builder.

Щелкните значок переносимости в правом верхнем углу страницы.

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

Затем нажмите кнопку импорта.

После этого глобальный шаблон заголовка будет доступен в Divi Theme Builder.

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

Заголовок и слоган сайта в WordPress

У каждого сайта WordPress есть заголовок и слоган. Название сайта - это, по сути, название сайта, а слоган - это короткое предложение, которое обычно объясняет, о чем сайт.

Нередко при установке WordPress добавляют заголовок сайта и забывают об этом.

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

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

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

Теперь, когда мы знаем, где в бэкэнде WordPress существуют заголовок и слоган сайта, давайте рассмотрим, как мы можем добавить их в заголовок Divi!

Как добавить динамический заголовок и слоган сайта в глобальный заголовок в Divi

Импорт готового шаблона глобального заголовка

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

После загрузки пакета конструктора тем распакуйте файл и найдите файл JSON с шаблоном веб-сайта по умолчанию.

Затем перейдите в Divi> Theme Builder.

Щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите файл JSON шаблона веб-сайта по умолчанию и нажмите кнопку импорта.

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

Добавление динамического заголовка и слогана в заголовок

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

Переместить логотип

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

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

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

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

Но прежде чем мы начнем добавлять контент, сначала выберите НЕ использовать цвет фона.

Добавить динамический заголовок сайта

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

Добавить динамический слоган сайта

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

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

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

Дизайн заголовка и слогана сайта

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

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

• Шрифт заголовка: Heebo
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Размер текста заголовка: 32 пикселя (рабочий стол), 24 пикселя (планшет и телефон)
• Интервал между заглавными буквами: 0.3em
• Шрифт тела: Roboto
• Стиль основного шрифта: курсив
• Цвет основного текста:
• Размер основного текста: 13 пикселей
• Интервал между буквами тела: 0,1 м
• Высота линии тела: 1em

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

padding-bottom: 0px

Дополнительные корректировки дизайна

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

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

Сейчас в верхней строке активна функция «Выровнять высоту столбцов», которая использует свойство flex. Мы можем извлечь из этого выгоду, добавив небольшой фрагмент css, чтобы убедиться, что все столбцы остаются вертикально центрированными в строке. Для этого откройте настройки для верхней строки и добавьте следующий CSS в основной элемент:

align-items: center;

Обновление столбца с помощью кнопки

Затем откройте настройки для столбца 3 в верхнем ряду и удалите цвет фона и отступы.

Обновление фона кнопки

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

• Цвет градиентного фона слева: #ffffff
• Правый цвет градиентного фона: # 1dbf73
• Направление градиента: 135 градусов
• Стартовая позиция: 10%
• Конечная позиция: 0%

Добавление символов до и после в слоган

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

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

Чтобы увидеть результат, откройте любую страницу своего сайта. Вы должны увидеть красиво отображаемый динамический заголовок и слоган сайта!

Вот как это работает на планшете и телефоне.

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

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

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

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