Галерея Слайдер

Ползунок галереи объединяет большое изображение предварительного просмотра с кликабельным набором миниатюр, поэтому посетители могут сразу перейти к нужному фото, а не нажимать на один слайд за раз. The Галерея Слайдер виджет в Мастер-аддоны для Elementor строит этот макет за несколько минут Вы выбираете изображения, выбираете миниатюрную сетку или карусель, и стилизуете каждую часть из панели Элементор.

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

Что делает виджет Gallery Slider #

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

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Нужна помощь? Видеть руководство установки.
• Набор изображений, загруженных в вашу медиатеку, в идеале с одинаковым соотношением сторон.

Как добавить виджет Elementor Gallery Slider #

Откройте редактор Elementor и найдите Галерея Слайдер на панели Элементы, или прокрутите вниз к разделу Мастер Аддоны.Каждый виджет Мастер Аддоны несет небольшой значок МА, который помогает, когда у вас установлено несколько пакетов аддонов Перетащите виджет в свой раздел.

Добавить изображения на вкладке Содержимое #

Галерея #

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

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

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

Миниатюры #

The Миниатюры раздел управляет небольшими изображениями рядом с предварительным просмотром.

• Миниатюры: полностью покажите или спрячьте область миниатюр.
• Карусель/Сетка: переключайтесь между статической сеткой и прокручиваемой каруселью.
• Разрешение изображения: размер WordPress служит для миниатюр Миниатюра (150 x 150) сохраняет свет страницы.
• Столбцы: выберите 1-12 столбцов для сетки Перемещение от 2 до 3 столбцов меняет сетку с высокой и узкой на более плотную.
• Заказ: сохраните порядок по умолчанию или измените способ сортировки изображений.
• Надпись: покажите подпись на миниатюрах или оставьте ее на "Нет".

Переключение на Карусель режим заменяет сетку полоской миниатюр и добавляет собственную группу настроек: Ориентация (горизонтальный или вертикальный), Слайды на просмотр, ан Стрелки переключаться с Положение стрелки выпадающий плюс Автовоспроизведение, Бесконечная петляи Направление управление только для миниатюрной ленты. сетка работает лучше для дюжины изображений или меньше; после этого карусель экономит много вертикального пространства.

Предварительный просмотр #

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

• Разрешение изображения: размер, подаваемый для большого изображения. Полный выглядит лучше всего, но весит больше всего, поэтому сжимайте свои оригиналы.
• Ссылка на: свяжите изображение предварительного просмотра с URL-адресом или медиафайлом или сохраните его на уровне "Нет".
• Надпись: отображение подписи изображения под предварительным просмотром.
• Направление: сдвиньте влево вправо или вправо влево.
• Бесконечная петля: вернитесь к первому слайду после последнего.
• Авто Высота: пусть ползунок регулирует свою высоту для каждого изображения. Удобно для смешанных соотношений, хотя страница будет немного смещаться по мере изменения слайдов.
• Автовоспроизведение: выдвигать слайды автоматически. щелкните значок редактирования, чтобы настроить его.
• Эффект: выберите переход Slide или Fade.
• Скорость (мс): сколько длится переход По умолчанию 1000.
• Стрелки: покажите или спрячьте навигационные стрелки и выберите их Должность, например, Верхний левый.

Создайте ползунок на вкладке "Стиль" #

Макет #

The Макет раздел решает, где находится предварительный просмотр относительно миниатюр. Предпросмотр Позиция предлагает Верх, Правый, Нижний, и Левый. с Верх или Нижний, миниатюры выстраиваются вверх под или над превью и a Горизонтальное выравнивание контроль появляется с помощью Ширина карусели слайдер. слева или справа вы получаете Ширина предварительного просмотра (%) слайдер вместо.

• Стекаться: выберите, когда макет расположен вертикально, например Tablet & Mobile.
• Ширина предварительного просмотра (%): сколько горизонтального пространства занимает предварительный просмотр Где-то между 60 и 70 процентами сидит красиво рядом с трехколоночной сеткой.
• Расстояние: разрыв между предварительным просмотром и миниатюрами.

Предварительный просмотр #

Вкладка Стиль Предварительный просмотр секция стилизует большой контейнер для слайдов.

• Пользовательская высота: переопределить автоматическую высоту.
• Цвет фона: заполняет область за изображением.
• Тип границы: По умолчанию нет, сплошной, двойной, пунктирный, пунктирный или пазовый, с контролем ширины и цвета при активности.
• Граничный радиус и коробочная тень: закруглите углы и снимите слайд со страницы.
• Стрелки: специальная группа с Размер, Набивка, Граничный радиус, Переходи отдельно Дефолт, Наведите курсори Инвалид состояния, каждое со своим цветом и цветом фона.

Предварительный просмотр подписей #

Если вы включили подписи на вкладке "Содержимое", этот раздел размещает и стилизует их. Вертикальное выравнивание помещает подпись вверху, посередине или внизу слайда, и Горизонтальное выравнивание предложения влево, в центр, вправо и оправдать. вы также получаете Типографика, Набивка, Маржа, Тип границыи Граничный радиус контроль.

Предварительный просмотр эффектов наведения #

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

Миниатюры #

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

Миниатюры Эффекты наведения #

В этом разделе миниатюры стилизованы в трех состояниях: Дефолт, Наведите курсори Активный (миниатюра, соответствующая текущему слайду). Изображения группа охватывает цвет фона, Непрозрачность, Масштаб, Коробка Теньи CSS-фильтры. Из коробки неактивные миниатюры имеют непрозрачность 0,65, поэтому выделяется активный. Наложение группа добавляет цвет или градиентный слой с Режим смешивания, Маржа, Непрозрачностьи пограничный контроль.

Еще есть а Шаблоны раздел внизу вкладки Стиль с готовыми предустановками стиля Этот же раздел отображается во многих виджетах Master Addons.

Смотрите живой результат #

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

Обычные случаи использования #

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

Советы по улучшению слайдера галереи #

• Соответствовать соотношениям сторон изображения. Авто Высота предотвращает сюрпризы при обрезке, но стабильные соотношения выглядят чище и не позволяют планировке подпрыгнуть.
• Служите правильным решениям. Полный для предварительного просмотра, Миниатюра (150 x 150) для сетки. Сжимайте перед загрузкой; см. наш путеводитель по лучшие плагины оптимизатора изображений WordPress.
• Пишите подписи в Медиатеке перед вставкой галереи, чтобы каждый слайд был готов.
• Сохраняйте разумную скорость автопроигрывания. Дайте посетителям время, чтобы они действительно увидели каждое изображение.
• Используйте состояние Активный. Помутнение неактивных миниатюр по умолчанию 0,65 уже направляет глаз; граница или небольшой масштаб активной миниатюры делает его еще более ясным.

Видео Учебник #

Предпочитаете вместо этого смотреть настройку? Это видео охватывает весь процесс, от перетаскивания виджета до готового ползунка на странице в реальном времени:

Часто задаваемые вопросы #

Завершая #

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

Чтобы узнать больше о способах отображения изображений, проверьте Изображение Карусель, Фильтруемая галереяи Расширенное изображение документы или сравните варианты в нашем Элементор изображение карусели руководство. Чтобы увидеть все остальное в плагине, просмотрите Виджеты и расширения Master Addgets коллекция или ценовые планы.