Укладка типографики для создания 5 уникальных дизайнов заголовков в Divi

Наборная типографика - это простой и эффективный метод создания красивых дизайнов заголовков в Divi. Типографика часто используется строго как абстрактный элемент дизайна, но не влияет на содержание, читаемое поисковыми системами. Но вы также можете проявить творческий подход к дизайну реальных заголовков (h1, h2 и т. Д.) С помощью нескольких техник Divi.

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

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

Sneak Peek

Вот взгляните на 5 дизайнов.

Дизайн # 1

Дизайн # 2

Дизайн # 3

Дизайн # 4

Дизайн # 5

Начиная

Мы собираемся создавать эти проекты с нуля. Итак, для начала создайте новую страницу, дайте ей название и разверните Visual Builder. Выберите вариант «Строить с нуля», и вы готовы начать строительство.

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

Дизайн заголовка №1

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

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

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

Добавьте фоновое изображение (не менее 1920 пикселей в ширину)
Цвет фонового градиента слева: #ffffff
Цвет фона градиента справа: rgba (255,255,255,0)
Поместите градиент над фоновым изображением: ДА

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

Цвет фона градиента слева: rgba (255,255,255,0)
Правый цвет градиента фона: #ffffff
Пользовательская ширина: 100%
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

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

<h2>design</h2>

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

Шрифт заголовка 2: Cairo
Толщина шрифта заголовка 2: Обычный
Стиль шрифта заголовка 2: прописные (TT)
Размер текста заголовка 2: 8vw
Ширина: 58% (компьютер), 16% (планшет), 18% (смартфон)
Выравнивание модуля: по центру
Пользовательское поле: -10vw сверху, -10vw снизу

Настраиваемые значения ширины в сочетании с размером текста заголовка 8vw являются ключом к созданию этого дизайна. Пользовательская ширина сжимает текст так, что каждая буква накладывается друг на друга. Процентное значение ширины на планшете резко меняется, поскольку размер столбца, содержащего текстовый модуль, изменяется с 1/3 до полной ширины. Установка для текста заголовка единицы длины vw (ширина области просмотра) позволит тексту идеально масштабироваться с размером окна браузера.

Наконец, давайте закончим дизайн рамкой с правой и левой стороны.

Ширина правой границы: 4 пикселя
Ширина левой границы: 4 пикселя

Вот окончательный результат.

Дизайн заголовка №2

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

В поле содержимого добавьте следующий заголовок h3:

<h3>our process</h3>

Затем добавьте в модуль белый фон:

Цвет фона: #ffffff

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

Размер текста заголовка 2: 10vw
Ширина: 100% (компьютер), 32% (планшет), 33% (смартфон)
Шрифт заголовка 3: Ubuntu Condensed
Выравнивание текста заголовка 3: по центру
Размер текста заголовка 3: 32 пикселя (рабочий стол), 20 пикселей (планшет), 16 пикселей (смартфон).

Затем обновите интервал для текстового модуля, чтобы сделать его более отзывчивым на мобильных устройствах:

Пользовательское поле (планшет): -5vw Top, -10vw
Специальная маржа (смартфон): -5vw Top, -12vw

Теперь удалите фоновый градиент в секции и в строке.

Затем добавьте небольшой отступ в свою строку, обновив следующую настройку строки:

Custom Padding (рабочий стол): 5vw сверху, 5vw снизу
Пользовательское заполнение (планшет): 0vw сверху, 0vw снизу

Вот окончательный результат.

Дизайн заголовка №3

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

Дублируйте второй раздел дизайна, а затем обновите настройки модуля следующим образом:

Сначала удалите заголовок h3 в поле содержимого.

Шрифт заголовка 2: Ubunto Condensed
Размер текста заголовка 2: 6vw
Ширина: 54% (компьютер), 16,4% (планшет), 17,5% (смартфон)
Выравнивание модуля: влево (по умолчанию)

Чтобы настроить для мобильных устройств, обновите следующий интервал:

Пользовательское поле (планшет): -15vw снизу
Специальная маржа (смартфон): -17vw снизу

Теперь перейдите к настройкам строки и обновите следующее, чтобы получить правильный интервал.

Пользовательское заполнение: 2vw сверху, 2vw снизу, 10vw слева

Затем добавьте границу к строке, чтобы дополнить границу модуля.

Ширина верхней границы: 4 пикселя
Ширина нижней границы: 4 пикселя

Теперь осталось только перетащить наш модуль в левый столбец строки.

проверить окончательный результат.

Дизайн заголовка №4

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

Сначала обновите настройки строки, чтобы избавиться от левого отступа.

Затем обновите настройки текстового модуля, включив в них следующее:

Цвет фона: # 5b7796
Цвет текста: светлый
Шрифт заголовка 2: Cairo
Стиль шрифта заголовка 2: по умолчанию
Размер текста заголовка 2: 10vw

Размер текста текста: 5vw
Пользовательские отступы: 2vw сверху, 2vw снизу, 4vw слева, 4vw справа

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

Ширина границы справа: 0,2 мкм
Цвет правой границы: #ffffff

Ширина нижней границы: 0,2 мкм
Цвет правой границы: #ffffff

Как вы могли заметить, значение 0.2em для границы может показаться небольшим. Это связано с тем, что значение em основано на значении шрифта основного текста, которое мы изменили на 5vw специально по этой причине. Поскольку мы хотим, чтобы ширина границы изменялась вместе с размером нашего заголовка, нам нужно дать нашему основному тексту значение единицы длины vw, которое будет масштабироваться с размером браузера.

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 20 пикселей
Положение прямоугольной тени по вертикали: 20 пикселей
Цвет тени: # 5b7796
Положение тени коробки: внешняя тень

Затем обновите размер модуля для мобильных.

Ширина: 50% (компьютер), 13% (планшет), 16% (смартфон)

На последнем шаге удалите отступ и границу вашего ряда.

Тогда проверьте окончательный результат.

Дизайн заголовка # 5

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

Сначала откройте текстовый модуль и добавьте следующий текст под заголовком h2:

<h3>our process</h3>

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

Стиль шрифта заголовка 2: прописные (TT)
Ширина: 94% (компьютер), 29% (планшет), 29% (смартфон)

Затем обновите интервал следующим образом:

Пользовательское поле: -8vw сверху, -5vw снизу
Пользовательское заполнение: 4vw сверху, 4vw снизу

Вот окончательный результат.

Отзывчивый

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

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

Я надеюсь, что 5 дизайнов заголовков в этом уроке, по крайней мере, предложат отличные отправные точки для ваших собственных дизайнов. Как и следовало ожидать, этот дизайн лучше всего подходит для более коротких заголовков (в одно слово), поскольку текст будет располагаться вертикально. Но есть множество элементов дизайна, которые можно добавить, чтобы сделать эти дизайны действительно уникальными. Не стесняйтесь изучать различные шрифты, цвета и границы, чтобы сделать их своими.

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

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

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