Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Возможный результат

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

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

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

Пример модификации заголовка Divi

Бесплатная загрузка

Присоединяйтесь к Divi Newlsetter, и мы отправим вам по электронной почте копию Ultimate Divi Landing Page Layout Pack, а также множество других бесплатных и удивительных ресурсов, советов и приемов Divi. Следуйте ему, и вы в кратчайшие сроки станете мастером Divi. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.СКАЧАТЬ

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

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

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

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

Выберите шаблон divi

После завершения общий шаблон заголовка будет доступен в Divi Theme Builder.

Изменить глобальный заголовок divi

Далее мы перейдем к дизайну.

Название сайта и слоган на WordPress

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

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

Легко создайте свой сайт с Elementor

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

Настроить заголовок divi

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

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

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

Настроить идентичность wordpress

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

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

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

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

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

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

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

Импорт модели Divi

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

Удалить шаблон из нижнего колонтитула

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

Настройте призыв к действию

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

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

Настроить призыв к действию

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

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

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

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

Добавьте слоган сайта divi

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

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

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

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

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

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

  • Название шрифта: Heebo
  • Название шрифта Вес: жирный
  • Стиль шрифта заголовка: TT
  • Размер текста заголовка: 32px (рабочий стол), 24px (планшет и телефон)
  • Расстояние между заглавными буквами: 0.3em
  • Body Font: Робото
  • Стиль шрифта тела: курсив
  • Цвет основного текста:
  • Размер основного текста: 13 пикселей
  • Расстояние между буквами тела: 0.1em
  • Высота Линии Тела: 1em
Настроить шрифт заголовка divi

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

padding-bottom: 0 пикселей
Добавить собственный код divi css

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

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

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

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

align-items: center;

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Настроить кнопку контакта divi

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

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

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

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

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

Покажите лозунг Divi

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

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

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

Заключительные мысли

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

источник: Элегантная тема

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация