Motyw WordPress Astra; Personalizacja

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:

motyw astra personalizacja wygląd dostosuj

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:

fontapair - jakie czcionki wybrać na stronę

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:

jakie czcionki wybrać na stronę

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:

jakie kolory wybrać na stronę

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:

coolors

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:

color pick eye dropper

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:

jak zrobić przyciski

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:

tworzenie nagłówka - motyw 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:

motyw wordpress astra - tworzenie nagłówka

Zatem pierwszą rzeczą jaką należy dodać jest logo (bądź tytuł strony) w tym celu klikamy w lewej kolumnie „Site Title & logo”:

dodawanie logo do strony na wordpress Astra

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.:

tworzenie menu na stronie wordpress astra

W kolejnej części tej serii „Jak zrobić sklep internetowy krok po kroku” zajmiemy się już instalacją wtyczek.

1 komentarz “Motyw WordPress Astra; Personalizacja”

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Scroll to Top