Вертикальный текст в Elementor
Здравствуйте, дорогие читатели нашего блога! В данное статье мы расскажем как сделать вертикальный текст в Elementor с минимальными усилиями.
Первый способ. CSS-свойство writing-mode
Css-свойство writing-mode работает во всех браузерах, кроме Internet Explorer. Данный способ имеет свои недостатки, которые мы рассмотрим немного позже.
Итак, приступим. Добавим для примера виджет Заголовок на страницу редактирования.

Далее для заголовка необходимо прописать css-свойство writing-mode в пользовательских CSS (Вкладка “Расширенные => Пользовательские CSS”).
selector {
writing-mode: vertical-rl;
}
Вот что мы получим:

Текст стал вертикальным.
Свойство writing-mode имеет несколько значений:
writing-mode: horizontal-tb;
writing-mode: horizontal-bt;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
Основным недостатком первого способа является невозможность поворота текста против часовой стрелки.
Выравнивание вертикального текста по горизонтали и вертикали в Elementor.
Как видим на примере изображения выше, вертикальный текст прилип к правому краю секции и все попытки изменить горизонтальное выравнивание элементов внутри колонки при помощи Elementor не приносят результата – текст остается справа. Выравнивание текста по вертикали работает.

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

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



Второй способ. CSS-свойство transform
Более универсальный и функциональный способ – css-свойство transform (обязательно ознакомьтесь с этим интересным свойством подробнее), ведь оно позволяет поворачивать текст и по часовой и против часовой стрелки.
Давайте добавим еще один заголовок и пропишем в его свойствах следующее:
selector {
transform: rotate(90deg);
}

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


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