Ползунок галереи объединяет большое изображение предварительного просмотра с кликабельным набором миниатюр, поэтому посетители могут сразу перейти к нужному фото, а не нажимать на один слайд за раз. The Виджет слайдер галереи в Мастер Аддоны Про строит этот макет за несколько минут Вы выбираете изображения, выбираете миниатюрную сетку или карусель, и стилизуете каждую часть из панели Элементор.
Это руководство проходит через каждую настройку, поэтому вы можете построить Слайдер галереи Элементор не догадываясь, что делает каждый контроль.
Что делает виджет Gallery Slider #
Виджет показывает один большой слайд предварительного просмотра рядом с сеткой или каруселью миниатюр. щелчок миниатюры или стрелка изменяет предварительный просмотр. подписи, автовоспроизведение, бесконечный цикл, затухание или слайд переходы, и отдельные состояния наведения для предварительного просмотра и миниатюр все встроены. он подходит для портфелей, фотографий продуктов, списка недвижимости, альбомов событий, или любой страницы, где посетителям необходимо быстро просмотреть набор изображений.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Нужна помощь? Видеть руководство установки.
- А Мастер Аддоны Про лицензия, потому что Gallery Slider - это виджет Pro.
- Набор изображений, загруженных в вашу медиатеку, в идеале с одинаковым соотношением сторон.
Как добавить виджет Elementor Gallery Slider #
Откройте редактор Elementor и найдите Галерея Слайдер на панели Элементы, или прокрутите вниз к разделу Мастер Аддоны.Каждый виджет Мастер Аддоны несет небольшой значок МА, который помогает, когда у вас установлено несколько пакетов аддонов Перетащите виджет в свой раздел.
Добавить изображения на вкладке Содержимое #
Галерея #
Виджет начинается пустым. В Содержание вкладка, откройте Галерея раздел и нажмите кнопку плюс под Добавить изображения.
Медиа-окно WordPress открывается в Создать галерею экран. выберите изображения, которые вы хотите в ползунке, затем нажмите, чтобы вставить галерею. Потратьте минуту здесь, чтобы заполнить альтернативный текст и подписи для каждого изображения. поле подписи имеет большее значение, чем кажется: виджет может распечатать его под изображением предварительного просмотра позже, и если надпись отсутствует на интерфейсе, этот экран является первым местом, где можно проверить.
После того, как вы вставите галерею, редактор сразу показывает полную раскладку: большой предварительный просмотр слева со стрелками навигации, и сетка миниатюр справа. выбранные изображения также появляются внутри раздела Галерея, где вы можете изменить порядок или удалить их.
Миниатюры #
The Миниатюры раздел управляет небольшими изображениями рядом с предварительным просмотром.
- Миниатюры: полностью покажите или спрячьте область миниатюр.
- Карусель/Сетка: переключайтесь между статической сеткой и прокручиваемой каруселью.
- Разрешение изображения: размер WordPress служит для миниатюр Миниатюра (150 x 150) сохраняет свет страницы.
- Столбцы: выберите 1-12 столбцов для сетки Перемещение от 2 до 3 столбцов меняет сетку с высокой и узкой на более плотную.
- Заказ: сохраняйте порядок по умолчанию или перемешайте изображения наугад.
- Надпись: покажите подпись на миниатюрах или оставьте ее на "Нет".
Переключение на Карусель режим заменяет сетку полоской миниатюр и добавляет собственную группу настроек: Ориентация (горизонтальный или вертикальный), Слайды на просмотр, ан Стрелки переключаться с Положение стрелки выпадающий плюс Автовоспроизведение, Бесконечная петляи Направление управление только для миниатюрной ленты. сетка работает лучше для дюжины изображений или меньше; после этого карусель экономит много вертикального пространства.
Предварительный просмотр #
The Предварительный просмотр раздел управляет большим слайдом и тем, как он себя ведет.
- Разрешение изображения: размер, подаваемый для большого изображения. Полный выглядит лучше всего, но весит больше всего, поэтому сжимайте свои оригиналы.
- Ссылка на: свяжите изображение предварительного просмотра с URL-адресом или медиафайлом или сохраните его на отметке "Нет". Привязка к медиафайлу позволяет включить лайтбокс.
- Надпись: отображение подписи изображения под предварительным просмотром.
- Направление: сдвиньте влево вправо или вправо влево.
- Бесконечная петля: вернитесь к первому слайду после последнего.
- Авто Высота: пусть ползунок регулирует свою высоту для каждого изображения. Удобно для смешанных соотношений, хотя страница будет немного смещаться по мере изменения слайдов.
- Автовоспроизведение: выдвигать слайды автоматически. щелкните значок редактирования, чтобы настроить его.
- Эффект: Скольжение, затухание, куб, переворот или покровный поток. с затуханием, а Кен Бернс опция добавляет медленный зум с масштабом, преобразованием начала координат, продолжительности и смягчением.
- Скорость (мс): сколько длится переход По умолчанию 1000.
- Стрелки: покажите или спрячьте навигационные стрелки и выберите их Должность, например, Верхний левый.
Создайте ползунок на вкладке "Стиль" #
Макет #
The Макет раздел решает, где находится предварительный просмотр относительно миниатюр. Предпросмотр Позиция предлагает Верх, Правый, Нижний, и Левый. с Верх или Нижний, миниатюры выстраиваются вверх под или над превью и a Горизонтальное выравнивание контроль появляется с помощью Ширина карусели слайдер. слева или справа вы получаете Ширина предварительного просмотра (%) слайдер вместо.
- Стекаться: выберите, когда макет расположен вертикально, например Tablet & Mobile.
- Ширина предварительного просмотра (%): сколько горизонтального пространства занимает предварительный просмотр Где-то между 60 и 70 процентами сидит красиво рядом с трехколоночной сеткой.
- Расстояние: разрыв между предварительным просмотром и миниатюрами.
Предварительный просмотр #
Вкладка Стиль Предварительный просмотр секция стилизует большой контейнер для слайдов.
- Пользовательская высота: переопределить автоматическую высоту.
- Цвет фона: заполняет область за изображением.
- Тип границы: По умолчанию нет, сплошной, двойной, пунктирный, пунктирный или пазовый, с контролем ширины и цвета при активности.
- Граничный радиус и коробочная тень: закруглите углы и снимите слайд со страницы.
- Стрелки: специальная группа с Размер, Набивка, Граничный радиус, Переходи отдельно Дефолт, Наведите курсори Инвалид состояния, каждое со своим цветом и цветом фона.
Предварительный просмотр подписей #
Если вы включили подписи на вкладке "Содержимое", этот раздел размещает и стилизует их. Вертикальное выравнивание помещает подпись вверху, посередине или внизу слайда, и Горизонтальное выравнивание предложения влево, в центр, вправо и оправдать. вы также получаете Типографика, Набивка, Маржа, Тип границыи Граничный радиус контроль.
Предварительный просмотр эффектов наведения #
Предварительный просмотр эффектов наведения оживляет подпись, когда посетители нависают над слайдом. Выберите Эффект, установить Переходзатем стилизуйте Дефолт и Наведите курсор состояния с цветом, типом фона, непрозрачностью и тенью текста.
Миниатюры #
Вкладка Стиль Миниатюры раздел обрабатывает небольшие изображения: Вертикальное выравнивание для всего блока, Горизонтальное расстояние и Вертикальное расстояние между миниатюрами плюс Тип границы и Граничный радиус.
Миниатюры Эффекты наведения #
В этом разделе миниатюры стилизованы в трех состояниях: Дефолт, Наведите курсори Активный (миниатюра, соответствующая текущему слайду). Изображения группа охватывает цвет фона, Непрозрачность, Масштаб, Коробка Теньи CSS-фильтры. Из коробки неактивные миниатюры имеют непрозрачность 0,65, поэтому выделяется активный. Наложение группа добавляет цвет или градиентный слой с Режим смешивания, Маржа, Непрозрачностьи пограничный контроль.
Еще есть а Шаблоны раздел внизу вкладки Стиль с готовыми предустановками стиля Этот же раздел отображается во многих виджетах Master Addons.
Смотрите живой результат #
Щелкните значок глаза, чтобы просмотреть страницу. Посетители видят сетку миниатюр рядом с большим предварительным просмотром. Щелчок миниатюрой сразу меняет местами предварительный просмотр, стрелки проходят через слайды по порядку, а подпись следует за каждым изображением.
Обычные случаи использования #
- Портфельные витрины: один большой образ героя, а остальная часть проекта находится в одном клике.
- Страницы продукта: классическая планировка магазина с увеличенным предварительным просмотром и миниатюрным устройством.
- Объявления о недвижимости: пусть покупатели перелистывают номера, не выходя со страницы.
- Альбомы мероприятий или свадеб: выделите одну фотографию, сохраняя при этом весь набор видимым.
Советы по улучшению слайдера галереи #
- Соответствовать соотношениям сторон изображения. Авто Высота предотвращает сюрпризы при обрезке, но стабильные соотношения выглядят чище и не позволяют планировке подпрыгнуть.
- Служите правильным решениям. Полный для предварительного просмотра, Миниатюра (150 x 150) для сетки. Сжимайте перед загрузкой; см. наш путеводитель по лучшие плагины оптимизатора изображений WordPress.
- Пишите подписи в Медиатеке перед вставкой галереи, чтобы каждый слайд был готов.
- Сохраняйте разумную скорость автопроигрывания. Дайте посетителям время, чтобы они действительно увидели каждое изображение.
- Используйте состояние Активный. Помутнение неактивных миниатюр по умолчанию 0,65 уже направляет глаз; граница или небольшой масштаб активной миниатюры делает его еще более ясным.
Видео Учебник #
Предпочитаете вместо этого смотреть настройку? Это видео охватывает весь процесс, от перетаскивания виджета до готового ползунка на странице в реальном времени:
Часто задаваемые вопросы #
Как создать слайдер галереи в Elementor?
Установите главные надстройки для Elementor, перетащите виджет Gallery Slider на свою страницу и нажмите "Добавить изображения" в разделе "Галерея". Выберите изображения в окне мультимедиа и вставьте галерею. Ползунок с предварительным просмотром и миниатюрами появляется немедленно.
Могу ли я показать миниатюры в виде карусели, а не сетки?
Да. в разделе Миниатюры вкладки Содержимое переключите управление Карусель/Сетка на Карусель. затем вы получите ориентацию, слайды на вид, стрелки, автовоспроизведение и настройки бесконечного цикла для миниатюрной ленты.
Могу ли я изменить место появления изображения предварительного просмотра?
Да. на вкладке Стиль в разделе Макет установите положение предварительного просмотра вверху, справа, внизу или слева. с помощью левого или правого макета вы контролируете ширину предварительного просмотра; с верхом или низом вы контролируете ширину и выравнивание карусели.
Поддерживает ли слайдер галереи автовоспроизведение?
Да. включите автовоспроизведение в разделе Предварительный просмотр вкладки Содержимое. вы можете объединить его с Бесконечным циклом, выбрать Слайд, Затухание, Куб, Переворот или Покровный поток и установить скорость перехода в миллисекундах.
Как отобразить подписи изображений на слайдере?
Добавляйте подписи к своим изображениям в медиатеке WordPress, затем установите надпись в разделе "Предварительный просмотр".Стиль и расположите текст из раздела "Предварительные подписи" на вкладке "Стиль".
Виджет Gallery Slider бесплатен?
№ Галерея Слайдер является частью Master Addons Pro. бесплатный виджет Image Carousel охватывает простые ползунки изображений без панели миниатюр.
Завершая #
Главные Аддоны Галерея Слайдер виджет (Pro) охватывает весь узор "предварительный просмотр плюс миниатюры": миниатюры сетки или карусели, предварительный просмотр на любой стороне, подписи и стиль для каждого штата, все с одной панели и без специального кода.
Чтобы узнать больше о способах отображения изображений, проверьте Изображение Карусель, Фильтруемая галереяи Расширенное изображение документы или сравните варианты в нашем Элементор изображение карусели руководство. Чтобы увидеть все остальное в плагине, просмотрите Виджеты и расширения Master Addgets коллекция или ценовые планы.
