W tym wpisie serii dotyczącej budowy sklepu internetowego na WordPress Woocommerce zajmiemy się częściową personalizacją motyw WordPressAstra, inaczej mówiąc dostosujemy wizualnie motyw Astra do naszych potrzeb i oczekiwań wybierając kolory, fonty, budując nagłówek, ustalając szerokość strony itp.
Motyw WordPRess Astra – Konfiguracja
Aby „wejść” do okna personalizacji motywu należy wejść w zakładkę „Wygląd-dostosuj”.
Powinien nam się otworzyć taki oto widok:
W pasku bocznym mamy różne opcje do konfiguracji. W zależności od zainstalowanego i używanego motywu WordPress te opcje będą różne. W motywie Astra wygląda to tak jak na powyższej grafice. Wybór opcji jest naprawdę spory jak na darmowy motyw.
Motyw Astra; ustawienia globalne
Zacznijmy od ustawień „Global”. Do wyboru jako pierwszą sekcję mamy „Typography” – ,gdzie możemy ustawić fonty-czcionki dla naszego sklepu internetowego. Jeśli nie wiemy jakie czcionki wybrać twórcy motywu Astra przygotowali 6 różnych zestawów („Presets”).
Ja proponuję jednak poszukać nieco, gdzie indziej idealnych literek na Twoją stronę internetową. W tym celu polecam kilka darmowych narzędzi.
Fonty, czcionki, literki; czyli co jak i gdzie.
Jako pierwszą stronę proponuję: https://www.fontpair.co/. Na stronie tej mamy masę inspiracji jeśli chodzi o wybór fontów. Polecam skorzystać zwłaszcza z zakładki „Pairing”, gdzie mamy fonty ułożone w pary, dzięki czemu możemy wybrać fonty dla nagłówków oraz dla tekstu w naszym sklepie internetowym w idealnym połączeniu:
Pod każdym zestawem mamy nazwę użytych fontów. Są to darmowe fonty od Google, które możemy wybrać w personalizacji motywu Astra. Często dostaję pytania: „jaka czcionka będzie najlepsza na stronę lub sklep internetowy?” Moja odpowiedź to; czytelna. Dlatego dla „zwykłego” tekstu wybierz czcionkę bez-szeryfową (bez ogonków). Dzięki temu tekst na Twojej stronie będzie czytelny. Popularne i bardzo dobre fonty bezszeryfowe (Sans-Serif) to: Open Sans, Montserrat, Nunito, Przy tych fontach tekst jest czytelny, a oko nie męczy się podczas czytania tekstu na naszej stronie internetowej
Jakie wybrać czcionki dla nagłówków, a jakie dla tekstu?
Czcionki dla nagłówków natomiast można wybrać szeryfowe (Serif), czyli z ogonkami. Tekstu w formie nagłówków nie ma za wiele, więc oko nie zmęczy się podczas czytania, a czcionki takie w świetny sposób podkreślą nagłówki. Ze swojej strony polecam czcionki szeryfowe Playfair Display, czy Cardo.
Oczywiście nie musisz w nagłówkach koniecznie korzystać z czcionek „z ogonkami”. Możesz równie dobrze użyć dla nagłówków tego samego fontu co dla tekstu tylko np. pogrubić ją. Jeśli zatem masz już wybrane idealne czcionki czas ustawić je w oknie personalizacji motywu zarówno w sekcji „Body” (czcionka tekstu), jak i „Headings” (nagłówki). Ja wybrałem czcionkę „Poppins” w grubości 700 dla nagłówków, i taki sam dla zwykłego tekstu, tyle, że w grubości 400:
Pamiętaj! Wybór odpowiednich czcionek to jedna z najważniejszych rzeczy jeśli chodzi o kwestię wizualną Twojego sklepu. Czcionki w dużej mierze decydują o odbiorze Twojego sklepu przez odbiorcę. Zachowaj również umiar i konsekwencję: używaj na swojej stronie maksymalnie 2 różne kroje czcionek – niech Twój sklep nie wygląda jak choinka.
Jakie kolory wybrać na stronę lub na WordPress?
Kolory. Po zapisaniu wybraniu typografii cofamy się w oknie personalizacji i wybieramy kolejne bardzo ważne ustawienie na Twojej stronie, czyli „Colors”. I w tym miejscu należy wybrać paletę kolorów, której będziemy konsekwentnie używać na naszej stronie internetowej:
Oprócz fontów to kolory decydują o odbiorze Twojej strony w oczach użytkownika. I tak samo jak z fontami należy zachować umiar i konsekwencję, by Twoja strona była spójna.
I w tym miejscu chciałbym polecić Ci 3 świetne narzędzia, dzięki którym wybierzesz i dobierzesz idealny kolory na Twoją stronę lub sklep.
Google Color Design
Pierwsze narzędzie to Google Color Design: https://material.io/resources/color/
Narzędzie przyda się zarówno w przypadku, gdy mamy już określony kolor główny i trzeba jedynie dobrać do niego odcienie, jak i w momencie, gdy dopiero szukamy idealnego koloru do naszego sklepu internetowego. Mamy do wyboru paletę koloru. Jeśli natomiast chcemy dobrać odcienie, należy wkleić w sekcji „Custom” kod koloru, a strona pokaże nam odcienie jaśniejsze-ciemniejsze, czy jasne kolory np. jako tło dla naszego sklepu. Kod koloru należy oczywiście skopiować i wkleić w oknie personalizacji motywu w ustawieniach „Global palette” oraz poniżej: „Theme color” „Link Color” itp.
Kolejne świetne narzędzie do inspiracji jeśli chodzi o wybór kolorów to strona: https://coolors.co/ , gdzie możemy eksplorować trendujące palety kolorów:
Ostatnim darmowym narzędziem, który może pomóc w wyborze koloru jest rozszerzenie do przeglądarki np. Chrome – „Color Pick Eyedropper”.
Narzędzie to pozwala na „pobranie” kodu koloru na stronie która nam się podoba i chcielibyśmy użyć danego koloru na stronie. Rozszerzenie jest banalnie proste w użyciu należy jedynie kliknąć ikonkę rozszerzenia w przeglądarce, najechać na interesujący nas kolor i gotowe:
Personalizacja przycisków w motywie Astra
Kolejne ustawienia w sekcji „Global” to „Container”; tu zostawiamy wartości domyślne i przechodzimy do kolejnej sekcji, czyli „Buttons”.
„Buttons”, czyli personalizacja przycisków. Tu podobnie jak w przypadku fontów, czy kolorów mamy do wyboru 6 wstępnie skonfigurowanych wizualnie przycisków. Jednak oczywiście możemy je skonfigurować tak jak chcemy wybierając wielkość zaokrąglenia przycisków, czy wielkość czcionki:
Tworzenie nagłówka w motywie Astra
Tworzenie nagłówka. Po wyjściu z sekcji „Global” odnajdujemy w opcja personalizacji motywu sekcję „Header Builder”. To jedna z najważniejszych opcji personalizacji motywu. Szatę wizualną każdej podstrony będziemy nadawać w edycji danej zakładki, jednak nagłówek tworzymy właśnie w opcji dostosowania motywu.
Poniższa grafika prezentuje okno tworzenia i edycji nagłówka w Twoim sklepie z wykorzystaniem motywu Astra:
Motyw Astra daje nam możliwość stworzenia w nagłówku aż 3 poziomych sekcji, które możemy uzupełnić o elementy takie jak: menu, logo, linki social media, wyszukiwarka itp. Sekcje te zaznaczyłem na kolory: czarny, biały oraz czerwony.
To, że masz do dyspozycji aż 3 poziome sekcje nie znaczy że musisz koniecznie aż z 3 skorzystać. Wręcz przeciwnie; nawigacja w sklepie internetowym jest bardzo ważna: powinna być prosta i intuicyjna. Osobiście jestem zwolennikiem minimalizmu, tak aby nic nie rozpraszało potencjalnego użytkownika, który jest na naszej stronie internetowej.
Proponuje i swoim klientom polecam użycie tylko 3 elementów w nagłówku: logo, menu oraz ikonka koszyka./torebki (która po kliknięciu przenosi nas do podstrony zamówienia lub koszyka).
Aby dodać dany element do nagłówka np. logo należy kliknąć ikonkę plusika i wybrać element:
Zatem pierwszą rzeczą jaką należy dodać jest logo (bądź tytuł strony) w tym celu klikamy w lewej kolumnie „Site Title & logo”:
Przy wgrywaniu logo, możemy je prostym edytorem przyciąć. Po wgraniu w edycji możemy ustawić w pixelach rozmiar logo oraz zaznaczyć checkbox „Display Site Tittle” jeśli chcemy aby razem z logo wyświetlała nam się nazwa witryny, którą ustawiliśmy w kokpicie WordPress w zakładce „Ustawienia-ogólne”. Możemy również ustawić wyświetlanie „Display Site Tagline”.
Główna belka menu jest domyślnie biała. Możemy oczywiście ją edytować. W tym celu należy kliknąć ikonkę koła zębatego.
Mamy tu do wyboru 2 opcje: „General” oraz „Design”. W sekcji „General” ustawiamy wysokość nagłówka: domyślnie jest 70px. W sekcji „Design” możemy ustawić kolor nagłówka, odstępy itp.
Każdy z elementów, który wstawimy do nagłówka naszego sklepu możemy oczywiście dostosować. Wystarczy kliknąć w dany element jak np. menu by przejść do ustawień takich jak: wielkość i kolor czcionki, animacja po najechania na element w menu itp.:
W kolejnej części tej serii „Jak zrobić sklep internetowy krok po kroku” zajmiemy się już instalacją wtyczek.
