15+ отличных примеров слайдеров WordPress (витрина)

Ищете вдохновение для своего слайдера WordPress? Слайдеры позволяют владельцам веб-сайтов демонстрировать свой самый важный контент в привлекательном интерактивном слайд-шоу, поэтому пользователи могут видеть основные моменты и немедленно принимать меры. Неудивительно, что так много сайтов используют слайдеры со всеми возможными функциями!

• Доставляйте контент эффективно и стильно
• Упакуйте много информации в маленькое пространство
• Добавьте интерактивность на свой сайт
• Направляйте посетителей на рекламные акции и важные страницы

В этой статье мы покажем вам более 15 отличных примеров слайдеров WordPress. Мы также покажем вам, как быстро создать великолепный слайдер для вашего собственного веб-сайта.

Слайдер Вдохновение Витрина

Вот несколько лучших примеров слайдеров для вашего вдохновения. Критерии, которые мы использовали для выбора этих слайдеров: 1) креативность и 2) удобство использования. Некоторые конструкции имеют оба аспекта, а некоторые только один аспект.

Си-Эн-Би-Си Прайм

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

Си-Би-Эс

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

Юниверсал Орландо

У слайдера Universal есть одна простая цель: побудить вас посетить их парк развлечений. Хотя CTA делают заманчивые предложения, фотографии говорят сами за себя.

Голубиные котята Сэвилла

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

Пекарня Магнолия

Magnolia Bakery — отличный пример слайдера, состоящего только из изображений. Когда у вас есть вкусная выпечка, кому нужна болтовня? Эти три мини-слайдера выглядят просто восхитительно на этой веб-странице.

Пылающее ущелье

Пылающее ущелье — популярная достопримечательность штата Юта. Заголовки в их галерее говорят сами за себя: на курорте «Пылающее ущелье» вы можете наслаждаться экспансивным видом, не теряя его.

Прогресс Темы

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

Галерея Смитсоновского института Фрира Саклера

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

Одинокая планета

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

Истбэй

Слайдер Converse фокусирует внимание именно там, где и должно быть: на продукте. Детали и текстуры в этом слайдере настолько четкие, что вы почти можете протянуть руку и коснуться ткани.

Лист

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

Xbox

Слайдер Xbox отличается простотой благодаря четким изображениям продуктов, небольшому количеству слов и большому количеству пробелов. Это определенно тот случай, когда меньше значит больше.

Тим Хортонс

Слайдер Тима Хортона — классический пример отличной фуд-фотографии на работе. Получите аппетит, соедините это с некоторыми выгодными предложениями, и БУМ! У вас есть ползунок, перед которым чрезвычайно трудно устоять.

Сони треск

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

Смитсоновский институт

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

Лувр

Слайдер Лувра именно то, что вы ожидаете: исторический и элегантный. Это благодаря большому количеству пробелов, шрифту с засечками и простому, но эффектному переходу изображений в черный цвет. Еще одна замечательная особенность этого слайдера — кнопка воспроизведения/паузы в правом нижнем углу.

Как создать свой собственный слайдер WordPress

Теперь вы можете задаться вопросом: « Эти слайдеры потрясающие, но как я могу создать их для своего собственного веб-сайта?»

Что ж, к счастью, на самом деле это довольно просто благодаря плагину Soliloquy для WordPress.

Во-первых, вам нужно установить и активировать плагин Soliloquy Slider. Для получения более подробной информации см. это пошаговое руководство по установке плагина в WordPress.

Теперь пришло время создать свой первый слайдер. Перейдите в Soliloquy »Add New , чтобы добавить ползунок. Вы можете выбрать файлы со своего компьютера, если вам нужно загрузить изображения. Если вы уже загрузили изображения на свой сайт, выберите файлы из других источников.

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

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

Когда вы будете удовлетворены своими настройками, взгляните на вкладку Mobile . Это позволит вам проверить, как выглядит ваш веб-сайт на мобильном устройстве, и при необходимости настроить параметры мобильного разрешения.

(Также см. вкладку « Разное » для импорта или экспорта слайдера.)

Добавить слайдер на страницу или запись

Вы закончили создание слайдера! Теперь пришло время добавить его в запись или на страницу по вашему выбору. Отредактируйте сообщение или страницу, нажмите кнопку « Добавить слайдер » и выберите свой слайдер. Не забудьте опубликовать или обновить свой пост/страницу, чтобы сохранить изменения.

Ваш слайдер теперь будет работать на вашем сайте:

Вот и все! Теперь у вас есть собственный слайдер WordPress. Мы надеемся, что эта статья вдохновила вас более чем 15 отличными примерами слайдеров WordPress и помогла вам создать свой первый слайдер.

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

• Создайте полноразмерный слайдер изображений в WordPress
• Изменить время слайдера в WordPress
• Создайте адаптивный слайдер видео в WordPress

Если вам понравилась эта статья, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств по WordPress.