kak-sdelat-glavniy-ekran-saita

Делаем главный экран сайта WordPress красиво

Привет друзья! Главный экран сайта, сделанного на cms wordpress – это то, что посетитель видит в первую очередь, перейдя на web-ресурс с поиска. В арсенале верстальщика есть много способов, как сделать главный экран сайта. Я покажу, как его сделать с помощью виджета Site Origin Hero. Этот способ самый простой и эффективный, поскольку он не требует знания html, css и прочих технологий верстки.

Современные тренды веб-дизайна требуют делать первую зону просмотра лаконичной, понятной и эффектной. Такой подход можно увидеть на многих премиум темах, выложенных на invato или contentmonster. Нагромождение же многих элементов дизайна и использование многих цветов в первой зоне просмотра, (чтобы было «красиво») свидетельствует о плохом вкусе дизайнера.


Основные элементы главного экрана сайта

В основные элементы главного экрана в первую очередь входит красивое фоновое изображение. Весь дизайн создается вокруг него и текстовый контент пишется на нем. Обычно фоновую картинку растягивают на всю ширину первого экрана с помощью классов css. Далее на фоне background-image пишут заголовок первого уровня, с главным ключевым запросом в нем. Важно при написании текста использовать красивый шрифт. Взять его можно из коллекции google fonts или на других веб-ресурсах. Под основным заголовком пишут какое-то небольшое описание и под ним располагается кнопка или две кнопки, содержащие призыв к действию: купить, заказать, позвонить и т.д.
Если контент первой зоны просмотра релевантен поисковому запросу пользователя и к тому же оформление первого экрана сайта сделано красиво, то, скорее всего, посетитель останется на сайте и не закроет вкладку браузера.

Используем два плагина: Page Builder и SiteOrigin Сборник виджетов

 

делаем главный экран сайта с помощью пейдж билдер

 

Виджет SiteOrigin Hero входит в состав плагина, включающего в себя ряд бесплатных виджетов, который называется Сборник виджетов от SiteOrigin. Эта коллекция содержит все необходимые и основные решения для разработки веб-страницы любой сложности. Если вы не знаете php и прочих веб-технологий, то установите эти два бесплатных плагина и тем самым вы закроете все основные базовые вопросы, связанные с разработкой сайта. Я бы даже не советовал покупать похожие платные плагины, поскольку если вы разберетесь с этими двумя, то вы поймете что разработчики данного расширения предлагают в бесплатной версии функционал, который не уступает платным аналогам. Итак, сборник виджетов от Site Origin включает в себя такие виджеты:

  • Google карты
  • Заголовки с набором google шрифтов
  • Слайдер
  • Кнопки
  • Аккордеон
  • Табы
  • Иконки
  • Карусель с записями блога
  • Контактная форма
  • Настраиваемые изображения
  • Таблицы с ценами
  • Отзывы
  • Видео плеер и еще много чего…

Как работать с плагином SiteOrigin бандл виджетов

Устанавливается плагин SiteOrigin бандл вместе с основным плагином Page Builder by site Origin с дистрибутива wordpress. Можно сказать, что функционируют они оба в паре. Сам по себе виджет бандл работать не будет, ему нужен пэйдж билдер. Плагин Page Builder — популярный «строитель страниц», с помощью которого можно реализовать адаптивную разметку веб-страницы (layouts) любой сложности. Данная сетка представляет собой ряды (те, кто знаком с библиотекой bootstrap понимают, о чем идет речь). В ряд (row) можно разместить от одной до 12 колонок. Затем в каждую колонку вставляется контент: текст, фотографии, видео и т. д.



С помощью плагина Page Builder делается отзывчивая разметка веб-страницы из нескольких рядов. Их можно менять местами, копировать и перетягивать благодаря встроенному в плагин drug and drop конструктор. C помощью виджетов, входящих в состав плагина SiteOrigin, в разметку вставляется любой контент веб-страницы. Плагин устанавливается через меню Плагины и после его активации в меню появится раздел SiteOrigin виджеты. Сюда нужно зайти и активировать те, которые потребуются для вашей работы.

Делаем первый экран сайта wordpress

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

Делаем заголовок, текст и кнопку

 

ряд с одной колонкой на всю ширину

 

Итак, переключаемся в режим пейдж билдера и вставляем ряд с одной колонкой на всю ширину экрана. В настройке ряда нужно выбрать опцию «на всю ширину», чтобы ширина первого экрана была от одного края браузера, до другого, без отступов по бокам. Затем жмем на кнопку «Добавить виджет» и выбираем SiteOrigin Hero в меню «Набор виджетов».

 

виджет site origin hero

 

Далее жмем на значок редактировать (гаечный ключ) и открываем первый кадр для настройки. Сначала в области редактора нужно написать текст. Для примера я напишу заголовок h1 c таким содержанием: «Как сделать первый экран сайта». После заголовка напишу небольшой текст: «Если вы не знаете, как сделать первый экран сайта, то дочитайте эту статью до конца, и вы сразу же все поймете». После текста я вставлю под ним шорткод со словом [buttons]. Таким образом, я выведу кнопку в нужном мне месте. Кнопку и текст с помощью инструментов выравнивания в визуальном редакторе я выровнял по левому краю экрана.

Настраиваем кнопку

Кнопка имеет такие настройки:

  • Текст кнопки – вставляем свой, (например Читать)
  • url кнопки вставляем абсолютный или относительный путь к странице или фрагменту контента на текущей странице
  • иконка кнопки – выбираем, какую нужно
  • цвет иконки
  • изображение иконки
  • выравнивание иконки относительно текста

Я выбрал иконку значок стрелка вправо, сделал её черного цвета и разместил ее справа от текста.

В разделе Дизайн и верстка кнопки я выбрал дизайн wire, цвет кнопки черный и цвет текста черный, поскольку буду использовать светлое контрастное фоновое изображение. Остальные настройки я оставил как есть по умолчанию. Надо отметить, что разработчики плагина сделали так, что каждый элемент контента в нем легко кастомизировать и интерфейс здесь предельно простой и понятный.

Настраиваем фоновое изображение

 

настройка фонового изображения первого экрана сайта

 

Переходим в раздел фон и выбираем изображение на заднем плане с медиа библиотеки сайта. Размер картинки выставляем как full, то есть полный и тип фона Cover – растягиваемый на всю ширину. Если нужно, вставляем ссылку на внешний сайт или внутреннюю страницу сайта в поле url.

Настраиваем текст заголовка

Настройки шрифта заголовка и текста под заголовком можно увидеть в разделе Дизайн и верстка. Здесь находятся все опции настройки главного экрана сайта. Например ширина первого экрана, то есть максимальная ширина контейнера, высота первого экрана сайта, верхний и нижний отступ (padding). Базовые настройки шрифта такие:

  • Семейство шрифта для заголовка (я выбрал Mark Script)
  • Цвет шрифта
  • Размер шрифта
  • Тень шрифта

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



В поле верхний и нижний отступ для текста я увеличил его сверху и снизу с 50px до 150px. Так же задал дополнительный отступ сверху 80px. Таким образом текст опустился в нужное мне место. В самом низу окна настроек находится кнопка Предпросмотр. С ее помощью можно посмотреть результат кастомизации контента без предварительного сохранения.

Заключение

Я сделал скриншот своего главного экрана сайта и сделал его основным изображеним записи этого поста. Надеюсь, что вам стало понятно, как сделать главный экран сайта на вордпрес и у вас получится лучше, чем у меня. Если вы используете плагин Page builder и сборник виджетов от Site Origin, то прошу оставить свой отзыв о нем в комментариях.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

7 − 5 =