Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

заставка - картинка с текстом - виджет конструктора сайта

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

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

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

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

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

Содержимое

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

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

 

Стили

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

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

- Содержимое

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности