Projektowanie profesjonalnie wyglądającej strony internetowej nie było dla wszystkich, zwłaszcza że wszyscy uważaliśmy, że absolutnie trzeba być profesjonalnym programistą i projektantem stron internetowych. W dzisiejszych czasach widzimy nowe narzędzia pojawiające się w ekosystemie WordPress, aby zapewnić coraz prostsze rozwiązanie do projektowania strony internetowej, dostępne dla najbardziej początkujących.
Jeśli chodzi o projekt układów WordPress, musieliśmy już przesłać wtyczkę Program Visual Composer, co jest zdecydowanie jednym z najlepszych narzędzi do projektowania layoutu. Należy jednak pamiętać, że to rozwiązanie nie jest odpowiednie dla każdego. To jest powód, dla którego w tym samouczku zamierzamy przedstawić więcej wtyczki WordPress Elementor, która jest wtyczką freemium WordPress (bezpłatną, ale z możliwością rozszerzenia w ramach subskrypcji).
Gdzie zdobyć Elementor dla WordPress
Zastanawiamy się, czy nie zobaczysz potencjału wtyczki, a bezpłatne rozwiązanie pomoże Ci zacząć bez płacenia ani grosza. To bezpłatne rozwiązanie jest dostępne na stronie WordPress.org. Będąc wtyczką WordPress, jest instalowana jak każda inna wtyczka z deski rozdzielczej.
Jeśli wtyczka całkowicie Cię zadowoli, będziesz w stanie uzyskać pełną licencję ze wszystkimi funkcjami na stronie oficjalny elementor.
Główne cechy Elementor
Przed rozpoczęciem samouczka z omówieniem wtyczki, najpierw przedstawimy Ci główne funkcje wtyczki (wersja bezpłatna i pełna).
| Darmowa wersja | Pełna wersja |
|---|---|
| Wiele kolumn | Menu nawigacyjne, artykuł |
| Moduły Teksty, tytuły | Moduł WooCommerce (produkty, kategorie) |
| Moduły wideo, obraz, karuzela, galerie, Soundcloud | Integracja z Facebookiem (strona, przycisk, komentarze) |
| Moduł udostępniania | Tabela cen |
| Moduł HTML | Portfolio, formularz |
| Moduł dla widżetu WordPress | Moduł badawczy |
Zwróć uwagę, że jest to dość wyczerpująca lista różnych funkcji oferowanych przez wtyczkę. Więcej szczegółów znajdziesz w zwiedzanie ich strony internetowej.
Rozpocznij z Elementorem
Nie będziemy tutaj omawiać całego procesu instalacji. Ponieważ jest to wtyczka WordPress, procedura instalacji została już wyjaśniona w poprzedni samouczek. Jednak po instalacji zostaniesz przeniesiony na stronę główną wtyczki.
Jeśli masz tę stronę na ekranie, pomyślnie zainstalowałeś wtyczkę Elementor. Obecnie używamy pełnej wersji tego samouczka, ale interfejs nie powinien zbytnio różnić się od wersji bezpłatnej.
Przed przejściem do interfejsu edycji zapraszam do rejestracji licencji. Dotyczy to tylko tych, którzy wybrali pełną wersję. Jeśli masz darmową wersję, możesz przejść do następnej sekcji. Aby zarejestrować swoją licencję, zauważysz powiadomienie na WordPress, które poprosi Cię o zarejestrowanie licencji.
Wystarczy go kliknąć, aby przejść do strony rejestracji i kliknąć Aktywuj.
Zwykle potrzebujesz swojej strony z potwierdzeniem, jeśli twoja licencja jest ważna.
Jeśli nie dotrzesz na tę stronę, zapraszam do kontaktu z twórcami wtyczki po więcej pomoc w rozwiązaniu problemu.
Jak korzystać z Elementora
Elementor działa na stronach i postach na WordPress. Niezależnie od tego, czy używasz klasycznego interfejsu, czy nowego interfejsu Gutenberga, zobaczysz przycisk, który poprosi Cię o użycie kreatora Elementor.
W praktyce nie zawsze będziesz musiał edytować swoje posty za pomocą Elementora. Dlatego zapraszam do korzystania z wtyczki tylko na stronach. Klikając przycisk, uzyskasz dostęp do interfejsu projektowania Elementora, który daje poczucie déjà vu (dla tych, którzy używają dostosowywania WordPress).
Masz więc po lewej stronie różne elementy sterujące oferowane przez wtyczkę, a po prawej masz podgląd na żywo zmian. W tym samouczku używamy motywu Twenty Sixteen WordPress.
Sekcje Elementora
Sekcje Elementora to grupy bloków funkcjonalnych, które oferuje Elementor. Liczba sekcji zależy od tego, czy używasz pełnej wersji i czy korzystasz z WooCommerce, Yoast SEO lub innych kompatybilnych wtyczek. W zależności od tych warunków będziesz mieć więcej lub mniej sekcji w interfejsie. Ponieważ używamy pełnej wersji z włączoną wtyczką WooCommerce, tak wygląda nasz interfejs.
Jak umieścić blok Elementora
Po rozwinięciu sekcji znajdziesz bloki Elementora. Różne bloki Elementora są umieszczane za pomocą metody „Przeciągnij i upuść” na obszarze zaznaczonym kropkowanymi liniami.
Jak wybrać układ na Elementorze
Przed dodaniem bloku do Elementora należy pamiętać, aby wybrać układ, klikając przycisk „+” w podświetlonej sekcji.
W zależności od potrzeb wybierzesz układ, który najbardziej Ci odpowiada. Po wybraniu układu masz reprezentację tej sekcji na tym samym podświetlonym obszarze. Ta sekcja wyświetli taką samą liczbę kolumn odpowiadającą Twojemu wyborowi. W moim przypadku wybrałem kolumnę z 3 kolumnami.
Różne bloki ze znakiem „+” w środku to obszary, które mogą akceptować bloki Elementora. Jeśli dodasz blok Elementora bez uprzedniego wybrania układu, domyślnie zostanie wybrany układ z jedną kolumną.
Sekcje Elementora można zmieniać między sobą, stosując tę samą zasadę „przeciągnij i upuść”. Możesz również usunąć sekcję, jeśli nie chcesz jej już używać.
Oto przykład sekcji, która zawiera 2 bloki, a mianowicie blok tytułowy i blok tekstowy.
Jak korzystać z innych narzędzi do projektowania
Po zakończeniu projektowania jedną z rzeczy, które będziesz chciał zrobić, jest zapisanie swojej pracy. Znajdziesz tę opcję na samym dole sekcji wyświetlającej różne sekcje Elementora.
Możesz wybrać pomiędzy zapisem bezpośrednim (Opublikuj), a zapisaniem jako wersja robocza lub jako szablon. Później zbadamy te różne punkty.
Podczas projektowania możesz również chcieć wyświetlić podgląd zmian bez dodatkowego interfejsu Elementora. Wszystko, co musisz zrobić, to kliknąć ikonę oka.
Zdarza się, że podczas projektowania występuje błąd (działanie mimowolne). W tym przypadku Elementor oferuje historię, która umożliwia nawigację po wszystkich twoich działaniach.
To pozwoli ci łatwo wrócić.
Opcja „Przeglądarka”, która znajduje się tuż przed przyciskiem historii, umożliwia dalsze modyfikowanie różnych sekcji w odniesieniu do przeglądarki używanej przez odwiedzających. Ta opcja daje dostęp do zaawansowanej modyfikacji konstrukcji przekrojów (szerokości słupów). Musisz bardzo ostrożnie wprowadzać zmiany.
Przycisk „Ustawienia” umożliwia modyfikowanie niektórych opcji specyficznych dla strony, takich jak tytuł, wyróżniony obraz lub stan.
To wszystko w tym samouczku. W następnym samouczku omówimy bardziej Elementor. Nie wahaj się rzucić okiem na Strona oficjalna który oferuje o wiele więcej udanych przykładów.
