Пропустить

Учебник Elementor: введение в интерфейс

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Что касается дизайна макетов WordPress, мы уже должны были представить плагин Визуальный Композитор, который определенно является одним из лучших инструментов для создания макетов. Учтите, однако, что это решение подходит не всем. Это причина, по которой в этом руководстве мы познакомим вас с плагином WordPress Elementor, который представляет собой бесплатный плагин WordPress (бесплатный, но с возможностью расширения по подписке).

Где взять Elementor для WordPress

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

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

Основные особенности Elementor

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

версия Free Полная версия
Несколько столбцов Меню навигации, статья
Модули Тексты, заголовки Модуль WooCommerce (продукты, категории)
Видео модули, изображения, карусель, галереи, Soundcloud Интеграция с Facebook (страница, кнопка, комментарии)
Модуль совместного доступа цены Таблица
Модуль HTML Портфолио, форма
Модуль для виджета WordPress Модуль поиска

 

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

Начало работы с Elementor

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

delementor.png страница презентации

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

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

плагин уведомления elementor.png

Так что просто нажмите на нее, чтобы перейти на страницу регистрации, и нажмите активировать.

регистрация лицензии elementor.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Активная лицензия elementor.png

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

Как использовать Elementor

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

Конструктор elementor.png

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

интерфейс презентации elementor.png

Таким образом, слева у вас есть различные элементы управления, предлагаемые плагином, а справа - предварительный просмотр ваших изменений в реальном времени. В этом уроке мы используем тему Twenty Sixteen WordPress.

Разделы Elementor

Разделы Elementor - это группы функциональных блоков, которые предлагает Elementor. Количество разделов зависит от того, используете ли вы полную версию и используете ли вы WooCommerce, Yoast SEO или другие совместимые плагины. В зависимости от этих условий в вашем интерфейсе будет больше или меньше разделов. Так как мы используем полную версию с включенным плагином WooCommerce, наш интерфейс выглядит именно так.

раздел elementor.png

Как разместить блок Elementor

Как только вы развернете раздел, вы найдете блоки Elementor. Различные блоки Elementor размещаются методом «перетаскивания» в области, выделенной пунктирными линиями.

добавить блоки elementors.png

Как выбрать макет на Elementor

Перед добавлением блока в Elementor вам нужно не забыть выбрать макет, нажав кнопку «+» в выделенном разделе.

выберите макет elementor.png

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

раздел элемента с зоной .png

Различные блоки со знаком «+» внутри - это области, которые могут принимать блоки Elementor. Если вы добавляете блок Elementor без предварительного выбора макета, по умолчанию будет выбран макет с одним столбцом.

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

перемещение раздела elementor.png

Вот пример раздела, который содержит 2 блока, а именно блок заголовка и блок текста.

элемент секции с 2 blocs.png

Как использовать другие инструменты проектирования

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

Резервное копирование elementor.png

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

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

Предварительный просмотр изменений elementor.png

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

действия elementor.png

Это позволит вам легко вернуться.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Параметр «Браузер», который находится непосредственно перед кнопкой истории, позволяет дополнительно изменять различные разделы в зависимости от браузера, используемого посетителями. Эта опция дает вам доступ к расширенному изменению структуры разделов (ширины столбца). Здесь нужно очень осторожно вносить изменения.

опция браузера elementor.png

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

Настройки elementor.png

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
12 акции
доля6
чирикать3
Регистрация3