Motyw Astra WordPress

Opinie, recenzja, test i instrukcja dla motywu (szablonu) Astra dla WordPressa

Udostępnij

Twittnij

Udostępnij

14 min. czytania

W jaki sposób działa motyw Astra WordPress i czy warto z niego skorzystać? Z tej instrukcji dowiesz się, jak efektywnie korzystać z dostępnych w nim funkcji.

Potrzebujesz pomocy przy wyborze motywu WordPress, który będzie odpowiedni dla Twojej strony internetowej? Doskonale się składa, bo stworzyłem szczegółową instrukcję korzystania z jednego z najpopularniejszych rozwiązań – lekkiego motywu Astra. Jest dostępny w wersji darmowej i płatnej (Astra Pro), a w każdej z nich oferuje ogrom możliwości dopasowanych do najróżniejszych form działalności online. Odkryj jego funkcje, poznaj wszystkie dostępne narzędzia i dowiedz się, w jaki sposób zbudować przy jego pomocy własne miejsce w sieci.

Instalacja motywu stron WP Astra na Twojej stronie WWW

Aby rozpocząć proces tworzenia własnego miejsca w sieci, najpierw musisz zainstalować motyw Astra na swoim serwerze. Zrobisz to bezpośrednio z poziomu kokpitu WordPress. Proces ten nie należy do skomplikowanych, bo wszystko opiera się na zaledwie kilku krokach:

1. zaloguj się do Twojego konta na WordPress w przeglądarce;
2. przejdź do sekcji „Wygląd” i „Motywy„;

3. wybierz z sugerowanych motyw Astra. Jeśli go tam nie ma, kliknij „Dodaj motyw„;

4. w pustym oknie wyszukiwania wpisz nazwę motywu. Powinien wyświetlić się na samej górze listy po lewej stronie;

5. po najechaniu na motyw Astra możesz zobaczyć jego specyfikę („Podgląd”) albo zainstalować go na serwerze („Zainstaluj);
6. po naciśnięciu przycisku „Zainstaluj” rozpocznie się proces instalacji. Trwa zwykle krótką chwilę;
7. wróć do głównej strony zakładki „Motywy” i kliknij przycisk „Włącz” przy motywie Astra. Po chwili powinien pojawić się przy nim znacznik „Włączony” (jak na powyższym screenie).

Teraz możesz rozpocząć jego konfigurację i proces dostosowywania do własnych potrzeb. Poszczególne kroki opisałem w dalszej części artykułu.

Tworzenie strony bez znajomości kodu z darmowym motywem Astra

Warto na wstępie podkreślić, że Astra jest samodzielnym motywem. Możesz zatem konfigurować go wyłącznie przy pomocy podstawowego edytora WordPress i wbudowanego buildera. Ten ostatni jest jednak płatny i dostępny jedynie w opcji Astra Pro. Rozwiązanie od WP jest z kolei niezbyt wygodne i ma dość ograniczone możliwości.

Alternatywnie z powodzeniem wykorzystasz do edycji witryny popularny edytor Elementor. Przykład takiego „współdziałania” znajdziesz w moim artykule „wordpress elementor”. W jego przypadku budowa witryny jest realizowana przy pomocy metody „przeciągnij i upuść”. To jedno z najlepszych rozwiązań stosowanych zarówno przez początkujących, jak i doświadczonych twórców.

W tej instrukcji skupię się jednak na konfiguracji motywu Astra w standardowej formie – w edytorze WP w wersji darmowej i wbudowanym builderze w Astra Pro. Dzięki temu przekonasz się, jak – nawet w tak podstawowej wersji – łatwo jest przy pomocy WordPressa i popularnego motywu stworzyć stronę internetową.

1. Wybierz szablon Astra WordPress

Astra jest dostępna jako motyw darmowy oraz płatny Astra Pro. W obu przypadkach do dyspozycji użytkowników twórcy oddali ponad 300 szablonów witryn. Ich pełną listę znajdziesz na oficjalnej stronie internetowej narzędzia.

Skorzystanie z nich wymaga zainstalowania na WrdPressie dedykowanej wtyczki. Mowa tu o pluginie „Szablony startowe”. Aby to zrobić, przejdź do sekcji „Wtyczki” w kokpicie WP. Następnie kliknij „Dodaj wtyczkę” i wpisz podaną wyżej nazwę.

Naciśnij przycisk „Zainstaluj”, a następnie „Włącz”. Następnie przejdź do sekcji tego pluginu w menu bocznym po lewej stronie. Możesz z tego poziomu stworzyć witrynę przy pomocy kreatora AI lub korzystając z gotowych szablonów startowych.

Wybrałem drugą opcję. W tym wariancie najpierw wybierasz kreator, który będzie wykorzystywany do edycji Twojej strony WWW. Możesz użyć do tego klasycznego edytora bloków WP. Alternatywnie do dyspozycji są jednak również inne zaawansowane narzędzia, jak np. wspominany już wcześniej Elementor. Ja celowo skorzystam z pierwszej opcji.

Do wyboru masz szereg gotowych rozwiązań podzielonych na kategorie tematyczne i specyfikę Twojej strony. Wybierz dowolny, aby przejść do jego personalizacji.

Konfiguracja szablonu Astra

Po wybraniu konkretnego szablonu możesz przejść do jego edycji. Darmowy motyw Astra pozwala na dość podstawową konfigurację. W przypadku standardowych stron powinna ona być natomiast wystarczająca. W pierwszym oknie możesz zmienić:

• logo,
• font (nazywany czcionkami),
• paletę kolorów witryny.

Zmiany są wprowadzane w panelu po lewej stronie ekranu. Po ich sprecyzowaniu naciśnij przycisk „Kontynuuj”.

Teraz wybierz funkcje, które uważasz za potrzebne na swojej stronie WWW. Domyślnie uzyskasz wizualny kreator (oczywiście kompatybilny z Astrą) oraz formularz kontaktowy. Korzystanie z nich wymaga instalacji wtyczek Spectra i SureForms. Dodatkowo do Twojej dyspozycji są:

• narzędzia eCommerce (przy pomocy wtyczki SureCart),
• narzędzia SEO (przy pomocy wtyczki SureRank),
• narzędzia pozwalające na zarządzanie skrzynką e-mail (przy pomocy wtyczki Suremail),
• czat na żywo (przy pomocy wtyczki 3CX).

W tej instrukcji skupiam się na motywie Astra, pominę więc instalację dodatkowych wtyczek zewnętrznych (z wyjątkiem dwóch wymaganych pól, które będą przydatne w dalszej części poradnika).

Ostatnim krokiem jest podanie podstawowych informacji na temat swojej działalności. Potem możesz nacisnąć „Prześlij i zbuduj moją stronę internetową”.

To uruchomi instalator, który będzie pracował przez krótką chwilę. Następnie otrzymasz informację, że strona jest gotowa. Aby ją podejrzeć w aktualnej formie, naciśnij przycisk „Wyświetl swoją stronę internetową”. Uruchomi to standardowy podgląd witryny, który możesz uruchomić z kokpitu WP.

Rozpocznij pracę nad swoją stroną internetową, klikając „Zakończ konfigurację„.

2. Dostosuj szablon Astra

Po skonfigurowaniu szablonu możesz przejść do zarządzania jego najważniejszymi funkcjami. Pomoże Ci w tym sekcja „Setup” dostępna automatycznie z poziomu kokpitu. Poniżej wymieniłem jej elementy, a w dalszej części znajdziesz ich szczegółową charakterystykę.

Konfiguracja podstaw WordPress

W pierwszej sekcji możesz dopasować podstawowe parametry witryny. Aby edytować poszczególne elementy, naciśnij „Przejrzyj” lub „Set up„. To przeniesie Cię do odpowiedniej zakładki ustawień WP, pozwalającej na wprowadzenie zmian.

Projekt, styl i motyw

Ta zakładka umożliwia zarządzanie stałymi elementami witryny. Z jej pomocą możesz skonfigurować logo czy ikonę witryny, a także stworzyć nagłówek i stopkę.

Strony witryny internetowej

Sekcja usprawniająca zarządzanie stronami i podstronami w obrębie Twojej witryny. Nie należy do specjalnie przełomowych, bo przenosi użytkownika jedynie do adekwatnej sekcji w kokpicie WordPress. W dalszej części poradnika znajdziesz przygotowane przeze mnie instrukcje wyjaśniające kompletne procesy dodawania stron i wpisów blogowych.

Formularz kontaktowy

Sekcja przenosząca do oddzielnej zakładki pozwalającej na tworzenie formularzy kontaktowych. Mowa tu o wspominanym już SureForms. Warto podkreślić, że tego elementu witryny nie można zbudować bezpośrednio przy użyciu motywu Astra. Za wszystko odpowiada rozwiązanie zewnętrzne, choć kompatybilne i sprawdzone w tym środowisku.

3. Tworzenie stron w motywie Astra

Przejdźmy do praktycznego wprowadzania zmian na swojej stronie w motywie Astra. W tej części omówię szereg funkcji przydatnych podczas budowania unikatowego miejsca w sieci. Odnośniki do części z nich znajdują się w omówionej już sekcji „Setup”, ale nie do wszystkich. Zapoznanie się z nimi pozwoli Ci lepiej dopasować witrynę do własnych potrzeb.

Styl witryny

Możesz przejść do niego z sekcji „Setup”, „Projekt, styl i motyw” i „Dostosuj przewodnik po stylach”. Alternatywnie jednak znajdziesz go też samodzielnie. Wystarczy, że klikniesz w lewym menu w kokpicie WP „Astra” i „Dostosuj”. W oknie edytora WordPress naciśnij następnie przycisk „Style Guide„.

Na ekranie zobaczysz zestawienie wszystkich podstawowych elementów swojej strony. Po kliknięciu na poszczególne sekcje ich edytory będą uruchamiane w menu bocznym po lewej stronie ekranu.

Aby edytować logo i tytuł witryny, naciśnij puste szare pole na górze strony. W menu bocznym możesz dodać nowy plik, klikając „Zmień logo”. Nazwę strony wprowadzisz, edytując puste pole pod „Nazwa witryny”. W tym miejscu możesz też zmienić widoczność tytułu.

Na samym dole sekcji bocznej znajduje się przycisk „Ikona witryny”. Po jej wybraniu możesz wprowadzić nową ikonę z gotowej bazy plików lub dodać własną. W tym celu kliknij „Wybierz ikonę witryny” i znajdź (lub dodaj) plik z Biblioteki multimediów WordPress.

Podgląd wybranego rozwiązania zobaczysz od razu w widoku głównym tej sekcji. Znajduje się po prawej stronie ekranu z nazwą „Ikona witryny”.

Nagłówek

Z tego samego poziomu wstępnie dostosujesz nagłówek witryny. W bocznym menu zmienisz fonty, rozmiary poszczególnych śródtytułów (np. H1, H2 itd.) czy wysokość marginesu dolnego. Rozwijając poszczególne sekcje, możesz modyfikować również grubość kroju pisma czy jego rodzinę. Bieżący podgląd wprowadzanych zmian jest cały czas widoczny w oknie po prawej stronie.

Aby przejść do szczegółowej konfiguracji nagłówka, wyjdź ze „Style Guide” do edytora witryny. Następnie najedź kursorem na górną część witryny i naciśnij niebieski symbol edycji (przypomina długopis czy ołówek).

Możesz na tym poziomie dostosować wysokość nagłówka głównego oraz zadbać o jego design.

Po kliknięciu strzałki „Wstecz” przejdziesz do głównych ustawień nagłówka. Zmienisz w nich np. konfigurację tytułu, logo, przycisków czy menu głównego. Wybierzesz też rodzaj nagłówka i zadbasz o jego design.

W dolnej części witryny pokazana jest struktura nagłówka. Składają się na niego trzy „warstwy”, które możesz edytować, naciskając ikonę śrubki z lewej strony.

Naciskając „+” w poszczególnych ich częściach możesz dodawać tam kolejne elementy, np. konto użytkownika czy menu podrzędne. Dostępne opcje zobaczysz w oknie, które otworzy się automatycznie (część z nich jest przeznaczona wyłącznie dla Astra Pro).

Personalizacja przycisków

Dostosowanie przycisków w motywie Astra możesz wykonać ze znanej już Ci sekcji „Style Guide”. Wystarczy kliknąć tylko ikonę edycji przy przycisku głównym lub podrzędnym. To otworzy edytor w panelu po lewej stronie ekranu.

Ustawisz tam kolor tekstu, tła oraz obramowania. Zmienisz też krój pisma, dopełnienie oraz szerokość i promień obramowania. W górnej części sekcji możesz wybrać rodzaj edytowanego przycisku („Primaty” i „Secondary”).

Stopka

Edycja stopki przebiega analogicznie do wprowadzania zmian w nagłówku. Ponownie w edytorze WP musisz najechać kursorem na obszar, który chcesz edytować. Następnie naciśnij niebieską ikonę długopisu.

W sekcji po lewej stronie zaznacz potrzebną Ci liczbę kolumn. Zmiana będzie od razu widoczna w pustych polach pod podglądem witryny. Z tego poziomu możesz też zmienić układ wewnętrznych elementów, szerokość, wysokość czy wyrównanie stopki w pionie.

Podobnie jak przy nagłówku, na samym dole widoczne są trzy „warstwy”. Możesz zmieniać ich ustawienia oraz dodawać do nich elementy, klikając znak „+”.

Dodawanie stron i edytowanie ich zawartości

Opisany w poprzednim rozdziale edytor pozwala na wprowadzanie zmian w strukturze witryny. Opisywany motyw WordPress pozwala natomiast również oczywiście na znacznie bardziej zaawansowane i niezbędne działania. Mowa tu o dodawaniu kolejnych stron oraz uzupełnianiu ich potrzebną zawartością.

Z poziomu kokpitu WP przejdź do sekcji „Strony”. Tam znajdziesz spis wszystkich stworzonych do tej pory stron działających w obrębie Twojej witryny.

Naciśnij „Dodaj stronę„, aby przejść do edytora WP umożliwiającego stworzenie nowej strony.

Na tym etapie możesz skorzystać z Biblioteki projektów oferowanych przez zainstalowaną wcześniej wtyczkę. Wystarczy tylko znaleźć odpowiadające Ci rozwiązanie i kliknąć „Insert”, aby umieścić je na stronie. Działanie takie wymaga jednak zarejestrowania się w witrynie narzędzia, a większość najciekawszych opcji jest niestety płatnych.

Motyw WordPress Astra zapewnia dostęp do własnego, autorskiego buildera. Jak jednak wspominałem, jest on dostępny wyłącznie w wersji Astra Pro. Opiszę jej działanie w dalszej części artykułu, poświęconej płatnej opcji.

Tworzenie witryny przy pomocy standardowego edytora tekstowego WP nie jest niestety zbyt wygodne. W przypadku większych projektów może ponadto wymagać od Ciebie umiejętności kodowania. Warto rozważyć zatem w tym momencie sięgnięcie po wspominaną już przeze mnie wtyczkę Elementor. Rozwiązanie bazujące na metodzie „przeciągnij i upuść” może okazać się więc zbawienne (nie tylko dla osób początkujących).

Rodzaje wpisu

W edytorze Astra chciałbym zwrócić uwagę na jeszcze jedną, przydatną sekcję – są nią „Rodzaje wpisu„. Pozwala ona dostosować wszystkie strony w obrębie Twojej witryny do odgórnych wytycznych. Dzięki temu określisz ich rodzaje i usystematyzujesz strukturę. Po wybraniu tej opcji możesz wybrać typ edytowanego wpisu (lub określić jego własny charakter).

Następnie określ układ i styl kontenera oraz panelu bocznego. Wybranie każdej opcji automatycznie wprowadza zmiany w podglądzie witryny po prawej stronie. Dzięki temu skutecznie dobierzesz formę, która Ci najbardziej odpowiada.

5. Zarządzanie menu strony

Przyciski menu witryny pojawiają się na stronie głównej automatycznie podczas dodawania kolejnych stron w WP. Możesz jednak zarządzać wyglądem tej sekcji na stronie głównej. Aby to zrobić, przejdź w kokpicie do zakładki „Wygląd”, a w sekcji „Motywy” naciśnij „Menu”.

Polecam skorzystać tu z opcji „Zarządzaj w podglądzie na żywo„. Wtedy zobaczysz, jak wprowadzane zmiany prezentują się na Twojej stronie. Naciśnij „Stwórz nowe menu” z sekcji po lewej stronie ekranu.

Tu możesz wprowadzić nazwę nowego menu i kreślić miejsce, w którym menu ma się pojawiać (np. na stronie głównej).

Po kliknięciu „Dodaj elementy” szczegółowo określisz, co ma się znaleźć w menu i w jakiej kolejności. Dotyczy to zarówno stron, jak i wpisów, ale też kategorii, tagów czy formatów. Poszczególne elementy możesz zamieniać miejscami i ustalać ich zależności (np. jedna podległa drugiej), przeciągając je w nowe miejsca.

Po wszystkim naciśnij „Opublikuj” i gotowe. Menu w wybranym przez Ciebie miejscu będzie dostępne w ustalonej formie.

Możliwości płatnego motywu Astra Pro

Motyw Astra jest dostępny wraz z rozbudowanymi zestawami narzędzi w trzech płatnych wersjach:

• Pro – kosztuje 59 dolarów za rok. Sprawdzi się w przypadku mniejszych serwisów;
• Essential Toolkit – kosztuje 99 dolarów rocznie. Odpowiedni dla freelancerów oraz twórców;
• Business Toolkit – kosztuje 159 dolarów rocznie. To opcja dla najbardziej zaawansowanych użytkowników, takich jak np. agencje.

Na potrzeby tej instrukcji skorzystałem z Astra Pro. Dostęp możesz wykupić z oficjalnej strony motywu https://wpastra.com/. Po wyborze odpowiedniego pakietu naciśnij np. Get Astra Pro. Przez pierwszych 14 dni możesz korzystać z niego za darmo. Jeśli Cię do siebie nie przekona, twórcy zwrócą Ci pieniądze.

Aktywacja Astra Pro

Podaj dane karty płatniczej i pobierz plugin Astra Pro na swoje urządzenie. Kolejnym krokiem jest dodanie go na serwer. Możesz zrobić to, przechodząc w kokpicie WP kolejno do: „Wtyczki”, „Dodaj wtyczkę” i „Wyślij wtyczkę na serwer”.

Po jej wybraniu i instalacji niewielkiej zmianie ulegnie strona główna sekcji „Astra”. Pojawi się tam segment „Your License”. Musisz wprowadzić w nim swój kod licencyjny. Znajdziesz go na stronie store.brainstormforce.com, która uruchomi się automatycznie po wykupieniu wtyczki. Powinien być widoczny w sekcji „Account” po zalogowaniu na utworzone konto użytkownika. Skopiuj go, wklej w puste pole i naciśnij „Activate„.

Site builder szablonu Astra Pro

Teraz masz dostęp do autorskiego site buildera. Stworzysz z nim witrynę o dowolnym charakterze, bez potrzeby kodowania. Znacznie wygodniej i szybciej też niż przy użyciu zwykłego edytora WP czy kodowania. Porównać go można do Elementora w wersji płatnej. Narzędzia te działają na zbliżonych zasadach, warto więc rozważyć, który z nich będzie dla Ciebie lepszy.

Moduły, z których zamierzasz korzystać za pośrednictwem tej wtyczki w wersji Pro, możesz uruchomić z poziomu jej kokpitu w WP.

Czy motyw Astra WordPress

Skorzystanie z wbudowanego edytora wymaga przejścia do konkretnej strony. Po uruchomieniu jej edycji zobaczysz jej podgląd w czasie rzeczywistym. Możesz nanosić zmiany na konkretne elementy, naciskając poszczególne sekcje.

W lewym górnym rogu pojawi się niewielkie menu pozwalające wprowadzać modyfikacje. Zakres obecnym w nich funkcji jest zależny od charakteru elementu, który wybierzesz. Zawsze pozwala natomiast na edycję struktury, ale też np. kopiowanie elementów czy zmianę ich kolejności.

Dwukrotne naciśnięcie warstwy tekstowej umożliwi jej edycję. W poszczególnych sekcjach możesz również dodawać nowe elementy. Pozwala na to znak „+” widoczny w prawym dolnym rogu.

Site builder opiera się nie tylko na gotowych szablonach. Wersja Pro opisywanego motywu pozwala zbudować od podstaw całą witrynę. W ten sposób samodzielnie wybierasz jej wygląd, układ, kolory i to, jak będzie wyświetlana odbiorcom. Aby przejść do tej opcji, wybierz w kokpicie „Site Builder” w sekcji Astra.

W tym miejscu możesz tworzyć różne części swojej witryny, które będą następnie wykorzystywane na poszczególnych stronach. Po wybraniu danego elementu najedź na niego i kliknij „Create Layout„. Jeśli nie masz sprecyzowanych planów, naciśnij po prostu „Create New„. To uruchomi edytor.

Otwórz w nim panel ustawień Site Builer Astra. Zrobisz to, naciskając ikonę z logo motywu, widoczną w prawym górnym rogu.

Tutaj znajdziesz wszystkie opcje pozwalające na zarządzanie danym elementem. W przypadku wybranego przeze mnie nagłówka jest to np. opcja jego przyklejenia czy widoczności na poszczególnych urządzeniach.

Czy Astra jest w pełni kompatybilna z popularną wtyczką WooCommerce?

Zarówno Astra Pro, jak i darmowa wersja tego motywu, są w pełni kompatybilne z pluginem WooCommerce. Możesz wykorzystać je do tworzenia i dostosowywania sklepów internetowych. Musisz jednak najpierw pobrać wtyczkę e-commerce na swój serwer.

Aktywacja WooCommerce przebiega tak samo, jak każdego innego pluginu WP. Wystarczy tylko przejść do sekcji „Wtyczki”, kliknąć „Dodaj wtyczkę” i wyszukać odpowiednie rozwiązanie. Następnie kliknij „Zainstaluj” i „Włącz”. Aby stworzyć e-sklep, nie musisz dysponować wersją płatną tej wtyczki.

Kluczowe w tym przypadku jest uruchomienie modułu sklepu WooCommerce w panelu motywu. Zrobisz to z poziomu sekcji Astra Pro, którą już opisywałem. Po naciśnięciu w nim „Customize” przejdziesz od razu do personalizacji e-sklepu. Wcześniej sekcja ta nie była aktywna w edytorze.

Z tego poziomu możesz zadbać o każdy element e-sklepu, jak np. katalog produktów. Podobnie jak przy standardowej edycji, ponownie wszelkie zmiany wprowadzane są w segmencie widocznym po lewej stronie ekranu. Zmiany widoczne są z kolei w większej części „na żywo”.

Więcej szczegółowych informacji na temat tworzenia sklepu WooCommerce w WordPress znajdziesz w moim artykule „jak założyć sklep internetowy wordpress”

Motyw WordPress Astra – podsumowanie

Motyw WordPress Astra może przynieść znaczne korzyści Twojej stronie internetowej. Choć w wersji bezpłatnej nie zapewnia autorskiego site buildera, w połączeniu z edytorem takim jak np. Elementor, pozwoli Ci stworzyć miejsce w sieci bez potrzeby kodowania. Wszystko odbywa się w przeglądarce internetowej, bez potrzeby zatrudniania specjalistów. Znajdziesz w nim wiele motywów oraz stosunkowo wygodne metody personalizacji.

Połączenie darmowej Astry z Elementorem będzie dobre nie tylko dla małych firm. Z kolei wersja płatna to zaawansowane narzędzie, które nie zawiedzie nawet serwisów działających na szeroką skalę. Wszystko to wraz z gwarancją bezpieczeństwa oraz stałymi aktualizacjami wdrażanymi przez twórców. Z uwagi na to wszystko uważam, że jest to opcja warta rozważenia, niezależnie od branży, w której działasz i etapu rozwoju Twojego e-biznesu.