Пропустить

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

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

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

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

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

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

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

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

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

Основные характеристики Elementor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Секции Elementor

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

раздел elementor.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

действия elementor.png

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

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

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

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

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

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

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

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

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

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

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

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

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