Wskazówki, jak przyspieszyć proces projektowania dzięki Elementor

Nie jest tajemnicą, że Elementor jest obecnie jednym z najlepszych twórców stron w społeczności WordPress. I nie jest to już tylko narzędzie do tworzenia stron. Elementor ewoluował tak bardzo, że możesz projektować w pełni działające strony internetowe nawet z darmowym, podstawowym motywem WordPress bez pisania ani jednego wiersza kodu!


Chociaż Elementor oferuje wiele opcji i możliwości dostosowywania, często pomijamy mniejsze szczegóły wtyczki i części, które mogą mieć duży wpływ na proces projektowania strony internetowej.

Projektowanie stron internetowych za pomocą Elementora jest już szybkie i łatwe, ale jeśli chcesz przyspieszyć proces projektowania, to dobrze trafiłeś. W tym artykule dowiesz się, jak przyspieszyć proces projektowania z Elementor, w pełni wykorzystując edytor z narzędziami innych firm.

Zacznij od gotowych szablonów

Wstępnie przygotowane szablony mogą przyspieszyć rozwój Twojego projektu. Projektowanie nowych stron od zera zajmuje dużo czasu, a często tracisz ten czas, stale dostosowując układ i style strony. Właśnie tam przydają się szablony. Biblioteka szablonów Elementora jest świetnym źródłem do przyspieszenia procesu projektowania. Nawet jeśli nie używasz gotowego szablonu, zawsze możesz użyć biblioteki szablonów jako inspiracji. Szablony można łatwo importować bezpośrednio na stronę za pomocą jednego kliknięcia.

Szablony Elementor można podzielić na dwie części. Po pierwsze, jeśli chcesz na przykład zaimportować wstępnie przygotowaną stronę od góry do dołu, możesz zaimportować całą stronę (na przykład stronę Informacje lub Kontakt) z całą jej zawartością. Drugą opcją jest, jeśli chcesz po prostu zaimportować sekcję lub blok projektu. Możesz to zrobić, jeśli na przykład podoba Ci się jedna z sekcji usług, bohatera, skontaktuj się z nami lub subskrybuj sekcje.

Wspaniałe darmowe i premium kolekcje szablonów są łatwo dostępne w Internecie.

Rynek Envato

Rynek Envato

Rynek Envato jest prawdopodobnie najpopularniejszym rynkiem nie tylko dla szablonów Elementor, ale także dla motywów i wtyczek WordPress.

Szablon potwora

Szablon potwora

TemplateMonster jest kolejnym dostawcą wysokiej jakości zasobów szablonów, mają też kilka darmowych szablonów.

Biblioteka szablonów Elementor

Biblioteka szablonów Elementor

Biblioteka szablonów Elementor – jest macierzystym magazynem szablonów dla Elementor, nowe szablony Bezpłatne i Premium pojawiają się bardzo często.

Użyj klawiszy skrótu

Jeśli pracujesz z Elementorem za pomocą myszy, przestań! Poświęć 10 minut na naukę skrótów, co pozwoli zaoszczędzić mnóstwo czasu i przyspieszy proces projektowania witryny. Oprócz prostych, takich jak kopiowanie i wklejanie, możesz także używać bardziej zaawansowanych niestandardowych skrótów. Mogą być bardzo przydatne, zwłaszcza jeśli chcesz nawigować między panelem a trybem podglądu lub przejść do edycji mobilnej.

Oto lista skrótów, które mogą znacznie przyspieszyć projektowanie witryny:

działania

CofnijCtrl / Cmd + ZCofnij wszelkie zmiany wprowadzone na stronie
PrzerobićCtrl / Cmd + Shift + ZPonów wszelkie zmiany wprowadzone na stronie
KopiujCtrl / Cmd + CSkopiuj sekcję, kolumnę lub widżet
PastaCtrl / Cmd + VWklej sekcję, kolumnę lub widżet
Wklej stylCtrl / Cmd + Shift + V.Wklej styl sekcji, kolumny lub widżetu
UsunąćUsunąćUsuń edytowaną sekcję / kolumnę / widżet
DuplikowaćCtrl / Cmd + DDuplikuj edytowaną sekcję / kolumnę / widżet
ZapisaćCtrl / Cmd + SZapisz swoją stronę w historii zmian

Iść do

Panel / PodglądCtrl / Cmd + PPrzełączanie między panelem a widokiem podglądu
Edycja mobilnaCtrl / Cmd + Shift + MPrzełączaj się między widokiem komputera, tabletu i urządzenia mobilnego
HistoriaCtrl / Cmd + Shift + HPrzejdź do panelu historii
NawigatorCtrl / Cmd + IOtwiera nawigatora
Biblioteka szablonówCtrl / Cmd + Shift + LOtwiera naszą bibliotekę szablonów
Skróty klawiszoweCtrl / Cmd + ?Otwiera okno pomocy Skróty klawiaturowe
PorzucićWYJŚCIEOtwiera Ustawienia i przechodzi do Wyjdź do pulpitu nawigacyjnego

Niestandardowy CSS dla stron

Czy wiesz, że możesz mieć niestandardowy CSS dla każdej strony? Tak, ale należy pamiętać, że ta funkcja jest dostępna tylko w wersji Pro elementu Elementor. Aby obejść ten problem, pokażę, jak dołączyć niestandardowy CSS do każdej strony. Ta sztuczka pozwoli Ci zaoszczędzić pieniądze, jeśli chcesz wersję Pro tylko do dodawania małych dostosowań na poziomie strony.

Aby to zrobić, wystarczy użyć widgetu HTML i tego fragmentu kodu w środku:

Spójrz na ten przykład:

Kod niestandardowy

Pasek wyszukiwania Elementor Finder

Bardzo często, gdy pracujesz nad projektowaniem strony, chcesz przejść do innych stron, ustawień, strony sprzedaży lub gdziekolwiek indziej, a może to być czasochłonne, jeśli: zapisz stronę> wróć do pulpitu nawigacyjnego> otwórz strony > wyszukaj stronę, którą chcesz otworzyć. Może to zmarnować dużo czasu i energii, jeśli musiałbyś to robić raz za razem.

Na szczęście Elementor ma wbudowane rozwiązanie usprawniające i przyspieszające proces projektowania. Zamiast przechodzić przez te wszystkie kłopoty, możesz po prostu użyć Wyszukiwacza Elementorów. Możesz bezpośrednio przejść do dowolnego ustawienia, szablonu, strony lub części motywu, wyszukując na pasku wyszukiwania. Dostęp do Findera można uzyskać, klikając klawisze Cmd / Ctrl + E w dowolnym miejscu pulpitu nawigacyjnego WordPress. Obejrzyj ten film, aby zobaczyć wszystko, co możesz zrobić z Finderem.

Użyj Nawigatora

Nawigator to okno drzewa nawigacji, które zapewnia łatwy dostęp do każdego elementu w kreatorze stron. To małe okno umożliwia nawigację między elementami oraz łatwe przeciąganie i upuszczanie widżetów.

Nawigator jest szczególnie przydatny w przypadku długich stron o złożonym projekcie wielowarstwowym oraz elementów łączących indeks Z, minus margines, położenie bezwzględne itp. Umożliwia dostęp do uchwytów elementów, które mogą znajdować się za innymi elementami.

Dostęp do Nawigatora można uzyskać na jeden z 3 prostych sposobów:

  1. Kliknij dowolny element prawym przyciskiem myszy, a następnie kliknij Nawigator. Spowoduje to automatyczne przekierowanie do określonego elementu w drzewie nawigacji.
  2. Kliknij przycisk elementów w stopce panelu.
  3. Użyj skrótu klawiaturowego Cmd / Ctrl + I.

Obejrzyj ten film, aby zobaczyć, jak działa:

Navigator ma również inne funkcje, takie jak widżety nazewnictwa, zwijanie i rozwijanie widżetów, przenoszenie lub zadokowywanie panelu oraz pokazywanie lub ukrywanie widżetów. Możesz zobaczyć pełną recenzję w ich dokumentacja.

Zdefiniuj swoją paletę kolorów

Zazwyczaj, projektując stronę internetową, kierujemy się wzorcem projektowym stworzonym przez projektanta. Ten wzór zwykle zawiera kombinację kolorów powtarzanych w całej witrynie. Są to kolory marki, które powinny pozostać niezmienione. Oznacza to, że za każdym razem, gdy dodajemy nowy widżet na stronie, musimy skopiować i wkleić kod koloru lub musimy pamiętać, jaki kod koloru ma zastosowanie w ustawieniu widżetu. Może to być czasochłonne. Na szczęście Elementor ma dla nas rozwiązanie.

Możesz zdefiniować kolory swojej marki w ustawieniach Próbnika kolorów i używać ich ponownie za każdym razem, gdy uzyskujesz dostęp do opcji kolorów dla stylów widżetów. Wystarczy wybrać gotową paletę lub zdefiniować własne niestandardowe kolory, aby zaoszczędzić czas podczas projektowania.

Spójrz na ten film:

Gotowe i wielokrotnego użytku style i szablony widżetów

Elementor jest jednym z najlepszych programów budujących strony, ale czy myślałeś o domyślnych i brzydkich przyciskach? Zakładki Menu? Lub jakikolwiek inny widget? Te domyślne widżety wyglądają, jakby zostały zaprojektowane kilka lat temu, a może chciałeś ponownie użyć widżetu, który stylizowałeś w projekcie A w projekcie B?

Obecnie nie można zapisywać i ponownie wykorzystywać stylów widżetów dla przyszłych projektów z Elementor. Na szczęście za darmo WunderWP wtyczka oferuje kilka sposobów rozwiązania tego problemu.

Po pierwsze, WunderWP udostępnia do dyspozycji szereg gotowych stylów widgetów. Gotowe style nagłówków, galerii, przycisków, przekładek, karuzeli, formularzy, tabel cen i innych są dostępne jednym kliknięciem. Po prostu przeciągnij widżet Elementor na swoją stronę, wybierz gotowy styl widżetu WunderWP i zacznij dodawać zawartość.

Ustawienia wstępne WunderWP

Dzięki WunderWP możesz również łatwo zapisywać i wykorzystywać własne style widgetów w Elementor. To proste: stylizuj widżet, zapisz go w WunderWP Cloud (który jest bezpłatny!) I użyj go później do podobnych widżetów. Działa to zarówno dla prostych, jak i skomplikowanych widżetów. Możesz na przykład użyć tego do zapisania widżetu nagłówka zawierającego różne wartości typograficzne lub widżetu obrazu z niestandardowymi cieniami.

Niestandardowe style WunderWP

To samo dotyczy szablonów – możesz zapisać pełne lub częściowe szablony, które tworzysz w chmurze WunderWP. Szablon będzie dostępny, więc kiedy będziesz gotowy, możesz łatwo wstawić go na stronę lub witrynę. W ten sposób wystarczy zbudować go tylko raz, oszczędzając dużo czasu.

Szablon niestandardowy WunderWP

Lub możesz skorzystać z gotowych szablonów treści WunderWP Obecnie istnieje ponad 50 gotowych szablonów sekcji – takich jak kontakt, wezwanie do działania, nagłówek, stopka, usługi, informacje, zespół, usługi, odliczanie i wiele innych – dla różnych cele.

Wstępnie przygotowany szablon WunderWP

Podsumowując

Aż do tej chwili, bez cienia wątpliwości, Elementor jest jednym z najlepszych kreatorów stron WordPress. Niemal każdego dnia nowe narzędzia i funkcje są dodawane w celu usprawnienia i przyspieszenia procesu projektowania oraz przyspieszenia czasu realizacji projektu.

Którą wskazówkę uważasz za najbardziej przydatną, a której nie znałeś wcześniej? Być może wiesz także coś, o czym tu nie wspomniano? Proszę podziel się tym z innymi.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me