Создаем красивый слайдер с помощью Gutentor Gutenberg Blocks

слайдер с помощью Gutentor Gutenberg Blocks

Небольшой гайд (руководство) для новичков, которые делают свои первые шаги по созданию сайтов на CMS WordPress. Сейчас мы с вами будем создавать свой первый слайдер.

Что нужно для работы?

  1. Установленный WordPress
  2. Плагин Gutentor — Gutenberg Blocks — Page Builder for Gutenberg Editor. Если он не установлен, скачайте и активируйте.

Вот как будет выглядеть наш слайдер в итоге:

Создаем красивый слайдер с помощью Gutentor Gutenberg Blocks01

Настройка

Создаём новую запись. На своём сайте. Далее нажимаем на квадратик и выбираем готовый блок Advanced Columns

sozdaem krasivyy slayder s pomoshchyu gutentor gutenberg blocks02

Выбираем соотношение, так как Advanced Columns состоит из двух Single Column, вы можете здесь выбрать, какой будет больше а какой меньше. Мне понравился результат 5 на 7.

Теперь у нас получился такой блок, в левую часть мы вставим блок слайдер, а в него изображения. А в правую — текстовый блок.

sozdaem krasivyy slayder s pomoshchyu gutentor gutenberg blocks03

Нажимайте на крестик в левой части и выбирайте вставляйте блок с название Image Slider Widget

sozdaem krasivyy slayder s pomoshchyu gutentor gutenberg blocks04

В правую часть Content Widget, это блок с текстом, то есть заголовок + описание + кнопка.

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

В правый блок слайдер виджет (Image Slider Widget) я добавил три ранее заготовленных изображения. В правый — заголовок, свой текст и настроил кнопку. Все эти манипуляции проводятся в правой колонке вашей записи. Там же добавляется фон. Подробно описывать не буду, в принципе там и так всё понятно интуитивно.

Настройки Title это настройки Заголовка, там настраивается цвет, цвет при наведении, стиль, шрифт, положение, сдвиг влево вправо и так далее…

Выбираете Block Items-это настройки текста под заголовком. Можно задать такие — же, как и у Title. Мне нравится однотонная гамма, и я сделал в светло коричневом тоне.

sozdaem krasivyy slayder s pomoshchyu gutentor gutenberg blocks05

Откройте вкладку Advanced в правом блоке Content Widget, выберите Background. Выберите фон для своего слайдера.

Примечание:

Картинки в слайдер я делал в Фотошопе. Фон для слайдера подобрал в интернете в такой же цветовой гамме. Цвета текста также светло коричневые. Рекомендую использовать не более двух трёх цветов или оттенков, чтобы не выглядело «наляписто» и чересчур «кричаще».

sozdaem krasivyy slayder s pomoshchyu gutentor gutenberg blocks06

Настройки для фона (Background)

Рекомендую сделать такие:

Image Size-Full

Background Size-Avto

Background Position-Center

Background Repeat- Repeat

Background Attachment-Default (Если выберете Scroll-фон будет оставаться неподвижным при прокручивании страницы, не рекомендую, лучше оставить Default)

Gutentor Gutenberg Blocks

Немного настроек для слайдера:

Slide Speed (Milliseconds) я поставил 2500, так картинки наиболее плавно перелистываются,

Autoplay Speed (Milliseconds) также-2500.

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

И в заключении:

Рекомендую Плагин Gutentor — Gutenberg Blocks. Довольно много гибких настроек, не нужно с нуля создавать блоки и мучатся с их расположением. Все они готовые, адаптивны под смартфоны. Не возникнет никаких «косяков» с отображением на различных устройствах.

В плагине уже есть около 400 готовых шаблонов, это блоки, готовые страницы с блоками, паттерны, виджеты. Есть режим экспорта импорта. Допустим, вы собрали блок или страницу на своём сайте, и вам нужно перенести ее на другой — проблем не возникнет.

Если будут какие то вопросы по настройке слайдера-обязательно задавайте в комментариях, постараюсь ответить в меру своих возможностей J

Мнение.

Ни в коей мере я не навязываю использование этого плагина, есть и другие аналоги. Которые новички могут с успехом использовать для создания красивых блоков или целых страниц и сайтов. Но, по моему личному мнению Elementor и рядом не валялся. Ибо платный, до самого «нихачу». Какой смысл его использовать, если куда не ткнись, вылезает табличка с наглым пожеланием отстегнуть баксов? А не заплатишь, то и толком ничего в нём сделать нельзя.

В Gutentor вы такого не увидите и можете спокойно работать. Вот вам еще два примера, это моя «Главная» страничка этого сайта и страничка с Услугой. Обе полностью сделаны из блоков Gutenberg Blocks с помощью плагина Gutentor. С ним я могу не заморачиватся с кодами, отступами, а спокойно «дизайнить» и оформлять свой сайт. На этом пока всё, до новых встреч. Добавляйте сайт в закладки буду стараться писать для вас.

Добавить комментарий