Как использовать виджет изображения в Elementor

Хотите знать, как использовать виджет изображений в Elementor?

Как говорится. " Одна картинка стоит тысячи слов ". Иногда гораздо проще передать сообщение через изображение.

Это также относится к веб-дизайну. Практически невозможно создать веб-страницу без использования элемента изображения. Будучи инструментом, подчеркивающим дизайн, Elementor позволяет легко добавить изображение в ваш дизайн, предоставив виджет «Изображение». Вы можете просто перетащить виджет изображения в поле редактирования, чтобы добавить элемент изображения.

Вы можете не только добавить статическое изображение, но также можете добавить динамическое изображение в Elementor. Эта функция (возможность добавлять динамическое изображение) особенно полезна для создания настраиваемого шаблона, такого как настраиваемое уникальное сообщение, настраиваемая страница категории, настраиваемый заголовок и т. Д. - с использованием конструктора тем Elementor.

Сам виджет изображения доступен в обеих версиях Elementor, но для добавления динамического изображения вам необходимо использовать профессиональную версию.

Как добавить изображение в Elementor

Прежде чем мы продолжим, мы предполагаем, что вы уже знаете как использовать Elementor. 

В редакторе Elementor просто перетащите виджет изображения с левой панели в поле редактирования, затем щелкните средство выбора изображения, чтобы выбрать изображение, которое вы хотите использовать.

Добавление динамического изображения

Чтобы добавить динамическое изображение, вы можете навести указатель мыши на средство выбора изображений, щелкнуть значок базы данных и выбрать тип динамического изображения, которое вы хотите добавить, из доступных опций.

Затем вы можете щелкнуть значок гаечного ключа, чтобы выбрать спасение. Само резервное копирование является содержимым по умолчанию, отображаемым, когда динамическое содержимое недоступно. В этом случае Fallback - это изображение по умолчанию, отображаемое, когда Elementor не может найти динамическое изображение.

Настройка изображения

Чтобы персонализировать изображение, вы можете получить доступ вкладка Стиль из панели настроек (панель слева). Перед тем, как отправиться в вкладка Стиль, вы можете установить размер изображения, выравнивание изображения и добавить ссылку на изображение в блоке Фото товара под вкладкой Содержание. 

Читайте также: Как управлять отправкой форм в Elementor

Под вкладкой Стиль, вы можете установить радиус границы, применить фильтры CSS, установить собственный размер, непрозрачность и применить тень области.

• Определение нестандартного размера

В блоке Фото товара под вкладкой Содержание, вы можете установить размер вашего изображения. Если вы хотите установить нестандартный размер, вы можете просто установить значение ширины и значения высоты в блоке. Фото товара под вкладка Стиль. Вы можете использовать процентную единицу, пиксель или ширину окна дисплея (VW).

• Настройка непрозрачности изображения

Чтобы установить уровень непрозрачности изображения, вы можете просто перетащить ползунок из Параметр непрозрачности под вкладкой Стиль. Вы можете ввести уровень непрозрачности от 0 до 1.

• Применение фильтров CSS

При желании вы можете применить фильтры CSS к своему изображению, чтобы добавить некоторые эффекты изображения. Вы можете применить 5 параметров фильтра: «Размытие», «Яркость», «Контрастность», «Насыщенность» и «Оттенок». Просто нажмите на значок карандаша в опции CSS фильтры и установите желаемые значения фильтра CSS, перетаскивая ползунки.

• Определение границы

Чтобы сделать изображение более привлекательным, вы также можете установить границы. Чтобы добавить границу, сначала выберите тип границы в опции Тип бордюра. Затем вы можете установить ширину границы, цвет границы и радиус границы.

Кстати, радиус границы - это уровень наклона углов сторон изображения (верхний правый, верхний левый, нижний правый, нижний левый). Чем выше значение радиуса границы, тем более округлым будет ваше изображение.

 

• Применение тени блока

Чтобы применить тень блока, вы можете просто щелкнуть значок карандаша в опции Тень коробки. Выберите цвет тени и установите значение горизонтальной ориентации, вертикальной ориентации, уровня размытия и уровня распространения.

Расширенные настройки

Чтобы выполнить некоторые дополнительные настройки изображения, вам необходимо открыть вкладку Передовой в панели настроек. Из него вы можете определять такие вещи, как поля и отступы, анимация ввода, настраиваемый CSS и т. Д.

• Определение полей и отступов

Чтобы установить поля и заливку изображения, нужно открыть блок Передовой.

• Применение анимации входа

Чтобы изображение получилось более убедительным, можно применить анимацию ввода. Для этого вы можете открыть блок Эффекты движения. Из этого блока вы можете установить эффекты прокрутки, эффект мыши и опцию залипания.

Чтобы применить анимацию ввода, все, что вам нужно, это стиль анимации ввода в опции Входная анимация.

• Добавление собственного CSS

Если у вас есть знания CSS, вы также можете добавить собственный CSS в виджет Image. Чтобы добавить собственный CSS, вы можете просто открыть блок Пользовательские CSS и вставьте свой код CSS в доступное поле.

• Скрыть изображение на определенном типе устройства

В Elementor вы можете использовать разные настройки определенного виджета для разных типов устройств. Кроме того, вы можете отключить виджет на устройстве определенного типа.

Например, вы можете отключить виджет изображения на планшете. Для этого можно открыть блок Отзывчивый. Перетащите кнопки, чтобы скрыть виджет на определенном устройстве.

• Определение произвольной позиции

Когда вы добавляете изображение в Elementor, по умолчанию устанавливается статическое положение (По умолчанию). Есть два других варианта положения, на которые вы можете установить: фикс et абсолютный.

– Исправлено: Если вы выберете эту опцию, изображение будет расположено относительно окна дисплея пользователя.

– абсолютный : Если вы выберете эту опцию, изображение будет позиционироваться абсолютно на своем первом родительском элементе.

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

Короче говоря

Изображение - важная часть дизайна. Вы, конечно, можете создать страницу без изображения, но ваш дизайн будет безвкусным. Вы можете использовать виджет Image, чтобы добавить элемент изображения в свой дизайн Elementor, будь то шаблон дизайна страницы или тема.

Elementor позволяет добавлять как статические, так и динамические изображения (только в профессиональной версии). В дополнение к виджету «Изображение» существует также виджет «Окно изображения» для добавления элемента изображения с текстовым содержимым. Этот последний упомянутый виджет лучше подходит для определенных нужд, таких как создание раздела для членов команды, раздела со списком функций и других разделов, которые включают изображение и текстовое содержимое.

Получите Elementor Pro прямо сейчас!

2. Изображение панорамы

Этот плагин позволяет вам легко добавлять функцию панорамирования для изображений на вашем WordPress блог через шорткод. Например, вы можете интегрировать его в свою статью или на свою страницу.

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

Узнайте также наш 5 шорткоды премиальных плагинов WordPress

скачать | Демонстрация | веб-хостинг

3. Маркетинговая автоматизация

Ce Плагин Wordpress Premium предоставляет простой и гибкий пользовательский интерфейс, целью которого будет поможет вам легко создать мощный информационный бюллетень на вашем сайте. Его гибкость позволит вам управлять широким спектром событий, условий и действий, поэтому вы можете легко настроить свою маркетинговую стратегию электронной почты для отправки, отслеживания и получения прибыли.

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

скачать | Демонстрация | веб-хостинг

• 10 WooCommerce плагинов для создания динамического ценообразования
• Как модерировать комментарии в WordPress
• 6 плагинов WordPress для добавления Authorize.Net на ваш сайт
• Некоторые плагины WordPress привлечь посетителей