Визуальный вид изображений и текста

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

Тема урока: "визуальный вид изображений и текста"

Добрый день. В этом уроке разберем тему: «Визуальный вид изображений и текста».

Как придавать стили тексту в Elementor

Для начала в открытом Elementor нужно нажать на элемент «текст», затем, нажать на вкладку «стиль» (Рис.1).

стиль текста elementor
Рисунок 1 - стиль текста

В этой вкладке настраиваются:

-выравнивание текста

-цвет текста (как стандартный, так и любой в большой палитре)

-прозрачность текста

-типографика, где множество настроек, большинство из Word (Рис.2).

настройка стиля текста elementor
Рисунок 2 - настройка стиля текста

Стили изображения в Elementor

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

Атрибуты изображения

В библиотеке медиа файлов, при нажатии на любое изображение справа будет появляться поле с атрибутами изображения (Рис.3).

атрибуты изображения в галерее медиа фалов
Рисунок 3 - атрибуты изображения в галерее медиа фалов

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

Атрибут «Alt» заполняется для поисковиков (Google, Яндекс и т.д.) чтобы в интернете можно было найти Вашу картинку по той фразе, которая заполняется в поле «Alt».

У изображения есть стили. Во вкладке «стиль» (Рис.4) находятся такие атрибуты изображения как:

настройки стиля изображения elementor
Рисунок 4 - настройки стиля изображения

-ширина

-прозрачность

-фильтры CSS для различных улучшений выбранного изображения (Рис.5)

CSS фильтры elementor
Рисунок 5 - CSS фильтры

-анимация при наведении на изображение.

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

Спасибо за внимание. В следующем уроке мы разберем тему: «Редактирование мобильной версии сайта».