Tworzenie ‘Landing Page’ – WordPress, Elementor
Tworzenie atrakcyjnych i funkcjonalnych landing pages to kluczowy element budowy obecności online. Dzięki platformie WordPress i narzędziu do tworzenia stron Elementor, proces ten stał się bardziej dostępny nawet dla osób bez zaawansowanej wiedzy technicznej. W tym artykule omówimy krok po kroku proces instalacji WordPressa, logowania, konfiguracji oraz tworzenia landing page przy użyciu Elementora.
Instalacja WordPress
Pierwszym krokiem w instalacji naszej strony internetowej, będzie zainstalowanie CMS-a WordPress. Dokonamy tego przy pomocy naszego Hostingu. Aby rozpocząć, zaloguj się do panelu zarządzania swoją domeną na Hostinger. Po zalogowaniu, znajdź opcję instalacji WordPressa i kliknij na nią. To spowoduje pojawienie się okna, w którym będziesz musiał wprowadzić niezbędne informacje, takie jak nazwa użytkownika i hasło. Warto wspomnieć że proces instalacji WordPressa, może się różnić w zależności od naszego Hostingu, w takiej sytuacji należy, w wyszukiwarce internetowej, znaleźć informację na temat instalacji CMS-a dla danego hostingu.
Logowanie na WordPress
Aby zalogować się na naszą stronę z zainstalowanym WordPressem, musimy w wyszukiwarce internetowej wpisać taki adres ‘nazwa-domeny/wp-admin/’ np.:(www.projekt.com/wp-admin). Teraz powinien wyświetlić się nam panel logowania, w którym to, będziemy musieli wpisać podane wcześniej informację.
Konfiguracja WordPress
Po zalogowaniu, wyświetli się nam panel WordPress. Naszym pierwszym krokiem, będzie zainstalowanie wtyczki Elementor. Dokonamy tego wybierając zakładkę ‘Wtyczki’ z menu po lewej stronie. Następnie klikamy ‘Dodaj Wtyczkę’ → w wyszukiwarce wpisujemy nazwę interesującej nas wtyczki → klikamy przycisk „Zainstaluj” → „Aktywuj”.
Następnie w sposób analogiczny do instalacji wtyczki elementor zainstalujemy wtyczkę templately, która umożliwi nam wykorzystanie jednego z darmowych szablonów.
Dodawanie Strony
Gdy mamy już, zainstalowaną wtyczkę, przejdziemy do procesu tworzenia naszej strony. Z menu po lewej stronie, wybieramy zakładkę „strony” → „dodaj stronę”. Wyświetli nam się domyślny panel edycyjny WordPressa – Gutenberg. Nas jednak interesuje praca przy pomocy Elementora, dlatego też, w lewym górnym rogu znajduje się przycisk ‘Edytuj za pomocą Elementor’ na który klikamy. Wyświetli nam się taki oto panel:
1. Panel ‘widgetów’
W tym panelu znajdują się elementy takie jak ‘nagłowek’, ‘przycisk’, ‘obraz’, które możemy przeciągać na naszą stronę. Niektóre z tych widgetów dostępne są tylko dla użytkowników w wersji pro. Dają one jednak sporo możliwości w procesie tworzenia bardziej zaawansowanych stron internetowych. Po wybraniu danego widgetu, w tym miejscu wyświetlą się również możliwości jego edycji. Umożliwi nam to zmianę, kolorów, tekstu, czy odstępów.
2. Panel Strony
Jest miejsce do którego możemy przeciągać nasze widgety i zobaczyć jak prezentuje się nasza strona. „Ikonka Plusa” umożliwia nam dodanie nowego bloku. „Ikonka Folderu” pozwoli nam dodać istniejący już szablon.
3. Panel Nawigacji
W tym miejscu znajduje się nawigacji, która umożliwi nam zobaczenie blokowego schematu naszej strony. Można ją chwilowo wyłączyć, jeśli chcemy uzyskać więcej miejsca na panel 2, jednakże przydaje się ona bardzo w większych projektach.
Szablon Strony
Wychodzimy do menu. Budowanie naszej strony, zaczniemy od wyboru gotowego szablonu, który będziemy edytować. Aby to zrobić z menu panelu WordPressa wybieramy zakładkę „templately” → „template library” i wybieramy dowolny darmowy szablon. Ja wybrałem tą opcję z klubem fitness
Po wybraniu szablonu klikamy „Insert” → rejestrujemy konto → akceptujemy dodatkowe wymagania(niektóre szablony mogą wymagać od nas instalacji dodatkowej wtyczki, akceptujemy to i przechodzimy dalej) → wpisujemy nazwę strony.
Edycja Szablonu Strony
Konwersja na „kontenery”
Aby edytować szablon przechodzimy do zakładki ‘strony’, wybieramy nazwę strony, która podaliśmy w templately i klikamy „edytuj za pomocą elementor”. Niektóre szablony, dalej wykorzystują ‘sekcję’, które są starszą metodą budowania stron. Teraz elementor używa tzw „kontenerów”. Jednakże nie ma się co martwić, ponieważ konwersja na nowy system jest banalnie prosta. Na początku klikamy na ikonę zębatki w lewym dolnym rogu panelu widgetów. Tam pokaże nam się opcja „konwertuj do kontenera”, klikamy na nią. Po procesie konwersji zauważymy, iż po prawej stronie w naszym Panelu Nawigacji wyświetlą się bloki z napisem ‘sekcja’ i ‘kontener’. Najeżdżamy na każdy taki blok z napisem ‘sekcja’ → klilkamy PPM → Usuń. W ten sposób zostaną nam tylko bloki zawierające ‘kontenery’.
Edytowanie elementów
Edycja elementów przy pomocy elementora jest banalnie prosta. Jedyne co musimy zrobić to najechać na dany element, kliknąć go w Panelu Strony lub Panelu Nawigacji → edytować go w panelu Widgetów. Przeprowadźmy taką prosta edycję na przykładzie nagłówka strony.
1. Klikamy na interesujący nas widget w panelu strony lub panelu nawigacji
2. W panelu widgetów dokonujemy edycji interesujących nas elementów takich jak treść napisów czy czcionka bądź kolor(edycji tych dwóch opcji dokonamy w zakładce ‘styl’ panelu widgetów)
3. W prawym dolnym rogu panelu widgetów klilkamy na przycisk ‘Aktualizuj’, który pozwoli zapisać nam wprowadzone zmiany.
Edycja zdjęcia
Aby zmienić zdjęcie, klikamy na interesujący nas element, a następnie w panelu widgetów klikamy na obrazek. Wyświetli nam się panel mediów, w którym będziemy mogli dodać interesujące nas zdjęcia. Po ich dodaniu, wybieramy interesujące nas zdjęcie i klilkamy przycisk ‘wybierz’. W tym panelu możemy również dopisywać teksty alternatywne do zdjęć a także ich opisy.
Zmiany po dodaniu zdjęcia:
Edycja odnośników w przyciskach
Każdy przycisk posiada odnośnik, który powoduje jakąś akcję. Możemy go edytować klikając na przycisk i w panelu widgetów w opcji ‘odnośnik’ wpisać interesujący nas link.
Edycja koloru tła
Aby poddać edycji kolor tła bloku, wybieramy go przy pomocy np. panelu nawigacji. Wyświetli nam się panel kontenera. Teraz wybieramy zakładkę ‘styl’ → tło → zmieniamy kolor tła, w zależności od naszych preferencji możemy wybrać gradient, obrazek, bądź zwykły jednotonowy kolor.
Zmiana koloru tła:
Dodanie nowego bloku i widgetów
Załóżmy że chcemy dodać do strony coś stworzonego przez nas, zrobimy to scrolluąc na koniec strony i klikając ikonkę plusika. Następnie wybieramy układ bloków, które chcemy dodać. Załóżmy że do naszej strony dodamy widget film i mapy, które będą znajdować się obok siebie. Dlatego też wybieramy odpowiedni układ.
Wybór układu bloków:
Następnie w panelu widgetów, szukamy widgetu film i mapy, a następnie przeciągamy je w odpowiednie miejsce i edytujemy według własnych potrzeb.
-Widget Film – Tutaj mamy możliwość wybrania czy film będziemy wyświetlać z serwisu YouTube czy też będziemy go hostować u siebie na stronie. Dodatkowo mamy rożne opcje, która umożliwiają nam na przykład automatyczne odtwarzanie filmu w pętli, czy też wyciszenie go
-Widget Mapy – Tutaj w zakładce lokalizacja tego widgetu możemy wpisać adres z Map Google, aby pokazać interesująca nas lokalizacje
Dodanie odstępów
Jeżeli chcemy zwiększyć odstęp dzielący nasz nowo dodany blok od reszty, klikamy na niego, wchodzimy w zakładkę ‘Zaawansowane’ następnie wybieramy Dopełnienie(margines wewnętrzny) lub Margines(margines zewnętrzny) i wpisujemy wartości w pikselach lub procentach.
Po utworzeniu strony
Po utworzeniu strony, wchodzimy w do głównego Panelu WordPressa → zakładka Ustawienia → czytanie, tam w opcji Strona główna wyświetla wybieramy statyczną stronę i nazwę naszej głównej strony. To spowoduje, iż będzie ona wyświetlana jako główna, po wejściu na stronę.
Elementor oferuje znacznie więcej możliwości oprócz tych pokazanych w tym artykule, jednakże jest to już temat bardziej zaawansowany, w który jednak warto bardziej się zagłębić.