Торговые тенденции меняются быстрыми темпами, и люди, как правило, совершают покупки онлайн как никогда.
Вот почему они нуждаются в магазине электронной коммерции, который растет, чтобы удовлетворить привычки покупок в Интернете, потому что люди считают, что удобнее делать покупки онлайн, чем ходить по магазинам.
Вы также можете сразу же открыть свой интернет-магазин, используя нужные инструменты и настройки. И вы заметите резкое увеличение продаж в рекордно короткие сроки.
Если вы запланировали открыть магазин электронной коммерции и ищете эксперта по WordPress, который сделает эту работу за вас, позвольте мне сказать, что вам это не нужно.
Да! Вы можете сделать это самостоятельно, потому что вам не нужно быть разработчиком WordPress или экспертом по кодированию, и вы можете сделать это, не имея никаких знаний о кодировании с правильными инструментами и настройкой.
Просто следуйте пошаговому руководству по созданию страницы магазина WooCommerce с помощью конструктора страниц Elementor.
Давайте копать глубже, чтобы добраться до сути!
- Что нужно для создания страницы продукта с помощью Elementor?
- Как установить конструктор страниц Elementor?
- Создайте страницу продукта Elementor WooCommerce шаг за шагом
- Мобильный оптимизировать страницу продукта WooCommerce
- Elementor Pro Цены
- Завершение
Что нужно для создания страницы продукта с помощью Elementor?
plugin WooCommerce на свой сайт WordPress из репозитория WordPress.org, и, кроме того, вам необходимо установить конструктор страниц Elementor . Бесплатную версию можно загрузить с WordPress.org, однако бесплатная версия имеет ограниченные возможности настройки. Поэтому, если вы хотите получить безграничные возможности настройки, выберите профессиональный Elementor и загрузите его с официального сайта Elementor.org.
Как установить конструктор страниц Elementor?
- Для бесплатной версии Elementor:
Перейдите в Plugin s> Add new> введите Elementor page builder> щелкните установить и активировать.
- Для Elementor Pro:
Приобретите версию Pro на Elementor.com, затем загрузите zip-файл и нажмите «Установить и активировать».
Создайте страницу продукта Elementor WooCommerce шаг за шагом
Стандартная страница продукта WooCommerce выглядит как любая основная страница продукта WooCommerce без каких-либо четких.
Однако, если вы хотите добавить голос своего бренда, вы должны настроить его уникальным образом.
Шаг 1. Перейдите в раздел «Шаблон» в меню панели инструментов и нажмите «Добавить».
Теперь из выпадающего меню выберите пункт «Один продукт»
Самое приятное то, что Elementor поставляется с некоторыми готовыми шаблонами страниц продукта, поэтому, если вы хотите быстро начать работу, выберите любой из вариантов, которые выглядят ближе всего к вашему желанию.
Намного проще создать страницу продукта из готового шаблона, чем создавать ее с нуля. Поэтому измените любой существующий шаблон и сэкономьте свое время и усилия.
Мы выбрали этот шаблон для нашей страницы продукта.
Как только вы выбрали свой любимый шаблон, он приведет вас к редактору Elementor, где вы сможете настроить шаблон по своему вкусу.
Здесь вы можете увидеть различные блоки в левом меню. Перетащите блок, с которым вам нравится работать.
Нажмите кнопку «+» и выберите размер столбца, который вы хотите добавить.
Мы выбрали два размера столбца для нашего шаблона продукта.
Теперь добавьте виджет названия продукта в правом столбце и добавьте название вашего продукта.
После того, как вы добавили название продукта, следующим шагом будет добавление надписи «Woo breadcrumbs».
Теперь добавьте изображение товара в левый столбец и перетащите виджет изображения товара из левого столбца.
Вы можете добавить отступы в оба столбца, чтобы они немного отличались друг от друга.
После добавления изображения и настройки отступов в соответствии с необходимыми размерами добавьте виджет оценки товара под названием товара.
Добавьте краткое описание виджета продукта под блоком обзора продукта. Вы также можете настроить пространство между двумя блоками.
Как только вы закончите с описанием продукта и всеми подробностями, наш следующий шаг - добавить цену продукта, и для этого вам нужно будет перетащить виджет цены под описание продукта.
После добавления вкладки цены под описанием продукта вы можете настроить виджет цены, выбрав параметры в левом меню. Вы можете увеличить значок, изменить стиль шрифта, а также цвет шрифта с черного на любой другой цвет по вашему выбору.
Теперь добавьте виджет «добавить в корзину» и настройте его цвет, шрифт или стиль из меню, если хотите.
Теперь добавьте мету продукта под виджетом цены, который покажет категорию продукта и серийный номер продукта.
Шаг 2: добавьте дополнительную информацию о продукте в следующий раздел.
Создайте новый раздел с двумя столбцами, а затем добавьте вкладки «Данные о продукте», включая описание, дополнительную информацию и отзывы. А в правой части колонки добавьте соответствующий раздел товара.
Чтобы сохранить одинаковый формат каждого столбца, вы можете щелкнуть в левом углу каждого столбца и скопировать и вставить формат столбца для каждого столбца.
Шаг 3: добавьте еще один раздел в раздел «допродажа».
Вот как вы будете выглядеть после продажи. Добавьте несколько отступов, чтобы выровнять раздел.
И наконец, вы закончили с дизайном страницы вашего продукта. Теперь, последний шаг - где вы хотите опубликовать свой продукт? Вы можете нажать «Опубликовать» или перейти в раздел «Глаз» в самом нижнем углу левого меню и щелкнуть настройки, чтобы выбрать категорию продукта.
Нажмите на меню «Добавить условие», затем выберите категорию вашего продукта и нажмите «Опубликовать».
Мобильный оптимизировать страницу продукта WooCommerce
Поскольку через смартфон будет проходить много трафика, вам придется оптимизировать свой магазин для просмотра на смартфоне, иначе вы можете потерять свои продажи.
Несмотря на то, что WooCommerce уже оптимизирована для мобильных устройств, нужно еще раз убедиться, что шаблоны страниц вашего продукта на экране мобильного устройства выглядят абсолютно хорошо, следуйте процедуре.
Вы найдете опцию Responsive Mode в нижнем левом углу интерфейса Elementor.
Когда вы нажимаете опцию «Мобильный», вы можете переключаться между режимами «Мобильный», «Рабочий стол» и «Просмотр вкладок».
Нажмите на любой из вариантов, которые вы хотели бы просмотреть и настроить дизайн, если вы обнаружите какие-либо сложности.
Теперь сохраните и продолжайте публиковать страницу своего продукта.
Elementor Pro Цены
Базовая версия Elementor доступна бесплатно, а профессиональная версия поставляется с тремя лицензиями. Если вы ищете свой личный блог или отдельный сайт, тогда вам больше всего подходит персональная лицензия, где вы можете получить конструктор WooCommerce вместе с 90+ профессиональными виджетами.
В то время как лицензии plus и expert подходят для взрослого бизнеса или агентств с поддержкой 3 сайтов и 1000 сайтов соответственно.
Завершение
Единственная цель конструктора страниц Elementor — дать пользователям возможность раскрыть свой творческий потенциал, не полагаясь на кодирование. Elementor поставляется с различными виджетами, которые позволяют создавать любые страницы продуктов на основе привлекательных макетов. Базовых элементов WooCommerce более 10, что позволяет пользователям настраивать каждый изгиб и изгиб страницы магазина. И если вы не нашли нужный элемент в меню Elementor, не волнуйтесь! Есть много других расширенных настроек, которые могут обновить ваш арсенал и добавить несколько элементов в вашу библиотеку. Одним из них является Essential Add-ons , который содержит специальные элементы только для WooCommerce.
