Необходимо создать галерею изображений с вкладками в Elementor ?

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

С Elementor, вам не нужно устанавливать дополнительные плагины для создать галерею изображений на вашем сайте WordPress. Elementor предлагает два виджета для создания галереи изображений: Базовая галерея и Галерея.

Виджет «Базовая галерея», доступный в Elementor Free, позволяет создавать базовую галерею изображений, а виджет «Галерея» позволяет создавать более сложные галереи изображений, включая галерею изображений с вкладками.

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

Как создать галерею изображений с вкладками в Elementor

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

Читайте также: Как создать галерею изображений с вкладками в Elementor

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

Для начала создайте новую страницу и отредактируйте ее с помощью Elementor. Вы также можете редактировать существующую страницу. Добавьте раздел и перетащите на него виджет Галерея.

Как создать галерею изображений с вкладками в Elementor

Под блоком Настройки под вкладкой Содержание, установить вариант Тип из  множественный.

По умолчанию ваша галерея содержит только одну вкладку. Чтобы добавить новую вкладку, просто нажмите кнопку ДОБАВИТЬ ЭЛЕМЕНТ.

См. Также: Как создать индикатор выполнения градиента в Elementor

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

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

Как создать галерею изображений с вкладками в Elementor

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

Настроить галерею

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

Откройте блок Панель фильтров для определения метки основной вкладки (вкладка «Все»), указателя и анимации.

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

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

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

Фото товара

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

Как создать галерею изображений с вкладками в Elementor

Наложение

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

Содержание

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

Панель фильтров

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

Вы можете изменять эти настройки, пока не будете удовлетворены результатом. После этого нажмите кнопку ПУБЛИКАЦИЯ / ОБНОВЛЕНИЕ внизу на левой панели, чтобы опубликовать или обновить свою страницу.

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

Заключение

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

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...