Картинки на сайте это неотъемлемая составляющая любого сайта. Согласитесь, трудно представить себе современный сайт без картинок (изображений). Обычно в основной массе сайтов у любого изображения есть какой то текст-спутник которые описывает изображение.
Например это может быть изображение услуги, а рядом текст с ее описание или просто фотография товара, а ниже описание товара. Возможно и банально размещение просто подписи к изображению, как это делается в галереях. Лично я часто использую данный виджет для оформления логотипа, т.е слева логотип, а рядом название организации, а ниже краткое его описание.
Создавая свой сайт в онлайн конструкторе, мы часто встречаемся с таким оформлением контента, а иногда без этого просто никуда. Поэтому в конструкторе есть виджет, который так и называется "Картинка с текстом". Этот виджет выводит на страницу блок, который содержит изображение, заголовок и описание. Для данного виджета возможно задать произвольную ссылку на сайт, а так же изменить положение изображения.
На картинке изображены 3 виджета "Картинка с текстом" у которых настройка выравнивание установлена в одном из положений. Настроек и стилей у изображения достаточно, единственное чего не хватает, это предустановленного размера изображения, как это сделано в виджете Изображение.
Содержимое
- Картинка с текстом
- Выберите изображение - собственно сам выбор изображения для отображения в виджете.
- Заголовок и описание - заголовок виджета и его описание. Если одно из полей не заполнено, соответственно оно не отображается.
- Ссылка на - возможно указать произвольную ссылку а какой либо ресурс. При нажатии на иконку шестеренки, доступны опции: открыть в новом окне и добавление тега nofollow
- Позиция изображения - позиция для изображения. Возможно разаместить изображение в следующих направлениях Лево; Верх; Право.
- HTML-тег заголовка - тег для заголовка виджета. Необходимо использовать при разработки семантического ядра для сайта.
Стили
- Изображение
Отступ от изображения - отступ от изображения до текста. Устанавливается значение в пикселях (до 100 пикселей)
Размер изображения - размер изображения в процентном соотношении.
Прозрачность (%) - прозрачность изображения (от 0,1 до 1)
Анимация при наведении - анимация изображения при наведении курсора мыши на изображение.
- Содержимое
- Выравнивание - выравнивание содержимого виджета. При расположении изображения сверху, выравнивание действует и на изображение.
- Вертикальное выравнивание - выравнивания содержимого по вертикали. При расположении изображения сбоку, то вертикальное выравнивание действует и на изображение (при условии что оно меньше высоты текстового описания)
- Заголовок (Отступ, Цвет, Типографика) - для заголовка возможно установить отступ, цвет текста и его типографику т.е размер шрифта, межстрочный интервал итд.
- Описание (Цвет, Типографика) - для описания доступны свойства для изменения цвета текста и его типографики.
Александр
если делать адаптивный дизайн для телефона, то картинка всегда ставится вверху над текстом, и не важно какие ставить настройки и выравнивание. Сделать их в одну строку невозможно
Админ
Используйте виджет Секция, вставив туда два виджета Картинка и Текст