Jak zmienić wygląd WordPress? Jak zaadaptować szablon na wordpressa? Szablon Blossom

 

Jak zaadaptować szablon do wordpressa? Szablon Blossom

Chciałam pokazać Ci bardzo przyjemną rodzinę szablonów na wordpressa o nazwie Blossom, z której sama korzystam na stronie ModanaBio  (są to szablony na wordpressa przewidziane dla blogów o tematyce kobiecej, ale mają wiele fajnych rozwiązań). I teraz na tym przykładzie chciałabym pokazać Ci, jak taki szablon na wordrpressa dopasować – zaadaptować.

Pierwsza rzecz:

W momencie, kiedy instalujesz sobie nowy szablon na blogu opartym na wordpressie, dlatego że podoba Ci się to, jak wygląda w wersji demo, po czym po załadowaniu na Twoją stronę okazuje się, że to w ogóle nie wygląda, tak jak w demo, ani w ogóle nijak wygląda. A jeszcze rozjeżdża się we wszystkich możliwych kierunkach i zupełnie nie ma tych elementów, które tak Cię zauroczyły w wyjściowym szablonie.

Co może od razu skłaniać Cię do odinstalowania tego ustrojstwa. Bez dania mu najmniejszej szansy.

Tymczasem nie – poczekaj – nie odinstalowuj. Taki szablon wymaga odrobiny dopasowania.

Ale to wcale nie jest coś szczególnie trudnego. Przy odrobinie cierpliwości poradzisz sobie z tym, bez żadnych specjalnych umiejętności technicznych. Bo przypominam: te szablonu zostały stworzone dla ludzi.

Dlatego …

Pierwszą rzeczą:

 

Nie wystarczy wrzucić na żywca szablon na bloga i oczekiwać, że to będzie wyglądać tak, jak w wersji demo.

Bo najcudowniejszy szablon na wordpressa wymaga “pewnego” dopracowania, dostosowania, żeby wyglądał tak jak docelowo chciałbyś by wyglądał. Czyli chociażby tak jak w wersji demo. A może nawet lepiej, bo z magicznym odciskiem Twojego pazura.

Możesz zrobić to w bardzo prosty sposób:

Po pierwsze wchodzisz w Wygląd, Dostosuj.

Tutaj warto zapoznać się z dokumentacją (jeżeli dany szablon taką dokumentację oczywiście posiada).

Np. w przypadku kobiecych szablonów Blossom jest to specjalna strona z kilkunastoma podstronami, każda podstrona wyjaśniająca inny aspekt: np jak wyklikać baner na stronie, jak skonfigurować stopkę, jak dodać bio dokładnie w takim rozplanowaniu graficznym, jak w wersji demo szablonu, czy inne bajery w pasku bocznym, albo jak wyklikać taki sympatyczny slider u góry strony, jakie dodatkowe wtyczki są do tego potrzebne itp

I właśnie…

Tutaj pierwszą i chyba najważniejszą rzeczą, żeby jak najbardziej zbliżyć się do efektu w pewnym sensie “obiecanego” w wersji demo – jest sprawdzenie, jakie dodatkowe wtyczki są zalecane przez twórców szablonu.

Czyli sprawdź, czy czasem nie będzie Ci potrzebna dodatkowa wtyczka współgrająca z danym szablonem, która dopiero uzupełni jego funkcje i de facto sprawi, że dany szablon zainstalowany na Twojej stronie będzie wyglądał tak jak ten w wersji demo (albo nawet dopieszczony Twoim pazurem – jeszcze lepiej).

Na przykładzie szablonu Blossom – tutaj np zalecane jest zainstalowanie wtyczki Toolkit, czyli zestawu narzędzi, a właściwie widgetów pełniących różnorodne funkcje (np pokazujących najnowsze wpisy, najbardziej popularne wpisy…)

Jest tu tzw Toolkit, czyli zestaw narzędzi, a właściwie widgetów pełniacych różnorodne funkcje z adnotacją Blossom (np pokazujących najnowsze wpisy, najbardziej popularne wpisy…).

 

Po zainstalowaniu tej wtyczki, znajdziesz je w zakładce Wygląd, Widgety.

To one pomogą Ci właśnie uzyskać taki spersonalizowany, czy taki specyficzny wygląd strony głównej.

Być może warto zainstalować polecane wtyczki, żeby rzeczywiście uzyskać wygląd strony taki, jak w wersji demo. Bo bez nich po prostu się nie da (to w nich kryje się cały sekret). I tutaj najbardziej pomocne jest zapoznanie się z instrukcją, czy z dostarczoną z szablonem dokumentacją.

Teraz – po wstępnym zapoznaniu się z instrukcją i zalecanymi wtyczkami, możesz przejść do konfiguracji swojej strony.

Ustawienia strony głównej:

Większością opcji dostępnych w ramach danego szablonu będziesz mógł zarządzać i konfigurować je wchodząc w Ustawienia. Tu np możesz wybrać, czy na stronie głównej mają wyświetlać się najnowsze wpisy, czyli właśnie ta strona, którą będziesz konfigurować, inspirując się wersją demo danego szablonu, czyli czy będzie to statyczna strona główna, którą przygotujesz sobie np. w Elementorze:

Większość podstawowych bajerów, które możesz umieścić na Twojej stronie wykorzystując możliwości zainstalowanego szablonu znajduje się w opcji General Settings, czyli główne ustawienia.

General Settings

Tu np. możesz skonfigurować sobie, czy na Twojej stronie ma pojawić się banerek i co będzie w nim “migać”.

Jeżeli dany (wybrany przez Ciebie) szablon ma taki baner, możesz wybrać sobie, czy chcesz go włączyć na swojej stronie głównej, w jakiej ma być on formie: np czy to ma być baner w formie slidera, czyli przewijających się slajdów.

Czy w ramach tego banera mają się pokazywać najnowsze wpisy, czy chcesz ustawić to sobie jakoś inaczej, chociażby wpisy z jednej konkretnej kategorii.

Np. ja wybrałam takie rozwiązanie:

najpierw stworzyłam osobną kategorię wpisów, które chcę pokazywać w sliderze, nazwałam ja – niezbyt odkrywczo – slider. Do tej kategorii przypisałam wpisy, które chciałabym żeby w pierwszej kolejności przejrzała osoba, która trafia na moją stronę (na jej stronę główną), czyli wpisy które najlepiej charakteryzują moją markę, te najbardziej dopracowane, czy najbardziej wartościowe.

Teraz kolejna zakładka czyli features settings, czyli wyróżnione obszary.

Tutaj np w ramach tego szablonu jest możliwość pokazania 3 stron (3 okienka widoczne u gory strony), które w jakiś sposób charakteryzują Twoją markę.

Ja wybrałam tutaj stronę przedstawiającą moją markę – o nazwie Moda na Bio, stronę sprzedażową mojego ebooka z przepisami bez glutenu i bez mleka, stronę o glince zielonej.

Oczywiście to wymaga najpierw stworzenia takich tematycznych stron, na których pokażesz, czym się zajmujesz, kim jesteś i dla kogo.

I owszem jest to dodatkowa praca, ale warto ja wykonać, bo świetnie porządkuje pewne sprawy (to pomaga nawet samemu twórcy zobaczyć jaśniej, dokąd właściwie zmierza), a jednocześnie przejrzyście wyjaśnia – dzięki czemu internauta – mniej lub bardziej przypadkowy, trafiający na Twoją stronę – widzi jaśniej, czym się zajmujesz i jak mogłabyś mu pomóc.

Ten akurat szablon z rodziny Blossom przewiduje pokazanie 3 okienek, linkujących do 3 stron (np 3 stron sprzedażowych).

Tutaj w ramach konfiguracji tej części szablonu, żeby te elementy dobrze wyglądały warto dobrać do 3 w ten sposób wyróżnionych stron, 3 obrazki wyróżniające, które kolorystycznie współgrają ze sobą.

Ten element chyba najlepiej wykorzystać do pokazania tutaj stron sprzedażowych Twoich produktów.

O ile oczywiście internauci z reguły trafiają czy to z mediów społecznościowych, czy to z wyników wyszukiwania na konkretne podstrony – wpisy np w ramach Twojego bloga, o tyle może się zdarzyć, że osoba, która po zapoznaniu się z danym wpisem, chce dowiedzieć się więcej i zagłębi się bardziej, a wtedy może po prostu skieruje się na stronę główna. A kiedy na niej ma podane wszystko jak na dłoni… 

Kolejną rzeczą, którą może chciałbyś wyeksponować na stronie głównej jest sklep.

Jeżeli prowadzisz sklep, to akurat tutaj w rodzinie szablonów Blossom – szablon Fashion (jak nazwa wskazuje wyjściowo przewidziany dla sklepów z ubraniami) przewiduje właśnie pokazanie na stronie głównej moduł z produktami z Twojego sklepu.

Tutaj oczywiście w ramach dokumentacji do danego szablonu powinieneś znaleźć informacje o tym, jak go skonfigurować. Ale przeskakując ten etap:

W ustawieniach ogólnych – general settings masz też opcję: Shop settings.

Tutaj, jak uruchomić ten widget, czyli jak pokazać Twój sklep na stronie głównej.

I znowu – wszystkie informacje – tutorial krok po kroku jak to zrobić znajdziesz w dokumentacji dodanej do szablonu. Ale wszystko sprowadza się do tego, by włączyć – uaktywnić dany widget, czyli chodzi tu o włączenie tych wszystkich zakładek.

Dodatkowo w ramach konfiguracji sklepu możesz wybrać kategorie produktów, które chcesz pokazywać na swojej stronie głównej, ilość produktów.

To oczywiście zależy od wielkości / stopnia rozbudowania Twojego sklepu: ile masz w nim produktów.

Tutaj pomocny hack: warto w ramach obrazków wyróżniających dla swoich produktów wybrać zdjęcia w podobnym formacie i o podobnym charakterze, żeby współgrały ze sobą.

Pasek boczny na stronie – edycja

Teraz kolejna rzecz, jeżeli chodzi o ustawienia paska bocznego.

Wiele z tych elementów pojawi się dopiero po dodaniu wtyczki Toolkit, czyli zestawu narzędzi dodanego do szablonów z danej rodziny.

Dlatego właśnie warto sprawdzić dokumentację dotyczącą szablonu i zalecanych wtyczek współgrających z nim.

Tutaj np. potrzebne bylo zainstalowanie zestawu narzędzi, czyli tzw Toolkit.

Dopiero po jego zainstalowaniu w zakładce widgety pojawiają się nowe elementy z adnotacją Blossom, właśnie w takim ujęciu graficznym, jak te które tak fajnie prezentują się w wersji demo szablonu.

Znajdziesz je po wejściu w Wygląd, Widgety.

Tutaj masz całą serię widgetów o nazwie Blossom. Wystarczy, że przeciągniesz je w wymagane miejsce, czyli do paska bocznego. Tu możesz skonfigurować swoje bio (biografię autora), możesz skonfigurować np. kategorie (tutaj widget kategorie – i żeby te kategorie tak wyglądały:

Ale możesz tu wybrać – wyeksponować główne, czy te najbardziej rozpoznawalne kategorie dla twojego bloga, w tym celu po prostu ograniczasz się do kilku tych najważniejszych.

Tutaj warto, żebyś wrócił do ich edycji: czyli

Wchodzisz w Wpisy, Kategorie.

 

 

Tutaj możesz dodać słowa kluczowe dotyczące danej kategorii. Co zawsze odgrywa jakąś rolę, czy może wręcz wspomóc pozycjonowanie dla danej kategorii.

Ale też możesz dodać obrazek wyróżniający dla każdej kolejnej kategorii wpisów, który właśnie pojawi się w momencie, kiedy umiescisz widget pokazujący daną kategorię na stronie głównej.

Kolejna rzecz możesz w pasku bocznym pokazać również widget najnowsze wpisy.

Tu w ramach tego widgetu możesz wybrać: nie tylko ilość pokazywanych wpisów, ale także layouty – czyli rozplanowanie graficzne tego widgetu. Tu w ramach widgetu popularne wpisy, czy najnowsze wpisy masz do wyboru kilka opcji graficznych.

Generalnie zapraszam do obejrzenia filmiku gdzie pokazuje krok po kroku, jak dokonywałam adaptacji danego szablonu.

Podsumowując:

W momencie, kiedy wybierasz szablon na bloga na wordpressie:

Pierwsza rzecz: sprawdź dokumentację.

Tam najprawdopodobniej znajdziesz rozpisane krok po kroku jest dany szablon zaadaptować.

Teraz sprawdź, czy nie są potrzebne jakieś dodatkowe wtyczki.

Np. w przypadku omawianego przeze mnie szablonu dla dopełnienia jego wyglądu potrzebna była wtyczka z zestawem narzędzi – tzw toolkit.

Czy chociażby specjalny widget do pokazania na stronie głównej czy to Instagrama, czy newslettera. Które dopiero sprawią że rzeczywiście będziesz mógł skonfigurować, czy dopieścić stronę główną, żeby wyglądała właśnie tak jak w wersji demo.

Przejrzyj dokumentację.

Teraz wejdź w Wygląd, Dostosuj.

Przeklikaj poszczególne elementy, czy możliwości danego szablonu.

Sprawdź, czy np dany szablon oferuje możliwość włączenia slideru, albo czy nie ma w nim przewidzianego obszaru, w którym pokażesz jakieś wyróżnione elementy (features aerea).

Dalej

Przejdź do Wygląd, Widgety.

Przy pomocy których możesz skonfigurować pasek boczny na Twojej stronie, czy stopkę – umieszczając w nich odpowiednie widgety, chociażby np. pokazujące najnowsze, czy najpopularniejsze wpisy na blogu.

Powodzenia.

Pozdrawiam serdecznie

Beata