Как создать 3 потрясающих дизайна моноширинных шрифтов в Divi

Моноширинные шрифты - прекрасное дополнение к веб-дизайну. Они особенно полезны для создания дизайнов с красивой симметрией и балансом. Моноширинный шрифт состоит из букв и символов, каждый из которых имеет одинаковую ширину (или горизонтальный интервал). Таким образом, они обеспечивают последовательную и элегантную структуру для отображения текста. По этой причине при кодировании широко используются моноширинные шрифты.

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

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

Sneak Peek

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

Моноширинный шрифт №1: стиль логотипа

Начать проектирование здания №1

Моноширинный шрифт # 2: блоки с большими буквами

Начать проектирование здания №2

Моноширинный шрифт # 3: кроссворд

Начать проектирование здания # 3

Загрузите макет моноширинных шрифтов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

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

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Загрузите несколько макетов изображений в медиа-библиотеку, чтобы использовать их в учебнике. Мы будем использовать изображение логотипа размером 200 на 200 пикселей из пакета макетов HVAC и два фоновых изображения (не менее 1920 пикселей в ширину), взятых из пакета макетов Cake Maker и пакета макетов домашнего улучшения.

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

Моноширинный шрифт №1: стиль логотипа

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

Сначала создайте обычный раздел со строкой из одного столбца.

Прежде чем мы добавим текстовый модуль, мы собираемся добавить фон в раздел. Фон будет состоять из изображения значка по центру на темно-сером фоне. Изображение значка, которое мы будем использовать, взято из пакета макетов HVAC. Убедитесь, что размер значка изображения составляет примерно 200 на 200 пикселей, поскольку мы будем использовать фактический размер в качестве фонового изображения.

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

• Цвет фона: # 121212
• Фоновое изображение: [вставить значок изображения размером 200 на 200 пикселей]
• Размер фонового изображения: фактический размер
• Положение фонового изображения: по центру

Добавить текстовый модуль

Когда раздел будет готов, добавьте текстовый модуль в строку с одним столбцом.

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

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

Добавление дизайна моноширинного шрифта

Divi имеет около 12 различных моноширинных шрифтов, включенных в конструктор Divi, из которых мы можем выбирать. Чтобы увидеть их, мы можем щелкнуть, чтобы выбрать шрифт текста, и ввести «моно» в строку поиска. Это покажет список доступных моноширинных шрифтов.

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

• Шрифт текста: Droid Sans Mono
• Размер текста текста: 5vw
• Расстояние между буквами текста: 1,3 м
• Высота текстовой строки: 1em

Эта комбинация единицы длины vw для размера текста и единицы длины em для межбуквенного интервала и высоты строки гарантирует, что текст будет идеально реагировать на все размеры браузера.

Интервал

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

Обновите следующее:

• Поля: низ 0 пикселей
• Заполнение: 2em сверху, 2em снизу, 1.3em слева

Изменить цвет центральной буквы

Простой способ изменить цвет отдельной буквы в Divi - использовать параметры встроенного стиля при использовании конструктора в интерфейсе пользователя.

Просто выделите букву, которую хотите изменить, и щелкните значок цвета текста в строке меню.

Затем добавьте следующий цветовой код: rgba (248, 142, 96, 0,54)

Вот и все!

Сделать строку полной ширины

Нам нужно освободить место для текста, который будет добавляться, поэтому продолжайте и сделайте строку полной шириной, открыв настройки строки и обновив следующее:

• Ширина: 100%
• Максимальная ширина: 100%

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

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

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

Моноширинный шрифт # 2: блоки с большими буквами

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

Вот как это сделать.

Создайте новый обычный раздел со строкой из одного столбца.

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

• Цвет фонового градиента слева: # fcd1e5
• Цвет фона градиента справа: rgba (255,255,255,0)
• Направление градиента: 135 градусов
• Стартовая позиция: 50%
• Конечная позиция: 76%

Затем добавьте фоновое изображение. Я использую один из набора макетов Cake Maker.

Добавить ширину строки

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

• Ширина: 100%
• Максимальная ширина: 100%

Добавить текстовый модуль

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

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

<p>dividesign<a href="#">learnmore</a></p>

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

• Шрифт текста: Overpass Mono
• Стиль шрифта текста: TT
• Цвет текста текста: # 2e298f
• Размер текста текста: 15vw
• Расстояние между буквами текста: 0,16 мкм
• Высота текстовой строки: 1em

Мы добавим к тексту ссылки другой стиль:

• Стиль шрифта ссылки: подчеркивание
• Цвет текста ссылки: # 2e298f
• Размер текста ссылки: 3.5vw
• Расстояние между буквами ссылки: 0em

Интервал

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

• Поля: низ 0 пикселей
• Заполнение: 0,16 мкм слева, 3 мкм справа

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

Для этого выделите четыре верхние буквы и измените цвет на белый.

Измените цвет второй буквы на следующий: # f34a43

Наконец, выделите первые пять букв в тексте ссылки («узнать») и измените цвет на следующий: # f34a43.

Окончательный дизайн

Теперь проверим конечный результат на живой странице.

Моноширинный шрифт # 3: кроссворд

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

Сначала создайте новый обычный раздел со строкой из одного столбца.

Перед добавлением каких-либо модулей откройте настройки раздела и добавьте фоновое изображение с градиентом следующим образом:

• Фоновое изображение: [вставить изображение]
• Цвет фона градиента слева:
• Правый цвет градиента фона:
• Направление градиента: 90 градусов
• Стартовая позиция: 25%
• Конечная позиция: 0%
• Поместите градиент над фоновым изображением: ДА

Настройки строки

Как только фон раздела будет готов, откройте настройки строки с новой шириной и некоторым интервалом.

• Ширина: 100%
• Максимальная ширина: 100%
• Прокладка: 22vw сверху, 5vw слева

Добавить текстовый модуль

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

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

• Шрифт текста: Rubik Mono One
• Цвет текста текста: # faac00
• Размер текста текста: 8vw
• Расстояние между буквами в тексте: 0,15 м
• Высота текстовой строки: 1em

Дублируйте текстовый модуль

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

Обновить текстовый модуль №2

После того, как мы продублировали текстовый модуль, откройте настройки для второго (среднего) текстового модуля и измените основной текст на слово «шрифты».

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

• Тело: «шрифты»
• Цвет фона: #dddddd
• Цвет текста текста: # 930565
• Ширина: 0.86em
• Маржа: -3em сверху, 2em слева

Обратите внимание, как изменение ширины текстового модуля приводит к тому, что текст отображается вертикально. А поскольку это моноширинный шрифт, они располагаются равномерно. И с шириной, равной размеру каждого буквенного блока, мы можем перемещать текстовый модуль с шагом 1em. Таким образом, верхнее поле -3em поднимет текст ровно на 3 блока букв. А левое поле 2em переместит текстовый модуль ровно на 2 буквенных блока вправо. Это упрощает размещение элементов в макете кроссворда, как показано ниже.

Коробка Тень

Давайте добавим тень блока, чтобы увеличить размер фона за текстовым модулем.

• Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 0,08 эм
• Цвет тени: #dddddd (такой же, как цвет фона)

Индекс Z

Чтобы этот блок текста оставался над другими текстовыми модулями, обновите индекс z следующим образом:

• Индекс Z: 11

Обновить текстовый модуль №3

После завершения текстового модуля №2 откройте настройки для третьего текстового модуля и измените основной текст на слово «с интервалом».

Затем переместите модуль на место, используя наши магические значения полей em:

• Маржа: -1em сверху, 2em слева

Окончательный дизайн

Мобильный

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

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

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

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

Какой из этих трех примеров вы считаете наиболее многообещающим?

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

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