Обзор типов заголовков Divi, руководств и бесплатных предложений

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

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

Откройте для себя типы заголовков
Откройте для себя советы и хитрости заголовка
Откройте для себя бесплатные заголовки

Типы заголовков

1. Обычный заголовок

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

Посетить учебник

2. Прикрепленный заголовок

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

Посетить учебник

3. Полноэкранный заголовок

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

1. Шаблон заголовка и нижнего колонтитула PR-фирмы
2. Шаблон верхнего и нижнего колонтитула итальянского ресторана
3. Шаблон верхнего и нижнего колонтитула внештатного писателя
4. Шаблон верхнего и нижнего колонтитула финансового консультанта

Посетить учебник

4. Вставной заголовок

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

Посетить учебник

5. Сдвиньте вниз нажимной заголовок

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

Посетить учебник

6. Вертикальная навигация

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

Посетить учебник

7. Прозрачный плавающий заголовок

Если вы хотите добавить заголовок поверх своей страницы или опубликовать контент, этот учебник создан для вас! Мы используем прозрачный заголовок с тремя разными элементами; логотип, меню и кнопка. Эти три элемента размещаются поверх содержимого страницы с помощью абсолютной позиции CSS. Результат также очень отзывчивый и дает хороший согласованный результат на вашем веб-сайте.

Посетить учебник

8. Прозрачный липкий заголовок.

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

Посетить учебник

9. Повернутый заголовок

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

Посетить учебник

10. Настраиваемое раскрывающееся меню электронной коммерции

Чем больше становится ваш сайт, тем сложнее найти хороший способ перечислить все страницы вашего сайта. Вот где пригодятся мегаменю. Хотя вы всегда можете вернуться к встроенному мегаменю Divi, если вы ищете среду, основанную на Divi, где вы можете добавить столько модулей, сколько захотите, это руководство для вас. Это может пригодиться, особенно для веб-сайтов электронной коммерции, для представления различных категорий продуктов в привлекательной и наглядной форме. Хотя это руководство является более «продвинутым» типом ресурсов, для вас уже заложена основа кода, которая позволяет вам проявить творческий подход к дизайну. Убедитесь, что даже при использовании файла шаблона JSON для этого руководства вы выполните несколько шагов, необходимых для воплощения этого мегаменю в жизнь.

Посетить учебник

11. Выпадающее меню пользовательских элегантных тем

С тех пор, как появился Divi Theme Builder, люди задавались вопросом, как создать плавные выпадающие списки навигации Elegant Themes. В этом руководстве основное внимание уделяется тому, чтобы показать вам, как именно воспроизвести раскрывающееся меню Elegant Themes внутри Divi Theme Builder. Более того, он позволяет добавлять любые модули и создавать свои собственные уникальные варианты меню.

Посетить учебник

Советы и хитрости

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

1. Отображение и скрытие заголовка при прокрутке

Посетить учебник

2. Мобильное сворачивающееся вложенное меню

Посетить учебник

3. Анимация глобального заголовка

Посетить учебник

4. Добавление встроенной формы входа в заголовок

Посетить учебник

5. Добавление двух кнопок рядом с заголовком

Посетить учебник

6. Автоматическое размещение заголовка под первым разделом каждой страницы

Посетить учебник

7. Добавление раскрывающейся контактной формы в заголовок

Посетить учебник

8. Замена заголовка на прокрутку

Посетить учебник

9. Оптимизация модуля меню Divi с 5 глобальными предустановками.

Посетить учебник

10. Добавление угловых меток к пунктам меню внутри вашего заголовка

Посетить учебник

11. Добавление и анимация вашего SVG-логотипа внутри вашего заголовка

Посетить учебник

12. Смешивание заголовка и страниц с разделителями разделов Divi

Посетить учебник

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

Посетить учебник

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

Посетить учебник

15. Добавление фиксированной звуковой панели «Последний выпуск» в заголовок

Посетить учебник

16. Добавление отложенной анимации кнопок в ваш заголовок с призывом к действию

Посетить учебник

17. Изменение липкого логотипа на прокрутке

Посетить учебник

Заголовки Халявы

И последнее, но не менее важное: мы также перечисляем различные бесплатные заголовки, которые вы можете найти в блоге Elegant Themes. Инициатива по дизайну бесплатных заголовков началась с первых пакетов для создания тем, которые мы поделились еще в декабре 2019 года, но это еще не все. Мы постоянно делились и продолжим делиться бесплатными бесплатными заголовками и нижними колонтитулами, которые соответствуют пакетам макетов Divi. Хотя стиль в основном основан на рассматриваемом пакете макетов, их можно легко использовать и для других веб-сайтов.

1. Пакеты для создания тем

Пакет разработчика тем №1

Посетить учебник

Пакет разработчика тем №2

Посетить учебник

Пакет разработчика тем №3

Посетить учебник

Пакет разработчика тем №4

Посетить учебник

Пакет разработчика тем №5

Посетить учебник

Пакет разработчика тем №6

Посетить учебник

2. Бесплатные верхние и нижние колонтитулы пакета макетов

Пакет макетов итальянского ресторана

Посетить учебник

Пакет макетов виртуального помощника

Посетить учебник

Пакет макетов пространства для коворкинга

Посетить учебник

Пакет макетов для мытья окон

Посетить учебник

Набор раскладок Таро

Посетить учебник

Пакет макетов художника

Посетить учебник

Пакет макетов для домашних животных

Посетить учебник

Пакет макетов косметических продуктов

Посетить учебник

Пакет макетов кулинарной школы

Посетить учебник

Пакет макетов парфюмерии

Посетить учебник

Пакет макетов суши-ресторана

Посетить учебник

Пакет макетов травяных средств

Посетить учебник

Пакет макетов ремонта

Посетить учебник

Пакет макетов робототехники

Посетить учебник

Пакет макетов целостного целителя

Посетить учебник

Пакет макетов магазина специй

Посетить учебник

Пакет макетов обивки

Посетить учебник

Пакет макетов PR-фирмы

Посетить учебник

Пакет макетов фитнес-тренера

Посетить учебник

Пакет макетов для свадебного фотографа

Посетить учебник

Пакет макетов диетолога

Посетить учебник

Пакет макетов писателя-фрилансера

Посетить учебник

Пакет макетов переводчика

Посетить учебник

Пакет макетов финансового консультанта

Посетить учебник

Пакет макетов маникюрного салона

Посетить учебник

Пакет макетов влиятельных лиц

Посетить учебник

Пакет макетов кожаной компании

Посетить учебник

Пакет макетов акупунктуры

Посетить учебник

3. Другое

Минимальное сочетание верхнего и нижнего колонтитулов

Посетить учебник

Поиск новых заголовков в нашем блоге

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

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

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

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