WordPress: Как настроить виджет «Изображение» в Elementor

В этой статье мы поговорим о том, как использовать виджет “Изображение” в конструкторе Elementor. Этот инструмент позволяет быстро и легко размещать фотографии на страницах, а также настраивать их размеры и расположение.

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

Добавление виджета «Изображение»

Перетаскиваем виджет Изображение в контейнер.

Редактировать виджет изображение
Фото Фрилансера

Кликаем по заглушке и переходим в библиотеку файлов. Выбираем нужную картинку или загружаем с компьютера: нажимаем→ загрузить файл. Выбираем файл на своем компьютере . Выбираем нужное фото и загружаем. 

Редактируем во вкладке Содержимое

Нстраиваем параметр— размер изображения: по умолчанию сайта размер 1024 на 1024. Можно выбрать — Полный. То есть загружается всё изображение и оно будет иметь большой вес. Поэтому прежде, чем загружать изображения на сайт, его предварительно нужно сжимать → уменьшить его вес.

Можем выбрать→ Произвольно и поставить здесь свои размеры.

Оптимизация изображений

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

Сео оптимизация Изображения
Скрин Оптимизация

Альт должен содержать конкретику, заполняем , но его нигде не будет видно.

а далее пишете заголовок – это описание изображения

затем задаете подпись она будет видна под изображением . → описание мы не задаем потому что оно вообще ни на что не влияет. 

Ссылка на Изображении

Можно указать произвольную ссылку на какой-то  ваш или партнерский ресурс. При нажатии на иконку шестеренки, доступны опции: открыть в новом окне. Внутренние ссылки  данного сайта лучше не открывать в Новом Окне.

Тег Nofollow — не советую ставить чек-бокс: поисковики будут понижать рейтинг сайта в поиске.

Редактируем во вкладке «Стиль»

Выравнивание, ширина и высота Изодражения

Выравнять изображение в контейнере:

— Слева → ПО центру →Справа

— изменить ширину изображения.

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

Редактируем стиль изобржения
картинка

Высота 

Этот параметр при при изменении может искажать изображение.

Эффект Прозрачность

Прозрачность — Обычно, по умолчанию 100%. Можем добавить эффект Прозрачность при — Наведение:

например что прозрачность — Обычно→ будет Вот такая 70%,

а при наведении она будет на 100%.

И можно сделать анимацию при Наведении.

Граница

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

Тень

Настраиваем тень Изображения. Я делаю вот такие настройки.

Горизонтальное смещение → 0

Вертикальное смещение → 0

Размытие → 10

Размах → 4

Расширенные

Здесь настройки одинаковы практически для всех виджетов.

Вкладку «Расширенные», я разбирала подробно в видеоуроке виджет  «Заголовок»

Смотрите по ссылке здесь

Видеоурок : Виджет «Изображение»

Записала для вас видео о том, как вставить и как редактировать виджет «Изображение». Изучайте и неоткладывая, применяйте.

Буду благодарна за комментарии.

 

Поделиться с друзьями
Людмила Кузнецова
Оцените автора
Проонлайн образование
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.