Неприятная тема
Flatsome — это мощная тема WordPress, разработанная для веб-сайтов электронной коммерции и интегрированная с WooCommerce.
Это одна из самых популярных тем WooCommerce на ThemeForest. На момент написания этого руководства было более 174 500 продаж и потрясающий рейтинг в 4,8 звезды на основе более чем 6600+ отзывов.
Flatsome в первую очередь разработан для новичков и пользователей, не разбирающихся в технологиях.
Это отлично подходит для людей, которые хотят начать онлайн-бизнес, но не знают, как программировать, или имеют бюджет, чтобы нанять профессионального программиста. С Flatsome вы сможете создать профессионально выглядящий веб-сайт, используя простые и интуитивно понятные инструменты.
Теперь Flatsome оснащен множеством потрясающих функций и возможностей. Чтобы продемонстрировать, что доступно и как это работает, у нас есть краткое руководство, показывающее, как создать страницу продукта WooCommerce с помощью Flatsome.
Итак, без лишних слов, приступим:
Содержание:
- Неприятная тема
- Разница между Flatsome, WooCommerce и WordPress
- Создайте страницу продукта WooCommerce, используя тему Flatsome.
- Шаг 1. Выберите макет страницы продукта.
- (Необязательно) Шаг 2. Создайте страницу продукта вручную.
- Шаг 3. Настройте страницу продукта
- Подведение итогов
Разница между Flatsome, WooCommerce и WordPress
Приветствуя наших новых читателей, мы должны предоставить некоторую необходимую информацию, чтобы все наши читатели были на одной волне. Здесь мы обсудим разницу во всех трех терминах, которые мы будем использовать в этой статье.
Начнем с WordPress. Это платформа, на которой вы устанавливаете различные темы и plugin для создания своего веб-сайта. Доступны тысячи plugin и тем для выполнения других задач в соответствии с вашими требованиями.
WooCommerce — это plugin который мы устанавливаем на WordPress, который позволяет добавлять на наш сайт различные функции. Установив этот plugin , мы можем добавить на наш веб-сайт и интернет-магазин дополнительные функции, такие как корзина покупок, обработка платежей, управление продуктами и т. д.
Наконец, но, безусловно, одним из наиболее важных элементов является внешний вид нашего веб-сайта. Flatsome — это тема, которая позволяет нам настраивать внешний вид нашего веб-сайта в соответствии с нашими желаниями. Например, если логотип вашей компании оранжевый, вам следует отразить его в цвете вашего веб-сайта. Это то, что Flatsome может вам предоставить.
Создайте страницу продукта WooCommerce, используя тему Flatsome.
Поскольку все наши читатели знают о WordPress, WoCommerce и Flatsome, пришло время перейти к настройке страницы нашего продукта с помощью фантастического конструктора UX, который поставляется с темой Flatsome. Это функция перетаскивания, которая чрезвычайно упрощает жизнь дизайнера.
Почти все совершают покупки через Интернет, вероятно, из-за трудных времен, с которыми мы столкнулись в последние несколько месяцев. Оставаться дома было самым безопасным решением для всех нас. Именно поэтому все наши читатели согласятся с тем, что интернет-магазин намного сложнее стандартного сайта.
Однако с помощью WooCommerce и Flatsome эта задача стала чрезвычайно простой. Вам нужно сесть и спланировать, как будет выглядеть ваш сайт, и все. WooCommerce поможет вам с опциями конструктора. Создать полноценный работающий интернет-магазин можно всего за несколько минут с помощью перетаскивания.
С WooCommerce и Flatsome вы сможете дать своим идеям создания интернет-магазина совершенно новую жизнь. Ваш сайт должен иметь современный и красивый вид, чтобы привлечь клиентов. Таким образом, Flatsome — лучшее решение всех ваших проблем, поэтому скачайте его отсюда и приступим.
У Flatsome есть несколько фантастических функций, но одна из них заключается в том, что он стал лучшим выбором более чем 300 000 пользователей. Превосходный инструмент помогает создавать потрясающие адаптивные веб-сайты без необходимости писать единую строку кода. Более того, его способность создавать креативные и уникальные интернет-магазины делает его еще более достойным.
Итак, не теряя времени, приступим к уроку. В этом руководстве вы пройдете весь процесс разработки страницы продуктов. Картинки помогут вам лучше понять, как будет выполняться задача.
Шаг 1. Выберите макет страницы продукта.
Сначала мы начнем с выбора макета страницы продуктов. Этот выбор создаст базовую страницу нашего интернет-магазина, которую мы позже настроим в соответствии с нашими желаниями. Это пошаговое руководство проведет вас через процесс настройки страницы.
В этом amp мы продолжим использовать вариант Classic Shop. Однако для вас нет никаких ограничений. Процесс настройки будет одинаковым для каждого выбранного вами макета. Единственная разница будет заключаться в том, что базовая структура страницы будет отличаться от другой.
Переходя к настройщику продукта, мы дали ему имя «Левая боковая панель во всю высоту».
Есть два варианта настройки страницы продуктов. Первый вариант нужно выполнить с помощью UX-конструктора, а второй — создать страницу вручную. Если вы выберете второй вариант, вам придется обратиться к официальной документации и найти шорткоды. Если вы новичок и это ваш первый опыт создания интернет-магазина, я рекомендую выбрать первый вариант.
(Необязательно) Шаг 2. Создайте страницу продукта вручную.
Вот скриншот официальной страницы документации Flatsome. Вы можете ввести короткие коды слов и выполнить их поиск.
Как только вы нажмете «Поиск», на экране отобразится список коротких кодов. Вы можете выбрать шорткоды, которые важны для страницы продукта. Использование шорткодов требует меньших усилий, но важно, чтобы у вас был небольшой практический опыт работы с WordPress и использования шорткодов.
Вот список шорткодов, которые вы можете использовать на сайте для создания страниц.
В этом amp мы будем настраивать макет левой боковой панели во всю высоту; таким образом, мы будем копировать код дизайна. Ниже приведено изображение нанесенного рисунка, но вы можете легко скопировать его из конструкции.
Начните с создания блока с заголовком. Если вы хотите разработать заголовок, вам нужно нажать «Добавить новый», доступный в блоках UX, размещенных на вашей панели управления.
Вы можете назвать блок по своему желанию. Здесь, в этом amp , мы назвали объединение «Макет левой боковой панели во всю высоту». Далее вы можете увидеть шорткоды внутри редактора блоков. Как только вы завершите копирование нужных шорткодов, вы можете нажать «Опубликовать».
После этого небольшого шага, когда мы сможем настроить нашу страницу в соответствии с нашими желаниями, мы будем на одном уровне. Теперь перейдите к опции темы страницы продукта и нажмите значок пользовательского макета.
После завершения вы сможете создавать блоки из раскрывающегося списка «Пользовательский макет продукта».
Выберите блок, который мы только что создали. Нашей главной целью при создании этого блока было создание из него страницы продукта. Согласно этому amp , макет левой боковой панели во всю высоту представляет собой блок, а на вашей стороне он будет таким, как вы назвали.
После завершения просто нажмите кнопку «Опубликовать»; он сохранит настройки.
Шаг 3. Настройте страницу продукта
Пришло время заняться кастомизацией. Сначала мы будем перемещаться по существующей странице продуктов из внешнего интерфейса, который мы установили ранее на этих этапах.
Важно, чтобы вы выбрали конкретный продукт, который нам нужно настроить. У вас должны быть полные данные, изображения работ, которые нам необходимо настроить. Таким образом, процесс визуализации раздела страницы, который вы создадите, станет более комфортным.
Опция UX-конструктора видна. Просто нажмите кнопку, чтобы начать настройку.
После открытия конструктора UX на изображении вы увидите, что элементы страницы продукта доступны на левой боковой панели страницы вашего продукта.
Левая боковая панель — это блок, который мы изначально создали. Мы создали его с помощью шорткодов, взятых из документации.
У вас есть возможность изменить порядок элементов на левой боковой панели и изменить настройки с помощью опции элемента. В этом amp мы изменим порядок цен, доступных в левом меню.
Более того, он также позволяет вам переставлять элементы из предварительного просмотра конструктора и добавлять дополнительные компоненты на страницу продукта конструктора. В этой демонстрации раздел «Вкладки продуктов» и «Сопутствующий продукт» были изменены простым перетаскиванием.
Благодаря значительной функциональности перетаскивания Flatsome готов предоставить вам то, что вы ищете на своем веб-сайте. Благодаря настраиваемым модулям вы можете легко создавать фантастические страницы. Функция перетаскивания делает жизнь еще комфортнее.
Подведение итогов
В нашу современную эпоху крайне важно иметь онлайн-бизнес, потому что люди предпочитают оставаться дома, чтобы оставаться в безопасности. Так что начните создавать свой первый интернет-магазин с помощью Flatsome и гипнотизируйте своих клиентов своей уникальностью и креативностью. Более того, в редакторе контента нет путаницы с кодом, всего несколько строк короткого кода. Flatsome , несомненно, лучшая тема, с которой я когда-либо сталкивался. Поэтому нет необходимости искать какую-либо другую тему, просто нажмите загрузки и сразу же начните создавать свой индивидуальный интернет-магазин.
