Небольшой гайд (руководство) для новичков, которые делают свои первые шаги по созданию сайтов на CMS WordPress. Сейчас мы с вами будем создавать свой первый слайдер.
Что нужно для работы?
Содержание статьи
- Установленный WordPress
- Плагин Gutentor — Gutenberg Blocks — Page Builder for Gutenberg Editor. Если он не установлен, скачайте и активируйте.
Вот как будет выглядеть наш слайдер в итоге:
Настройка
Создаём новую запись. На своём сайте. Далее нажимаем на квадратик и выбираем готовый блок Advanced Columns
Выбираем соотношение, так как Advanced Columns состоит из двух Single Column, вы можете здесь выбрать, какой будет больше а какой меньше. Мне понравился результат 5 на 7.
Теперь у нас получился такой блок, в левую часть мы вставим блок слайдер, а в него изображения. А в правую — текстовый блок.
Нажимайте на крестик в левой части и выбирайте вставляйте блок с название Image Slider Widget
В правую часть Content Widget, это блок с текстом, то есть заголовок + описание + кнопка.
Чтобы настроить блок нажмите на него, слева появятся все настройки. Экспериментируйте.
В правый блок слайдер виджет (Image Slider Widget) я добавил три ранее заготовленных изображения. В правый — заголовок, свой текст и настроил кнопку. Все эти манипуляции проводятся в правой колонке вашей записи. Там же добавляется фон. Подробно описывать не буду, в принципе там и так всё понятно интуитивно.
Настройки Title это настройки Заголовка, там настраивается цвет, цвет при наведении, стиль, шрифт, положение, сдвиг влево вправо и так далее…
Выбираете Block Items-это настройки текста под заголовком. Можно задать такие — же, как и у Title. Мне нравится однотонная гамма, и я сделал в светло коричневом тоне.
Откройте вкладку Advanced в правом блоке Content Widget, выберите Background. Выберите фон для своего слайдера.
Примечание:
Картинки в слайдер я делал в Фотошопе. Фон для слайдера подобрал в интернете в такой же цветовой гамме. Цвета текста также светло коричневые. Рекомендую использовать не более двух трёх цветов или оттенков, чтобы не выглядело «наляписто» и чересчур «кричаще».
Настройки для фона (Background)
Рекомендую сделать такие:
Image Size-Full
Background Size-Avto
Background Position-Center
Background Repeat- Repeat
Background Attachment-Default (Если выберете Scroll-фон будет оставаться неподвижным при прокручивании страницы, не рекомендую, лучше оставить Default)
Немного настроек для слайдера:
Slide Speed (Milliseconds) я поставил 2500, так картинки наиболее плавно перелистываются,
Autoplay Speed (Milliseconds) также-2500.
Впрочем поэкспериментируйте, если вы добавите больше картинок, то логично будет немного увеличить скорость. И наоборот, если на картинках у Вас есть какой — то текст, то я бы сделал скорость меньше, чтобы пользователь успел воспринимать информацию.
И в заключении:
Рекомендую Плагин Gutentor — Gutenberg Blocks. Довольно много гибких настроек, не нужно с нуля создавать блоки и мучатся с их расположением. Все они готовые, адаптивны под смартфоны. Не возникнет никаких «косяков» с отображением на различных устройствах.
В плагине уже есть около 400 готовых шаблонов, это блоки, готовые страницы с блоками, паттерны, виджеты. Есть режим экспорта импорта. Допустим, вы собрали блок или страницу на своём сайте, и вам нужно перенести ее на другой — проблем не возникнет.
Если будут какие то вопросы по настройке слайдера-обязательно задавайте в комментариях, постараюсь ответить в меру своих возможностей J
Мнение.
Ни в коей мере я не навязываю использование этого плагина, есть и другие аналоги. Которые новички могут с успехом использовать для создания красивых блоков или целых страниц и сайтов. Но, по моему личному мнению Elementor и рядом не валялся. Ибо платный, до самого «нихачу». Какой смысл его использовать, если куда не ткнись, вылезает табличка с наглым пожеланием отстегнуть баксов? А не заплатишь, то и толком ничего в нём сделать нельзя.
В Gutentor вы такого не увидите и можете спокойно работать. Вот вам еще два примера, это моя «Главная» страничка этого сайта и страничка с Услугой. Обе полностью сделаны из блоков Gutenberg Blocks с помощью плагина Gutentor. С ним я могу не заморачиватся с кодами, отступами, а спокойно «дизайнить» и оформлять свой сайт. На этом пока всё, до новых встреч. Добавляйте сайт в закладки буду стараться писать для вас.
