Как создать фантастический интернет-магазин с WooCommerce, Divi и Bluehost (март 2019)

Над 74 миллионами сайтов зависит от платформы WordPress, чтобы размещать свои блоги, продавать свои продукты или просто писать свои ежедневные размышления для всего мира. Когда вы начнете создавать свой сайт электронной торговли, у вас наверняка будет много вариантов, и WordPress свяжется с этим. Какую из выдающихся платформ электронной торговли выберете? Планируете ли вы захватить тему для продажи своих продуктов или есть кто-то, кого вы можете заплатить, чтобы построить сайт с нуля? Черт, что вы даже планируете продавать через свой сайт электронной торговли? Есть тысячи-миллионы тем WordPress на выбор, когда вы ищете интерфейс и бэкэнд-структуру, чтобы начать продавать онлайн. Почти то же самое с хостингом (но мы предпочитаем Bluehost).

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

Короче говоря, темы WordPress имеют решающее значение, и Дива Тема WordPress от Elegant Themes - довольно приятный вариант для вас. Он может использоваться для стандартного делового веб-сайта, но также включает в себя интеграцию для продажи электронной коммерции и быстрых процессов продаж. Давайте узнаем, как создать интернет-магазин с темой Divi WordPress.

Получите ваш домен и хостинг.

Первым шагом в любом процессе создания сайта является захват учетной записи хостинга, имени домена и установка WordPress на сайте. Дива ничем не отличается. Есть много способов получить хостинг и доменные имена, но я лично считаю, что Bluehost - один из самых безопасных и надежных вариантов (для более подробной информации ознакомьтесь с моими Обзор Bluehost).

Что действительно круто, так это то, что Bluehost предлагает план интеграции WordPress + WooCommerce который дает вам все, что вам нужно для начала продажи в Интернете.

Как вы начинали?

К Страница Bluehost, в которой говорится об интеграции, затем нажмите кнопку «Начать сейчас».

Имейте в виду, что эта услуга начинается с $ 11.95 в месяц, и она очень похожа на то, как вы будете устанавливать обычный сайт WordPress на учетной записи хостинга Bluehost.

Основное различие заключается в том, что WooCommerce уже установлено. Кроме того, вы получаете следующее:

  • Положительная безопасность электронной торговли SSL
  • Специальная линия поддержки
  • По крайней мере, 100 GB пространства веб-сайта
  • Непроницаемая полоса пропускания
  • Учетные записи 100
  • Бесплатные домены
  • Специальный IP-адрес

woocommerce_and_wordpress

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

choose_your_plan

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

Регистрация домена BlueHost

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

package_information

Обычно вы можете просто пропустить все лишние нежелательные файлы, если только вы не очень заинтересованы в том, чтобы оплачивать резервное копирование вашего сайта или платить за защиту конфиденциальности. Вы вообще не нуждаетесь в этом или можете получить его бесплатно позже. После этого вы можете создать свою регистрационную информацию для своей учетной записи Bluehost, которая затем приведет вас к CPanel. После входа в CPanel перейдите в область «Конструкторы сайтов», нажмите «WordPress» и пройдите процесс получения WordPress на своем сайте.

Создатели сайта BlueHost

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

Создание интернет-магазина с Divi

Шаг 1

Начнем с посещения Страница продукта Elegant Themes для темы Divi WordPress. Эта страница предлагает возможность демонстрации темы и быстрой загрузки. Элегантные темы продают свои темы, используя ежегодную или разовую структуру платежей, которая хороша для разработчиков с несколькими клиентскими сайтами или людьми, которые запускают многочисленные сайты электронной торговли. Вы не можете купить только одну тему, но Персональный план для $ 67 в год похоже на то, что вы могли бы заплатить за обычную тему, и вы можете остановить ежегодные платежи, если вам больше не нужна поддержка. Не стесняйтесь играть с темой, прежде чем совершать платеж.

Тема Divi WordPress

Шаг 2

После регистрации нажмите кнопку загрузки для темы. Это ставит тему в виде zip-файла на вашем компьютере. Перейдите на вкладку «Внешний вид» на сервере вашего сайта WordPress и нажмите кнопку «Темы».

Новая тема Wordpress

Шаг 3

Нажмите кнопку «Добавить».

Wordpress добавляет новую тему

Нажмите кнопку «Загрузить тему». Найдите и загрузите zip-файл темы. Пройдите процесс, чтобы полностью активировать тему, а затем вы сможете увидеть тему на интерфейсе своего сайта.

Загрузка темы Wordpress

Шаг 4

Если вы перейдете к Страница документации по Divi вы найдете практически все инструменты и функции, с которыми вы можете работать в этой теме, но мы сосредоточимся прежде всего на создании веб-сайта электронной торговли. Тема Divi полностью совместим с WooCommerce, поэтому вы можете отображать все свои продукты.

Что удивительно, так это то, что начальная учетная запись Bluehost уже установила WooCommerce на вашем веб-сайте WordPress, поэтому вам не нужно беспокоиться об установке или настройке. Он уже должен быть доступен на панели управления.

Шаг 5

Технически у вас уже есть сайт для электронной торговли, но мы хотим добавить некоторые продукты, чтобы они выглядели как сайт электронной торговли на интерфейсе. Перейдите на панель инструментов WordPress, перейдите на вкладку «Продукты» в разделе «WooCommerce» и нажмите «Добавить товар».

WooCommerce добавляет новый продукт

Шаг 6

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

Электронная торговля добавляет новые поля продукта

Шаг 7

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

Функции WooCommerce

Шаг 8

Все дело в том, чтобы создать домашнюю страницу или обычную страницу, на которой представлены все ваши продукты, когда люди появляются на вашем сайте. Поэтому вы должны перейти в «Страницы»> «Добавить новый» в левой части панели управления WordPress.

Новая страница Wordpress

Шаг 9

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

Редактор страниц wordpress

Шаг 10

Нажмите кнопку «Полная ширина».

Добавить заголовок

Шаг 11

Заполните детали для названия сайта, текста подзаголовка и цвета текста. Вы даже можете изменить ярлык администратора, который в основном используется для вашей собственной ссылки. Нажмите кнопку «Сохранить», когда закончите.

Настройка заголовка

Шаг 12

Нажмите на три полосы слева от модуля заголовка Full Width, чтобы изменить другие параметры.

Настройка Woocommerce WordPress

Шаг 13

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

Настройте эти кнопки вокруг

Шаг 14

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

Настройка электронной коммерции Wordpress

Шаг 15

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

Настройка электронной коммерции Wordpress

Шаг 16

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

Настройка электронной коммерции Wordpress

Шаг 17

После этого вы можете нажать кнопку «Просмотр» или «Опубликовать», чтобы просмотреть изменения в интерфейсе. Как вы можете видеть, продукты хорошо видны, и вы всегда можете вернуться назад, чтобы изменить параметры своей продукции или магазина на бэкэнд WordPress. Поздравляем!

Если у вас есть вопросы по настройке Тема Divi WordPress, пожалуйста, сообщите нам в разделе комментариев ниже.

Дива Рейтинг: 5.0 - Обзор по
Аватар

Каталин Зорзини

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