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-конструктора, а інший – створити сторінку вручну. Якщо ви виберете другий варіант, вам доведеться перейти до офіційної документації та знайти шорткоди. Якщо ви новачок і це ваш перший досвід створення інтернет-магазину, я рекомендую вибрати цей перший варіант.
(Необов’язково) Крок 2: створіть сторінку продукту вручну
Ось скріншот офіційної сторінки документації Flatsome. Ви можете ввести слово shortcodes і шукати їх.
Після натискання кнопки «Пошук» на екрані з’явиться список коротких кодів. Ви можете вибрати короткі коди, які важливі для сторінки товару. Використання шорткодів вимагає менше зусиль, але важливо мати невеликий практичний досвід роботи з WordPress і використання шорткодів.
Ось список шорткодів, які можна використовувати на веб-сайті для створення сторінок.
У цьому amp ми будемо налаштовувати макет лівої бічної панелі повної висоти; таким чином, ми будемо копіювати код для дизайну. Нижче наведено зображення нанесеного, але ви можете легко скопіювати його зі структури.
Почніть створення блоку з заголовка. Якщо ви хочете розробити головний, вам потрібно натиснути «Додати новий», доступний під UX-блоками, розміщеними на панелі інструментів.
Ви можете назвати блок за своїм бажанням. Тут, у цьому amp , ми назвали об’єднання «Макет лівої бічної панелі на повну висоту». Далі ви можете побачити короткі коди в редакторі блоків. Після завершення копіювання потрібних коротких кодів ви можете натиснути «Опублікувати».
Ми будемо на рівні після цього маленького кроку, де ми зможемо налаштувати нашу сторінку відповідно до наших бажань. Тепер перейдіть до параметра теми сторінки продукту та натисніть значок спеціального макета.
Після завершення ви зможете створювати блоки зі спадного меню «Користувацький макет продукту».
Виберіть блок, який ми щойно створили. Наша головна мета створення цього блоку полягала в тому, щоб створити з нього сторінку продукту. Згідно з цим amp , макет лівої бічної панелі на повну висоту є блоком, тоді як у вашому кінці він буде таким, як ви назвали.
Після завершення просто натисніть кнопку «Опублікувати»; це збереже налаштування.
Крок 3: Налаштуйте сторінку продукту
Нам час починати налаштування. По-перше, ми будемо переміщатися по існуючій сторінці продуктів з інтерфейсу, який ми встановили раніше в кроках.
Важливо, щоб ви вибрали конкретний продукт, який нам потрібно налаштувати. У вас повинні бути повні деталі, зображення роботи, які ми повинні налаштувати. Таким чином процес стане більш зручним для візуалізації розділу сторінки, який ви створите.
Опція UX Builder є видимою. Просто натисніть кнопку, щоб розпочати налаштування.
Коли UX-конструктор відкрито, на зображенні можна побачити, що елементи сторінки продукту доступні на лівій бічній панелі сторінки продуктів.
Ліва бічна панель - це блок, який ми спочатку створили. Ми створили його за допомогою шорткодів, взятих із документації.
Ви можете змінити порядок елементів на лівій бічній панелі та змінити параметри в опції елемента. У цьому amp ми змінимо порядок ціни, доступної в меню ліворуч.
Крім того, це також дозволяє змінювати порядок елементів із попереднього перегляду конструктора та розміщувати додаткові компоненти на сторінці продукту конструктора. У цій демонстрації розділ «Вкладки продуктів» і «Пов’язаний продукт» змінено за допомогою простого перетягування.
Завдяки значній функції перетягування Flatsome готовий надати вам те, що ви шукаєте на своєму веб-сайті. За допомогою модулів, які можна налаштувати, ви можете легко створювати фантастичні сторінки. Функція перетягування робить життя ще комфортнішим.
Підведенню
В наш сучасний час важливо мати онлайн-бізнес, тому що люди вважають за краще залишатися вдома, щоб бути в безпеці. Тож почніть створювати свій перший онлайн-магазин із Flatsome і зачаровуйте своїх клієнтів своєю унікальністю та креативністю. Крім того, в редакторі контенту немає безладу в коді, лише кілька рядків короткого коду. Flatsome, безсумнівно, найкраща тема, з якою я стикався. Тож немає потреби шукати будь-яку іншу тему, просто натисніть завантаження та одразу почніть створювати свій індивідуальний онлайн-магазин.
