Как создать дизайн изогнутого текста в Divi

Если вы ищете уникальный способ демонстрации текста на веб-странице, вам может пригодиться знание того, как создавать изогнутый текстовый дизайн в Divi. Такой дизайн будет работать для создания пользовательской графики или креативного дизайна заголовков в Divi без необходимости использования фоторедактора. Обычно для этого требуется более полный html и css, но с Divi настраиваемый CSS минимален, и у вас есть гораздо больше встроенных опций, чтобы легко создавать свой текст уникальными способами.

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

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

Sneak Peek

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

Загрузите макет примеров дизайна анимации букв БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Основная идея создания изогнутого текста в Divi

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

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

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

И вот пример тех же текстовых модулей, повернутых с шагом 20 градусов.

Начиная

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

Для начала создайте новую страницу в Divi. Затем присвойте странице заголовок и разверните конструктор Divi во внешнем интерфейсе. Выберите вариант «построить с нуля». Теперь вы готовы к работе!

Создание дизайна изогнутого текста

Создание сечения и ряда

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

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

• Цвет фонового градиента слева: # 1e003d
• Цвет фонового градиента справа: # 121212
• Тип градиента: радиальный

• Фоновое изображение: [вставьте изображение логотипа размером примерно 100 на 100 пикселей]
• Размер фонового изображения: фактический размер

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

• Ширина желоба: 1
• Ширина: 100%
• Мин. Высота: 400 пикселей
• Высота: 40vw
• Максимальная высота: 600 пикселей
• Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

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

display:flex;
justify-content:center;

Создание текстовых модулей для каждой буквы

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

• Содержание: d (только одна буква)
• Текстовый шрифт: Ubuntu Mono (подойдет любой моноширинный шрифт)
• Цвет текста текста: #ffffff
• Размер текста текста: 5vw (рабочий стол), 40px (телефон)
• Ориентация текста: по центру
• Мин. Высота: 200 пикселей
• Высота: 20vw
• Максимальная высота: 300 пикселей

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

• Преобразовать исходную точку: 100% (или нижний предел)

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

position: absolute !important;

Создание и поворот других текстовых модулей

Чтобы создать остальные буквы, мы будем дублировать текстовый модуль. После того, как мы продублируем текстовый модуль, все, что нам нужно будет сделать, это обновить букву, а затем увеличивать угол поворота на 45 градусов с каждым новым модулем.

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

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

• Содержание: я
• Преобразование вращения оси z: 45 градусов

Продолжите процесс дублирования текстового модуля, а затем обновите текстовый модуль новой буквой и увеличьте поворот преобразования на 45 градусов. Вот разбивка оставшихся 6 обновлений текстового модуля:

Текстовый модуль 3

• содержание: v
• Преобразование вращения по оси Z: 90 градусов

Текстовый модуль 4

• содержание: я
• Преобразование вращения по оси Z: 135 градусов

Текстовый модуль 5

• содержание: d
• Преобразование вращения по оси Z: 180 градусов

Текстовый модуль 6

• содержание: я
• Преобразование вращения по оси Z: 225 градусов

Текстовый модуль 7

• содержание: v
• Преобразование вращения по оси Z: 270 градусов

Текстовый модуль 8

• содержание: я
• Преобразование вращения оси z: 315 градусов

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

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

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

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

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

В настройках элемента измените размер текста текста на 40 пикселей на рабочем столе.

Сохраните настройки, а затем откройте настройки для каждого из текстовых модулей и обновите буквы и вращение для каждого. Оставьте первый текстовый модуль с поворотом на 0 градусов, а затем увеличьте поворот оси z на 10 градусов для каждого последующего текстового модуля. Затем продублируйте текстовый модуль, чтобы при необходимости было еще больше букв. В этом примере я собираюсь разобрать «Elegant.themes».

Вот разбивка букв содержания и ротации, необходимой для каждого текстового модуля.

• Текстовый модуль 1
  • содержание: e
  • Преобразование вращения по оси z: 0 градусов
• Текстовый модуль 2
  • содержание: l
  • Преобразование вращения по оси Z: 10 градусов
• Текстовый модуль 3
  • содержание: e
  • Преобразование вращения по оси Z: 20 градусов
• Текстовый модуль 4
  • содержание: г
  • Преобразование вращения по оси Z: 30 градусов
• Текстовый модуль 5
  • содержание: a
  • Преобразование вращения по оси Z: 40 градусов
• Текстовый модуль 6
  • содержание: n
  • Преобразование вращения оси z: 50 градусов
• Текстовый модуль 7
  • содержание: т
  • Преобразование вращения по оси Z: 60 градусов
• Текстовый модуль 8
  • содержание: .
  • Преобразование вращения оси z: 70 градусов
• Текстовый модуль 9
  • содержание: т
  • Преобразование вращения оси z: 80 градусов
• Текстовый модуль 10
  • содержание: ч
  • Преобразование вращения по оси Z: 90 градусов
• Текстовый модуль 10
  • содержание: e
  • Преобразование вращения оси z: 100 градусов
• Текстовый модуль 11
  • содержание: м
  • Преобразование вращения по оси Z: 110 градусов
• Текстовый модуль 12
  • содержание: e
  • Преобразование вращения оси z: 120 градусов
• Текстовый модуль 13
  • содержание: s
  • Преобразование вращения по оси Z: 130 градусов

Вот результат.

Простой способ настроить поворот всего текста - применить преобразование поворота к строке. Откройте настройки строки и используйте диск управления z-index, чтобы расположить изогнутый текст там, где вы хотите.

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

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

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

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

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

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

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