Jak łatwo i szybko samemu wykonać stronę internetową na WordPressie

Dziś zdradzę Wam mój największy sekret jak tworzyć strony 😀 Stracę przez to pracę, ale cóż. No dobra, może jednak nie do końca 🙂 Dla osób które nigdy nie używały WordPressa, nie pisały stylów css, nie wgrywały wtyczek i nie konfigurowały WP, to może być na początku trochę kłopotliwe. Ale jak już się zapoznacie z tym, to będzie banalnie proste.

Złoty środek

Mam taki złoty środek, który jakiś czas temu odkryłam i tworzę właśnie w ten sposób. Dzięki czemu mogę wykonać stronę opartą o system cms, wyglądającą jak tylko mi się zamarzy.

Motyw GeneratePress lub OceanWP + Elementor

Powyższe motywy są genialne. Osobiście uznałam je za najlepsze. Testowałam wiele motywów, ale potrzebowałam takiej podstawy, by tworzyć stronę od zera i te motywy świetnie się do tego nadają.

Elementor to taki page builder, wtyczka za pomocą której bardzo prosto tworzymy stronę poprzez przeciągnij i upuść.

Tworzenie strony na WP w krokach:

Jeśli jesteśmy grafikami lub potrafimy wykonać szablon graficzny do strony, to robimy np. w Photoshopie. Potem tniemy go na obrazki i układamy na stronie jak klocki lego. Mamy włączony podgląd szablonu i działamy. Polecam 2 monitory, na jednym podgląd szablonu, na drugim otwarty edytor strony.

Na serwerze instalujemy WordPressa. Nie będę szczegółowo wszystkiego opisywać, gdyż z tego by wyszło minimum kilka tematów, a chcę z grubsza przedstawić jak to działa.

Logujemy się do panelu admina. Z menu wybieramy wygląd – motywy – dodaj nowy, w wyszukiwarce wpisujemy nazwę motywu np. oceanwp. Instalujemy i aktywujemy.

Pamiętajcie o wgraniu motywu potomnego, czyli child theme danego motywu. Dzięki czemu każda zmiana np. w stylach css jest wykonywana w opcjach wygląd – edytor i jeśli zmieni się szablon, to style nam się nie usuną, jest to bardzo przydatne. To samo robimy z każdym innym plikiem szablonu, jaki chcemy edytować. Wklejamy go do katalogu z motywem potomnym i tam go edytujemy. Taki motyw child theme znajdziecir np. wpisując w google nazwę szablonu + child theme, np. OceanWP + child theme i pobieracie. Wgrywacie go w tym samym miejscu co wcześniej motyw, czyli wygląd – motywy – dodaj nowy – wyślij motyw na serwer. Wybieracie spakowany plik z komputera, wgrywacie i aktywujecie.

Instalujemy Elementora: z menu wybieramy wtyczki + dodaj nową, w wyszukiwarce wpisujecie: Elementor, wyskoczy „Kreator stron Elementor”, potem przycisk – zainstaluj teraz i po instalacji aktywuj.

Mamy już ładną podstawę do tworzenia strony. Oczywiście jest też wiele ustawień, które należy przeprowadzić, tych ważniejszych i mniej ważnych, ale to rozpisywanie się na dłużej i chętnie odpowiem w komentarzach. Zapewne też o czymś zapomnę, to dopiszę.

W menu strony tworzymy stronę główną wpisując nazwę np. Home. Ustawiamy jej układ. Trochę się różnią wyglądem wersja starsza i najnowsza WordPressa, więc napiszę ogólnie. Wybieramy układ strony, np. zawartość bez paneli bocznych, konstruktor pojemnika strony – pełna szerokość. Klikamy przycisk zaktualizuj i potem klikamy – edytuj w Elementorze. Taki przycisk do edycji będzie nam się pojawiał również na każdej podstronie na górze na pasku, jeśli oczywiście będziemy zalogowani. Taki skrót, by szybciej przejść do edycji strony.

Edycja strony w Elementorze:

Po lewej pojawi się nam pasek różnych widżetów, elementów, sekcji, które dodajemy poprzez przeciągnięcie i upuszczenie po prawej stronie. Można tam zrobić praktycznie wszystko. Dodać blok, który rozciągnie się na całą szerokość strony, dodać zdjęcia, treść, tło, odstępy, obramowanie, edytować wielkość czcionki, kolor, dużo by wymieniać.

Opcji jest dużo więcej niż w edytorze Gutenberg, Elementor to taki kombajn który zrobi wszystko. Można też wgrać dodatki do Elementora z menu wtyczki, które dodadzą więcej bajerów, galerii, ruszających się elementów. Ale róbcie z umiarem, bo co za dużo to nie zdrowo i strona będzie zbyt ciężka. Ma to być ładne i schludne. Co jakiś czas klikajcie przycisk „aktualizuj” by zapisać zmiany. Jak coś źle kliknęliście, to jest opcja cofania.

Jest też przycisk – dodaj szablon i 3 działy: bloki, strony, moje szablony. Bloki – tu dodacie pojedyncze bloki, elementy na stronę, np. FAQ z pytaniami i odpowiedziami, klikacie – wstaw i już jest. W zakładce – strony, macie gotowe szablony strony. Więc jeśli nie zrobiliście swojej grafiki, to wgrywacie gotową i ją edytujecie, zmieniacie zdjęcia i treść na swoje, przenosicie elementy gdzie Wam pasuje. Jest ich sporo, zwłaszcza jak się kupi wersję premium. Osobiście uważam, że nie jest to potrzebne, wolę własną grafikę i własny pomysł na stronę, przynajmniej będzie unikalna. W zakładce – moje szablony, wgrywacie wcześniej zapisany szablon, dzięki czemu wszystkie podstrony będą w takim samym stylu wykonane i nie trzeba ich robić od nowa. A jak chcecie zapisać podstronę to rozwijacie przycisk obok aktualizuj i klikacie – zapisz jako szablon, wtedy będzie w dziale moje szablony.

W Elementorze na dole jest ikonka – tryb responsywny i tam ustawiacie stronę pod telefony i tablety.

Oglądając stronę w przeglądarce, na górze w pasku jest przycisk „dostosuj” i tam macie różne opcje dotyczące wyglądu motywu. Ustawcie sobie, wgrajcie logo, zmieńcie czcionkę, dodajcie widżety do menu bocznego, jeśli robicie np. bloga i będzie pasek boczny.

Nie zapominajcie robić co jakiś czas kopię zapasową strony, w razie czego można cofnąć zmiany. Polecam wtyczkę UpdraftPlus, którą znajdziecie w menu wtyczki.

To by było chyba na tyle w skrócie, takim dużym skrócie. Bo jeśli wszystko mam rozwinąć to minimum kilka tematów wyjdzie i to obszernych. Jeśli ktoś chce, bym opisała któryś dział obszerniej, to zastanowię się nad założeniem nowego wpisu na blogu. Więc życzę Wam powodzenia w tworzeniu własnej strony! 🙂