Картинка с текстом — виджет Elementor

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

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

Создавая свой сайт в онлайн конструкторе,  мы часто встречаемся с таким оформлением контента, а иногда без этого просто никуда.  Поэтому в конструкторе есть виджет, который так и называется "Картинка с текстом". Этот виджет выводит на страницу блок, который содержит изображение, заголовок и описание. Для данного виджета возможно задать произвольную ссылку на сайт, а так же изменить положение изображения.

На картинке изображены 3 виджета "Картинка с текстом" у которых настройка выравнивание установлена в одном из положений. Настроек и стилей у изображения достаточно, единственное чего не хватает, это предустановленного размера изображения, как это сделано в виджете Изображение.

Содержимое

- Картинка с текстом

• Выберите изображение - собственно сам выбор изображения для отображения в виджете.
• Заголовок и описание - заголовок виджета и его описание. Если одно из полей не заполнено, соответственно оно не отображается.
• Ссылка на - возможно указать произвольную ссылку а какой либо ресурс.  При нажатии на иконку шестеренки, доступны опции: открыть в новом окне и добавление тега nofollow
• Позиция изображения - позиция для изображения. Возможно разаместить изображение в следующих направлениях Лево; Верх; Право.
• HTML-тег заголовка - тег для заголовка виджета. Необходимо использовать при разработки семантического ядра для сайта.

Стили

- Изображение

Отступ от изображения - отступ от изображения до текста. Устанавливается значение в пикселях (до 100 пикселей)
Размер изображения - размер изображения в процентном соотношении.
Прозрачность (%) - прозрачность изображения (от 0,1 до 1)
Анимация при наведении - анимация изображения при наведении курсора мыши на изображение.

- Содержимое

• Выравнивание - выравнивание содержимого виджета. При расположении изображения сверху, выравнивание действует и на изображение.
• Вертикальное выравнивание - выравнивания содержимого по вертикали. При расположении изображения сбоку, то вертикальное выравнивание действует и на изображение (при условии что оно меньше высоты текстового описания)
• Заголовок (Отступ, Цвет, Типографика) - для заголовка возможно установить отступ, цвет текста и его типографику т.е размер шрифта, межстрочный интервал итд.
• Описание (Цвет, Типографика) - для описания доступны свойства для изменения цвета текста и его типографики.