Логотип Слайдер

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

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

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

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

Он находится в группе главных аддонов Slider Widgets, рядом с Изображение Карусель и Галерея Слайдер виджеты. эти два созданы для фотографий и галерей. слайдер логотипа создан для отметок бренда: логотипы остаются маленькими, равномерно расположенными и выровненными в один ряд.

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

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

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

В редакторе Elementor откройте Элементы панель и поиск Логотип Слайдер, или прокрутите в раздел Главные дополнения Перетащите виджет на свою страницу Он загружается с шестью элементами заполнителя с именем Фирменное наименование, так что вы видите форму ползунка сразу и замените заполнители один за другим.

Добавьте свои логотипы в раздел "Элементы логотипа" #

В Содержание вкладка, открыть Предметы логотипа.Каждая запись в списке представляет собой один логотип. щелкните элемент, чтобы расширить его, или используйте значки копирования и удаления справа от каждой строки.The Добавить элемент кнопка внизу расширяет список до необходимого количества логотипов.

Под списком элементов расположены три настройки, применимые ко всему ползунку:

• Разрешение изображения: размер WordPress служит для каждого логотипа, от миниатюры до Full. Логотипы - это небольшие файлы, поэтому Full обычно в порядке.
• Название HTML Тег: тег заголовка, обернутый вокруг фирменного наименования на hover, H5 по умолчанию Выберите тег, который соответствует структуре заголовка вашей страницы.
• Выберите событие: что вызывает эффект наведения. как отмечает панель, это срабатывает только тогда, когда на Логотипе клиента включен тип наведения.

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

Установите ссылку и наведите эффект для каждого логотипа #

Каждый элемент логотипа имеет свой собственный Ссылка поле Вставить URL клиента и логотип становится кликабельным на живой странице Значок шестеренки открывает обычные параметры ссылки Elementor, например открытие в новой вкладке.

The Наведите курсор? раскрывающийся список решает, что происходит, когда посетитель перемещает мышь по логотипу. Он имеет три режима:

• Нет: логотип просто сидит там Чистый и простой.
• Текст: логотип тускнеет и а Название бренда плюс короткая Описание предстать на его месте.
• Изображение: логотип меняется на второе выбранное вами изображение.

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

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

Добавьте всплывающую подсказку к логотипу #

Каждый предмет также имеет Совет инструмента переключать. включите его, и при наведении посетителей на этот логотип появится небольшой пузырь. The Настройки вкладка управляет поведением:

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

The Стиль вкладка рядом с Настройками стили сам пузырь: цвета, типографика, и интервал. всплывающие подсказки хорошо работают для коротких меток, как “Partner с 2019”, которые не нуждаются в режиме полного наведения текста.

Настройте навигационные стрелки #

Открыть Навигация раздел для управления тем, как посетители перемещают ползунок вручную.The Навигация dropdown устанавливает тип управления со стрелками в качестве стандартного выбора.

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

Настройте поведение карусели #

The Настройки карусели секция приводит в движение ползунок, Именно здесь статический ряд логотипов становится вращающейся полосой, которую ожидают посетители.

• Слайды на колонку: сколько логотипов отображается одновременно, от 1 до 6. Большинство макетов рабочего стола подходят четыре или пять, а адаптивный значок позволяет установить меньшее количество на устройство.
• Макет: Карусель - стандартный плоский ползунок.
• Авто Высота: позволяет высоте ползунка следовать за рядом логотипа.
• Скорость автовоспроизведения и автовоспроизведения: поворачивайте логотипы автоматически Скорость - это задержка в миллисекундах, поэтому 5000 означает новый набор каждые пять секунд.
• Пауза на зависании: останавливает вращение, пока курсор находится над ползуном, который хорошо сочетается с эффектами зависания и подсказками.
• Слайды для прокрутки: сколько логотипов продвигается за шаг.
• Центральное скольжение, курсор захвата, режим без перетаскивания: центрируйте активный логотип, покажите курсор захвата или позвольте посетителям свободно размахивать полосой.
• Петля: запускает ползунок бесконечно, что является то, что полоска логотипа почти всегда хочет, Одна вещь, чтобы смотреть: петля нуждается больше логотипов, чем Слайды на столбец количество. с пятью столбцами и только пятью логотипами, нет ничего лишнего, чтобы вращать в.

Стиль слайдер логотипа #

Переключиться на Стиль вкладка. Четыре раздела посвящены внешнему виду ползунка: предметы карусели, элементы карусели, зависающие, значок и навигация.

Предметы карусели #

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

• Фон, Тип границы, Радиус границы, Тень коробки: дайте каждому логотипу рамку в виде карты или оставьте все пустым для чистой полосы.
• Заполнение и зазор в деталях: пространство внутри каждой ячейки и расстояние между логотипами Зазор - самый быстрый способ заставить переполненную полоску дышать.
• Режим тени и непрозрачность: тени с мягкими краями и прозрачность логотипов.

Предметы карусели парят #

В этом разделе стилизовано состояние наведения, выбранное вами на вкладке "Содержимое", включая наложение текста.

• Фон, граница, тень коробки, набивка, маржа: рамка вокруг висящего логотипа.
• Имя Цвет, Название Типографика, Расстояние: текст названия бренда, который появляется в режиме наведения текста.

Икона #

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

Стрелки навигации #

В разделе "Навигация" кнопки со стрелками расположены в отдельных нормальных состояниях и состояниях наведения.

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

Результат на странице #

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

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

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

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

• Держите каждый логотип одинакового размера. Смешанные размеры заставляют ряд скакать, когда он скользит Экспорт всех логотипов на идентичных полотнах, например 300 на 150, сохраняет полосу устойчивым.
• Используйте зависание от оттенков серого до цвета. Установите основное изображение в оттенках серого и цветную версию в виде изображения логотипа Hover. Полоса остается тихой, пока посетители не взаимодействуют с ней.
• Включите паузу при наведении курсора с помощью автозапуска. Никто не может прочитать всплывающую подсказку на движущейся цели.
• Скрыть стрелки на мобильном. Прокачка заменяет их, и полоса остается чистой на небольших экранах.
• Сопоставьте слайды на столбец с шириной логотипа. Широкие логотипы словесных знаков требуют меньше столбцов, чем компактные знаки значков. если логотип выглядит сжатым, опустите счет на единицу, прежде чем касаться файлов изображений.

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

Завершая #

Виджет Logo Slider охватывает всю работу карусели с логотипом клиента в Elementor: ретранслятор для логотипов, ссылки на логотип и эффекты наведения, всплывающие подсказки, автозапуск с петлей и стилирование до кнопок со стрелками. для ползунков фотографий и галерей посмотрите на Изображение Карусель и Галерея Слайдер виджеты. Просмотрите полный набор Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что Pro добавляет сверху.