Как создать одностраничный сайт для продажи


Как создать одностраничный сайт без программиста и дизайнера

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

Как изучить клиентов

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

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

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

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

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

Создайте одностраничник в WordPress менее чем за час

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

Преимущества

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

Отличное решение для небольших сайтов

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

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

Управляемый изображением

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

Лучший мобильный опыт

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

Когда не использовать одностраничный сайт

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

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

Создание одностраничного веб-сайта на WordPress

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

Раскрытие информации : FirstSiteGuide поддерживается нашими читателями. Когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать комиссию. Мы тестируем и пробуем все продукты, которые рекомендуем.

Настройка WordPress

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

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

Как настроить XAMPP для Windows и установить WordPress

Прежде чем пачкать руки, вы должны знать, что такое XAMMP в первую очередь. XAMPP расшифровывается как Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) и Perl (P). Это бесплатное распространение программного обеспечения, которое помогает вам запускать собственные частные серверы. Он содержит серверное приложение, базу данных и язык сценариев, необходимые для успешной установки WordPress. Обычно серверы, запущенные XAMPP, используются для целей тестирования, чтобы вы могли свободно практиковать свои навыки веб-дизайна, не платя за хостинг или позволяя всем видеть игровую площадку вашего сайта.

Как установить XAMPP для Windows

А теперь давайте остановимся на теории и позвольте мне показать вам, как все это настроить. Хотя кроссплатформенная часть названия означает, что программное обеспечение также работает на компьютерах Linux и Mac, сегодня мы сосредоточимся на Windows:

  1. Перейти на сайт Apache Friends
  2. Загрузите последнюю версию, нажав кнопку, и сохраните ее на свой компьютер.
  3. Запустите установщик при загрузке
  4. На приветственном экране нажмите Далее

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

  1. Выберите папку, в которую вы хотите установить XAMPP.Это может быть любая папка, которую вы хотите, и вы также можете оставить папку по умолчанию. Просто запомните его местонахождение
  2. На следующем экране снимите флажок « Узнать больше о Bitnami для XAMPP », потому что вы установите WordPress вручную
  3. Нажмите Далее

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

  1. Оставьте отметку « Вы хотите запустить панель управления » отмеченной
  2. Нажмите Далее

Надеюсь, все прошло без проблем. Если это так, вы должны увидеть, что панель управления открыта без красного текста, показывающего ошибки. Вы также должны увидеть, что Apache и MySQL отмечены зеленым, что означает, что они запущены и работают. Чтобы проверить, нормально ли работает ваш сервер, зайдите в браузер и посетите этот URL: http: // localhost.

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

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

Как установить WordPress с помощью XAMPP

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

  1. Открыть панель управления XAMPP
  2. Нажмите кнопку Admin в разделе MySQL. Откроется новое окно с phpMyAdmin
  3. .
  4. Выберите Базы данных вкладку в верхнем левом меню
  5. Введите имя для своей базы данных, например, WordPress
  6. Нажмите Создать кнопку

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

  1. Скачать последнюю версию WordPress
  2. Перейдите в папку XAMPP (папка, в которую вы установили XAMPP из предыдущих шагов)
  3. Откройте папку и перейдите в папку htdocs
  4. Распаковать архив WordPress туда

У вас должна получиться новая папка WordPress в папке htdocs. Вы можете переименовать эту папку во что угодно. Это также будет частью адреса вашей локальной установки. Для целей этого руководства назовем его WordPress , который откроет ваш сайт с http: // localhost / wordpress. Неважно, какое имя вы используете, так что можете изменить его по своему вкусу.

  1. Откройте эту папку и найдите файл wp-config-sample.php
  2. Переименуйте его в wp-config.php
  3. Откройте файл и найдите часть с информацией о настройках MySQL (посмотрите на скриншот)
  4. Замените «database_name_here» на имя вашей базы данных, которым в моем случае является «WordPress»
  5. Замените «username_here» на «root» и оставьте «password_here» пустым
  6. Сохраните файл и закройте его

Наконец, вы готовы завершить процесс установки.Откройте браузер и перейдите по адресу http: // localhost / wordpress (или измените имя, если вы использовали другое имя для папки WordPress при извлечении). WordPress теперь запросит у вас язык, который вам нужно выбрать. После этого нажмите кнопку Продолжить . Затем введите данные имени пользователя и пароля и нажмите Установить WordPress.

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

Выбор темы

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


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

Плагины

Наиболее важными для создания одностраничных веб-сайтов являются плагины, которые вы используете.Мы собираемся установить конструктор страниц под названием SiteOrigin и расширение виджетов для этого плагина. Оба они полностью бесплатны и размещены в репозитории плагинов WordPress. Перейдите в Plugins -> Add New на панели инструментов вашего сайта WordPress и введите page builder по происхождению сайта. Плагин появится вверху списка, установите и активируйте его. Вы можете установить подключаемый модуль пакета виджетов на том же экране, введите siteorigin widgets bundle в поисковике подключаемых модулей.Убедитесь, что оба плагина активированы.

Начиная с версии 2.3 этого конструктора страниц, они добавили функцию прокрутки веб-сайта на одну страницу. Это то, что нам нужно, чтобы веб-сайт прокручивался всякий раз, когда кто-то нажимает на пункт меню с идентификатором строки в виде атрибута href (ссылка). Позже мы объясним, как это работает.

Начать строительство!

Теперь у вас активированы плагины, и мы готовы создать нашу страницу. Сначала добавьте новую страницу или отредактируйте страницу.Перейдите на вкладки в верхней части редактора страниц и щелкните только что добавленную вкладку «Конструктор страниц».


SiteOrigin Page Builder имеет множество предустановок, поэтому нам не нужно создавать весь дизайн с нуля. Вы увидите несколько кнопок над редактором страниц, одна из них - кнопка «Макеты», нажмите ее.


Теперь вы увидите экран со всеми видами макетов; это предустановки, которые вы можете использовать. Вы также можете импортировать и экспортировать макеты, но мы не предполагаем, что они у вас есть.Для этого примера мы выберем дизайн «Фитнес-зал». Конечно, вы можете выбрать любой дизайн, который хотите, или начать с нуля. Щелкните выбранный дизайн и нажмите кнопку «Вставить» в правом нижнем углу. Если у вас уже был контент на странице, вы можете вставить его до или после контента или полностью заменить. Для нас это не имеет значения, поскольку у нас пустая страница.


Продолжайте, сохраните страницу и посетите ее. Если все пойдет хорошо, мы сможем добавить свои идентификаторы. Переключитесь в режим «Живой редактор», щелкнув ссылку на панели администратора WordPress вверху только что созданной страницы.


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


Дайте каждой строке свой уникальный идентификатор. Когда вы закончите, сохраните страницу.

Настройка меню

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


Вы видите, что URL-адрес настраиваемой ссылки теперь совпадает с идентификатором элемента строки. Конструктор страниц SiteOrigin запрограммирован на распознавание этого и будет знать, что он должен перейти к указанному разделу.

Очень важно, чтобы вы не забыли добавить хэш в URL-адрес пункта меню, это формат атрибута HTML ID.Однако не добавляйте хеш в раздел Attributes -> Row ID в настройщике, конструктор страниц SiteOrigin уже знает, что это идентификатор.

Мой результат

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

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

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

.

Как открыть интернет-магазин в 2020 году (шаг за шагом)

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

Что нужно для открытия интернет-магазина?

Никогда не было лучшего времени для начала онлайн-бизнеса, чем сегодня.

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

Три вещи, которые вам понадобятся, чтобы открыть интернет-магазин:

  1. Идея доменного имени (это будет имя вашего интернет-магазина, например, wpbeginner.com)
  2. Учетная запись веб-хостинга (здесь находится ваш веб-сайт в Интернете)
  3. Ваше безраздельное внимание в течение 30 минут.

Ага, все действительно так просто.

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

В этом уроке мы рассмотрим:

Готовы? Давайте начнем.

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.

Шаг 1. Настройка платформы интернет-магазина

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

К счастью, вы здесь, поэтому не совершите эту ошибку.

Мы рекомендуем две популярные платформы электронной коммерции: Shopify или WordPress + WooCommerce.

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

Вот почему большинство пользователей выбирают WordPress + WooCommerce из-за гибкости, которую он предлагает. Это требует некоторой настройки, но в долгосрочной перспективе это стоит того. WooCommerce - крупнейшая в мире платформа электронной коммерции (см .: Сравнение Shopify и WooCommerce).

В этом руководстве мы расскажем, как настроить интернет-магазин в WordPress с помощью WooCommerce.

Для настройки магазина вам необходимо иметь доменное имя , веб-хостинг и сертификат SSL .

Доменное имя - это адрес вашего веб-сайта в Интернете. Это то, что пользователи будут вводить в своих браузерах, чтобы перейти на ваш сайт (например, google.com или wpbeginner.com).

Веб-хостинг - это место, где ваш сайт живет в Интернете. Это дом вашего сайта в Интернете.Каждому веб-сайту в Интернете нужен веб-хостинг.

Сертификат SSL

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

Обычно доменное имя стоит около 14,99 долларов в год, веб-хостинг - около 7,99 долларов в месяц, а сертификат SSL стоит около 69,99 долларов в год.

Это большие стартовые затраты.

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

В общем, вы можете начать работу за 6,95 долларов в месяц.

→ Нажмите здесь, чтобы воспользоваться этим эксклюзивным предложением Bluehost ←

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

ПРИМЕЧАНИЕ. В WPBeginner мы верим в прозрачность. Если вы зарегистрируетесь в Bluehost, используя нашу реферальную ссылку, мы заработаем небольшую комиссию без каких-либо дополнительных затрат для вас (фактически, вы сэкономите деньги и получите бесплатный домен).Мы получили бы эту комиссию за рекомендацию практически любой хостинговой компании WordPress, но мы рекомендуем только те продукты, которые мы используем лично и которые, по нашему мнению, принесут пользу нашим читателям.

Давайте купим ваш домен + хостинг + SSL.

Откройте Bluehost в новом окне, используя эту ссылку, и следуйте инструкциям.

Первое, что вам нужно сделать, это нажать зеленую кнопку «Начать работу», чтобы начать работу.

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

После этого вам будет предложено ввести доменное имя для вашего сайта.

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

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

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

Войдите в свою cPanel. Вы увидите всплывающее окно с информацией о том, что WordPress с WooCommerce предустановлен на вашем сайте.

Вам просто нужно нажать кнопку «Войти на свой сайт», и вы попадете на панель управления вашего сайта WordPress.

Поздравляю, вы закончили настройку хостинга и доменной части.

Следующим шагом будет настройка вашего сайта WordPress, а затем вашего интернет-магазина.

Шаг 2. Настройка WordPress

Bluehost автоматически установил WordPress и WooCommerce на ваш сайт.

При первом входе в WordPress вы увидите приветственное сообщение. Вас спросят, какой веб-сайт вы хотите создать.

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

При закрытии мастера настройки ваша админская панель WordPress выглядит следующим образом:

Во-первых, вам нужно посетить страницу Настройки »Общие , чтобы настроить заголовок и описание вашего сайта WordPress.

Настройка HTTPS для использования SSL

Ваш пакет хостинга WordPress поставляется с бесплатным сертификатом SSL. Этот сертификат предварительно установлен для вашего доменного имени. Однако ваш сайт WordPress должен быть настроен, поэтому он загружается как https vs http.

На странице «Настройки » »Общие вам необходимо изменить свой адрес WordPress и адрес сайта, чтобы использовать https вместо http.

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

Ваша базовая настройка WordPress завершена. Пришло время настроить ваш интернет-магазин.

Шаг 3. Настройка вашего магазина WooCommerce

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

Вы увидите уведомление «Добро пожаловать в WooCommerce» на страницах администратора WordPress. Продолжайте и нажмите кнопку «Запустить мастер установки» в уведомлении.

Это запустит мастер настройки WooCommerce, в котором вам нужно будет нажать кнопку «Поехали», чтобы начать.

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

Это приведет вас к следующему шагу.

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

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

Далее вам необходимо ввести информацию о доставке и налогах.

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

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

Далее нужно ответить на налоговый вопрос. WooCommerce может помочь вам автоматически рассчитать и добавить налоги к вашим ценам.

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

Нажмите кнопку «Продолжить», чтобы продолжить.

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

По умолчанию WooCommerce поддерживает платежные шлюзы PayPal, PayPal Standard и Stripe. Для WooCommerce доступно множество других способов оплаты, которые при необходимости можно установить позже.

Самый простой способ принять платеж - использовать PayPal Standard.

Просто введите свой адрес электронной почты PayPal и нажмите кнопку «Продолжить».

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

Вы можете настроить Stripe, следуя инструкциям на экране WooCommerce.

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

Для выхода из мастера настройки необходимо щелкнуть ссылку «Вернуться в панель управления WordPress».

После завершения настройки WooCommerce вы готовы добавлять товары в свой интернет-магазин.

Шаг 4. Добавление товаров в ваш интернет-магазин

Начнем с добавления первого продукта в ваш интернет-магазин.

Вам необходимо посетить Продукты »Добавить новую страницу , чтобы добавить новый продукт.

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

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

Прокрутите немного вниз, и вы увидите поле Product Data. Здесь вы предоставите информацию о продукте, такую ​​как цены, инвентарь, доставка и т. Д.

Под полем с данными о продукте вы увидите поле для добавления краткого описания продукта. Это краткое описание будет использоваться, когда пользователи просматривают несколько продуктов на странице.

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

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

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

Шаг 5. Выберите и настройте тему WordPress

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

Доступны тысячи платных и бесплатных тем WordPress.

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

Перейти к Внешний вид »Настроить страницу . Это запустит настройщик темы, в котором вы можете изменить различные настройки темы.

Если вам не нравится тема Storefront, вы можете использовать другую тему, посетив страницу Внешний вид »Темы .

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

Шаг 6. Расширьте свой интернет-магазин с помощью плагинов

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

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

Плагины

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

Доступно более 46 000 плагинов для WordPress. В WPBeginner мы предлагаем лучшие плагины WordPress, которые помогут вам добавить необходимую функциональность.

У нас есть пошаговое руководство по установке плагина WordPress.

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

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

Изучение WordPress для развития вашего бизнеса в Интернете

WordPress невероятно мощный, а WPBeginner - крупнейший бесплатный сайт WordPress для начинающих.

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

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

У нас также есть руководство, которое покажет пользователям, как максимально эффективно использовать бесплатные ресурсы WPBeginner.

Многие из наших пользователей вводят свой вопрос в Google и просто добавляют wpbeginner в конце. Это показывает им связанную статью от WPBeginner.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.

.

Как создать целевую страницу продаж в WordPress

Вы хотите узнать, как разработать оптимизированную для конверсии целевую страницу продаж в WordPress без какого-либо опыта программирования или дизайна? Что ж, вы пришли на правильный пост. В этом видео-уроке я покажу вам, как с помощью плагина для умного построения целевой страницы под названием Thrive Architect.

Итак, вы только что закончили работу над новым цифровым продуктом для вашего бренда.

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

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

Я имею в виду, вы ведете онлайн-бизнес, вы не веб-дизайнер, , верно?

Итак, какие у вас есть варианты? Вы действительно нанимаете веб-дизайнера?

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

Ну есть еще вариант.

Сделай сам , и я покажу тебе, как именно это сделать, на видео ниже.

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

Инструменты, используемые для дизайна целевой страницы

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

Я также уже написал здесь подробный обзор Thrive Architect, если вы хотите его проверить.

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

Если хотите Чтобы приобрести шаблон, который я создал в этом видео, кстати, вы можете найти его здесь.

10+ строительных блоков отличной целевой страницы продаж

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

Давайте перейдем к делу.

1. Сохраняйте минимальную область заголовка

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

Это означает отсутствие раздела меню или исходящих ссылок.

Думаю, преобразования.

HubSpot поделился кое-чем интересным в ходе сплит-теста A / B, было обнаружено, что удаление ссылок с целевых страниц увеличивает конверсию.

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

Я бы рекомендовал использовать 'Landing Page' , если вы собираетесь создать страницу продаж, состоящую в основном из линейного контента. См. Изображение ниже.

Если вы собираетесь создать свою целевую страницу, например, с помощью чего-то вроде Thrive Architect, вы можете просто создать настраиваемую область заголовка без ссылок или навигации.

2. Поместите что-нибудь желаемое «выше сгиба»

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

Под словом я подразумеваю «поставить что-то желаемое в первую очередь» - это разместить то, что действительно будет мотивировать людей пролистать вашу страницу продаж.

Возможно, короткое видео с некоторыми пунктами типа вопросов.

Если вы предпочитаете добавлять элементы преобразования в верхнюю часть страницы, это тоже ваш выбор.

Это может быть изображение вашего продукта с некоторым содержанием, за которым следует ваш CTA и кнопка «Купить». См. Пример на изображении ниже.

3. Создайте убедительный заголовок для заголовка

Это само собой разумеется. Так что убедитесь, что ваш заголовок не только убедителен, но и информативен.

Сообщите людям, что именно их ждет и что им может предложить ваша целевая страница.

Еще раз, вы можете даже начать с вопроса.

Нил Патель использует короткий «по существу» вопрос на своей странице продаж, чтобы черпать вдохновение из «Хотите больше трафика?».

4.Добавьте область «функции»

Особенности вашего продукта важны, поэтому не забудьте указать все.

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

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

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

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

5. Убедитесь, что ваша копия актуальна и не содержит ошибок.

Опять же, это само собой разумеющееся.

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

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

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

6. Добавьте видео на свою страницу продаж

Видео - отличный способ «очеловечить» вашу целевую страницу продаж.

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

Не забывайте, что размещение видео на целевой странице может помочь вам увеличить конверсию на 86% . (Источник)

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

7. Не забывайте отзывы

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

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

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

А ты? Ты такой же? Вы цените отзывы клиентов?

Послушайте:

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

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

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

Если у вас их нет, НЕ придумывайте!

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

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

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

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

9. Проверьте скорость загрузки страницы, время загрузки

Это очень важно.

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

Бум!

Большой убийца конверсии прямо здесь.

Факт:

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

Так что же делать?

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

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

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

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

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

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

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

11. Используйте эффективные кнопки с призывом к действию

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

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

Раньше было: В корзину или Купи сейчас .

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

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

  1. Купите мою электронную книгу сейчас
  2. Купите свою копию сейчас
  3. Начните читать сейчас
  4. Получить электронную книгу сейчас
  5. Получить сейчас
  6. Получить мгновенный доступ
  7. Купите сейчас для мгновенного доступа

Завершение

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

Хотелось бы услышать ваши мысли.

Как всегда, оставляйте свои комментарии ниже.

Наслаждайтесь.

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера