Настройка внешнего вида WordPress

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

Начнем с установки шаблона.

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

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

Но и этот вариант нам не подходит, т.к. темв здесь тоже, в основном, примитивные и малопримечательные, поэтому тему мы идем искать к специализированным разработчикам.

Я далеко ходить не стал в выбрал довольно популярную студию Template Monster, которая разрабатывает крутые шаблоны для различных CMS, в т.ч. и для WP. На их оффициальном сайте вы найдете тысячи качественных шаблонов различных тематик, как платных так и бесплатных.

Для нашего проекта я выбрал бесплатный шаблон Worky Lite. Скачиваем тему, предварительно зарегистрировавшись на сайте, разархивируем скачанную тему и кроме прочего находим там архив worky.zip, который содержит установочные файлы данного шаблона.

Потом на следующем шаге в разделе Добавить темы жмем кнопку Загрузить тему, и загружаем наш архив, после чего жмем Установить.

В результате мы видим на экране сообщение об успешной установке и выбираем дальнейшее действие. Жмем Активировать тему и после этого видим нашу новую тему в списке всех шаблонов, установленных на нашем сайте. Жмем Настроить.

Уже на этом этапе на фронте сайта (на его главной и остальных страницах) мы видим нашу тему, но пока еще ничего не понятно, т.к. выводится базовый демо-контент, который в дальнейшем мы будем создавать и настраивать.

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

Суть здесь в том, что каждый элемент дизайна сайта поддается довольно точной настройке и результат сразу виден в правой части экрана. Особенно удобно что есть возможность самостоятельно писать свои правила CSS, а в большинстве тем еще и JS в разделе Дополнительные темы (скипты).

Далее рассмотрим еще одно интересное дополнение, а именно ELEMENTOR — специальный конструтор для редактирования страниц. С его помощью мы можем еще глубже редактировать дизайн страниц, а самое главное — создавать практически любые необходимые элементы (формы обратной связи, слайдеры, аккордеоны, множество других полезных виджетов) и практически безгранично их настраивать. 

Для установки Elementor идем в Плагины — Добавить новый и вводим в поиске elementor.

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

Итак, нажимаем Установить и бесплатная версия плагина устанавливается на наш сайт, не забываем Активировать.

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

На приветственной странице установщика мы видим видеообзор, который я рекомендую посмотреть, а также ссылка на документацию и ссылка для создания первой страницы в Elementor.

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

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

Первым делом жмем на «+» и создаем строку (сколько угодно), а в ней определяем компоновку колонок, а далее в эти колонки мы можем перенести любой элемент из левой колонки. Тут есть все — от  текстовых блоков и заголовков до SoundCloud плеера. Также там находятся все стандартные виджеты WordPress, а также подцепляются виджеты сторонних компонентов (например, WooCommerce).

Когда выбранный элемент находится на своем месте на странице, нажатие на нем вызывает его настройки, которые видны в левой колонке.

Далее рекомендую посмотреть МАНУАЛ ПО ELEMENTOR там подробно рассказано о всех элементах и правильной работе с ними, а я на этом сегодня закончу.

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

Post a comment