Виджет «Изображение» в Elementor: вставка картинок, настройка alt-текста и размеров

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

Вставка изображения на страницу

Работа с виджетом начинается с его добавления на холст. В редакторе Elementor нажмите на значок «+», чтобы открыть панель виджетов, найдите «Изображение» и перетащите его в нужное место на странице или просто кликните по нему. После этого в левой панели появится вкладка «Содержимое», где и происходит основная настройка.

В верхней части вкладки находится поле «Изображение». Наведите на него курсор и нажмите «Выбрать изображение». Откроется медиатека WordPress, где вы можете загрузить новый файл с компьютера или выбрать уже существующую картинку. После выбора нажмите кнопку «Выбрать», и изображение появится на холсте.

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

Настройка alt-текста: доступность и SEO

Alt-текст — это альтернативное описание изображения, которое отображается, если картинка не загрузилась, и считывается скринридерами для людей с нарушениями зрения. Кроме того, корректный alt-текст положительно влияет на SEO, помогая поисковым системам понять содержание изображения.

По умолчанию Elementor использует alt-текст, который был задан для изображения в медиатеке WordPress. Это означает, что если вы один раз заполнили поле «Альтернативный текст» при загрузке картинки, оно автоматически подставится во всех местах, где используется это изображение.

Однако иногда возникает необходимость задать разный alt-текст для одного и того же изображения в разных контекстах. Например, если вы используете одну и ту же фотографию в статье о доставке и в статье о качестве продукции, описания должны отличаться. Стандартный виджет «Изображение» в Elementor не позволяет переопределить alt-текст для каждого отдельного экземпляра. Для решения этой задачи существует специальный плагин «Custom Alt Text for Elementor Images». Он добавляет в настройки виджета поле «Alternative Text», где можно выбрать один из трёх вариантов: использовать alt-текст из медиатеки, задать собственный текст или оставить поле пустым для декоративных изображений.

Если изображение носит чисто декоративный характер и не несёт смысловой нагрузки, правильным решением будет оставить alt-текст пустым. Это позволит скринридерам пропустить его и не отвлекать пользователя лишней информацией.

Настройка размеров и разрешения

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

Выбор разрешения влияет на то, какой именно файл будет загружен на страницу. Если вы выбрали «Полный размер», браузер загрузит оригинальное изображение, которое может весить несколько мегабайт. Для ускорения загрузки страницы рекомендуется выбирать размер, соответствующий реальным размерам отображаемого блока. Например, если картинка занимает половину ширины экрана, нет смысла загружать её в полном разрешении.

При выборе опции «Собственный» появляются поля для ввода точной ширины и высоты. Важно учитывать, что при этом Elementor может не добавлять атрибуты width и height в HTML-код изображения, что приводит к сдвигам макета при загрузке страницы. Чтобы избежать этого, после сохранения страницы проверьте итоговый код или воспользуйтесь специальными исправлениями через дочернюю тему.

Для более тонкой настройки размеров и пропорций перейдите на вкладку «Стиль» и раскройте раздел «Размер». Здесь доступны три ключевых параметра. Параметр «Ширина» задаёт базовую ширину элемента, которая может быть выражена в процентах или пикселях. Параметр «Мин. ширина» устанавливает нижнюю границу, ниже которой изображение не будет уменьшаться, что полезно для сохранения читаемости на мобильных устройствах. Параметр «Макс. ширина» ограничивает рост картинки на больших экранах.

Особого внимания заслуживает настройка «Object fit», которая позволяет управлять тем, как изображение вписывается в заданные размеры. По умолчанию используется значение «Заполнить», при котором картинка может искажаться. Значение «Содержать» сохраняет пропорции и вписывает изображение целиком, оставляя пустые области по краям. Значение «Обрезать» заполняет всю область, обрезая лишние части, при этом пропорции сохраняются. Для большинства случаев оптимальным выбором является «Содержать» или «Обрезать» в зависимости от того, что важнее: показать изображение целиком или заполнить пространство без пустот.

Также в разделе «Размер» можно задать соотношение сторон, например 16:9 или 4:3. Это особенно полезно при создании галерей и портфолио, где важно единообразие карточек.

Дополнительные настройки содержимого

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

Поле «Выравнивание» позволяет расположить картинку слева, по центру или справа относительно родительского контейнера.

В разделе «Подпись» можно добавить текстовое описание под изображением. Доступны три варианта: «Нет» (подпись не отображается), «Подпись вложения» (используется текст, заданный в медиатеке WordPress) и «Собственная подпись» (вы вводите текст непосредственно в редакторе Elementor).

Поле «Ссылка» делает изображение кликабельным. Можно выбрать один из вариантов: «Медиафайл» (открывает изображение в лайтбоксе), «Собственный URL» (ведёт на любую страницу сайта или внешний ресурс) или «Нет» (изображение не является ссылкой). Если выбран собственный URL, появляется возможность открыть ссылку в новом окне и добавить атрибут nofollow.

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

Стилизация изображения

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

Адаптивность и производительность

Elementor автоматически генерирует атрибуты srcset для изображений, что позволяет браузеру выбирать оптимальный размер картинки в зависимости от ширины экрана и плотности пикселей. Это означает, что на мобильных устройствах будет загружена уменьшенная версия изображения, что ускоряет загрузку страницы. Дополнительно можно использовать функцию адаптивных изображений в Elementor Pro, которая ещё больше оптимизирует доставку контента.

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

Рекомендации по оптимизации

Перед загрузкой изображения в медиатеку рекомендуется сжать его с помощью специализированных инструментов. Это уменьшит размер файла без заметной потери качества и положительно скажется на скорости загрузки страницы. Для фотографий лучше использовать формат JPEG с оптимальным уровнем сжатия, для графики с прозрачностью — PNG, а для современных браузеров — WebP, который обеспечивает лучшее соотношение качества и размера файла.

Всегда заполняйте alt-текст для информативных изображений и оставляйте его пустым для декоративных элементов. Это улучшает доступность сайта и помогает поисковым системам правильно индексировать контент.

Регулярно проверяйте, как изображения отображаются на разных устройствах. Даже если на десктопе картинка выглядит идеально, на смартфоне она может обрезаться или занимать слишком много места. Используйте инструменты адаптивности Elementor для тонкой настройки каждого разрешения.