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

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

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

Примечание редактора: этот пост был первоначально опубликован в январе 15, 2015 и полностью обновлен и обновлен для точности и полноты.

Есть тысячи-миллионы тем WordPress на выбор, когда вы ищете интерфейс и бэкэнд-структуру, чтобы начать продавать онлайн. Почти то же самое с хостингом (но мы предпочитаем SiteGround or Bluehost).

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

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

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

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

Что действительно круто, так это то, что SiteGround предлагает специализированный управляемый хостинг WooCommerce пакет услуг с почти всем, что вам нужно, чтобы начать продавать онлайн. В рамках пакета вы можете согласиться либо на План StartUp для начинающих, План GrowBig для растущего бизнеса, или GoGeek для установленных магазинов WooCommerce.

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

Тем не менее, другой хостинг, который мы настоятельно рекомендуем для магазинов Divi WooCommerce, это BlueHost, Хотя функции здесь не соответствуют SiteGround, вы все равно получаете хостинг, ориентированный на WooCommerce, с помощью пакета электронной коммерции WordPress. Планы могут удобно обрабатывать магазин Divi WooCommerce, но, к сожалению, вы не получите управляемые услуги.

👉 Теперь, для ясности, давайте продолжим с SiteGround ...

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

К SiteGround Управляемый хостинг WooCommerce выберите идеальный план и нажмите Получить план.

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

👉 А что касается ресурсных пособий, этот план предусматривает:

  • Почтовый ящик 6GB
  • 1 GB Хранение базы данных
  • Накопитель SSD
  • Неизмеренная передача данных
  • 30GB место для хранения
  • До 100,000 ежемесячных посещений

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

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

Теперь, когда вы выбрали свой предпочтительный план, SiteGround направит вас на страницу регистрации домена. Если у вас уже есть домен, выберите второй вариант и введите его данные. В противном случае перейдите к регистрации нового доменного имени за $ 15.95 в год.

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

Ну, конечно, это основные вещи, с которыми вы уже много раз справлялись. Таким образом, у вас не должно возникнуть проблем с вводом номера телефона, страны, имени, адреса электронной почты, пароля учетной записи и т. Д.

Платежная часть требует от вас ввести данные вашей кредитной карты. Вы можете продолжить с Откройте для себя, MasterCard or Visa.

Однако, что довольно интересно, SiteGround не перечисляет PayPal, несмотря на его растущую популярность среди торговцев WooCommerce. Но, к счастью, оказывается, что они могут принимать платежи PayPal, хотя и косвенно.

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

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

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

Затем выберите дополнительные услуги, которые вы хотите включить в свой пакет, и вуаля! Это все, что нужно для настройки учетной записи Siteground.

Как только вы закончите, войдите в свою учетную запись и перейдите прямо в вашу область cPanel. Вы найдете автоустановщик WordPress по умолчанию. Итак, выберите его, введите данные для входа в WordPress и нажмите кнопку «Установить».

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

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

Что такое Диви?

Хорошо, если вы еще не пробовали, держу пари, что вы уже слышали об этом. Дива не обычная тема WooCommerce. На самом деле это одна из самых популярных тем WordPress на Elegant Themes. И, что интересно, Диви Элегантная темаФлагманский продукт.

Итак, что же такого особенного в этой теме? И есть ли что-то выдающееся в Divi's WooCommerce?

Ну, в отличие от типичных тем WordPress, Divi - это более полный пакет. Это означает, что он сочетает в себе стандартные функции тем с дополнительными функциями, которые пригодятся для магазинов Divi WooCommerce.

что такое диви

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

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

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

👉 Таким образом, в конечном итоге вы сможете извлечь выгоду из Дива«S:

  • Массив настраиваемых макетов для любого типа сайта WordPress, включая интернет-магазины WooCommerce.
  • Простой в использовании Page Builder, который предоставляет множество элементов веб-сайта и возможностей дизайна.
  • Гибкий процесс настройки без какой-либо формы кодирования. Даже новички могут удобно настроить и настроить полнофункциональные магазины Divi WooCommerce.
  • Простая интеграция с WordPress. Divi - одна из немногих внешних тем WordPress, которую можно легко установить без каких-либо сложных настроек.
  • Оптимизированные для электронной коммерции шаблоны WooCommerce.

Divi Drag and Drop Builder

Как мы уже говорили, Divi выпускается в двух разных вариантах. Когда вы платите за членство на Элегантные Темы, Вы найдете стандартную тему Divi на приборной панели в сопровождении плагина Divi WordPress Page Builder.

Но стоит отметить, что этот строитель не связан исключительно с темой Divi. Он поставляется как дополнительный плагин для каждой темы, приобретенной в Elegant Themes.

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

настройки диви

Но не заблуждайтесь. Хотя Divi Page Builder предназначен для начинающих, это редактор, который также помогает опытным разработчикам. Они могут систематически комбинировать его визуальные функции с элементами управления CSS, чтобы вывести свои веб-сайты Divi WooCommerce на новый уровень.

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

И вы знаете, что?

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

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

Между тем, окно редактирования Divi будет отображать изменения макета вашего сайта в режиме реального времени. Вы сможете визуально отслеживать каждую настройку и увидеть, как она влияет на общий внешний вид вашего магазина Divi WooCommerce.

Предварительно разработанные макеты сайтов Divi WooCommerce

Чтобы избавить вас от болезненно сложного процесса создания веб-сайта с нуля, Divi WordPress Theme поставляется с множеством предварительно разработанных шаблонов сайтов. А поскольку вам могут понадобиться разные варианты макета одного и того же шаблона, Divi предлагает дизайн своего сайта в виде комплексных пакетов. Следовательно, вы получаете различные макеты и цвета шаблона.

Точнее говоря, Divi предоставляет о 7-8 различные предварительно разработанные макеты для каждого пакета веб-сайта. Принимая во внимание, что каждый из них полностью построен, вы можете легко принять макеты, не дорабатывая основную структуру. Вы просто пара твиков здесь и там.

макеты сайта Divi

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

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

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

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

Divi подходит для WooCommerce?

Учитывая все это, Divi становится все более популярным, потому что это принципиально комплексное решение для WordPress.

В сочетании, Divi Page Builder и Divi Theme Предложение предоставляет практически все, что вам нужно для настройки любого типа сайта WordPress. И это включает в себя полнофункциональный магазин WooCommerce со всеми основными возможностями электронной коммерции.

👉 В двух словах, Divi - это вариант, который стоит рассмотреть для вашего сайта WooCommerce, потому что:

  • Вы можете настроить свой веб-сайт WooCommerce с помощью перетаскиваемого визуального редактора.
  • Divi позволяет вам сохранять ваши настройки как глобальные элементы во всех макетах.
  • Он поставляется с хорошо спроектированными готовыми макетами сайтов 20.
  • Вы можете легко экспортировать макеты, а затем использовать их на других сайтах.
  • Вы можете создать свой магазин WooCommerce с несколькими столбцами, строками и элементами содержимого.
  • Все макеты WooCommerce были оптимизированы для мобильных устройств.
  • Так же, как MS Word, редактировать текстовый контент так же просто, как нажать, а затем набрать.
  • Весь процесс настройки сайта отслеживается в режиме реального времени, что обеспечивает предварительный просмотр всех изменений дизайна.
  • Макеты WooCommerce поставляются с основными страницами и модулями интернет-магазина.

Step 1: зарегистрируйтесь с элегантными темами, чтобы получить доступ к Divi

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

Тема Divi WordPress

Шаг 2: установите Divi на свой сайт WordPress

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

Новая тема Wordpress

Шаг 3: нажмите на кнопку Добавить новый

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

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

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

Шаг 4: настройте свой магазин WooCommerce

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

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

Шаг 5: добавьте свои первые продукты в WooCommerce

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

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

Шаг 6

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

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

Шаг 7: изучите возможности WooCommerce

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

Функции WooCommerce

Шаг 8: создайте домашнюю страницу

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

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

Шаг 9: добавьте заголовок для вашей страницы Divi

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

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

Шаг 10

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

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

Шаг 11

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

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

Шаг 12

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

Настройка Woocommerce WordPress

Шаг 13

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

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

Шаг 14

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

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

Шаг 15

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

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

Шаг 16

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

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

Шаг 17: Предварительный просмотр и публикация

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

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

Вывод

И это все, что нужно, чтобы получить Дива Интернет-магазин WooCommerce запущен с использованием учетной записи хостинга SiteGround.

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

И как мы уже видели, это должно быть бризом с темой Divi. Вы всегда можете получить доступ к своему макету Divi WooCommerce из своего бэкэнда WordPress, чтобы настроить его дальше. Если вы хотите, вы можете даже полностью изменить весь дизайн, переключившись на другой макет, который также может работать с магазином WooCommerce. Выбор за вами.

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

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

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

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