Elementor wordpress как пользоваться

Elementor WordPress: как пользоваться плагином с максимальной эффективностью для бизнеса

Как мы неоднократно писали, платформа WordPress продолжает сохранять лидирующие позиции на рынке, как решение, позволяющее создавать сайты с готовым дизайном и допиливать по своему усмотрению тысячи предлагаемых шаблонов. Однако нестандартные или имиджевые проекты могут требовать уникальной верстки и тогда типовым набором шаблоном не обойтись. Для создания полностью уникальных страниц WordPress предлагает вашему вниманию плагин Elementor, о котором и пойдет речь в данной статье: мы разберем, как устанавливать и использовать данный инструмент, а также скажем несколько слов об отличиях между бесплатной и платной версиями.

Что же такое Elementor? Плагин, имеющий полное название Elementor Website Builder, — один из наиболее популярных инструментов WordPress (более пяти миллионов пользователей на конец 2020), который позволяет серьезно проапгрейдить дефолтный редактор. По сути это конструктор для веб-дизайна, построенный на таком способе оперирования элементами интерфейса в интерфейсах пользователя, как drag-and-drop: добавление нужного элемента на страницу производится посредством его захвата курсором мыши и перемещения в поле для редактирования. Страница по сути собирается словно из кусочков пазла из специальных элементов-виджетов. Благодаря этому любые изменения на странице отображаются в реальном времени в рабочей среде конструктора, что дает основание называть Elementor визуальным редактором.

Как и многие другие WP-плагины, Elementor предлагает вам бесплатную и платную (Pro) версии. Вторая имеет несколько больше функций и виджетов в своей библиотеке, однако строится на том же принципе. Поэтому мы начнем с рассмотрения базовых особенностей этого сайтового конструктора.

Elementor: обзор особенностей плагина

Разнообразие возможностей, которые предлагает Elementor, можно свести к трем основных группам: визуальное редактирование, адаптивность и библиотека виджетов. Остановимся чуть подробнее на каждой из них:

• Визуальное редактирование. Когда вы начинаете конструировать страницы в Elementor, то можете просматривать вносимые изменения в реальном времени (правда для этого требуется переход в режим “Просмотр страницы” из админки WordPress.
• Адаптивная верстка. Независимо от того, с какого устройства вы будете заходить на страницы сайтов, созданных в Elementor, они всегда будут корректно отображаться, подстраиваясь под разрешение конкретного гаджета.
• Библиотека виджетов. Виджетами принято называть блоки, из которых, как их кирпичиков, собирается здание нового сайта. С помощью мыши они легко переносятся из библиотеки в поле конструирования страницы. Далее каждый виджет можно настроить под задачи и дизайн вашего проекта.

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

• Заголовок. Нужен для структурирования текста и размещения крупных надписей.
• Изображение. Позволяет иллюстрировать статьи, карточки товаров и услуг релевантными фотографиями и рисунками.
• Видео. С его помощью на странице можно размещать ссылки на видеохостинги (YouTube, Vimeo и т.д.) в виде медиапроигрывателя.
• Кнопка. Ссылка на любые ресурсы и сервисы оформляется в виде кнопки любого дизайна.
• Отзывы. Позволяет подключать блок, в котором отображаются клиентские отзывы на ваши товары и услуги.
• Социальные кнопки. Иконки соцсетей, при нажатии на которые клиенты могут переходить с сайта на ваши представительства в разных соцсетях (ВКонтакте, Facebook, Instagram и т.д.).

• Галерея изображений. Позволяет размещать изображения на странице сайтов в виде сеток или каруселей.
• Форма. Используется для создания и настройки полей, в которые клиенты будут вносить свои данные (например, адреса, куда нужно доставить товары).
• Цитаты. Части текста на странице можно трансформировать в визуальный якорь, отличающийся по дизайну от основной части контента.
• Логин. Можно создавать форму для авторизации ваших клиентов на сайте.
• Прайс-лист и каталог товаров. Блок, в который удобно вносить описание ваших товаров и услуг, условий приобретения и доставки.

Создание сайта в Elementor

Создание сайта на WordPress Elementor начинается с установки этого плагина, создания новой (или выбора уже существующей) страницы и редактирования ее дизайна. Рассмотрим подробнее каждый этап.

Установка Elementor на WordPress

Процесс установки Elementor мало чем отличается от аналогичной процедуры для других WP-плагинов. По сути все, что вам нужно — зайти в административную панель WordPress, в поле “Плагины” нажать кнопку “Добавить новый из списка”, вбить в поисковую строку название “Elementor” и кликнуть на кнопку “Установить”, а затем — “Активировать”. Когда активация будет завершена, вас перекинет на страницу с приветствием от разработчиков и видеопрезентацией возможностей плагина на английском языке. Просмотрев или пропустив ее вы можете приступать к созданию страниц сайта с помощью Elementor.

Создание новых страниц в Elementor

Добавление новых веб-страниц и их редактура в Elementor осуществляется следующим образом. В главном меню плагина вы переходите в раздел “Страницы” и добавляете там новую. Затем в панели вверху находите и нажимаете кнопку “Редактировать в Elementor”. Если вы хотите изменить с помощью Elementor дизайн уже существующей страницы, то нужно выбрать ее в “Станицах” и также кликнуть по “Редактировать…”. После этого откроется редактор Elementor в котором и будут производиться основные работы.

Редактирование дизайна страниц в Elementor

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

• Содержимое. В этой вкладке настраивается содержательная часть: например, какая именно надпись будет размещена на кнопке действия;
• Стиль. Отсюда можно настраивать цвет, размер и другие более тонкие аспекты дизайна виджета;
• Расширенные. Предназначена для более редких опций, например — анимирования тех или иных элементов дизайна или загрузки сторонних таблиц стилей CSS.

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

Когда первый виджет будет размещен в нужном месте страницы и настроен, можно переходить к следующим. В правой части панели управления WordPress есть кнопка “Сохранить”, благодаря которой вы не потеряете результаты своей работы. Нажав же “Опубликовать” вы сделаете доступным измененные страницы всем пользователям интернета.

Шаблоны Elementor

Бывают ситуации, когда вы ограничены во времени и не можете позволить себе кропотливо собирать из разных виджетов пазл страницы вручную. Тогда можно воспользоваться готовыми шаблонами из библиотеки Elementor: в бесплатной версии их меньше десятка, чтобы получить доступ к полному каталогу придется приобрести версию Pro.

Для просмотра библиотеки шаблонов вам нужно кликнуть по центральной кнопке в правой части редактора. Там вы найдете список шаблонов (платные будут маркированы как “Pro”). После выбора заинтересовавшего вас шаблона, кликните по “Вставить”. Далее нужно будет связать сайт с Elementor, заведя аккаунт в его системе, если это не было сделано ранее. После этого вы получите возможность для косметического редактирования выбранного шаблона.

Чтобы лучше понять, что из себя представляют готовые темы Elementor, рассмотрим одну из самых популярных из них. Так, большинство пользователей, приобретающих коробочную версию продукта, используют шаблон “Hello”. Именно эта тема используется при тестировании новых версий Elementor, что гарантирует высокую скорость работы сайта на ней и отсутствие багов. Hello может похвастаться прекрасной совместимостью с большинством WordPress-плагинов благодаря лаконичности дизайна и незаскриптованности, что делает ее привлекательной в качестве начальной темы для многих сайтов. Даже достаточно требовательные проекты, занимающиеся интернет-торговлей, часто выбирают Hello для сайтов, сделанных в Elementor WooCommerce Builder — не в последнюю очередь потому, что код Hello идеально оптимизирован под SEO-продвижение.

Elementor Pro

Как уже говорилось выше, платная версия Elementor может облегчить вам жизнь за счет более широкого набора виджетов и готовых шаблонов страниц. Основные отличия Elementor Pro от бесплатной версии можно представить в виде следующего списка:

• Распространяется в виде годовой подписки; в среднем обходится от 50 до 200 долларов;
• Становятся доступны виджеты, размещенные в категориях “Pro” и “Woocommerce” — последние незаменимы при создании интернет-магазинов. Общее число доступных виджетов приближается к 100;
• Можно создавать pop-up-окна для разных акций и других способов привлечения клиентов;
• Библиотека готовых шаблонов страниц насчитывает более 300 тем — это в десятки раз больше, чем в бесплатном варианте плагина. 15 из них созданы на WooCommerce и предназначены для электронной коммерции;
• Кроме основного поля страниц сайта вы сможете создавать дизайн и для шапки (header) и подвала (footer).

Облачный веб-сайт Elementor

В 2021 году разработчики Elementor презентовали новый проект — облачную платформу, оптимизированную под создание на ней интернет-проектов в редакторе Elementor. Сервис получил название Elementor Cloud Website и хотя Elementor не прекратил развиваться в качестве автономного WordPress-плагина, добавление возможности переносить все работы по созданию сайтов на базе WP существенно упростило жизнь многим пользователям. Так, например, команда Elementor взяла на себя вопросы по настройке сервера: облачный хостинг всегда будет идеально оптимизирован под работу в конструкторе Elementor.

За что вы платите, выбирая Elementor Cloud? В коробочной версии вам будет доступно создание одного сайта на базе последней версии WordPress на хостинге объемом 20 Гб, SSL-сертификат, подключение вашего домена, весь обвес Elementor PRO, десятки установленных плагинов, дефолтная тема Hello, упомянутая выше, а также ежедневное резервное копирование данных.

Хостинги под Elementor

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

Поэтому мы рекомендуем доверять в этом вопросе специалистам и тщательно выбирать хостинг-провайдера. Обратившись в Максиплейс, вы можете получить готовое решение: хостинг под WordPress с Elementor нужного объема дискового пространства и установленной темой Hello Elementor. Возможность переносить все работы по созданию сайтов на базе WP в наше облако существенно упростит жизнь любой коммерческой организации. Так наша команда возьмет на себя вопросы по настройке сервера: облачный хостинг всегда будет идеально оптимизирован под работу в конструкторе Elementor. Мы настроим все необходимые php-расширения, поможем с оптимизацией скорости работы сайта (привет CEO-показатели!), а, главное, будем на связи 24/7 для оказания тех.поддержки.

За что вы будете платить, выбирая решение от Максиплейс? В коробочной версии вам будет доступно не только создание сайтов на базе последней версии WordPress на хостинге любого объема, но и SSL-сертификат безопасности, подключение вашего домена, весь обвес Elementor PRO, десятки установленных плагинов, дефолтная тема Hello Elementor, упомянутая выше, а также ежедневное резервное копирование данных.

Резюме

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

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

Статья добавлена 9 месяцев назад. Автор — Blog Admin

Как использовать Elementor: полное руководство 2023 года

Сегодня мы собираемся показать вам, как использовать Elementor для создания страниц и блоков вашего веб-сайта.

Конструкторы страниц стали неотъемлемой частью веб-разработки для тех, кто практически не имеет опыта создания веб-сайтов.

Один из Самый популярный конструктор страниц — Elementor. который доступен бесплатно и с дополнительными функциями в премиум-режиме.

Как использовать Elementor Полное руководство

В этом посте мы объясним, почему мы считаем Elementor идеальным конструктором страниц для начала работы на вашем веб-сайте WordPress:

Знакомство с Elementor

Первое знакомство пользователя с вашим сайтом оставляет неизгладимое впечатление.

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

Очень важно сначала установить тему, совместимую с Elementor.

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

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

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

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

Вы можете установить Elementor, посетив их собственный веб-сайт а затем загрузив загруженный zip-файл на свой WordPress или перейдя в репозиторий плагинов WordPress, выполнив поиск «Elementor» и нажав «Установить».

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

Возможности, которые может предложить Elementor

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

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

Настройка на Elementor сосредоточен вокруг виджетов, и как только вы привыкнете перетаскивать свои виджеты на страницу, вы поймете, почему это намного лучше, чем иметь дело с построителем вашей темы по умолчанию.

Каждая страница в WordPress состоит из разделов, и это является основой построения страниц с помощью Elementor.

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

Функция перетаскивания позволяет ускорить создание веб-страниц, напоминая инструмент дизайна.

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

Кроме того, вам по-прежнему нужна тема для редактирования верхнего и нижнего колонтитула, если вы планируете использовать бесплатную версию Elementor.

Elementor Free против Elementor Pro

Основное различие между ними заключается в количестве виджетов, предлагаемых в версии Pro.

Поэтому обязательно проверьте, нужны ли они вам в вашем дизайне.

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

Что касается виджетов, это основные виджеты, доступные в бесплатной версии:

• Заголовок
• Фото товара
• Текстовый редактор
• Видео
• Button
• Делитель
• Значок
• Прокладка
• Google Maps

Вот некоторые из виджетов, доступных в версии Pro:

• ПОРТФОЛИО
• Форма
• Откидная коробка
• Ценовой стол
• BLOCKQUOTE
• Призыв к действию

Вся полезная информация для принятия окончательного обоснованного решения о том, стоит ли обновляться до Elementor Pro, представлена ​​ниже.

Но в целом мы рекомендуем вам поиграть с бесплатной версией, пока вы не будете уверены, что Elementor — лучший конструктор страниц WordPress для вас.

Elementor Бесплатно	Факир Pro
Цена	Это Бесплатно	49, 99, 199 долларов в год
Количество виджетов	25+	50+
Page Builder	Доступно	Доступно
Theme Builder	Не указаны	Доступно
Поддержка	Не указаны	Доступно
Динамический контент	Не указаны	Доступно
Профессиональные шаблоны и блоки	Не указаны	Доступно
Интеграция с электронной коммерцией	Не указаны	Доступно

В конечном счете, уверенность в том, что служба поддержки Elementor предоставит вам помощь в версии Pro, — вот что заставляет нас твердо поверить в версию Pro.

У него есть некоторые нишевые функции, которые вы сможете использовать с другими плагинами, но почему бы не сделать все в одном месте.

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

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

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

Среда редактирования

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

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

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

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

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

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

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

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

Параметры вкладки «Стиль» (цвет, тип шрифта, размер) позволяют настраивать содержимое блоков в соответствии с вашими потребностями.

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

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

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

Версия Pro также содержит больше блоков, шаблонов и виджетов.

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

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

Цены на Elementor Pro

Судя по приведенной выше таблице, если вы уверены, что Elementor Pro — правильный выбор для вас, то у команды Elementor есть 3 разных плана, с которыми вы можете начать работу, в зависимости от количества необходимых лицензий.

Заключение

В общем, сочетание Elementor (бесплатного или Pro) с мощной темой, закрывающей слепые зоны, в большинстве случаев является правильным решением.

Поэтому обязательно ознакомьтесь с нашим списком предлагаемые темы для использования вместе с вашим новым конструктором страниц.

Руководство по работе с WordPress в конструкторе Elementor

Elementor — это конструктор страниц для WordPress, популярная альтернатива для встроенного редактора блоков Gutenberg.

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

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

Сразу после установки и активации плагина откроется мастер первичной настройки Elementor. В нём вам на нескольких экранах предложат создать аккаунт на сайте конструктора, придумать название для вашего сайта, загрузить для его логотип, а также установить тему от разработчиков плагина — Hello Elementor.

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

Чтобы закрыть экран первичной настройки Elementor, нажмите крестик в правом верхнем углу экрана.

Как попасть в Elementor

Создайте новую публикацию или откройте существующую в стандартном редакторе WordPress, а затем нажмите на верхней панели кнопку «Редактировать в Elementor». После этого публикация конвертируется для работы в новом конструкторе.

Если потом снова открыть публикацию в Gutenberg, вместо содержимого страницы в её центре будет кнопка «Редактировать в Elementor». Пока для публикации включён Elementor, менять содержимое в стандартном редакторе WordPress нельзя.

Чтобы переключиться с Elementor обратно на Gutenberg, нажмите на верхней панели редактора кнопку «Вернуться к редактору WordPress».

В разделах «Страницы» и «Записи» у публикаций, которые вы конвертировали для работы в новом конструкторе, появится дополнительная кнопка — «Редактировать в Elementor». Так можно перейти к редактированию в Elementor, не открывая страницу сначала в Gutenberg.

Также кнопка «Редактировать в Elementor» будет на верхней панели WordPress во время просмотра публикации. Чтобы эта панель отображалась, нужно сначала войти в админку WordPress.

Как устроен Elementor

Как и стандартный редактор WordPress, Elementor визуально делится на две части:

• Боковая панель . На ней будут инструменты управления конструктором: виджеты для создания страниц и их параметры, а также глобальные настройки сайта и конструктора Elementor.
• Визуальный редактор . В нём будет содержимое публикации, которое вы загрузите из библиотеки или создадите вручную, перетаскивая виджеты с боковой панели.

Если понадобится вернуться из Elementor в консоль WordPress, нажмите кнопку ☰ в левом верхнем углу боковой панели, а затем кнопку «Выйти в консоль».

Как работать в Elementor

В Elementor есть два способа сделать страницу: 1) импортировать шаблон с готовым дизайном и потом переделать его содержимое под свой бизнес; 2) секция за секцией с нуля собрать всё вручную из виджетов.

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

Библиотека шаблонов

В обведённом пунктирной линией прямоугольнике внутри визуального редактора нажмите кнопку с изображением папки. Это вход в библиотеку шаблонов Elementor.

Шаблоны делятся на бесплатные и платные. У платных в правом верхнем углу превью будет метка со словом «PRO» или «EXPERT», они доступны только владельцам платных версий плагина — «Elementor PRO». У бесплатных шаблонов не будет никаких меток.

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

Чтобы импортировать шаблон, нажмите зелёную кнопку «Вставить» внизу превью, либо в правом верхнем углу режима предварительного просмотра. После этого вам понадобится создать бесплатный аккаунт на сайте Elementor, чтобы продолжить.

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

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

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

Принцип построения страниц

Будет проще уловить идею создания страниц в Elementor, если импортировать готовую страницу и подробно её рассмотреть. Для примера импортируем шаблон «Restaurant – About».

После импорта наведите курсор на титульный баннер. Вы увидите вокруг баннера голубую рамку с ярлыком в верхней её части, на котором расположены три кнопки:

• + — добавить новую секцию;
• . — редактировать секцию;
• x — удалить секцию.

Внутри этой же секции вы также найдёте две колонки — их границы обозначаются серой пунктирной линией. А уже внутри колонок будут виджеты — их границы обозначаются голубым цветом.

Рассматривая страницу дальше, вы заметите, что она целиком состоит из секций. В них будет разное количество колонок — где-то одна, где-то две — но на общем уровне структура всегда будет одинаковой: секция > колонка > виджет.

Структура любой страницы в Elementor: секция > колонка > виджет.

Базовое управление элементами

У каждого элемента в визуальном редакторе есть значок, при помощи которого с этим элементом можно взаимодействовать:

• ✎ — для виджетов;
• ◫ — для колонок;
• . — для секций.

За этот значок элементы можно перетаскивать в другое место на странице. Синяя полоска поможет понять, куда элемент приземлится.

По клику на значке левой кнопкой мыши на боковой панели Elementor откроются параметры внешнего вида этого элемента. С их помощью вы сможете изменить содержимое и дизайн элемента.

По клику на значке правой кнопкой мыши откроется окно с базовыми действиями, которые можно совершить с элементом: редактировать, дублировать, копировать или сбросить форматирование, удалить.

Параметры элементов

Параметры любого элемента на боковой панели разделены для удобства на три вкладки: «Макет» (если вы выбрали секцию или колонку) либо «Содержимое» (если выбрали виджет), а также «Стиль» и «Расширенные».

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

• «Макет»/«Содержимое» — наполнение виджета и его позиция в контейнере;
• «Стиль» — цвета, шрифты и их типографика;
• «Расширенные» — отступы, тени, фон и разные эффекты вроде анимации.

Если работаете с Elementor впервые, поэкспериментируйте с настройками. Так вы быстрее освоитесь в конструкторе и запомните, где что находится. А если результат вам не понравится, всегда можно отменить предыдущие действия при помощи комбинации клавиш Ctrl+Z.

Параметры публикации

В нижней части боковой панели будут кнопки для управления процессом создания страницы:

1. Настройки — место, где можно изменить или убрать заголовок публикации, выбрать другой макет страницы или добавить титульное изображение.
2. Навигатор — отображает дерево из всех присутствующих на странице виджетов.
3. История — список последних совершённых действий и сохранённых версий публикации с возможностью откатиться на любой из этапов.
4. Режим адаптивности — переключатель между устройствами, который позволяет увидеть, как выглядит сайт на экране планшета или смартфона.
5. Просмотреть изменения — предпросмотр страницы глазами пользователя без публикации изменений.
6. Опубликовать/Обновить — применить изменения для всех пользователей.

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

Создание секций вручную

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

Исходя из структуры страницы «секция > колонка > виджет», начать нужно с создания новой секции. Для этого нажмите кнопку со знаком + внутри обведённого пунктирной линией прямоугольника в визуальном редакторе.

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

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

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

Найти нужный виджет можно вручную, а можно при помощи поиска вверху панели. Начните вводить в строке поиска название виджета, например, «Текст» или «Иконки соцсетей» и Elementor скроет все виджеты, в названии которых нет введённых букв.

Когда понадобится вернуться к списку виджетов, потому что на панели отображается что-то другое, нажмите кнопку ⁝⁝⁝ в правом верхнем углу панели.

Как создать шапку и подвал сайта в Elementor

Обычно шапка и подвал сайта создаются не в визуальном редакторе типа Gutenberg или Elementor, а в настройщике темы — разделе «Внешний вид – Настроить» в консоли WordPress.

Функционал, который у вас там будет, сильно зависит от используемой темы: это может быть целый конструктор с возможностью создать шапку из нескольких уровней, а может быть и всего пара опций из разряда «Загрузить логотип» и «Подключить меню». Например, вот как устроен конструктор шапки в теме Astra.

Чтобы обойти стандартный настройщик WordPress и создать шапку именно при помощи конструктора Elementor, установите бесплатный плагин «Elementor Header & Footer Builder». Он должен работать с любой темой.

После установки и активации плагина в разделе «Внешний вид» в консоли WordPress появится новый подраздел — «Elementor Header & Footer Builder».

Возле заголовка «Elementor Header & Footer Builder» в новом подразделе нажмите кнопку «Add New», чтобы создать шапку или подвал.

Появится всплывающее окно, где авторы плагина попросят вас поделиться информацией об уровне владения WordPress и заказчике сайта, а также электронной почтой и именем для рассылки. Отвечать на вопросы и оставлять почту не обязательно, можно просто нажать «Skip» под синей кнопкой.

В открывшемся разделе придумайте заголовок для созданной сущности. Например, «Шапка» или «Подвал». Чуть ниже в блоке «Elementor Header & Footer Builder Options» выберите, что именно создаёте:

• Header — шапка;
• Before Footer — перед подвалом;
• Footer — подвал;
• Custom Block — другой блок.

В зависимости от того, что вы выбрали, ниже появятся дополнительные опции. Для вариантов «Header», «Before Footer» и «Footer» появятся две опции: «Display On» и «User Roles». Для варианта «Custom Block» появится шорткод, который можно будет вставить в любое место на сайте после создания меню в конструкторе Elementor.

Опция «Display On» — это место, в котором должна отображаться шапка или подвал. Если нужно, чтобы шапка отображалась на всём сайте, выберите вариант «Entire Website».

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

Опция «User Roles» — это роль посетителей, которые будут видеть шапку или подвал. Чтобы шапка отображалась для всех посетителей, выберите вариант «All».

Благодаря этой опции, вы можете сделать разные меню для посетителей, которые вошли в личный кабинет (вариант «Logged In»), и посетителей, которые в него не вошли (вариант «Logged Out»).

После того как определитесь с правилами отображения шапки или подвала, а также ролями пользователей, переходите в конструктор при помощи кнопки «Редактировать в Elementor». В нём всё будет точно так же, как и при редактировании основного сайта.

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

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

Настройки конструктора в Elementor

Таких настроек будет совсем немного. Чтобы найти их, нажмите кнопку ☰ в левом верхнем углу боковой панели конструктора и перейдите в раздел «Пользовательские предпочтения».

Тема интерфейса

Есть светлая и тёмная. По умолчанию тема будет определяться автоматически, в зависимости от цвета темы вашей операционной системы.

Ширина панели

Пригодится, если вы для вас боковая панель слишком широкая или наоборот слишком узкая. Значение по умолчанию — 300 пикселей.

Кнопки управления

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

Включить лайтбокс в редакторе

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

Чтобы лайтбокс заработал, недостаточно просто активировать переключатель в настройках. Нужно также включить его непосредственно в параметрах виджета с изображением. Делается это на вкладке «Содержимое» в два шага: 1) выберите в опции «Ссылка» вариант «Медиафайл»; 2) в появившейся опции «Лайтбокс» выберите вариант «Да».

Скрытые элементы

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

Чтобы скрыть элемент, перейдите в его параметрах на боковой панели на вкладку «Расширенные», а затем раскройте раздел «Адаптивность». В нём вы увидите три выключателя, которые скроют элемент на компьютере, планшете или телефоне.

Предположим вы скрываете элемент для смартфонов. Посмотреть результат можно при помощи кнопки с устройствами в нижней части боковой панели. Нажмите на неё, после чего в верхней части рабочей области можно будет выбрать устройство.

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

Если отключить опцию «Скрытые элементы» в настройках конструктора, скрытые секции исчезнут даже в конструкторе, перестанут отображаться серым цветом.

Просмотр элемента по умолчанию

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

Настройки сайта в Elementor

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

Чтобы открыть этот раздел, нажмите кнопку ☰ в левом верхнем углу боковой панели конструктора и перейдите в раздел «Настройки сайта».

Для удобства подразделы с настройками разделены на три группы: «Дизайн система», «Стили темы» и «Настройки». Расскажем вкратце про каждую группу.

Дизайн система

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

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

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

Чтобы присвоить элементу глобальный цвет, выберите его в визуальном редакторе и перейдите на боковой панели на вкладку «Стиль». Возле таких параметров как «Цвет» или «Типографика» вы увидите иконку планеты — ��. Нажмите на неё и увидите список созданных ранее глобальных параметров.

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

Вы также можете создать глобальный параметр прямо из свойств любого элемента. Для этого найдите подходящий цвет или настройте параметры текста, после чего нажмите + в правом верхнем углу всплывающего окна с параметрами. Дальше придумайте название глобального параметра и нажмите «Создать».

Стили темы

В эту группу входят четыре раздела: «Типографика», «Кнопки», «Изображения» и «Поля формы». В них вы можете создать общие стили для этих элементов. Например, присвоить глобальные параметры, которые создали в двух вышестоящих разделах.

Типографика — раздел для настройки параметров разных текстовых сущностей на сайте: обычного текста, текста ссылок и заголовков шести уровней

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

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

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

Поля формы — раздел для настройки контактных форм на сайте. У них может быть своя типографика и цвета, тени и стили границ, отступы внутри полей и скругление углов. Отдельно будут настройки названий полей и отдельно — их содержимого.

Настройки

В эту группу входят шесть разделов: «Айдентика сайта», «Фон», «Макет», «Лайтбокс», «Пользовательский CSS» и «Расширенные настройки». В них настраиваются более глобальные параметры сайта, которые не получается отнести к другим группам.

Айдентика сайта — раздел с настройками фирменных элементов вашего сайта: названия сайта, его краткого описания, логотипа и фавикона.

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

Фон — раздел, где можно задать фон для всего сайта сразу: сплошной цвет, градиент или изображение.

Макет — раздел с параметрами колонки, внутри которой находится содержимое сайта. При помощи опции «Ширина макета» вы можете регулировать размер полей по бокам от колонки, а при помощи опции «Макет страницы по умолчанию» — выбрать из трёх готовых макетов: стандартного макета темы и двух макетов Elementor (с полями и без).

В подразделе «Брейкпоинты» вы можете изменить стандартные значения ширины в пикселях, при которой содержимое сайта масштабируется под экраны планшетов или смартфонов.

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

Пользовательские CSS — раздел с возможностью добавить свой CSS-код для любого виджета Elementor. Доступен только в версии конструктора Elementor PRO.

Расширенные настройки — раздел с настройками оптимизации работы конструктора для продвинутых пользователей. При переходе в этот раздел в интерфейсе Elementor, вас перенаправит в консоль WordPress.

В этом разделе будет пять вкладок с настройками: «Общие», «Стиль», «Интеграции», «Расширенные», «Эксперименты». В основном настройки здесь будут касаться этапов загрузки страницы в браузере, их можно оставить как есть.

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

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

Где взять больше шаблонов и виджетов для Elementor

Среди всех конструкторов для WordPress Elementor — самый популярный. Поэтому для него есть много бесплатных плагинов и даже отдельных сайтов, где вы найдёте дополнительные шаблоны и виджеты.

Плагины

Одни плагины добавят в панель управления WordPress шаблоны, сделанные только при помощи стандартных виджетов Elementor, а другие — также при помощи новых виджетов, которые разработал автор конкретного плагина.

Есть довольно много подобных плагинов, мы расскажем лишь про несколько самых популярных. Если ни один из них вам не подойдёт, введите в строке поиска раздела «Плагины – Добавить новый» слово «Elementor» и поищите подходящий сами.

1. Starter Templates — плагин от создателей популярной темы Astra. Добавляет 280+ готовых страниц и даже целых сайтов. Часть контента будет доступна только владельцам платной версии темы — Astra PRO.

После установки плагина библиотека шаблонов с возможностью импорта будет представлена в админке WordPress в виде подраздела в разделе «Внешний вид».

У нас в базе знаний есть инструкции по работе с этим плагином и темой Astra в целом:

• Обзор темы Astra
• Как пользоваться плагином Starter Templates

2. Premium Addons for Elementor — добавляет 60+ новых виджетов и 330+ шаблонов. Часть виджетов и шаблонов доступны бесплатно, часть — в версии PRO.

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

Разобраться в работе плагина вам помогут официальные обучающие материалы от разработчика:

• документация (на английском)
• канал на YouTube

3. Templately — добавляет обширную библиотеку шаблонов: 600+ блоков, 1000+ страниц и 200 готовых сайтов. Часть материалов доступны бесплатно, часть — в версии PRO.

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

4. Happy Addons for Elementor — добавляет 90+ виджетов и почти 500 шаблонов. Некоторые материалы будут доступны бесплатно, некоторые в версии PRO.

После установки плагина в боковом меню консоли WordPress появится отдельный раздел, а в визуальном редакторе Elementor в блоке добавления новой секции появится дополнительная кнопка с логотипом плагина.У плагина есть канал на YouTube, а также официальная документация отдельно для бесплатной и платной версий.

Сайты

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

1. MС Starters — компания, которая создаёт шаблоны в конструкторах Elementor и Divi и выкладывает всё это для свободного скачивания у себя на сайте. Все шаблоны доступны бесплатно.

Главное преимущество этого сайта — шаблоны для шапок и подвалов сайта. Такое не всегда есть в плагинах ещё и бесплатно.

В шапке сайта вы найдёте три раздела с содержимым для Elementor:

• Free Elementor Templates — шаблоны страниц;
• Free Elementor Header — шаблоны шапок сайта;
• Free Elementor Footer — шаблоны подвалов сайта.

На странице каждого шаблона есть кнопка «Live Preview», при нажатии на которую вы можете просмотреть его в полном размере. Если шаблон вам подходит, рядом с кнопкой «Live Preview» есть кнопка для скачивания — «Download Now».

Затем, чтобы загрузить шаблон, запустите Elementor и откройте библиотеку шаблонов — нажмите на значок с папкой внутри обведённого пунктирной линией прямоугольника в визуальном редакторе.

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

Что дальше

У нас есть много других материалов о создании сайта на WordPress, которые помогут вам найти ответы на популярные вопросы. Для удобства мы собрали ссылки на все эти материалы в общем руководстве:

Если после прочтения статьи у вас останутся вопросы по работе с Elementor, задайте их в комментариях к этому руководству, постараемся разобраться вместе.

Переезжайте к нам на хостинг

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

Мы не занимаемся разработкой сайтов, но всегда поможем настроить всё, что касается хостинга, доменных имён и SSL-сертификатов. Если сайт вдруг перестал работать или не понятно, как использовать хостинг, установить сертификат, настроить почту на домене или создать для него DNS-запись — обращайтесь!

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

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

В предыдущей части этого урока 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 позволяет нам изменять каждый аспект нового веб-сайта; текстовое содержимое, списки значков, заполнение отдельных разделов, виджеты контактной формы! Надеюсь, эта серия мини-уроков оказалась вам полезной, какие-либо вопросы или комментарии пишите в разделе ниже.

Полезные ссылки

• How to Build a WordPress Website With Elementor
• Beginner’s guide to using WordPress on YouTube
• Elementor plugin homepage
• Envato Elements WordPress plugin