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

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

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

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

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

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

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

Как вы начинаете?

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

Имейте в виду, что эта услуга начинается с 11,95 долларов США в месяц, и это очень похоже на то, как вы будете устанавливать обычный сайт WordPress на учетной записи хостинга Bluehost.

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

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

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

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 4

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

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

Шаг 10

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

Шаг 11

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

Шаг 12

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

Шаг 13

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

Шаг 14

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

Шаг 15

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

Шаг 16

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

Шаг 17

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

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

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

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

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