Flatesome Theme
Flatsome to potężny motyw WordPress zaprojektowany dla witryn eCommerce i wyposażony w integrację z WooCommerce.
Jest to jeden z najpopularniejszych motywów WooCommerce w ThemeForest. W momencie pisania tego samouczka było to ponad 174.500 sprzedaży i niesamowita ocena 4,8-gwiazdkowa pochodząca z ponad 6600+ recenzji.
Flatsome został zaprojektowany głównie z myślą o początkujących i nieznających się technice użytkownikach.
Jest to idealne rozwiązanie dla osób, które chcą rozpocząć działalność w Internecie, ale nie potrafią kodować ani nie mają budżetu na zatrudnienie profesjonalnego programisty. 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 funkcji. Aby pokazać, co jest dostępne i jak to działa, mamy krótki samouczek pokazujący, jak utworzyć stronę produktu WooCommerce za pomocą Flatsome.
Więc bez zbędnych ceregieli zacznijmy:
Spis treści:
- Flatesome Theme
- 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ęczne tworzenie strony produktu
- Krok 3: Dostosuj stronę produktu
- Podsumowanie
Różnica między Flatsome, WooCommerce i WordPress
Witając naszych nowych czytelników, musimy podać kilka niezbędnych informacji, 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 do tworzenia swojej witryny. Dostępne są tysiące plugin i motywów do wykonywania innych zadań zgodnie z wymaganiami.
WooCommerce to plugin którą instalujemy na WordPress, która umożliwia dodawanie różnych funkcji do naszej witryny. Dzięki instalacji tej plugin możemy uczynić naszą witrynę i sklep internetowy z dodatkowymi funkcjami, takimi jak koszyk, przetwarzanie płatności, zarządzanie produktami itp.
Wreszcie, 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 do naszych pragnień. Na przykład, jeśli logo Twojej firmy jest pomarańczowe, chcesz odbijać się od koloru witryny. To właśnie może Ci zapewnić Flatsome.
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 naszej strony produktu za pomocą fantastycznego kreatora UX, który jest dostarczany z motywem Flatsome. Jest to funkcja przeciągnij i upuść, która sprawia, że życie projektanta jest niezwykle łatwe.
Prawie wszyscy robili zakupy w Internecie, prawdopodobnie z powodu trudnych czasów, z którymi mieliśmy do czynienia w ciągu ostatnich kilku miesięcy. Pozostanie w domu było dla nas wszystkich najbezpieczniejszym rozwiązaniem. Dlatego wszyscy nasi czytelnicy zgodzą się z tym, że sklep internetowy jest dużo bardziej skomplikowany w porównaniu ze standardową stroną internetową.
Jednak z pomocą WooCommerce i Flatsome zadanie to stało się niezwykle łatwe. Musisz usiąść i zaplanować, jak będzie wyglądać Twoja witryna i to wszystko. WooCommerce będzie tam, aby pomóc Ci w opcjach kreatora. Możesz stworzyć pełnoprawny działający sklep internetowy w zaledwie kilka minut za pomocą przeciągania i upuszczania.
Dzięki WooCommerce i Flatsome będziesz mógł nadać swoim pomysłom na prowadzenie sklepu internetowego zupełnie nowe życie. Twoja strona musi mieć nowoczesny i piękny wygląd, aby przyciągała klientów. Dlatego Flatsome jest najlepszym rozwiązaniem dla wszystkich Twoich problemów, więc pobierz go stąd i zacznijmy.
Flatsome ma kilka fantastycznych funkcji, ale jedną z części jest to, że stał się najlepszym 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 wartościowym.
Nie tracą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ć, jak zadanie będzie przebiegać przez proces.
Krok 1: Wybierz układ strony produktu
Najpierw zaczniemy od wybrania układu strony produktów. Ten wybór stworzy podstawową stronę naszego sklepu internetowego, którą później dostosujemy zgodnie z naszymi życzeniami. Ten przewodnik krok po kroku przeprowadzi Cię przez proces dostosowywania strony.
Do tego ex amp le będziemy kontynuować z opcją Klasyczny Shop. Jednak nie ma 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 się różnić od pozostałych.
Przechodząc do dostosowania produktu, nadaliśmy mu nazwę Lewy pasek boczny o pełnej wysokości.
Dostępne są dwie opcje dostosowywania strony produktów. Pierwsza to kreator UX, druga to ręczne zbudowanie strony. Jeśli wybierzesz drugą opcję, będziesz musiał udać się do oficjalnej dokumentacji i zlokalizować skróty. Jeśli jesteś początkującym i jest to Twoje pierwsze doświadczenie w budowaniu sklepu internetowego, polecam wybrać tę pierwszą opcję.
(Opcjonalnie) Krok 2: Ręczne tworzenie strony produktu
Oto zrzut ekranu oficjalnej strony dokumentacji Flatsome. Możesz wpisać skróty słów i je wyszukać.
Po kliknięciu wyszukiwania na ekranie pojawi się lista skrótów. Możesz wybrać skróty, które są ważne dla strony produktu. Używanie skrótów wymaga mniej wysiłku, ale ważne jest, abyś miał trochę praktycznego doświadczenia z WordPressem i używaniem skrótów.
Oto lista skrótów, których można używać w witrynie do tworzenia stron.
W ten ex amp le będziemy dostosowywania pełna wysokość opuścił układ paska bocznego; w ten sposób będziemy kopiować kod projektu. Poniżej znajduje się zdjęcie zastosowanego, ale można go łatwo skopiować ze struktury.
Zacznij tworzyć blok z tytułem. Jeśli chcesz rozwijać głowę, musisz kliknąć „Dodaj nowy” dostępny pod blokami UX umieszczonymi w Twoim dashboardzie.
Możesz nazwać blok zgodnie ze swoimi pragnieniami. Tu, w tym ex amp le, nazwaliśmy Unia jako "pełny układ wysokość lewym pasku bocznym. Następnie możesz zobaczyć skróty w edytorze bloków. Po zakończeniu kopiowania żądanych skrótów możesz nacisnąć publikację.
Będziemy na równi po tym jednym małym kroku, w którym możemy dostosować naszą stronę do naszych pragnień. Teraz przejdź do opcji motywu strony produktu i kliknij ikonę niestandardowego układu.
Po zakończeniu będziesz mógł teraz tworzyć bloki z listy rozwijanej 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 ex amp le, pełnej wysokości lewy pasek boczny układ jest blok, a na swoim końcu, to będzie, jak nazwali.
Po zakończeniu naciśnij przycisk Publikuj; zapisze ustawienia.
Krok 3: Dostosuj stronę produktu
Nadszedł czas, abyśmy zaczęli dostosowywać. Najpierw przejdziemy do istniejącej strony produktów z poziomu 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, zdjęcia prac, które musimy dostosować. W ten sposób proces wizualizacji sekcji strony, którą utworzysz, stanie się wygodniejszy.
Widoczna jest opcja konstruktora UX. Po prostu naciśnij przycisk, aby rozpocząć dostosowywanie.
Po otwarciu kreatora UX możesz zobaczyć na obrazku, że elementy strony produktu są dostępne w lewym panelu bocznym 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.
Masz opcje zmiany kolejności elementów z lewego panelu bocznego i zmiany ustawień w opcji elementu. W ten ex amp le będziemy reorganizację Cena dostępna w menu po lewej.
Co więcej, pozwala również na przearanżowanie elementów z podglądu kreatora i umieszczenie dodatkowych komponentów na stronie produktu kreatora. W tym demo sekcja zakładki produktów i powiązany produkt zostały uporządkowane za pomocą prostego przeciągania i upuszczania.
Dzięki znaczącej funkcji przeciągnij i upuść, Flatsome jest gotowy, aby zapewnić Ci to, czego szukasz w swojej witrynie. Dzięki wysoce konfigurowalnym modułom możesz z łatwością tworzyć fantastyczne strony. Funkcja przeciągania i upuszczania sprawia, że życie jest jeszcze wygodniejsze.
Podsumowanie
Posiadanie biznesu internetowego w dzisiejszych czasach jest konieczne, ponieważ ludzie wolą pozostać w domu, aby zachować bezpieczeństwo. Zacznij więc budować swój pierwszy biznesowy sklep internetowy z Flatsome i zahipnotyzuj klientów swoją wyjątkowością i kreatywnością. Co więcej, w edytorze treści nie ma bałaganu w kodzie, tylko kilka krótkich linii kodu. Flatsome to niewątpliwie najlepszy temat, z jakim się spotkałem. Nie musisz więc rozglądać się za żadnym innym motywem, po prostu naciśnij przycisk pobierania i od razu zacznij tworzyć spersonalizowany sklep internetowy.
