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, вас перенаправят на страницу с ценами, где вы можете выбрать подходящий вариант.
Когда скачаете файлы, вернитесь к вашему установленному 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, вот они:
- Разделы – Sections
- Столбцы – Columns
- Вижеты – Widgets
Разделы — самые большие строительные блоки. Наведите на них в редакторе и увидите голубую границу из точек вокруг них и вкладку сверху с некоторыми параметрами.
Столбцы, также известные как внутренние Разделы, задают макет вертикальных столбцов.
Виджеты, по сути — блоки с содержимым, кнопки, изображения, цитаты, что угодно, что вы можете найти в меню, как показано ранее.
Эти три ключевых момента Elementor позволят вам создать страницу по вашему желанию.
На этом всё
На этом заканчивается первая часть этой мини-серии! В следующем уроке мы будем настраивать наш веб-сайт для Juice Bar и более подробно рассмотрим Elementor.
Полезные ссылки
