Płaski motyw
Flatsome to potężny motyw WordPress przeznaczony dla witryn eCommerce i wyposażony w integrację z WooCommerce.
Jest to jeden z najpopularniejszych motywów WooCommerce w ThemeForest. W chwili pisania tego samouczka sprzedano ponad 174 500 egzemplarzy, a na podstawie ponad 6600 recenzji uzyskano niesamowitą ocenę 4,8 gwiazdki.
Flatsome został zaprojektowany przede wszystkim z myślą o początkujących i użytkownikach nieobeznanych z technologią.
Jest to świetne rozwiązanie dla osób, które chcą rozpocząć działalność w Internecie, ale nie wiedzą, jak kodować lub nie mają budżetu, aby zatrudnić profesjonalnego programistę. Dzięki Flatsome będziesz mógł stworzyć profesjonalnie wyglądającą stronę internetową za pomocą prostych i intuicyjnych narzędzi.
Teraz Flatsome jest wyposażony w mnóstwo niesamowitych funkcji i funkcjonalności. Aby pokazać, co jest dostępne i jak to działa, przygotowaliśmy krótki samouczek pokazujący, jak utworzyć stronę produktu WooCommerce za pomocą Flatsome.
Zatem bez zbędnych ceregieli zaczynajmy:
Spis treści:
- Płaski motyw
- Różnica między Flatsome, WooCommerce i WordPress
- Utwórz stronę produktu WooCommerce za pomocą motywu Flatsome
- Krok 1: Wybierz układ strony produktu
- (Opcjonalnie) Krok 2: Ręcznie utwórz stronę produktu
- Krok 3: Dostosuj stronę produktu
- Podsumowanie
Różnica między Flatsome, WooCommerce i WordPress
Witając naszych nowych czytelników, musimy podać pewne niezbędne informacje, aby wszyscy nasi czytelnicy byli na tej samej stronie. Tutaj omówimy różnicę we wszystkich trzech terminologiach, których będziemy używać w tym artykule.
Zacznijmy od WordPressa. Jest to platforma, na której instalujesz różne motywy i plugin aby stworzyć swoją stronę internetową. Dostępne są tysiące plugin i motywów, które umożliwiają realizację innych zadań zgodnie z Twoimi wymaganiami.
WooCommerce to plugin instalowana na WordPressie, która umożliwia dodawanie różnych funkcji do naszej witryny. Dzięki instalacji tej plugin możemy wzbogacić naszą stronę i sklep internetowy o dodatkowe funkcjonalności takie jak koszyk, przetwarzanie płatności, zarządzanie produktami itp.
Wreszcie, ale z pewnością, jednym z najważniejszych elementów jest wygląd naszej strony internetowej. Flatsome to motyw, który pozwala nam dostosować perspektywę naszej witryny zgodnie z naszymi pragnieniami. Na przykład, jeśli logo Twojej firmy jest pomarańczowe, warto odzwierciedlić kolor swojej witryny. To jest to, co Flatsome może Ci zapewnić.
Utwórz stronę produktu WooCommerce za pomocą motywu Flatsome
Ponieważ wszyscy nasi czytelnicy mają wiedzę na temat WordPress, WoCommerce i Flatsome, nadszedł czas, abyśmy mogli przejść do dostosowywania strony naszych produktów za pomocą fantastycznego narzędzia do tworzenia UX, które jest dostarczane z motywem Flatsome. Jest to funkcja „przeciągnij i upuść”, która niezwykle ułatwia życie projektanta.
Prawie wszyscy robili zakupy w Internecie, prawdopodobnie ze względu na trudne czasy, z jakimi przyszło nam się zmierzyć w ciągu ostatnich kilku miesięcy. Pozostanie w domu było najbezpieczniejszym rozwiązaniem dla nas wszystkich. Dlatego wszyscy nasi czytelnicy zgodzą się co do tego, że sklep internetowy jest o wiele bardziej skomplikowany w porównaniu ze standardową stroną internetową.
Jednak przy pomocy WooCommerce i Flatsome zadanie to stało się niezwykle łatwe. Trzeba usiąść i zaplanować jak będzie wyglądać Twoja strona internetowa i tyle. WooCommerce będzie tam, aby pomóc Ci w zakresie opcji kreatora. W ciągu kilku minut możesz stworzyć w pełni działający sklep internetowy za pomocą metody „przeciągnij i upuść”.
Dzięki WooCommerce i Flatsome będziesz mógł nadać swoim pomysłom na posiadanie sklepu internetowego zupełnie nowe życie. Twoja strona internetowa musi mieć nowoczesny i piękny wygląd, aby mogła przyciągnąć klientów. Dlatego Flatsome jest najlepszym rozwiązaniem wszystkich Twoich problemów, więc pobierz go stąd i zaczynajmy.
Flatsome ma kilka fantastycznych funkcji, ale jedną z jego części jest to, że stał się najpopularniejszym wyborem ponad 300 000 użytkowników. Doskonałe narzędzie pomaga w tworzeniu niesamowitych, responsywnych stron internetowych bez konieczności kodowania ani jednej linii. Co więcej, jego zdolność do tworzenia bardzo kreatywnych i unikalnych sklepów internetowych czyni go jeszcze bardziej godnym uwagi.
Nie marnując więcej czasu, przejdźmy do samouczka. Ten samouczek przeprowadzi Cię przez cały proces projektowania strony produktów. Zdjęcia pomogą Ci lepiej zrozumieć przebieg zadania.
Krok 1: Wybierz układ strony produktu
Na początek zaczniemy od wybrania układu strony produktów. Dzięki temu wyborowi utworzymy podstawową stronę naszego sklepu internetowego, którą później będziemy dostosowywać według naszych upodobań. Ten przewodnik krok po kroku przeprowadzi Cię przez proces dostosowywania strony.
W tym amp będziemy kontynuować opcję Classic Shop. Nie ma jednak dla Ciebie żadnych ograniczeń. Proces dostosowywania będzie podobny dla każdego wybranego układu. Jedyną różnicą będzie to, że podstawowa struktura strony będzie inna od pozostałych.
Przechodząc do dostosowywania produktu, nadaliśmy mu nazwę Lewy pasek boczny o pełnej wysokości.
Dostępne są dwie opcje dostosowywania strony produktów. Pierwszą z nich należy wykonać za pomocą kreatora UX, drugą zaś jest zbudowanie strony ręcznie. Jeśli wybierzesz drugą opcję, będziesz musiał udać się do oficjalnej dokumentacji i zlokalizować skróty. Jeśli jesteś początkujący i to Twoje pierwsze doświadczenie z budowaniem sklepu internetowego, polecam wybrać tę pierwszą opcję.
(Opcjonalnie) Krok 2: Ręcznie utwórz stronę produktu
Oto zrzut ekranu oficjalnej strony dokumentacji Flatsome. Możesz wpisać słowo shortcodes i wyszukać je.
Po kliknięciu przycisku wyszukiwania na ekranie zostanie wyświetlona lista krótkich kodów. Możesz wybrać skróty, które są ważne dla strony produktu. Korzystanie z krótkich kodów wymaga mniej wysiłku, ale ważne jest, abyś miał trochę praktycznego doświadczenia z WordPressem i używaniem krótkich kodów.
Oto lista skrótów, których możesz używać w witrynie do tworzenia stron.
W tym amp będziemy dostosowywać układ lewego paska bocznego o pełnej wysokości; w związku z tym będziemy kopiować kod projektu. Poniżej znajduje się zdjęcie zastosowanego rozwiązania, ale można je łatwo skopiować z konstrukcji.
Zacznij od utworzenia bloku z tytułem. Jeśli chcesz rozwijać głowę, musisz kliknąć „Dodaj nowy” dostępny pod blokami UX umieszczonymi na Twoim dashboardzie.
Możesz nazwać blok zgodnie ze swoimi pragnieniami. W tym amp nazwaliśmy połączenie „Układ lewego paska bocznego o pełnej wysokości”. Następnie możesz zobaczyć skróty w edytorze bloków. Po zakończeniu kopiowania żądanych skrótów możesz kliknąć opcję publikowania.
Po tym jednym małym kroku będziemy na równi, w którym będziemy mogli dostosować naszą stronę zgodnie z naszymi pragnieniami. Teraz przejdź do opcji motywu strony produktu i kliknij ikonę niestandardowego układu.
Po zakończeniu będziesz mógł tworzyć bloki z menu rozwijanego Niestandardowy układ produktu.
Wybierz blok, który właśnie utworzyliśmy. Naszym głównym celem przy tworzeniu tego bloku było stworzenie z niego strony produktu. Zgodnie z tym amp układ lewego paska bocznego o pełnej wysokości to blok, podczas gdy na końcu będzie on taki, jak nazwałeś.
Po zakończeniu kliknij przycisk Publikuj; zapisze ustawienia.
Krok 3: Dostosuj stronę produktu
Nadszedł czas, abyśmy rozpoczęli dostosowywanie. Najpierw będziemy nawigować po istniejącej stronie produktów z interfejsu, który ustawiliśmy wcześniej w krokach.
Ważne jest, aby wybrać konkretny produkt, który musimy skonfigurować. Powinieneś mieć pełne szczegóły, obrazy pracy, którą musimy dostosować. W ten sposób proces wizualizacji utworzonej sekcji strony stanie się wygodniejszy.
Opcja kreatora UX jest widoczna. Wystarczy nacisnąć przycisk, aby rozpocząć dostosowywanie.
Po otwarciu kreatora UX na obrazku widać, że elementy strony produktu są dostępne w lewym panelu strony produktów.
Lewy panel boczny to blok, który początkowo utworzyliśmy. Stworzyliśmy go za pomocą skrótów zaczerpniętych z dokumentacji.
Opcje zmiany kolejności elementów znajdują się w lewym panelu bocznym oraz zmiany ustawień w opcji elementu. W tym amp zmienimy kolejność Ceny dostępnej w menu po lewej stronie.
Co więcej, pozwala także na przestawianie elementów z podglądu kreatora i umieszczanie dodatkowych komponentów na stronie produktu kreatora. W tym demo sekcja Zakładki produktów i powiązane produkty zostały uporządkowane za pomocą prostego przeciągania i upuszczania.
Dzięki znacznej funkcjonalności przeciągania i upuszczania Flatsome jest gotowy zapewnić Ci to, czego szukasz w swojej witrynie. Dzięki wysoce konfigurowalnym modułom możesz z łatwością tworzyć fantastyczne strony. Funkcja „przeciągnij i upuść” sprawia, że życie jest jeszcze wygodniejsze.
Podsumowanie
W dzisiejszych czasach prowadzenie biznesu online jest koniecznością, ponieważ ludzie wolą pozostać w domu, aby zachować bezpieczeństwo. Zacznij więc budować swój pierwszy sklep internetowy z Flatsome i zahipnotyzuj swoich klientów jego wyjątkowością i kreatywnością. Co więcej, w edytorze treści nie ma bałaganu w kodzie, tylko kilka linii krótkiego kodu. Flatsome to niewątpliwie najlepszy motyw, z jakim się spotkałem. Nie ma więc potrzeby rozglądać się za innym motywem, po prostu naciśnij pobierania i od razu zacznij budować swój spersonalizowany sklep internetowy.
