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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом всё

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

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

• Beginner’s guide to using WordPress на YouTube
• Домашняя страница Elementor
  
• Плагин Envato Elements для WordPress