Создание профессионально выглядящего веб-сайта не для всех, тем более, что мы все чувствовали, что вам абсолютно необходимо быть профессиональным программистом и веб-дизайнером. В настоящее время мы видим новые инструменты, появляющиеся в экосистеме WordPress, чтобы предоставить еще более простое решение для разработки веб-сайта, доступное для большинства новичков.
Что касается дизайна макетов WordPress, мы уже должны были представить плагин Визуальный Композитор, который, безусловно, является одним из лучших инструментов, когда дело доходит до дизайна макета. Однако следует отметить, что это решение подходит не для всех. Вот почему в этом уроке мы познакомим вас с Плагин Wordpress Элементор, который Плагин Wordpress freemium (бесплатно, но с возможностью расширения по подписке).
Где взять Elementor для WordPress
Мы серьезно подумываем о том, чтобы вы увидели потенциал этого плагина, и бесплатное решение поможет вам начать работу, не платя ни копейки. Это бесплатное решение доступно на WordPress.org. Быть Плагин Wordpress, последний устанавливается как любой другой плагин с приборной панели.
Если плагину удастся полностью удовлетворить вас, вы сможете получить полную лицензию со всеми функциями на сайте. официальный элемент.
Основные особенности Elementor
Перед тем, как начать руководство с обзором плагина, мы сначала познакомим вас с основными функциями плагина (бесплатная версия и полная версия).
| версия Free | Полная версия |
|---|---|
| Несколько столбцов | Меню навигации, статья |
| Модули Тексты, заголовки | Модули WooCommerce (товары, категории) |
| Видео модули, изображения, карусель, галереи, Soundcloud | Интеграция с Facebook (страница, кнопка, комментарии) |
| Модуль совместного доступа | цены Таблица |
| Модуль HTML | Портфолио, форма |
| Модуль для виджета WordPress | Модуль поиска |
Обратите внимание, что это несколько исчерпывающий список различных функций, предлагаемых плагином. Вы найдете более подробную информацию в изучение их веб-сайта.
Начало работы с Elementor
Мы не собираемся здесь описывать весь процесс установки. Поскольку это плагин WordPress, процедура установки уже была объяснена в предыдущий урок. Однако после установки вы попадете на домашнюю страницу плагина.
Если у вас на экране эта страница, то вы правильно установили Elementor плагин. В настоящее время мы используем полную версию для этого руководства, но интерфейс не должен сильно отличаться от бесплатной версии.
Прежде чем перейти к интерфейсу редактирования, я предлагаю вам зарегистрировать лицензию. Это действительно только для тех, кто выбрал полную версию. Если у вас есть бесплатная версия, вы можете перейти к следующему разделу. Чтобы зарегистрировать лицензию, вы увидите уведомление в WordPress, в котором вам будет предложено зарегистрировать лицензию.
Так что просто нажмите на нее, чтобы перейти на страницу регистрации, и нажмите активировать.
Обычно вам нужна страница подтверждения, если ваша лицензия действительна.
Если вы не попали на эту страницу, я приглашаю вас связаться с разработчиками плагина для получения дополнительной информации. помощь в решении проблемы.
Как использовать Elementor
Elementor работает со страницами и сообщениями в WordPress. Независимо от того, используете ли вы классический интерфейс или новый интерфейс Gutenberg, вы увидите кнопку, которая предложит вам использовать конструктор Elementor.
На практике вам не всегда нужно редактировать свои сообщения с помощью Elementor. Поэтому я предлагаю вам использовать плагин только на страницах. Нажав на кнопку, вы получите доступ к интерфейсу дизайна Elementor, который создает впечатление дежавю (для тех, кто использует настройщик WordPress).
Таким образом, слева у вас есть различные элементы управления, предлагаемые плагином, а справа - предварительный просмотр ваших изменений в реальном времени. В этом уроке мы используем тему Twenty Sixteen WordPress.
Разделы Elementor
Разделы в Elementor — это группы функциональных блоков, которые предлагает Elementor. Количество разделов зависит от того, используете ли вы полную версию и используете ли вы WooCommerce, Yoast SEO или другие совместимые плагины. В зависимости от этих условий у вас будет больше или меньше разделов в вашем интерфейсе. Так как мы используем полную версию с плагином WooCommerce активирован, вот как выглядит наш интерфейс.
Как разместить блок Elementor
Как только вы развернете раздел, вы найдете блоки Elementor. Различные блоки Elementor размещаются методом «перетаскивания» в области, выделенной пунктирными линиями.
Как выбрать макет на Elementor
Перед добавлением блока в Elementor вам нужно не забыть выбрать макет, нажав кнопку «+» в выделенном разделе.
В зависимости от ваших потребностей вы выберете наиболее подходящий вам макет. После того, как вы выбрали макет, у вас будет представление этого раздела в той же выделенной области. В этом разделе будет отображаться такое же количество столбцов, которое соответствует вашему выбору. В моем случае я выбрал столбец с 3 столбцами.
Различные блоки со знаком «+» внутри - это области, которые могут принимать блоки Elementor. Если вы добавляете блок Elementor без предварительного выбора макета, по умолчанию будет выбран макет с одним столбцом.
Разделы Elementor можно переупорядочивать между собой, следуя тому же принципу «перетаскивания». Вы также можете удалить раздел, если больше не хотите его использовать.
Вот пример раздела, который содержит 2 блока, а именно блок заголовка и блок текста.
Как использовать другие инструменты проектирования
После того, как вы закончите свой дизайн, одна из вещей, которую вы захотите сделать, - это сохранить свою работу. Вы найдете эту опцию в самом низу раздела, в котором отображаются различные разделы Elementor.
Вы можете сохранить напрямую (опубликовать) и сохранить как черновик или как шаблон. Мы рассмотрим эти различные моменты более подробно позже.
Во время вашего дизайна вы также можете предварительно просмотреть изменения без дополнительного интерфейса Elementor. Все, что вам нужно сделать, это нажать на значок глаза.
Бывает, что во время проектирования возникает ошибка (непроизвольное действие). В этом случае Elementor предлагает историю, которая позволяет вам перемещаться по всем вашим действиям.
Это позволит вам легко вернуться.
Параметр «Браузер», который находится непосредственно перед кнопкой истории, позволяет дополнительно изменять различные разделы в зависимости от браузера, используемого посетителями. Эта опция дает вам доступ к расширенному изменению структуры разделов (ширины столбца). Здесь нужно очень осторожно вносить изменения.
Кнопка «Настройки» позволяет вам изменять определенные параметры, относящиеся к странице, такие как заголовок, избранное изображение или статус среди других.
Вот и все, что касается этого урока, мы рассмотрим Elementor больше в нашем следующем уроке. Не стесняйтесь взглянуть на Официальный сайт который предлагает гораздо более успешные примеры.
