Как повернуть текст для создания уникальных макетов в Divi (Учебное пособие + загрузка макета БЕСПЛАТНО)

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

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

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

Sneak Peek

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

Загрузите БЕСПЛАТНО полную схему из этого руководства.

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

Скачать макет

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

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

СКАЧАТЬ

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

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

Теперь вернемся к уроку.

Что нужно помнить при повороте текста

В каком направлении следует вращать текст?

Если вы хотите повернуть текст для вертикального отображения, вы можете не знать, в каком направлении нужно повернуть текст. Вы можете повернуть текст против часовой стрелки, чтобы текст читался снизу вверх. Или вы можете повернуть текст по часовой стрелке, чтобы текст читался сверху вниз. Если вам интересно, какой из них легче читать, я не уверен, что есть ответ. Вы можете попытаться получить подсказку по ориентации названий книг на книжной полке. Но в разных странах это делается по-разному (стандарт в США - по часовой стрелке сверху вниз).

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

Проблема размытия

В некоторых браузерах (например, Chrome и Safari) текст становится немного размытым при использовании свойства transform rotate. Чтобы решить эту проблему, вы можете добавить значение исходной точки преобразования 51% или 52% по оси X. Это должно решить проблему.

Часть 1. Создание заголовка с вертикальным текстом

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

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

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

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

• Фоновое изображение: [добавьте изображение шириной не менее 1920 пикселей]
• Цвет фона столбца 1: # 121212

• Пользовательская ширина: 100%
• Ширина желоба: 1
• Выровнять высоту столбца: ДА
• Пользовательский отступ (рабочий стол): 0 пикселей сверху, 0 пикселей снизу
• Custom Padding (планшет): 40% справа
• Custom Padding (телефон): 30% справа
• Пользовательское заполнение столбца 1 (рабочий стол): 200 пикселей сверху, 200 пикселей снизу.
• Пользовательское заполнение столбца 1 (планшет): 150 пикселей сверху, 150 пикселей снизу.

• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: -100 пикселей
• Цвет тени: # f6454e

Создание модуля Blurb

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

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

• Название: Divi Design
• Контент: здесь размещается ваш контент.
• Значок использования: ДА
• Изображение: лампочка

• Цвет значка: # f6454e
• Размер шрифта значка: 32 пикс.
• Ориентация текста: по центру
• Уровень заголовка заголовка: H1 (потому что это основной заголовок страницы)
• Шрифт заголовка: Muli
• Стиль шрифта заголовка: TT
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 70 пикселей (рабочий стол), 50 пикселей (планшет), 36 пикселей (телефон)
• Цвет основного текста: #cccccc
• Интервал между буквами основного текста: 4 пикселя
• Ширина: 500 пикселей
• Выравнивание модуля: по центру

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

Поворот модуля Blurb с помощью параметров преобразования

Чтобы повернуть модуль рекламного объявления (и все его содержимое), обновите следующие параметры преобразования:

• Преобразование, поворот, ось X: -90 градусов

Вам нужно будет ввести значение -90deg вручную. Это даст вам выравнивание содержимого по вертикали снизу вверх.

Вы можете заметить, что текст немного расплывчатый, если вы используете Chrome или Safari. Иногда это может произойти при использовании свойства transform: rotate. Чтобы исправить это, вы можете немного настроить Transform Origin следующим образом:

• Преобразовать исходную ось Y: 51%

Возможно, вам придется немного изменить это значение, пока текст не станет четким. Например, 52% могут выглядеть четкими на некоторых рисунках.

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

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

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

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

• Цвет фона: # f6454e
• Пользовательская ширина: 100%
• Ширина желоба: 1

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

• Расположение кнопок: по центру
• Использовать собственные стили для кнопки: ДА
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 9 пикселей
• Вес шрифта: легкий
• Стиль шрифта: TT
• Значок кнопки: стрелка вправо

Поворот и расположение кнопки

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

• Настраиваемое поле (для ПК): -50 пикселей сверху, 50 пикселей снизу, -50 пикселей слева
• Пользовательское поле (планшет): 0 пикселей слева
• Преобразование, поворот, ось X: 90 градусов

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

Часть 2: Вращение текстовых модулей для создания диагональных этикеток

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

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

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

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

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

• Цвет значка: # f6454e
• Размер шрифта значка: 32 пикс.
• Пользовательские отступы: 3vw снизу, 3vw слева, 3vw справа

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

• Цвет фона столбца 1: #eeeeee
• Цвет фона столбца 2: #eeeeee
• Цвет фона столбца 3: #eeeeee
• Выровнять высоту столбца: ДА

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

На вкладке «Дополнительно» добавьте следующий настраиваемый CSS:

Столбец 1 Основной элемент CSS:

overflow: hidden;

Столбец 2, основной элемент CSS:

overflow: hidden;

Столбец 3: основной элемент CSS:

overflow: hidden;

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

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

Обновите текстовое содержимое словом «Рекомендуемые».

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

• Цвет фона: # f6454e
• Шрифт текста: Muli
• Толщина шрифта текста: полужирный
• Цвет текста текста: #ffffff
• Расстояние между буквами текста: 3 пикселя
• Высота текстовой строки: 2,5 м
• Ориентация текста: по центру

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

• Ширина: 180 пикселей
• Выравнивание модуля: слева

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

• Преобразовать преобразовать ось X: -25%
• Преобразовать преобразовать ось Y: 70%

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

Преобразование, поворот, ось X: -45 градусов

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

Все, что нам осталось сделать, это скопировать модули из первого столбца и вставить их в столбец 2 и столбец 3.

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

Часть 3: Создание вертикальных заголовков для вашего контента

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

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

Создайте новый обычный раздел со строкой в ​​одну колонку.

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

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

• Размещение изображения / вставки: слева
• Пользовательское поле (на рабочем столе): 200 пикселей слева
• Пользовательское поле (телефон): 0 пикселей слева
• Пользовательские отступы: 100 пикселей сверху, 100 пикселей снизу.

Левое поле создает пространство, которое нам понадобится для добавляемого вертикального текстового модуля.

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

• Ширина границы: 2 пикселя
• Цвет границы: #eeeeee

Создание текстового модуля

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

После этого добавьте следующий HTML-код в поле содержимого (убедитесь, что выбрана текстовая вкладка):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Это html, использующий упорядоченный список (ol), тег h5 и неупорядоченный список (ul). Это позволяет нам настраивать каждый из элементов списка и h5 отдельно, используя встроенные параметры дизайна Divi в текстовом модуле.

Эту технику можно использовать для создания потрясающих дизайнов списков.

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

• Шрифт неупорядоченного списка: Muli
• Толщина шрифта неупорядоченного списка: Light
• Размер текста неупорядоченного списка: 15 пикселей
• Тип стиля неупорядоченного списка: Нет
• Отступ неупорядоченного элемента списка: 0,01 пикселя

• Шрифт упорядоченного списка: Abril Fatface
• Цвет текста упорядоченного списка:
• Размер текста упорядоченного списка: 40 пикселей
• Расстояние между буквами упорядоченного списка: 4 пикселя
• Высота строки упорядоченного списка: 1,3 мкм
• Тип стиля упорядоченного списка: десятичный ведущий ноль

• Шрифт заголовка 5: Muli
• Толщина шрифта заголовка 5: сверхлегкий
• Стиль шрифта заголовка 5: TT
• Размер текста заголовка 5: 62 пикс.

Изменение размера, поворот и расположение текстового модуля

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

• Настраиваемая ширина: 300 пикселей
• Выравнивание модуля: слева

Чтобы повернуть текст, обновите следующее:

• Преобразование Поворот оси X: -90 градусов (рабочий стол), 0 градусов (телефон)

Нам нужно сбросить вращение обратно на 0 градусов для отображения на телефоне.

Затем обновите опцию Transform Translate:

• Преобразовать преобразовать ось X: -10% (рабочий стол), 0% (телефон)
• Преобразовать преобразовать ось Y: 50% (рабочий стол), 0% (телефон)

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

• Пользовательское поле (для настольных ПК): -150 пикселей внизу
• Пользовательское поле (телефон): 0 пикселей внизу

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

Чтобы создать больше разделов этого макета, вы можете продублировать раздел. Номер заказанного списка по-прежнему будет «1». Чтобы изменить это, вам нужно заменить открывающий тег упорядоченного списка (ol) следующим:

<ol start="2">

Это позволит списку начинаться с номера 2 вместо 1.

Вот и все. Все готово!

Окончательный дизайн макета с повернутым текстовым дизайном

Рабочий стол

Планшет и телефон

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

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

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

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