Как сделать сайт на Элементоре: подробная инструкция

Как сделать сайт на Элементоре

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

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

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

Введение в WordPress Elementor

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

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

Существуют различные конструкторы страниц WordPress, но плагин Элементор, имеющий более пяти миллионов установок, является одним из самых популярных. Он позволяет создавать все – от целых сайтов до отдельных целевых страниц – с помощью интуитивно понятного редактора, работающего по принципу drag-and-drop.

Конструктор Элементор для WP

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

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

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

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

Главная страница Elementor плагина

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

Бесплатный Elementor против Elementor Pro

Elementor – это программное обеспечение класса freemium. Вы можете скачать основной плагин бесплатно или приобрести лицензию Pro.

Варианты лицензий Elementor

 

Бесплатный плагин для WordPress включает в себя все необходимое для создания визуально привлекательных страниц для продаж услуг, объявлений о товарах, бизнес-сайтов и многого другого. Он включает в себя более 40 виджетов, 100 шаблонов и 300 с лишним блоков.

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

Доступные блоки Elementor

Если вам нужна более продвинутая функциональность, вы можете приобрести Elementor Pro. Это откроет доступ к некоторым дополнительным виджетам, а также к конструктору тем.

Шаблоны для быстрого создания сайтов

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

Если вы разрабатываете интернет-магазин, Elementor Pro также включает конструктор для работы с WooCommerce. С его помощью настраивается магазин, включая страницу товара, архив товаров и страницу оформления заказа. Вы также получите доступ к виджетам, специально разработанным для повышения конверсии, таким как Custom Add To Cart, Upsells и Product Related.

Страница магазина Elementor

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

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

Лицензии Pro включают в себя доступ к более чем 60 профессиональным наборам для создания сайтов. Это наборы шаблонов, страниц, всплывающих окон и других компонентов, которые помогут создать полноценный сайт. При покупке лицензии Expert или выше, также предоставляется доступ к 20 экспертным наборам сайтов.

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

Агентство, разработчиков или дизайнеров может заинтересовать платформа Experts Network. Там можно продемонстрировать свои работы и привлечь внимание потенциальных клиентов.

Эксперты по работе с Елементор

Если вы заинтересованы в рекламе через Experts Network, нужно рассмотреть лицензии Expert, Studio или Agency от Elementor Pro. Они дают право создать профиль на этой популярной торговой площадке.

Стоимость тарифных планов Pro варьируется от 49 до 999 долларов в год. Компания также предлагает 30-дневную гарантию возврата денег, что дает возможность попробовать решение перед покупкой.

Как установить Elementor

Поскольку это плагин для WordPress, установить Элементор можно очень просто и быстро прямо из репозитория. Чтобы загрузить бесплатную версию, перейдите в раздел «Плагины» > «Добавить Новый». В поле поиска введите Elementor. Когда плагин отобразится, нажмите на кнопку «Установить».

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

Раздел Elementor в админке WP

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

Как подключить Elementor Pro к WordPress

Есть два способа подключить Elementor Pro к WordPress. Если вы еще не приобрели профессиональную лицензию, вам нужно перейти на официальный сайт и выбрать пункт «Get Started».

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

Подключение Elementor Pro

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

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

Когда появится запрос, нажмите на «Install Now» > «Activate». После этого Elementor добавит плагин для создания страниц на ваш сайт.

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

В своем аккаунте Elementor выберите пункт «Subscriptions» в левом меню. Затем нажмите на кнопку «Download Zip».

Варианты подписки Elementor

Далее войдите в свою панель WordPress и перейдите в раздел «Плагины» > «Добавить Новый». Затем загрузите .zip-файл Elementor Pro, который только что скачали.

После установки и активации Elementor Pro, WordPress предложит ввести лицензионный ключ. Также можно перейти в «Elementor» > «Лицензия» > «Подключить и активировать».

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

Использование Элементор: 4 основные задачи, которые необходимо освоить

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

Запуск конструктора страниц Elementor

Чтобы создать новую страницу или пост в конструкторе страниц Elementor, перейдите в меню «Страницы/Записи» > «Добавить новую». Вы можете запустить редактор, нажав на «Edit with Elementor».

Редактирование через Elementor

Кроме того, у вас может быть уже существующая страница, которую не мешало бы переделать. Просто перейдите на нужную страницу и откройте ее для редактирования. Затем можно нажать на кнопку «Edit with Elementor».

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

Открытый редактор страниц Elementor

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

Добавление разделов, колонок и виджетов

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

Как правило, все начинается с создания раздела, путем нажатия на значок +. Затем Элементор предложит выбрать структур

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

у.

Настройка структуры Elementor

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

Какие есть варианты структуры

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

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

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

Если необходимо внести более сложные изменения, нажмите «Edit Section». Боковая панель Elementor обновится и отобразит все дополнительные изменения, которые разрешено внести в этот раздел.

Редактирование раздела

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

Пока вы будете перетаскивать виджет, Elementor выделит все Разделы и Колонки, куда можно поместить этот элемент. Когда вы будете готовы, просто отпустите мышь. Он добавит этот виджет в выбранный компонент.

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

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

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

Редактирование общих настроек сайта Elementor

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

Проверьте историю правок

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

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

Чтобы просмотреть журнал Elementor, нажмите на иконку «История» в нижней части боковой панели. На вкладке «Действия» записываются все изменения, которые вносятся. Это может быть что угодно — от создания нового раздела до редактирования существующего текста.

Где смотреть историю изменений Elementor

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

Как создать страницу в Elementor (2 способа)

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

Как создать стандартную страницу WordPress

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

Для начала создайте новую страницу, перейдя в меню «Страницы» > «Добавить Новую» > «Edit with Elementor». Затем добавьте раздел в свой дизайн, нажав на значок +. Мы собираемся начать с заголовка, поэтому мы хотим выбрать одноколоночный макет.

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

В боковой панели найдите виджет «Heading». Перетащите этот виджет в новый раздел. Затем введите текст заголовка в боковую панель и настройте его стиль при помощи доступных инструментов.

Заголовок Элементор редактирование

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

Выбор количества колонок на странице

Затем перетащите виджет «Текстовый редактор» из боковой панели и поместите его в этот новый раздел. Теперь можно добавлять и оформлять текст, используя настройки боковой панели.

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

Редактор Elementor для изображения

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

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

Финальный макет страницы

Когда вы будете довольны своим дизайном, нажмите на кнопку «Опубликовать».

Обратите внимание, если ваша страница уже опубликована, то вместо этой кнопки будет предложено обновить ее.

Как создать страницу продукта WooCommerce

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

Чтобы создать пользовательскую страницу товара WooCommerce, выберите Шаблоны на приборной панели WordPress. Затем нажмите на кнопку Добавить новый. В следующем окне откройте первое выпадающее меню и выберите «Single Product».

Создание Woocommerce в Elementor

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

Создание шаблона

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

Вставка компонента Elementor

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

Настройка доступных опций

Elementor Pro предоставляет ряд виджетов WooCommerce, которые можно добавлять в свои проекты. Чтобы посмотреть список доступных вариантов, прокрутите страницу до разделов «WooCommerce» или «Product» в боковой панели Элементор.

Опции Woocommerce от Elementor Pro

Эти разделы включают виджеты с расширенной встроенной функциональностью, такие как WooCommerce Breadcrumbs, Cart и Checkout. Чтобы добавить эти элементы в дизайн, просто перетащите их на холст Elementor и отпустите. Затем можете перетащить виджет в раздел, в котором хотите отобразить этот контент.

Расширенная функциональность виджетов

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

Как найти и установить готовые шаблоны Элементор

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

Готовые шаблоны Elementor

Бесплатный плагин поставляется с более чем 100 полностраничными шаблонами и более чем 300 блоками. Если вы перейдете на версию Pro, то получите доступ к некоторым дополнительным опциям.

Чтобы применить шаблон к текущему дизайну, нажмите на иконку «Добавить шаблон». Это приведет к запуску библиотеки Элементор.

Добавить шаблон

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

Один из вариантов шаблона

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

Подключение к библиотеке шаблонов

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

Как создавать шаблоны в Elementor

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

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

Чтобы начать, выберите «Шаблоны» на приборной панели WordPress. Затем нажмите на кнопку «Добавить новый».

Добавление нового шаблона Elementor

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

Варианты страниц

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

Чтобы сохранить этот дизайн в качестве шаблона, нажмите на стрелку, которая появится рядом с кнопкой «Обновить/Опубликовать». Затем вы можете выбрать «Сохранить как шаблон».

Сохранение шаблонов

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

Мои шаблоны в Elementor

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

Советы и рекомендации для начала работы с Elementor

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

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

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

Чтобы превратить блок в многоразовый шаблон, щелкните по пунктирной иконке на нем. Затем выберите «Сохранить как шаблон».

Превращение блока в многоразовый шаблон

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

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

Навигатор по блока Elementor

Сочетания клавиш — это максимальная экономия времени, и Elementor поставляется с различными встроенными горячими клавишами. Нажмите «Cmd/Ctrl + ?» на клавиатуре, чтобы просмотреть доступные сочетания.

Сочетания клавиш в Elementor

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

Резюме

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

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

Рейтинг
( Пока оценок нет )
Александр/ автор статьи

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

Загрузка ...
Шаблоны для WordPress