Как создать сайт электронной коммерции с помощью WordPress и Elementor 2020

В этом уроке я научу вас, как создать сайт электронной коммерции с помощью WordPress и Elementor 2020, который вы можете полностью настроить.

WordPress — это наиболее используемая платформа CMS для создания всех типов веб-сайтов, включая веб-сайты электронной коммерции. Кроме того, вы научитесь использовать конструктор страниц Elementor для создания потрясающих веб-страниц, который сейчас является самым популярным конструктором страниц для WordPress. WordPress контролирует более 1/3 интернета. Большинство крупных компаний электронной коммерции, таких как Sony, Bata, eBay и многие другие, используют if для разработки и обслуживания своих веб-сайтов. Самое приятное в использовании WordPress то, что вам не нужно изучать какой-либо язык программирования или любой другой. технический жаргон, чтобы сделать свой сайт. Это простая платформа перетаскивания, которая предоставляет множество встроенных шаблонов и макетов, которые помогают создать привлекательный и удобный веб-сайт. Кроме того, я предоставлю готовые шаблоны, которые вы можете легко импортировать и запустить свой веб-сайт электронной коммерции за считанные минуты.

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

Итак, давайте начнем создавать сайт электронной коммерции с помощью WordPress и Elementor 2020.

Введение в веб-сайт электронной коммерции

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

Вверху у нас есть заголовок, который содержит наше местоположение, номер телефона, наши контактные номера слева и справа, у нас есть значки наших страниц в социальных сетях Facebook, Twitter, YouTube и т. д. Ниже этого у нас есть магазин Кнопка, которая ведет на страницу покупок товаров на нашем веб-сайте. Кроме того, у нас есть кнопка «Учетная запись», нажав на которую, пользователи могут перейти в свою личную панель управления для доступа и управления своей информацией и покупками. У нас также есть логотип нашего бизнеса на самом заголовке. В середине у нас есть ссылка на наши страницы, а именно. Главная, О нас, Магазин, Моя учетная запись и Связаться с нами.

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

Как вы можете видеть на изображении, на странице магазина перечислены все продукты, доступные на нашем веб-сайте, где пользователи могут проверить любой продукт, щелкнув по нему. На боковой панели у нас есть ценовой фильтр, список категорий, обзоры и видеореклама наших продуктов. Под каждым продуктом также есть форма обзора и сопутствующие товары. Далее у нас есть страница «О нас», на которой отображается описание вашего бизнеса и информация о вашей команде. И затем у нас есть страница контактов, где пользователи могут связаться с нами, используя контактную форму. Далее у нас есть панель инструментов «Моя учетная запись», на которой будет личная панель инструментов для каждого клиента, содержащая их личную информацию, информацию о покупке и оплате.

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

Получить хостинг и установить WordPress и Elementor

• Покупка домена NameHero

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

На рынке есть несколько хостинг-провайдеров, и у большинства из них разные предложения. Я пробовал многие из них и, наконец, остановился на NameHero для всех своих сайтов. Я использую его лично и сравнил его с 22 другими хостингами и нашел их лучшими. Как вы можете видеть на изображении, у них есть 4 разных варианта, и я рекомендую вариант Plus Cloud для веб-сайта электронной коммерции. Вы можете использовать мою ссылку, чтобы получить скидку. www.namehero.com/darrelwilson

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

• Установить WordPress

Чтобы установить WordPress на свой хостинг, перейдите в «Личный кабинет» на странице вашего хостинга, нажмите «Облачный веб-хостинг». Далее у вас есть «Мои продукты и услуги», где вы увидите пакет Plus Cloud с вашим доменным именем, нажмите кнопку «Активно» рядом с ним, как вы можете видеть на изображении. Далее слева вы увидите кнопку «Перейти к cpanel» и нажмите на нее. На следующей странице, как вы можете видеть на изображении, прокрутите вниз до категории программного обеспечения и нажмите «WordPress Manager by Softaculous».

Откроется установщик WordPress, нажмите кнопку «Установить сейчас». Откроется страница установки, содержащая версию, ваше доменное имя и каталог, как вы можете видеть на изображении. ПОЖАЛУЙСТА, УДАЛИТЕ ВСЁ, ЧТО НАПИСАНО В КАТАЛОГЕ. ТАКЖЕ В ПРОТОКОЛЕ ВЫБЕРИТЕ 'https:/'. В настройках сайта вы можете изменить название и описание вашего сайта. Мы можем сделать это и позже. Укажите свои данные администратора, такие как имя пользователя, пароль и адрес электронной почты, которые будут вашими данными для входа в WordPress. На следующей странице прокрутите шаблоны вниз, поскольку мы их не используем, и нажмите «Установить». Нажмите на ссылку URL-адреса администратора, указанную на следующей странице, и ваш новый WordPress будет создан и размещен в Интернете. Теперь вы находитесь на панели инструментов WordPress, как показано на изображении, где вы можете редактировать свой сайт.

• Общие настройки WordPress

Прежде чем приступить к разработке своего веб-сайта, давайте научимся изменять ваши настройки на панели инструментов WordPress. На панели инструментов WordPress вы увидите несколько вкладок слева от страницы, как вы можете видеть на изображении. Одной из наиболее важных является вкладка «Настройки», где вы найдете общие настройки WordPress. Вы должны изменить свою постоянную ссылку с «День и имя» на «Название сообщения», чтобы сделать адрес вашего веб-сайта более понятным. Это также очень важно для вашего SEO. Еще одна вкладка на панели управления WordPress — «Пользователи», где вы настраиваете свой профиль и внешний вид панели управления WordPress. Нажмите «Сохранить изменения», чтобы обновить его.

Чтобы снова войти в WordPress после выхода из системы, вам нужно ввести свой URL-адрес в адресную строку, а затем «/wp-admin», что приведет вас на страницу входа в WordPress, где вы можете указать свое имя пользователя и пароль для входа.

Создание страниц и меню

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

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

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

Скачать Элементор

Теперь нам нужно купить наш конструктор страниц Elementor pro, который мы будем использовать для создания веб-страниц нашего веб-сайта электронной коммерции. Вы можете купить его, используя мою ссылку. www.darrelwilson.com/elementor. На их странице вы можете проверить различные доступные пакеты. Мы не можем использовать бесплатную версию, так как нам нужны сервисы построителя тем и Woocommerce. После того, как вы приобретете свой пакет, он откроется в вашей учетной записи, как показано на изображении, где вы должны нажать «Загрузить плагин», и будет загружен почтовый индекс.

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

Установите темы WordPress

Теперь давайте установим тему WordPress на наш сайт. WordPress предоставляет множество предварительно разработанных тем на выбор для внешнего вида вашего веб-сайта. На вкладке «Внешний вид» панели инструментов WordPress вы найдете кнопку «Тема», с помощью которой вы можете установить тему. Вы можете выбрать любую тему из доступных вариантов. Для целей этого урока мы будем использовать тему Astra, которую вы можете найти в популярном меню. Нажмите «Активировать» под названием темы. «Самое приятное в использовании этой темы заключается в том, что она включает в себя все основные настройки и функции, необходимые для работы веб-сайта, и она очень совместима с конструктором страниц Elementor.

Редактировать страницы с Elementor

Теперь давайте узнаем, как редактировать наши страницы с помощью Elementor. Перейдите на домашнюю страницу своего веб-сайта WordPress и нажмите «Редактировать страницу» в верхней черной строке, чтобы открыть редактор страниц. Сначала давайте изменим настройки страницы с правой стороны, как показано на изображении. Измените макет содержимого на «Растягивание по всей ширине» и выберите «Отключить заголовок», так как мы хотим, чтобы этот параметр был для нашей домашней страницы.

Теперь нажмите «Редактировать с помощью Elementor», чтобы открыть редактор Elementor, как показано на изображении. Давайте познакомимся с редактором Elementor здесь. Чтобы добавить новый раздел на страницу, нажмите кнопку «Плюс» и выберите нужный шаблон столбца. Чтобы добавить элементы, нажмите на 9 точек на панели инструментов с левой стороны, что даст вам список элементов, как на изображении. Вы можете перетащить любой из этих элементов на страницу и отредактировать их.

Как только вы нажмете на любой модуль на странице, его панель инструментов редактирования появится слева. Здесь на изображении мы редактируем заголовок, поэтому появилось «Редактировать заголовок», которое содержит 3 вкладки. 1 ^-й — это Content, который дает различные варианты содержимого элемента. 2- ^й стиль, где вы можете создать стиль, такой как цвет, размер, шрифт и т. д. элемента. И 3- ^й Advanced, где вы можете поместить анимацию и другие вещи. Точно так же вы можете добавлять, редактировать и стилизовать текстовое поле таким же образом под своим заголовком.

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

Теперь вместо того, чтобы разрабатывать каждый элемент отдельно, мы можем использовать готовые шаблоны и блокировать, щелкнув значок папки в Elementor. Из библиотеки вы можете выбрать всю страницу или определенные разделы или блоки. Доступны все категории блоков в соответствии с вашими потребностями. Для лендинга выберите любой блок из категории Hero. В примере я выбрал Звук будущего.

Создание домашней страницы

Теперь давайте создадим страницу, похожую на домашнюю страницу, которую мы видели во вводной части, используя этот блок. Сначала давайте изменим фон для всего раздела. Чтобы отредактировать весь раздел, нажмите на шесть точек в верхней части раздела, как показано на изображении. Теперь вы увидите панель инструментов «Редактировать раздел», где вы можете использовать вкладку «Стиль», чтобы изменить фон. Вот ССЫЛКА НА БЕСПЛАТНЫЕ ДЕМО-ИЗОБРАЖЕНИЯ, которые вы можете использовать на своем веб-сайте электронной коммерции. Затем загрузите эти изображения в Elementor и выберите изображение для фона. Вы можете изменить наложение фона, если оно выглядит темным.

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

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

Далее на целевой странице мы должны создать разделы, которые ссылаются на различные категории, такие как раздел для женщин, раздел для мужчин и новые поступления. Добавьте новый раздел из 3 столбцов, добавьте в них заголовок, текст и кнопку. Вы можете создать один и продублировать дважды, чтобы сэкономить время и усилия. Вам снова придется отредактировать текст, стили, фон и т. д. в этом разделе, как мы сделали в предыдущем разделе. Вы можете использовать предоставленные мной изображения в качестве фона для всех 3-х категорий. При использовании текстового редактора, чтобы закончить строку и перейти к следующей строке, как здесь, мы делаем с женской секцией, используйте <br>, как показано на изображении.

Здесь у нас нет шаблона или блоков в этом разделе, поэтому вам придется создавать и стилизовать каждый раздел с нуля, что может показаться долгой задачей в ^первый раз, но вы можете использовать все перетаскивание и трюки, такие как дублирование например, скопируйте кнопку «Купить сейчас», сделанную в разделе выше, и просто измените стиль кнопки или наведите курсор вместо создания с нуля. Вам нужно будет просмотреть все параметры на панели инструментов «Редактировать» для каждого элемента, чтобы выяснить, какой из них лучше всего соответствует вашему вкусу. Это будет отличным упражнением для вашего художественного чутья. Чтобы изменить интервал содержимого внутри столбца, щелкните значок «Редактировать столбец» в верхнем левом углу столбца, чтобы открыть панель инструментов «Редактировать столбец», где вы можете изменить отступ в advancedsection, как вы можете видеть на изображении ниже.

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

Далее ниже мы добавим значки. Для этого снова сначала добавьте новый раздел и вставьте поле изображения с панели инструментов Elementor. Выберите изображение значка для изображений, которые я предоставил, как показано на изображении. Эти поля со значками должны стимулировать покупку, давать привлекательные заголовки, такие как «Бесплатная доставка», и писать описание и условия в тексте ниже. Настройте поле изображения по своему усмотрению, изменив положение изображения, размер, цвет заголовка и описания, текста и т. д. на панели инструментов «Редактировать изображение». Дублируйте его после проектирования, чтобы вам не пришлось заново создавать все значки. После этого вы можете редактировать текст каждого поля по своему усмотрению. В расширенном разделе вы можете добавить поля с помощью Padding, чтобы страница не выглядела слишком перегруженной.

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

Далее мы добавим раздел «Новое поступление». Но прежде чем мы добавим разделитель между этими рядами, чтобы они выглядели четкими и различимыми. Снова добавьте новый раздел, добавьте «Разделитель» на панели инструментов Elementor и создайте его с помощью панели инструментов «Редактировать разделитель», как показано на изображении. Добавьте текст «Новое поступление» в разделитель, который будет использоваться в качестве заголовка для следующего раздела, поэтому измените размер, шрифт и т. д., как показано на изображении , чтобы он выглядел привлекательно.

Создание продуктов

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

Woocommerce

Для создания продуктов нам потребуется добавить новый плагин. Итак, давайте перейдем к вашей панели управления WordPress, нажмите «Плагины» на панели инструментов, а затем нажмите «Добавить новый», как мы делали ранее. В библиотеке плагинов найдите «Woocommerce». По моему личному опыту, Woocommerce — лучший плагин для электронной коммерции. Нажмите «Установить» и нажмите «Активировать». Теперь плагин Woocommerce откроется, как показано на изображении. Заполните форму и нажмите «Продолжить». Затем выберите свою отрасль. В этом уроке мы создадим сайт о моде и одежде. Далее у нас есть тип продуктов, где дается 2 варианта: физический и загружаемый, выберите оба и нажмите «Продолжить». Затем вы получите несколько вопросов, ответьте на них и снова нажмите «Продолжить».

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

Теперь давайте приступим к созданию продуктов. Сначала мы создадим простую женскую зеленую рубашку, как показано на изображении.

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

Затем нажмите на настройки «Инвентаризация» под «Общими», где вы можете указать наличие на складе. Здесь вы также можете разрешить или запретить невыполненные заказы. Если вы нажмете «Не разрешать», заказы не будут приниматься, если товара нет в наличии. Установите «Низкий порог запаса», чтобы получать уведомления, когда запасы заканчиваются.

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

Ниже этих настроек, если вы прокрутите вниз, у вас будет «Краткое описание продукта», как на изображении. Здесь напишите полное описание согласно нашему примеру продукта. Здесь вы также можете выбрать шрифт и стиль описания. С правой стороны, если вы видите изображение, есть опция «Изображение продукта». Нажмите «Установить изображение продукта», чтобы открыть страницу «Изображение продукта», где вы можете выбрать и загрузить изображение своего продукта. Под «Изображением продукта» находится «Галерея продуктов», где вы можете размещать другие изображения вашего продукта с разных ракурсов для лучшего понимания зрителей, как показано на изображении.

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

Если вам не нравятся стиль и тема отображаемой страницы, вы можете изменить их с помощью «Настройки Astra» на правой боковой панели инструментов , как показано на изображении . Например, если вы хотите удалить боковую панель, нажмите «Боковая панель» и выберите «Без боковой панели». Нажмите «Обновить», чтобы сохранить изменения, и вы можете снова нажать «Просмотреть продукт», чтобы увидеть изменения. Так что это был пример того, как создать простой продукт. Вы можете добавить столько продуктов и категорий, сколько пожелаете, используя ту же процедуру. Если вы нажмете кнопку «Категория» на странице «Продукт», откроется новая страница категории, на которой будут показаны все продукты этой категории. На данный момент это будет очень пресно, но позже мы создадим и эту страницу.

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

Теперь нажмите «Атрибуты», где мы добавим новые атрибуты или характеристики к нашему продукту. Нажмите «Добавить», чтобы сделать это. Далее, как показано на изображении, мы создадим новые атрибуты продукта, такие как размер, цвет и т. д. Во-первых, давайте поместим размер в поле «Имя». В поле «Значения» сначала напишите «Маленький», а затем символ «|» (без скобок). Нажмите клавишу «Shift» + клавишу над кнопкой «Ввод», чтобы написать этот символ, как показано на изображении, затем напишите «Средний» и снова тот же символ, а затем «Большой». Вы можете добавить столько переменных, сколько хотите, например, S, M, L, XL и т. д., используя этот символ. Установите флажок «Используется для всех вариантов» и нажмите «Сохранить атрибут».

Далее мы добавим еще один атрибут. Нажмите кнопку «Добавить» еще раз, напишите «Цвет» в поле «Имя» и в поле «Значение» добавьте названия цветов, которые вы хотите разделить символом, который мы использовали в атрибуте «Размер». Здесь мы пишем «Белый | Синий» в качестве двух доступных вариантов. Снова установите флажок «Используется для вариантов» и нажмите «Сохранить атрибуты».

Теперь мы применим эти атрибуты к нашим продуктам. Нажмите «Вариации» под «Атрибутами», выберите «Создать варианты из всех атрибутов» и нажмите «Перейти». Нажмите «Да» во всплывающем окне, чтобы подтвердить эту опцию. Что откроет параметры, как показано на изображении. Вы можете видеть, что 6 вариантов были добавлены путем объединения 3 размеров с 2 цветами, а именно: маленький белый, маленький синий, средний белый, средний синий, большой белый и большой синий.

Нажмите на первый, чтобы открыть его настройки редактирования, как показано на изображении. Во-первых, мы должны загрузить изображение этого варианта. Нажмите «Загрузить изображение» и выберите изображение из галереи. Далее вы должны указать обычную цену этого варианта. Это обязательное поле, поэтому, даже если цены совпадают, вы должны указать их здесь. Опять же, вы можете добавить цену продажи и запланировать ее, как мы это сделали в простом продукте. Вы можете заполнить информацию о запасах и отгрузке, как мы это сделали в простом продукте.

Опять же, вам придется проделать тот же процесс и для других вариантов. Итак, нажмите на Variationname, загрузите изображение и укажите цену Small Blue и так далее и тому подобное. Здесь мы размещаем только изображение и цену всех необходимых вариантов, но вы можете разместить все остальные детали на своем веб-сайте в соответствии с вашими условиями. Над названием вариантов вы можете увидеть параметр «Значение формы по умолчанию», где вы можете выбрать, какой вариант будет отображаться по умолчанию в поле продукта, когда пользователи просматривают продукт.

Другие настройки, такие как Краткое описание продукта, будут аналогичны Простому продукту, который мы сделали ранее, поэтому заполните данные в соответствии с вашим продуктом. То же самое для изображения продукта, где вы должны поместить изображение для варианта по умолчанию, так как оно будет показано зрителям первым, когда они увидят продукт. Вы должны поставить наиболее продаваемый вариант в качестве продукта по умолчанию. Вам не нужно размещать галерею продуктов для переменных продуктов, так как представления смогут видеть разные изображения варианта. Создайте новую категорию «Мужчины» и установите ее флажок, как мы сделали для простого продукта. Нажмите «Опубликовать», чтобы применить эти изменения на веб-сайте.

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

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

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

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

В опции «Запрос» вы можете выбрать продукты, которые вы хотите отображать в этом разделе. Например, если вы хотите, чтобы в этом разделе отображались только товары для женщин, в поле «Источник» выберите «Последние продукты», так как это раздел новых поступлений из раскрывающегося списка, и нажмите «Включить». Затем в поле «включить по» напишите термин и выберите параметр «Термин», который будет таким полем термина. В поле термина напишите «Женщины» и выберите «Категория товара: женские», как показано на изображении. Нажмите «Обновить», чтобы изменения вступили в силу на вашем веб-сайте. Таким образом, вы можете создавать разделы отображения продуктов в любой части вашего веб-сайта.

Шаблон электронной коммерции Elementor

Я предоставил вам шаблон веб-сайта электронной коммерции, который мы только что подготовили, макет, подготовленный нами здесь бесплатно, на моем веб-сайте по этой ссылке https://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Плагины

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Индивидуальная страница продукта

Теперь мы настроим нашу страницу продукта, используя ту же технику. Если вы сейчас нажмете на любой продукт, он покажет страницу продукта в теме по умолчанию, как мы видели, когда создавали продукты. Снова перейдите в конструктор Elementortheme и добавьте новую тему для одного продукта, щелкнув значок + рядом с ней. Вы можете использовать предоставленные здесь шаблоны, но для этого урока мы создадим их с нуля. Итак, сначала добавьте раздел из 2 частей и щелкните вкладку элементов. Здесь вы можете увидеть все элементы, созданные специально для продуктов, как показано на изображении, которое мы не видим при создании страницы.

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

• Пользовательская проверка и страница корзины

Теперь мы создадим индивидуальные страницы оформления заказа и корзины. Страницы оформления заказа и корзины не связаны с конструктором тем, поэтому мы будем редактировать их с помощью Elementor. Перейдите на страницу корзины и нажмите «Редактировать с помощью Elementor». Как и любую другую страницу, вы можете редактировать и оформлять ее так, как хотите, с помощью элементов Elementor. Теперь вы можете редактировать текст, значки, кнопки купонов и т. д., а также стилизовать шрифт, цвет, топографию и т. д. по своему усмотрению. Но редактировать часть фактической темы, такую ​​как заголовок «Корзина», здесь невозможно с Elementor. Чтобы отредактировать это, вам придется отредактировать его в самом WordPress, поэтому нажмите «Редактировать страницу» и в правом нижнем углу установите флажок «Отключить заголовок» в разделе отключения, как показано на изображении, как мы делали ранее при разработке тема вордпресс.

Вы можете редактировать и оформлять страницу оформления заказа и использовать таким же образом. Таким же образом вы можете оформить страницу «Моя учетная запись» для своих клиентов, поскольку тема этой страницы по умолчанию выглядит не очень хорошо. Вы можете редактировать его с помощью Elementor. И я также дал ссылку ранее, в которой я также поместил zip-файл для шаблонов всех этих страниц, чтобы вы могли быстро их спроектировать.

Настройки WooCommerce

Вы уже научились создавать страницы с помощью Elementor и Theme Builder, и создание вашего веб-сайта завершено. Теперь нам нужно узнать о настройках Woocommerce, чтобы запустить этот сайт. Перейдите на панель инструментов WordPress, нажмите Woocommerce и выберите «Настройки», после чего откроется вкладка общих настроек Woocommerce, как показано на изображении.

• общие настройки

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

• Вкладка "Продукт"

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

• Вкладка "Налоги"

Далее на вкладке налогов, где вы можете включить или отключить автоматический расчет налога. Расчет налога может быть очень сложным в зависимости от вашей страны и бизнеса, поэтому автоматический расчет может вам не подойти. Однако у вас есть возможность установить налоги для разных адресов доставки и в зависимости от товара в корзине. Я дал ссылку на www.taxjar.com, где вы можете получить бесплатные и платные услуги, которые помогут вам в расчете налогов. Вы также можете выбрать отображение цен с налогами или без них в различных точках, например, в магазине, вы должны показывать цену без налогов, а также в корзине и при оформлении заказа, она должна включать налог в целом.

• Вкладка "Доставка"

Следующая вкладка — «Доставка». Сначала нажмите «Добавить зону доставки», добавьте название зоны, конкретные регионы зоны и настройте тарифы на доставку для различных способов доставки, как показано на изображении. Здесь мы использовали метод фиксированной ставки, в котором мы установили фиксированную ставку в размере 5 долларов США, а другой метод — это метод бесплатной доставки. Нажмите кнопку «Изменить» ниже, чтобы добавить условие минимальной суммы заказа или требование купона. Здесь у нас выбрано минимальное требование к заказу в размере 50 долларов США. Вы можете добавить несколько зон и несколько способов доставки и тарифов для каждой из них. У вас также есть значения по умолчанию для местоположений, не охваченных ни одной из ваших зон, для которых мы не указали никаких конкретных тарифов. Итак, здесь мы по умолчанию установили ставку в размере 10 долларов США для этих зон.

• Вкладка «Учетные записи и конфиденциальность»

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

• Вкладка электронной почты

Также у нас есть вкладка «Электронная почта», где настраиваются все автоматические электронные письма, которые вы будете получать и отправлять клиентам с веб-сайта, например, при новом или отмененном заказе. Здесь вы можете изменить формат электронного письма, которое вы будете получать или отправлять клиенту во всех подобных ситуациях. Вы можете добавить плагин для этой цели, чтобы получать электронные письма лучшего качества. Перейдите в «Плагины» и установите «Дизайнеры электронной почты Kadence Woocommerce» и. Используя этот плагин, вы можете создавать содержимое электронной почты, заголовок, нижний колонтитул, текст и т. д., используя их собственные стили, которые можно редактировать здесь, перейдя к плагину на боковой панели Woocommerce, как показано на изображении.

• Платежи

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

1. PayPal

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

2. Полоса

Далее мы настроим платежи полосами. Поэтому нажмите кнопку «Управление» рядом с ним. Так же, как и в настройках PayPal, сначала укажите название и описание платежного ящика. Далее у вас есть тестовый публикуемый ключ и тестовый секретный ключ. Вы можете зайти на www.stripe.com и создать там бесплатную учетную запись, просто для создания учетной записи вам понадобится банковский счет. Вы можете интегрировать свою полосатую учетную запись на свой веб-сайт после ее создания, что является бесплатной услугой. Для этого после входа в свою учетную запись Stripe нажмите «Разработчики» и выберите «Ключи API», как показано на изображении. Скопируйте публикуемый ключ, который появляется здесь, на вашем веб-сайте, в поле публикуемого ключа и секретный ключ в поле секретного ключа. Нажмите «Сохранить изменения», и теперь ваш веб-сайт готов принимать платежи по кредитным картам из любой точки мира с очень низкой комиссией за транзакцию. Здесь мы делаем, поэтому у нас все еще включена кнопка «Просмотр тестовых данных» в нашей учетной записи Stripe, а на странице настроек Woocommerce мы установили флажок «Включить тестовый режим», но когда вы будете готовы начать работу с вашей платежной системой, отключите ее. .

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

Оптимизация для мобильных устройств

Мобильная оптимизация означает, что сайт будет выглядеть удобно для мобильных устройств. Мобильная оптимизация очень важна в сегодняшнем сценарии, потому что а) многие люди используют мобильные устройства для серфинга в Интернете и б) согласно новому алгоритму Google, если ваш веб-сайт не оптимизирован для мобильных устройств, они снизят ваш рейтинг, что может иметь катастрофические последствия для вашего сайта. посещаемость сайта и SEO.

Мобильная оптимизация очень проста с помощью редактора Elementor. Давайте снова вернемся к приборной панели Elementor. В нижней части панели инструментов вы найдете кнопку «Адаптивный режим», при нажатии на которую откроется раскрывающийся список с 3 вариантами, а именно. Настольный компьютер, планшет и мобильный телефон. До сих пор мы разрабатывали наш веб-сайт, основываясь на том, как он будет выглядеть для настольных компьютеров. Теперь нажмите «Планшет», чтобы просмотреть, как это будет выглядеть в браузере планшета. Точно так же вы можете проверить это и для режима «Мобильный». Вы можете отредактировать веб-страницу, если что-то кажется неправильным или визуально непривлекательным.

Здесь, как вы можете видеть на изображении, первый заголовок слишком велик для режима планшета, а «50% OFF» слишком мал, поэтому вам придется его настроить. Проверьте все элементы страниц, чтобы увидеть, не нужно ли что-то изменить. Все эти изменения будут применимы к режиму планшета, когда вы нажмете «Обновить». То же самое будет применимо к мобильному режиму. Настройте размер текстов заголовков, выравнивание кнопок, баннеров и заголовков.

Вы можете отключить некоторые нужные вам разделы на мобильной или планшетной версии, если считаете, что это не важно для них. Для этого выберите раздел, который вы хотите скрыть, перейдите в расширенную категорию на панели инструментов «Редактировать раздел», нажмите «Адаптивный» и в разделе «Видимость» вы можете скрыть раздел в версии для настольных компьютеров, планшетов или мобильных устройств, как показано на изображение. То же самое вы можете сделать с другими разделами или элементами. Вы можете создавать все по-разному для планшета или мобильного режима, например, фоновые изображения, размер шрифта или что-то еще.

Форма обратной связи

Теперь давайте продолжим и узнаем, как создать страницу «Контакты», где посетители могут заполнить контактную информацию, и она будет отправлена ​​прямо на вашу электронную почту. Базовый дизайн страницы вы можете сделать самостоятельно с помощью редактора Elementor или Theme Customizer. Единственное, что важно, это контактная форма, как показано на изображении. Таким образом, вы ищете форму на панели инструментов Elementor и перетаскиваете ее в раздел, и вы можете редактировать текст и дизайн формы с помощью панели инструментов «Редактировать форму», которую, я думаю, вы теперь сможете сделать самостоятельно. На панели инструментов «Редактировать форму» есть много дополнительных настроек, которые здесь не рассматриваются, кроме основной формы, которую вы можете создать.

купоны

Чтобы добавить купоны на свой сайт, нажмите «+ Новый» на верхней панели рядом с кнопкой настройки и выберите «Купоны». Купоны на боковой панели инструментов WordPress расположены в разделе «Маркетинг», как показано на изображении. Здесь вы можете добавить новый код купона, выбрать тип скидки в виде процентной скидки, фиксированной скидки на корзину или фиксированной скидки на продукт, указать сумму или процент скидки и дату истечения срока действия купона. В разделе «Ограничения использования» вы можете указать такие условия, как минимальные расходы, индивидуальное использование или сочетание с другими купонами, включить или исключить продукты или категории продуктов из купона. В разделе «Ограничение использования» вы можете выбрать, сколько раз этот купон можно использовать, или ограничить его для определенного продукта и ограничить использование одним клиентом. Нажмите «Опубликовать», чтобы применить этот купон на веб-сайте и протестировать его на странице «Корзина», применив код купона при совершении покупки.

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