Motyw WordPress Astra; Personalizacja

motyw wordpress astra

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.

Mój Kurs WordPress

Chcesz nauczyć się Tworzyć strony www samodzielnie? Już jest mój autorski kurs tworzenie stron na WordPress. Prawie 11 godzin praktycznej wiedzy z zakresu tworzenia stron www. Kurs przeznaczony zarówno dla osób początkujących jak i tych, którzy chcą tworzyć strony zawodowo.

Prezent na do widzenia

Ebook: TOP 10 Wtyczek WordPress

Wpisz poniżej swój adres Email:

Udostępnij na Facebook
Udostęnij na Twitter
Udostępnij na Linkedin

Leave a Comment

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

Przewiń do góry