Как настроить веб-сайт WordPress с помощью Elementor

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В предыдущей части этого урока How to Build a WordPress Website With Elementor я показал вам, как настроить веб-сайт WordPress с помощью Elementor. Мы установили необходимые плагины, включая плагин Envato Elements WordPress, а затем использовали набор шаблонов для подготовки простого веб-сайта с четырьмя страницами.

В этой, второй и заключительной части, мы будем настраивать эти страницы. Давайте начнём!

Вспомним: что такое Elementor?

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

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

Настройка страниц с Elementor

1. Настройка нашего сайта

Начнем с настройки цветов нашего сайта. Мы выберем страницу для редактирования, перейдя на Pages и выбрав домашнюю страницу. Мы создаем новый раздел (для демонстрационных целей) в верхней части страницы, нажимая значок + на вкладке элемента:

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

Чтобы изменить цвет, перейдите в редактор Elementor Menu> Default Colors и вы увидите цветовую палитру:

Можем выбрать любую из палитр, перечисленных в разделе More Palettes. Изменения будут отражены на странице в реальном времени.

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

Любые внесенные изменения не будут затронуты никакими будущими изменениями в глобальных стилях; вы просто переписали их для этого виджета.

Настройка шрифтов

Далее, чтобы редактировать шрифты по всему шаблону, перейдите в Menu > Default Fonts. Вы сможете установить стили для заголовков, основного и выделенного текста. И он работает так же, как и с цветами: сделайте глобальные изменения на весь шаблон или введите виджет, чтобы переопределить эти параметры на его уровне.

2. Последние штрихи

Есть ещё одна или две детали, которые мы хотим изменить, редактируя веб-сайт с Elementor. Например, раздел темы “Twenty Seventeen”, который присутствует на каждой странице, должен идти:

Мы можем сделать это, вернувшись к странице в администраторе и изменив шаблон страницы с Elementor Full Width до Elementor Canvas.

Дублирующие элементы

Давайте добавим четвертый «Flip Box» на нашу домашнюю страницу. Флип-боксы являются превосходной функцией Elementor и позволяют нам создавать блоки, которые показывают дополнительную информацию. Мы можем дублировать один из существующих боксов и макет раздела автоматически окажется с четырьмя столбцами вместо трёх:

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

Изменение полей

Мне хотелось бы изменить отступы наших анимационных заголовков (например, на странице меню). Верхняя строка текста сидит прямо над основным заголовком.

Выбрав заголовок и нажав кнопку edit (значок карандаша), затем вкладку Advanced, мы можем изменить конкретные параметры этого элемента. Здесь я изменю верхнюю границу от -60px до 0. Исправлено.

Изменение фона в разделе

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

Мы можем изменить изображение, а затем, перейдя к настройкам Background Overlay, поменяем непрозрачность, местоположение и более сложные параметры, такие как CSS Filters (опять же, не касаясь строки кода).

Использование блоков

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

Например, на домашней странице создайте новый раздел наверху (еще раз, только для демонстрационных целей). Нажмите значок Folder и перейдите к Blocks в появившемся модуле. Получите массу блоков, которую вы можете фильтровать, попробуйте фильтровать «header»:

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

Как только мы внесли изменения в наш блок, правым щелчком по нему можем перейти к Save as Template. Этот блок теперь будет сохранен в библиотеке в разделе My Templates, готовый к повторному использованию на других страницах.

Посмотреть для себя!

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