Флатоме тема
Flatsome - це потужна тема WordPress, призначена для веб -сайтів електронної комерції та поставляється з інтеграцією WooCommerce.
Це одна з найпопулярніших тем WooCommerce на ThemeForest. На момент написання цього підручника це було понад 174 500 продажів і чудовий рейтинг 4,8 зірки, отриманий з більш ніж 6 600 відгуків.
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 , ми назвали об’єднання як „Макет лівої бічної панелі на всю висоту“. Далі ви можете побачити шорткоди всередині редактора блоків. Після завершення копіювання потрібних шорткодів можна натиснути опублікувати.
Ми будемо на рівні після цього маленького кроку, де ми зможемо налаштувати свою сторінку відповідно до наших бажань. Тепер перейдіть до опції теми сторінки товару та натисніть значок власної розкладки.
Після завершення ви зможете створювати блоки зі спадного меню Custom Product Layout.
Виберіть блок, який ми щойно створили. Нашою основною метою створення цього блоку було створення сторінки продукту з нього. Згідно з цим попереднім amp , макет лівої бічної панелі на всю висоту - це блок, тоді як у вашому кінці він буде таким, як ви назвали.
Після завершення просто натисніть кнопку Опублікувати; він збереже налаштування.
Крок 3: Налаштуйте сторінку продукту
Нам пора розпочати налаштування. По-перше, ми перейдемо до наявної сторінки продуктів із передньої частини, яку ми встановили раніше в кроках.
Важливо вибрати конкретний продукт, який нам потрібно налаштувати. Ви повинні мати повні деталі, зображення твору, які нам потрібно налаштувати. Таким чином, процес стає зручнішим для візуалізації розділу сторінки, який ви створите.
Відображається параметр конструктора UX. Просто натисніть кнопку, щоб розпочати налаштування.
Після відкриття конструктора UX на зображенні видно, що елементи сторінки товару доступні на лівій бічній панелі сторінки продуктів.
Ліва бічна панель - це блок, який ми спочатку створили. Ми створили його за допомогою шорткодів, взятих з документації.
Ви можете змінити порядок елементів на лівій бічній панелі та змінити параметри з параметра елемента. У цьому попередньому amp ми змінимо ціну, доступну в меню ліворуч.
Крім того, він також дозволяє переставляти елементи з попереднього перегляду будівельника та надягати додаткові компоненти на сторінці продукту будівельника. У цій демонстрації розділ "Вкладки продуктів" та "Пов'язаний продукт" були змінені простим перетягуванням.
Завдяки значній функціональності перетягування та перетягування, Flatsome готовий надати вам те, що ви шукаєте на своєму веб-сайті. За допомогою високо настроюваних модулів ви можете легко створювати фантастичні сторінки. Функція перетягування робить життя ще комфортнішим.
Підведенню
У цей сучасний вік обов’язково мати інтернет-бізнес, тому що люди воліють залишатися вдома, щоб залишатися в безпеці. Тож почніть будувати свій бізнес першим інтернет-магазином з Flatsome і заворожуйте своїх клієнтів своєю унікальністю та креативністю. Більше того, у редакторі вмісту немає безладу коду, лише кілька рядків шорткоду. Flatsome - це, безсумнівно, найкраща тема, з якою я стикався. Тому немає необхідності шукати будь-яку іншу тему, просто натисніть кнопку завантаження та одразу почніть створювати свій індивідуальний інтернет-магазин.
