Advertisement
  1. Web Design
  2. WordPress

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

Scroll to top
Read Time: 4 min

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

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

  • Техническая настройка
  • Создание страниц веб-сайта
  • Познакомимся с Elementor

Создание веб-сайта на WordPress с помощью Elementor

1. Техническая настройка

Чтобы подготовить веб-сайт к запуску, вам потребуется следующее:

  • Домен
  • Хостинг для файлов вашего сайта
  • Установленный WordPress

Примечание: предположим, что у вас уже есть вышеупомянутое, поэтому я сфокусирую всё внимание на плагине Elementor. Если вам нужна помощь с любым из пунктов выше, то у нас есть полное руководство по использованию WordPress для начинающих, которое вы можете посмотреть на YouTube канале Tuts+.

Установка плагина Elementor

Для начала нам нужно установить планиг Elementor. Есть две версии — бесплатная и платная Pro версия. В версии Pro вам будет доступно множество pro особенностей, включая некоторые премиальные шаблоны и блоки, чтобы вы смогли построить то, что вам пожелается. Чтобы получить плагин, посетите https://elementor.com; бесплатную версию можно получить там сразу, а для получения версии Pro, вас перенаправят на страницу с ценами, где вы можете выбрать подходящий вариант.

Elementor homepageElementor homepageElementor homepage
Главная страница Elementor

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

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

После активации, вы увидите приветственный экран и новое меню в админке WordPress.

elementor menu itemelementor menu itemelementor menu item
Меню плагина Elementor

Если вы установили Pro версию, после загрузки плагина, вам потребуется нажать кнопку Activate License. Номер лицензии будет доступен вам в личном кабинете после покупки плагина.

Установка плагина Envato Elements

Техническая подготовка почти завершена и пришло время установить плагин Envato Elements. Он позволит нам скачивать и использовать кучу готовых шаблонов для Elementor. Посетите репозиторий WordPress плагинов на https://wordpress.org/plugins/envato-elements/ и скачайте плагин для вашей системы. Установите плагин, тем же способом, что мы делали ранее.

Ваша страница с плагинами должна выглядеть как-то так:

plugins pageplugins pageplugins page

2. Создание страниц веб-сайта

В качестве примера, на этом уроке мы создадим четыре страницы сайта для малого бизнеса, который продаёт соки. Обычно мы бы пошли в Страницы > Добавить новую. Затем, мы бы ввели заголовок для нашей новой страницы и начали редактировать с помощью Elementor. Однако, так как у нас установлен плагин Envato Elements, мы будем создавать наши страницы иным способом.

Переходим к Elementor, убедитесь, что Elementor выбран в качестве набора шаблонов.

elementor kits in envato elements plugin for wordpresselementor kits in envato elements plugin for wordpresselementor kits in envato elements plugin for wordpress

Найдите категорию Food & Drink, прокрутите вниз, пока не увидите набор Juice Bar. Для нашего веб-сайта нам потребуется несколько страниц, поэтому давайте начнём с главной страницы. Из набора Juice Bar, выберите шаблон Home 6, затем создайте с ним домашнюю страницу, введя название страницы в поле:

create a home pagecreate a home pagecreate a home page

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

  • Страница меню: с помощью шаблона Menu 5
  • О нас: с шаблоном About 1
  • Контакты: с шаблоном Contact 2

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

newly created Elementor pagesnewly created Elementor pagesnewly created Elementor pages
Свежесозданные страницы Elementor

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

3. Познакомимся с Elementor

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

Elementor editorElementor editorElementor editor

Редактор Elementor показывает страницу, которую вы редактируете и большое меню слева. Все виджеты (вроде раздела – Section, заголовка – Heading, изображения – Image) вы можете использовать, перетащив их на страницу.

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

Три ключевых аспекта

Есть три важных момента при работе с Elementor, вот они:

  1. Разделы – Sections
  2. Столбцы – Columns
  3. Вижеты – Widgets

Разделы — самые большие строительные блоки. Наведите на них в редакторе и увидите голубую границу из точек вокруг них и вкладку сверху с некоторыми параметрами.

Столбцы, также известные как внутренние Разделы, задают макет вертикальных столбцов.

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

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

На этом всё

На этом заканчивается первая часть этой мини-серии! В следующем уроке мы будем настраивать наш веб-сайт для Juice Bar и более подробно рассмотрим Elementor.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.