Flatesome Тема
Flatsome - это мощная тема WordPress, разработанная для веб-сайтов электронной коммерции и имеющая интеграцию с WooCommerce.
Это одна из самых популярных тем WooCommerce на ThemeForest. На момент написания этого руководства было продано более 174 500 продаж и получился отличный 4,8-звездочный рейтинг на основе более 6600 отзывов.
Flatsome в первую очередь разработан для начинающих и пользователей, не разбирающихся в технологиях.
Это отлично подходит для людей, которые хотят начать онлайн-бизнес, но не знают, как кодировать, или не имеют бюджета, чтобы нанять профессионального программиста. С Flatsome вы сможете создать профессионально выглядящий веб-сайт, используя простые и интуитивно понятные инструменты.
Теперь Flatsome обладает множеством потрясающих функций и возможностей. Чтобы продемонстрировать, что доступно и как это работает, у нас есть краткое руководство, показывающее, как создать страницу продукта WooCommerce с помощью Flatsome.
Итак, без лишних слов, приступим:
Таблица содержания:
- Flatesome Тема
- Разница между 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 Builder, а второй - создать страницу вручную. Если вы выберете второй вариант, вам придется обратиться к официальной документации и найти шорткоды. Если вы новичок и это ваш первый опыт создания интернет-магазина, я рекомендую выбрать этот первый вариант.
(Необязательно) Шаг 2. Создайте страницу продукта вручную
Вот скриншот официальной страницы документации Flatsome. Вы можете ввести слово шорткоды и искать их.
Как только вы нажмете на поиск, на экране появится список шорткодов. Вы можете выбрать шорткоды, которые важны для страницы продукта. Использование шорткодов требует меньше усилий, но важно, чтобы у вас был небольшой практический опыт работы с WordPress и использованием шорткодов.
Вот список шорткодов, которые вы можете использовать на веб-сайте для создания страниц.
В этом amp мы будем настраивать макет левой боковой панели в полную высоту; таким образом, мы будем копировать код для дизайна. Ниже приведено изображение нанесенного, но вы можете легко скопировать его из структуры.
Начните создавать блок с заголовком. Если вы хотите разработать голову, вам нужно нажать «Добавить», доступную в блоках UX, размещенных на вашей панели.
Вы можете назвать блок по своему желанию. В этом amp мы назвали объединение «Макет левой боковой панели в полную высоту». Далее вы можете увидеть шорткоды внутри редактора блоков. Как только вы завершите копирование желаемых шорткодов, вы можете нажать «Опубликовать».
После этого небольшого шага, когда мы сможем настроить нашу страницу в соответствии с нашими желаниями, мы будем на высоте. Теперь перейдите к параметру темы страницы продукта и нажмите значок настраиваемого макета.
После завершения вы сможете создавать блоки из раскрывающегося списка Custom Product Layout.
Выберите блок, который мы только что создали. Нашей основной целью при создании этого блока было создание из него страницы продукта. В соответствии с этим экс amp ля, Полная высота оставила расположение боковой панели находится блок, в то время как на ваш конце, то это будет , как вы назвали.
После завершения просто нажмите кнопку «Опубликовать»; он сохранит настройки.
Шаг 3. Настройте страницу продукта
Пришло время приступить к настройке. Сначала мы будем перемещаться по странице существующих продуктов из интерфейса, который мы установили ранее в шагах.
Важно, чтобы вы выбрали конкретный продукт, который нам нужно настроить. У вас должна быть полная информация, изображения работы, которую нам нужно настроить. Таким образом, процесс визуализации создаваемого раздела страницы становится более удобным.
Видна опция конструктора UX. Просто нажмите кнопку, чтобы начать настройку.
После того, как конструктор UX открыт, вы можете увидеть на изображении, что элементы страницы продукта доступны на левой боковой панели страницы продуктов.
Левая боковая панель - это блок, который мы изначально создали. Мы создали его с помощью шорткодов, взятых из документации.
У вас есть возможности изменить порядок элементов на левой боковой панели и изменить настройки в параметре элемента. В этом amp мы изменим порядок цен, доступных в левом меню.
Кроме того, он также позволяет вам переупорядочивать элементы из предварительного просмотра конструктора и размещать дополнительные компоненты на странице продукта конструктора. В этой демонстрации раздел «Вкладки продуктов» и сопутствующий продукт были изменены простым перетаскиванием.
Благодаря значительной функциональности перетаскивания Flatsome готов предоставить вам то, что вы ищете на своем веб-сайте. Благодаря гибко настраиваемым модулям вы можете легко создавать фантастические страницы. Функция перетаскивания делает жизнь еще более комфортной.
Завершение
В нашу современную эпоху обязательно иметь онлайн-бизнес, потому что люди предпочитают оставаться дома, чтобы оставаться в безопасности. Так что начните создавать свой первый интернет-магазин с Flatsome и очаровывайте своих клиентов своей уникальностью и креативностью. Более того, в редакторе контента нет беспорядка кода, всего несколько строк шорткода. Flatsome , несомненно, лучшая тема, с которой мне приходилось сталкиваться. Так что нет необходимости искать какую-либо другую тему, просто нажмите кнопку загрузки и сразу начните создавать свой индивидуальный интернет-магазин.
