11 декабря, 2021

Вертикальный текст в Elementor

Делаем вертикальный текст в Elementor

Здравствуйте, дорогие читатели нашего блога!

В данное статье мы расскажем как добавить вертикальный текст в Elementor с минимальными усилиями.

Первый способ. CSS-свойство writing-mode

Css-свойство writing-mode работает во всех браузерах, кроме Internet Explorer. Данный способ имеет свои недостатки, которые мы рассмотрим немного позже.

Итак, приступим. Добавим для примера виджет Заголовок на страницу редактирования.

vertikalnyj tekst v elementor 001

Далее для заголовка необходимо прописать css-свойство writing-mode в пользовательских CSS (Вкладка «Расширенные => Пользовательские CSS»).

selector {
     writing-mode: vertical-rl;
}

Вот что мы получим:

vertikalnyj tekst v elementor 002

Текст стал вертикальным.

Свойство writing-mode имеет несколько значений:

writing-mode: horizontal-tb;
writing-mode: horizontal-bt;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

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

Выравнивание вертикального текста по горизонтали и вертикали в Elementor.

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

vertikalnyj tekst v elementor 003

Чтобы настройки горизонтального выравнивания заработали, для элемента (в нашем случае заголовка) нужно изменить настройки позиционирования на вкладке «Расширенные => Позиционирование => Ширина => Друг за другом»

vertikalnyj tekst v elementor 004

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

vertikalnyj tekst v elementor 005
Выравниваем вертикальный текст по центру
vertikalnyj tekst v elementor 006
Выравниваем вертикальный текст по левому краю
vertikalnyj tekst v elementor 007
Выравниваем вертикальный текст по правому краю

Второй способ. CSS-свойство transform

Более универсальный и функциональный способ — css-свойство transform (обязательно ознакомьтесь с этим интересным свойством подробнее), ведь оно позволяет поворачивать текст и по часовой и против часовой стрелки.

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

selector {
    transform: rotate(90deg);
}
vertikalnyj tekst v elementor 008
Мы повернули текст на 90 градусов по часовой стрелке

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

vertikalnyj tekst v elementor 009
Мы повернули текст на 90 градусов против часовой стрелки
vertikalnyj tekst v elementor 010
Мы повернули текст на 120 градусов по часовой стрелке

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

Мы советуем использовать его в паре с первым способом.

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

0

Интересные статьи

Секция Elementor. Вкладка Макет.

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

Читать полностью »

Оставьте комментарий

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.