В этом тексте вы узнаете, как создать свой интернет-магазин с помощью плагина Elementor Pro и темы Ocean WP. Первое, что вам нужно, это обновить Elementor до версии Pro, поскольку в ней есть все необходимые нам опции для создания магазина WooCommerce, а также вам понадобится тема Ocean WP, которая бесплатна, а также плагин WooCommerce.
Интернет-магазин - создание
Вам нужно создать новую страницу и назвать ее «Магазин» или как хотите, в этом примере она будет называться «Мой магазин», затем в настройках темы, в параметрах Макет контента вам нужно установить его на 100% Полная ширина, а также отключить поля и нажать на Редактировать с помощью Elementor.
После того, как редактор страниц откроется в Elementor, мы приступим к созданию страницы. Начнем с добавления заголовка, который мы оформляем в соответствии с опцией Стиль, изменив его цвет, размер шрифта и все остальное по желанию, добавив интервалы и текстовый редактор и получив раздел заголовка, который мы можем сохранить как шаблон, и в настоящее время он выглядит так, как показано на изображении ниже.
После того, как мы это сделали, пришло время добавить элементы WooCommerce. Давайте найдем код элемента. Продукты Woo элемент и добавьте его на страницу. По умолчанию в 4 столбцах отображается 4 продукта, и мы изменим это в зависимости от того, сколько у нас продуктов и сколько столбцов (можно задать от 1 до 6) нам нужно.
Чтобы указать, какие продукты мы хотим показывать последними, мы изменяем параметры в разделе Содержание, на работе Запрос. Мы можем выбрать последние продукты по умолчанию или выбрать их вручную, затем мы можем выбрать по автору, в данном примере именно потому, что это музыка, но автором может быть, например, продюсер. затем по категориям продуктов, по тегам, по фильтрам и т.п. Выбор за вами. Под опцией Передовой вы можете изменить поля, интервалы, фон, границы и многое другое.
После этого сохраняем страницу и переходим в панель управления. Там, в плагине WooCommerce, мы создаем продукты и задаем категории, цену, теги и то, будут ли они разделены или нет.
Нажимая на звездочки, мы выбираем, что продукт будет выделен, и если мы настроили отображение выделенных продуктов в разделе, то будут отображены все продукты, для которых мы активировали звездочку.
Следующее, что мы создадим, — это новый раздел из двух колонок. Мы отделим выбранные продукты от остальных и создадим так называемый раздел «Призыв к действию». Мы добавим изображение в один столбец, а текст — в другой. Мы добавим изображение кода опции в один столбец. Стиль, но когда мы его добавляем, он не отображается. Чтобы решить эту проблему, мы добавим новый элемент в столбец Распоркаили пробел. Когда мы это сделали, изображение отобразилось, и для того, чтобы его можно было видеть целиком или в той мере, в которой мы хотим, необходимо настроить размеры Spaser, и изображение расширится. Затем мы снова выбираем столбец и определяем, как будет выглядеть изображение. Во втором столбце мы добавим заголовок, текст и кнопку, которая будет призывать людей к действию. Конечно, мы также оформим этот столбец, изменим цвет, буквы, размер шрифта, пробелы, поля, фон и другие параметры по желанию в соответствии с опцией Стиль.
После создания раздела CTA (призыв к действию) следующим шагом будет создание раздела продаж. Для того чтобы облегчить себе работу, мы добавляем уже сохраненный шаблон титульного раздела, который мы создали в начале текста, и просто изменяем его так, чтобы они не были одинаковыми. Затем мы добавляем элемент Woo Products и задаем, какие продукты мы хотим отображать в этом разделе. Давайте изменим то, что нужно в опции «Запрос», как и в прошлый раз, и получим раздел, как на рисунке ниже.
Если мы хотим изменить кнопку «Добавить в корзину», чтобы она лучше вписывалась в остальную часть страницы, нам нужно перейти в панель управления, затем Настроить и мы нажимаем на страницу нашего магазина и после этого на опцию Пользовательский CSS/JS. Там мы вводим короткий CSS-код для изменения кнопок, указав определенные теги WooCommerce, такие как уличные продукты и li.продукти используйте их для стилизации кнопок.
