Категории: Обзоры plugin WordPress

Создайте страницу продукта Elementor WooCommerce.

Тенденции шоппинга меняются быстрыми темпами, и люди склонны покупать онлайн больше, чем когда-либо.

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

Вы также можете сразу же открыть свой интернет-магазин, используя правильные инструменты и настройки. И вы заметите резкий рост ваших продаж в течение рекордного периода времени.

Если вы планируете открыть интернет-магазин и ищете эксперта по WordPress, который выполнит эту работу за вас, позвольте мне сказать вам, что он вам не нужен.

Да! Вы можете сделать это самостоятельно, потому что вам не нужно быть разработчиком WordPress или экспертом по программированию, и вы можете сделать это, не имея каких-либо знаний в области кодирования, используя правильные инструменты и настройки.

Просто следуйте пошаговому руководству по созданию страницы магазина WooCommerce с помощью конструктора страниц Elementor.

Давайте копнем глубже, чтобы добраться до сути!

Что вам понадобится для создания страницы продукта с помощью Elementor?

plugin WooCommerce на свой сайт WordPress из репозитория WordPress.org, а также вам потребуется установить конструктор страниц Elementor . Бесплатную версию можно загрузить с WordPress.org, однако бесплатная версия имеет ограниченные возможности настройки. Поэтому, если вы хотите получить безграничные возможности настройки, выберите профессиональную версию Elementor и загрузите ее с официального сайта Elementor.org.

Как установить конструктор страниц Elementor?

  • Для бесплатной версии Elementor:

Перейдите в Plugin > «Добавить новый» > войдите в конструктор страниц Elementor > нажмите «Установить» и активируйте.

  • Для Элементора Про:

Купите версию Pro на Elementor.com, затем загрузите zip-файл, а затем нажмите «Установить и активировать».

Шаг за шагом создайте страницу продукта Elementor WooCommerce

Стандартная страница продукта WooCommerce выглядит как любая базовая страница продукта WooCommerce, но без какой-либо четкости.

Однако, если вы хотите добавить голос своего бренда, вам придется настроить его уникально.

Шаг 1. Перейдите в раздел «Шаблон» в меню панели управления и нажмите «Добавить новый».

Теперь из выпадающего меню выберите пункт «Один продукт».

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

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

Мы выбрали этот шаблон для страницы нашего продукта.

После того, как вы выберете свой любимый шаблон, вы попадете в редактор Elementor, где вы сможете настроить шаблон по своему вкусу.

Здесь вы можете увидеть различные блоки в левом меню. Перетащите блок, с которым хотите работать.

Нажмите кнопку «+» «Добавить» и выберите размер столбца, который вы хотите добавить.

Мы выбрали два размера столбцов для нашего шаблона продукта.

Теперь добавьте виджет названия продукта в правый столбец и добавьте в него название вашего продукта.

После того, как вы добавили название продукта, следующим шагом будет добавление над ним «Хлебные крошки Woo».

Теперь добавьте изображение продукта в левый столбец и перетащите виджет изображения продукта из левого столбца.

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

После добавления изображения и настройки отступов в соответствии с необходимыми размерами добавьте виджет рейтинга продукта под названием продукта.

Добавьте краткое описание виджета товара под блоком обзора товара. вы также можете настроить пространство между двумя блоками.

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

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

Теперь добавьте виджет «Добавить в корзину» и настройте его цвет, шрифт или стиль из меню, если хотите.

Теперь добавьте мета-мету продукта под виджетом цены, который будет отображать категорию продукта и серийный номер продукта.

Шаг 2: добавьте дополнительную информацию о продукте в следующий раздел.

Создайте новый раздел из двух столбцов, а затем добавьте вкладки с данными о продукте, включая описание, дополнительную информацию и обзоры. А в правой части столбца добавьте раздел сопутствующего товара.

Чтобы сохранить одинаковый формат каждого столбца, вы можете щелкнуть левый угол каждого столбца, скопировать и вставить формат столбца для каждого столбца.

Шаг 3: добавьте еще один раздел или добавьте «раздел дополнительных продаж».

Вот как будет выглядеть раздел дополнительных продаж после добавления. Добавьте отступы, чтобы выровнять раздел.

И, наконец, вы закончили разработку страницы продукта. Теперь последний шаг: где вы хотите опубликовать свой продукт? вы можете нажать «Опубликовать» или перейти в раздел «Глаз» в самом нижнем углу левого меню и нажать «Настройки», чтобы выбрать категорию продукта.

Нажмите меню «Добавить условие», затем выберите категорию вашего продукта и нажмите «Опубликовать».

Мобильная оптимизация страницы продукта WooCommerce

Поскольку через смартфон будет проходить большой трафик, вам придется оптимизировать свой магазин для просмотра со смартфона, иначе вы можете потерять свои продажи.

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

Вы найдете опцию «Адаптивный режим» в левом нижнем углу интерфейса Elementor.

Нажав на опцию «Адаптивность для мобильных устройств», вы можете переключаться между вариантами просмотра для мобильных устройств, настольных компьютеров и вкладок.

Нажмите на любой из вариантов, которые вам нравятся, и настройте дизайн, если обнаружите какие-либо сложности.

Теперь сохраните и продолжайте публиковать страницу вашего продукта.

Цены на Элементор Про

Базовая версия Elementor доступна бесплатно, а профессиональная версия поставляется с тремя лицензиями. Если вы ищете свой личный блог или отдельный сайт, то вам больше всего подойдет персональная лицензия, где вы можете получить конструктор WooCommerce вместе с более чем 90 профессиональными виджетами.

В то время как лицензии Plus и Expert подходят для взрослого бизнеса или агентств с поддержкой 3 сайтов и 1000 сайтов соответственно.

Подведение итогов

Единственная цель конструктора страниц Elementor — дать пользователям возможность раскрыть свой творческий потенциал, не полагаясь на кодирование. Elementor поставляется с множеством виджетов, которые позволяют создавать любые страницы товаров на основе привлекательных макетов. Базовых элементов WooCommerce насчитывается более 10, которые позволяют пользователям настраивать каждый изгиб и изгиб страницы магазина. И если вы не нашли нужный элемент в меню Elementor, не волнуйтесь! Существует множество других расширенных настроек, которые помогут обновить ваш арсенал и добавить несколько элементов в вашу библиотеку. Одним из них является Essential Add-ons , который поставляется со специальными элементами только для WooCommerce.

Холдерху

в прямом эфире:.cid.e495888558d5265f

Недавние Посты

Как использовать верхние и нижние колонтитулы с Elementor

Верхние и нижние колонтитулы веб-сайта являются важными элементами. В большинстве случаев заголовок обеспечивает навигацию…

6 января 2022 г.

Сравнение тем WordPress: Astra и OceanWP

Две самые популярные темы WordPress на рынке — Astra и OceanWP. Профессиональный…

2 января 2022 г.

Сравнение новостных тем WordPress: Newspaper vs. Астра

Чтобы создать отличный новостной сайт, вам не обязательно становиться веб-дизайнером. Мы…

25 октября 2021 г.

Создайте новостной веб-сайт с газетной темой.

Тема «Газета» — одна из самых важных тем WordPress, разработанная tagDiv,…

18 октября 2021 г.

Как создать электронную коммерцию с помощью конструктора Avada WooCommerce

Когда дело доходит до создания интернет-магазина, лучше всего plugin WooCommerce. Это…

4 октября 2021 г.

Как использовать липкий заголовок и эффекты прокрутки с Elementor

Заголовок – это, как правило, первое, что видит человек, когда посещает ваш сайт.

21 сентября 2021 г.