Elementor Cloud: jak zbudować stronę internetową w 3 minuty

Elementor Cloud: jak zbudować stronę internetową w 3 minuty

W tym samouczku WordPress dowiedz się, jak stworzyć stronę internetową za pomocą Elementora w zaledwie 3 minuty dzięki Elementor Cloud, zautomatyzowanemu rozwiązaniu do tworzenia Blog WordPress z Elementorem dla początkujących i doświadczonych blogerów lub webmasterów.

Jeśli wolisz postępować zgodnie z samouczkiem wideo, kliknij przycisk nad następującym filmem:

Zbudowanie własnej strony internetowej bez nauki kodowania lub zatrudniania programisty było prawie niemożliwe. Jednak dzięki platformom takim jak WordPress i wtyczkom takim jak Elementor, to, co kiedyś było niemożliwe do wykonania, teraz stało się rzeczywistością.

W tym samouczku pokażemy, jak korzystać z WordPressa i Elementora, aby utworzyć nową stronę internetową i krok po kroku przeprowadzimy Cię przez ten proces.

Ale zanim zaprosimy Cię do odkrywania Jak zainstalować Elementora na WordPressie lub Jak zainstalować (dodać) wtyczkę na WordPress

Zbuduj witrynę WordPress z Elementor

WordPress to potężny system zarządzania treścią, który można pobrać i używać za darmo, i który umożliwia tworzenie dowolnego rodzaju strony internetowej; od prostych osobistych blogów i witryn małych firm po duże witryny firmowe i bogate w funkcje aplikacje. 

Elementor, z drugiej strony jest łatwym w użyciu, ale solidnym narzędziem do tworzenia stron, które ułatwia każdemu tworzenie własnej witryny, bez względu na jej złożoność.

W tym samouczku pokażemy, jak w trzy minuty utworzyć witrynę WordPress na nowej platformie Elementor Cloud. Nazwa może być silna, ale rozwiązanie jest naprawdę zautomatyzowane i łatwe dla każdego początkującego.

pierwszą rzeczą jest przejście do strony Elementor i przejście na dół strony i znalezienie linku Elementor Cloud.

utwórz stronę internetową za pomocą Elementor Cloud

Zostaniesz przekierowany na nową stronę. Przewiń w dół i znajdź sekcję ŻADNYCH UKRYTYCH WROŻEK. Po jego prawej stronie kliknij przycisk Kup teraz Jak na zdjęciu poniżej.

utwórz stronę internetową z Elementor

Otworzy się strona płatności i zostaniesz poproszony o podanie adresu e-mail. Po wprowadzeniu go kliknij przycisk UTWÓRZ KONTO

Tworzenie konta w chmurze Elementor

Następnie na następnej stronie wprowadź kraj, stan, adres, kod pocztowy i tak dalej, a następnie kliknij przycisk KONTUNUUJ

Następnie wybierz metodę płatności. Możesz wybrać między kartą kredytową lub PayPal. Wybraliśmy metodę PayPal.

Kliknij żółty przycisk PayPal po prawej stronie ekranu.

Un popup otworzy się i zostaniesz poproszony o wprowadzenie danych logowania PayPal i zatwierdzenie.

Jeśli procedura się powiodła, zostaniesz przekierowany na stronę z podziękowaniami, która ma dwa przyciski. Pierwszy Przejdź do mojego konta przeniesie Cię na Twoje Konto, a drugi Zacznij tworzyć swoją stronę internetową w kierunku automatycznego tworzenia Twojej strony internetowej.

Kliknij drugi przycisk. Będziesz mieć prawo do nowego Popupa, który zaprosi Cię do wpisania nazwy Twojej strony internetowej. Zatwierdź, klikając naciśnij Dalej.

Poczekaj na zakończenie automatycznej procedury tworzenia witryny, a następnie kliknij przycisk Chodźmy!

Kliknij Rozumiem jak na zdjęciu poniżej.

Kliknij Otwórz pulpit nawigacyjny WP, aby otworzyć pulpit nawigacyjny.

W nowym wyskakującym okienku powitalnym kliknij przycisk Użyj zestawu internetowego

Zostaniesz poproszony o wybranie szablonu strony internetowej z listy oferowanej przez Elementor. Będziesz mieć możliwość filtrowania ich według kategorii, klikając jeden z nich po lewej stronie.

utwórz bloga WordPress z Elementor

Jeśli znalazłeś model, który odpowiada Twoim aspiracjom, najedź na niego wskaźnikiem myszy, pojawi się nowy przycisk, kliknij na Wyświetl demo

utwórz bloga WordPress z Elementor

Będzie można zobaczyć, co oferuje ten model. Będziesz mógł poruszać się po wszystkich stronach tego modelu i jeśli jesteś z niego zadowolony, kliknij przycisk Zastosuj zestaw kto zainstaluje szablon na Twojej stronie.

Jeśli nie, przycisk Powrót do biblioteki zabierze Cię z powrotem do listy szablonów i możesz sprawdzić inny.

Po kliknięciu Zastosuj zestaw, wyskakujące okienko z potwierdzeniem zapyta, czy naprawdę chcesz zainstalować cały model, czy tylko kilka stron. Możesz kliknąć Zastosuj wszystko ou Dostosuj aby dostosować swoje wybory.

Zostanie zaprezentowane podsumowanie Twojego wyboru, kliknij naciśnij Dalej

utwórz bloga WordPress z Elementor

Na koniec kliknij Powrót do pulpitu nawigacyjnego aby wrócić do pulpitu nawigacyjnego Twojej witryny.

Na pulpicie kliknij Nazwa mojej strony internetowej powyżej i po lewej stronie ekranu, a następnie na Vjest to strona aby zobaczyć, jak działa Twoja witryna.

I tutaj właśnie stworzyłeś swoją witrynę na WordPressie z Elementor Cloud.

Wszystko, co pozostało do zrobienia, to dostosować go tak, jak chcesz. W tym celu oferujemy Pakiet samouczków Elementora które zapraszamy do odkrycia.

Gdy skończysz z tym przewodnikiem, możesz zapoznać się z naszymi innymi przewodnikami i samouczkami, aby uzyskać bardziej szczegółowe strony.

Dzięki tym samouczkom będziesz mógł ulepszyć swoją witrynę i jak najlepiej ją wykorzystać.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To wszystko w tym artykule, który pokazuje, jak stworzyć stronę internetową za pomocą Elementora w 3 minuty. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Elementor: Jak dodać efekt dźwiękowy przycisku

Elementor: Jak dodać efekt dźwiękowy przycisku

Chcesz dowiedzieć się, jak dodać efekt dźwiękowy przycisku w Elementorze? Dowiedz się w tym artykule.

Czy widzisz te 2 przyciski?

Po kliknięciu Kota, wyda miauczenie, a po kliknięciu przycisku na chien, wyda dźwięk szczekania. W tym artykule pokażemy, jak dodać w Elementor efekt dźwiękowy przycisku po kliknięciu.

Jak dodać efekt dźwiękowy do przycisku w Elementorze

Krok 1: Utwórz przycisk

Najpierw musisz utworzyć przycisk, możesz go dostosować, jak chcesz, ponieważ Elementor ma wiele opcji, dzięki którym Twój przycisk będzie wyglądał pięknie.

Gdy przycisk będzie gotowy, przygotuj teraz efekt dźwiękowy dla przycisku i prześlij go do biblioteki multimediów WordPress. Do uzyskania efektu dźwiękowego można użyć formatu pliku MP3 lub WAV.

Aby przesłać plik dźwiękowy do biblioteki multimediów WordPress, przejdź do pulpitu nawigacyjnego WordPress i kliknij Multimedia -> Dodaj. Możesz przeciągnąć i upuścić pliki lub kliknąć Wybierz pliki aby je przesłać.

efekt dźwiękowy przycisku na Elementorze

Po pobraniu plików przejdź do biblioteki multimediów i kliknij jeden z dźwięków, a następnie w wyświetlonym oknie skopiuj URL pliku aby uzyskać link do efektu dźwiękowego.

efekt dźwiękowy przycisku na Elementorze

Krok 3: Dodaj następujący kod HTML

Aby wytworzyć dźwięk z przycisku, musimy użyć następującego kodu HTML.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Dodaj widżet HTML w obszarze płótna i wklej kod w bloku Kod HTML.

Użyj linku do efektu dźwiękowego, aby zastąpić Efekt-dźwiękowy-URL w oświadczeniu

var audio1 = new Audio('Sound-Effect-URL')

Wybierz klasy CSS dla przycisku i zmodyfikuj kod klas Klasa CSS przycisku

$(".button-class").mousedown

Po zmodyfikowaniu kodu będzie to wyglądać tak.

efekt dźwiękowy przycisku na Elementorze

Krok 4: Dodaj klasę CSS do przycisku

Aby połączyć przycisk z kodami, musimy dodać do przycisku klasy CSS, aby kod wiedział, który przycisk jest klikany i uruchamiał efekty dźwiękowe.

efekt dźwiękowy przycisku na Elementorze

A to za przycisk z efektem dźwiękowym. Możesz teraz dostosować swój przycisk. A jeśli chcesz dodać więcej przycisków z efektami dźwiękowymi, możesz to zrobić kopiując część kodu i nieco go modyfikując.

Dodano dodatkowe przyciski z efektami dźwiękowymi

Utwórz przycisk lub skopiuj istniejący przycisk

Możesz skopiować istniejący przycisk, klikając go prawym przyciskiem myszy i wybierając Kopiuj, a następnie wklej go do dowolnej sekcji, klikając prawym przyciskiem myszy w tej sekcji.

efekt dźwiękowy przycisku na Elementorze

Skopiuj część kodu i dostosuj zmienne oraz nazwę klasy CSS drugiego przycisku

Skopiujmy niektóre części poprzedniego kodu HTML, które uruchamiają efekt dźwiękowy, oto poniższy kod

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Po skopiowaniu kodu wklej go poniżej przez Audio 1 Koniec. Zmodyfikuj zmienną audio1 i cały kod, który używa tej zmiennej audio1 na nowo utworzonym kodzie w audio2.

Zobacz także: Elementor: Jak stworzyć kartę efektów z portfolio

Następnie zamień adres URL efektu dźwiękowego, jeśli używasz nowego efektu dźwiękowego dla nowego przycisku i zmień kod klasa przycisków w nowo utworzonych klasach CSS przycisków.

Ostateczny kod będzie wyglądał jak na poniższym obrazku.

efekt dźwiękowy przycisku na Elementorze

Zamień nazwę klasy CSS przycisku

efekt dźwiękowy przycisku na Elementorze

Twój nowo utworzony przycisk również będzie miał efekt dźwiękowy po kliknięciu. Możesz stworzyć tyle, ile chcesz.

Elementy audio należą do świetnych dodatków do strony internetowej. Nie tylko stanowią atrakcyjny element stron internetowych, ale także pomagają wywrzeć trwałe wrażenie na użytkownikach końcowych.

Czytaj także: Elementor: Jak przeprowadzić migrację witryny WordPress

Jednak działaniu lub rezultatowi powinien towarzyszyć dźwięk tylko wtedy, gdy znacząco wzmacnia lub wyjaśnia ważną wiadomość dla użytkownika. Poinformowanie użytkownika o czymś, co wymaga jego uwagi, aby zamiast tego nie wpłynęło to negatywnie na Twoją stronę.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To tyle w tym artykule, który pokazuje, jak dodać efekt dźwiękowy przycisku w Elementorze. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Elementor: Jak stworzyć pływający przycisk z indeksem Z

Elementor: Jak stworzyć pływający przycisk z indeksem Z

Czy chcesz utworzyć pływający przycisk z indeksem Z w Elementorze?

Jesteśmy pewni, że znasz przycisk, który pojawia się przed całą zawartością ekranu i zwykle ma okrągły kształt i ikonę pośrodku. Cóż, to pływający przycisk akcji.

Pływający przycisk akcji może wywołać akcję lub wysłać cię gdzieś. Takie jak wyzwalacze e-maili, sieci społecznościowych, zachęcanie odwiedzających do subskrypcji kanału i wiele innych.

W Elementorze istnieją dwie metody tworzenia pływającego przycisku akcji, są one następujące:

  • Poprzez ustawienie indeksu Z
  • Tworząc wyskakujące okienko -Popup-

W tym samouczku pokażemy tylko, jak utworzyć pływający przycisk akcji, ustawiając indeks Z. Aby to się stało, użyjemy wersji pro.

Ale najpierw dowiedz się: Jak zainstalować Elementora na WordPressie

Jak utworzyć pływający przycisk akcji w Elementorze

Za pomocą tej metody możesz użyć bezpłatnej wersji Elementora, aby utworzyć pływający przycisk akcji. Musisz jednak wkleić zaprojektowany przycisk na każdej stronie, na której chcesz, aby pojawił się w Twojej witrynie.

Elementor Pro, możesz również uzyskać dostęp do funkcji niestandardowe CSS, którego użyjemy w tym samouczku.

Przejdź do edytora Elementora; możesz modyfikować istniejące treści (strony, artykuły itp.) lub tworzyć nowe. W tym samouczku zmodyfikujemy stronę.

Najpierw utwórz nową sekcję z pojedynczą kolumną. Wybierz widżet przycisku i przeciągnij go i upuść w obszarze edycji z panelu widżetów. Następnie zmień przycisk teksty Link. 

W tym samouczku użyjemy przycisku jako wyzwalacza, aby zachęcić odwiedzających do przeglądania witryny Elementor. Następnie na opcję wyrównanie, ustaw go na droite et, Na koniec zmień taille przycisku Włącz Bardzo duży.

utwórz pływający przycisk z indeksem Z

Jak widać na powyższym GIF-ie, ten przycisk jest nieruchomy w sekcji. Następnie sprawimy, że będzie się poruszał podczas przewijania, utrzymując go w tej samej pozycji.

Przejdź do zakładki zaawansowany. W parametrze Układ, ustaw szerokość na linii (samochód), zdefiniuj pozycja na Stałym, definiować orientacja pozioma na droite i dostosuj to Décalage jak chcesz.

utwórz pływający przycisk z indeksem Z

Następnie zdefiniujemy podstawy tej metody. Na polu Z-Index, wprowadź liczbę 9999 sprawi, że przycisk będzie zawsze z przodu (pływający).

utwórz pływający przycisk z indeksem Z

Teraz nadszedł czas, aby obrócić pływający przycisk akcji. Zawsze pod zakładką zaawansowany, Uzyskać dostęp do zajęcia css z bloku Układ, następnie napisz rotate wewnątrz.

Zobacz także: Elementor: Przedstawiamy najlepszy kreator stron WordPress

Potem idź do bloku Niestandardowe CSS , a następnie wklej w to pole następujący kod:

.rotate.rotate
{transform: rotate(90deg);}

Widać, że pokrętło właśnie się obróciło, ale między bokiem ekranu jest dziwna przerwa. Więc naprawmy to, dostosowując Décalage o -92

utwórz pływający przycisk z indeksem Z

Na koniec zrobimy ostatni mały dotyk dla tego pływającego przycisku akcji. Uzyskaj dostęp do bloku Transformator, wybierz to PRZEGLĄD, dostęp do opcji przesunięcie i ustaw każdą opcję na 7.

utwórz pływający przycisk z indeksem Z

Istnieje kilka opcji osiągnięcia określonej rzeczy w Elementorze. Jeśli chodzi o pływający przycisk, możesz skorzystać z dwóch opcji. Tutaj omówiliśmy tylko jedną metodę, drugą metodą będzie kolejny samouczek.

Czytaj także: Elementor: Jak przeprowadzić migrację witryny WordPress

Jeśli chcesz mieć więcej opcji stylizacji, lepszą alternatywą będzie utworzenie pływającego przycisku akcji za pomocą kreatora Popup, ponieważ będziesz mieć opcje dostosowywania przycisku, a także zachowania, takie jak czas zamykania przycisku, czas trwania, animacja wejścia lub wyjścia itp. .

Właśnie z łatwością wykonałeś to zadanie. Wystarczy podejrzeć działanie tabletu i smartfona, próbując zmienić marginesy, aby dopasować je do każdego urządzenia.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To wszystko w tym artykule, który pokazuje, jak zastosować efekt powiększenia na karcie profilu. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Elementor: Jak ręcznie przenieść witrynę WordPress

Elementor: Jak ręcznie przenieść witrynę WordPress

W samouczku: Jak ręcznie przeprowadzić migrację witryny WordPress za pomocą Elementora. Pokazaliśmy już jak przeprowadzić migrację strony internetowej za pomocą wtyczki WordPress Duplicator.

Chociaż ta wtyczka WordPress ułatwia sprawę, niektórzy mogą potrzebować samodzielnie kontrolować proces, manipulując kodem.

Jeśli więc masz szczególnie dużą witrynę internetową lub z jakiegoś powodu chcesz po prostu zrobić coś ręcznie, ręczna migracja witryny WordPress również nie jest taka trudna.

W tym przewodniku nie będziemy również zagłębiać się w tę metodę, ponieważ zalecamy tę metodę tylko wtedy, gdy nie masz już doświadczenia z niektórymi bardziej technicznymi działaniami WordPress.

Krok 0: Kilka wstępnych obserwacji

Przed rozpoczęciem tego samouczka musisz:

  • Zrób kopię zapasową swojej witryny
  • Miej poświadczenia FTP hostów istniejącej witryny i tego, do którego chcesz przenieść swoją witrynę

A jeśli zmienisz domeny, musisz również skierować serwery nazw nowej domeny na serwer nowej witryny.

Dalej, oto jak ręcznie zmigrować WordPress.

Krok 1: Przenieś pliki na nowy serwer

Istnieje kilka sposobów przenoszenia plików z serwisu WWW na nowy serwer. Jednym ze sposobów byłoby przesłanie wszystkich plików za pomocą protokołu FTP, a następnie przesłanie ich na nowy serwer.

Ponieważ jednak proces ten może zająć wiele godzin, najbardziej wydajnym sposobem byłoby utworzenie skompresowanego pliku archiwum w cPanel, a następnie sprawdzenie go na nowym hoście.

Krok 2: Eksportuj bazę danych

Następnie musisz wyeksportować istniejącą bazę danych serwisu WWW.

Chociaż możesz to zrobić ręcznie przez phpMyAdmin, prostszym rozwiązaniem jest Przenieś darmową wtyczkę DB do WordPressa.

Oprócz łatwego eksportowania bazy danych, WP Migrate DB obsługuje również dane serializowane i umożliwia wyszukiwanie i zastępowanie ścieżek URL, aby upewnić się, że wszystko działa dobrze, jeśli zmienisz nazwy domen. .

Zainstaluj i aktywuj wtyczkę w witrynie, którą chcesz migrować. Następnie idź do Narzędzia → Migracja bazy danych

Wybierz przycisk radiowy Eksportuj plik ( powinien być wybrany domyślnie).

Jeśli zmienisz nazwy domen, możesz również skorzystać z tej funkcji Znaleźć zamiennik zastąpić adresy URL bazy danych nową nazwą domeny.

Następnie kliknij przycisk eksport aby pobrać kopię swojej bazy danych:

Jak przeprowadzić migrację elementu lub instalatora witryny Wordpress 7

Krok 3: Utwórz nową bazę danych MySQL

Następnie utwórz nową bazę danych MySQL na hoście, do którego zmigrowałeś swoją witrynę, wraz z nowym użytkownikiem bazy danych i hasłem.

Miej te informacje pod ręką, ponieważ będziesz ich potrzebować.

Krok 4: Importuj bazę danych

Otwórz phpMyAdmin na nowym hoście internetowym i:

  • Znajdź bazę danych, którą właśnie utworzyłeś w kroku 3, korzystając z paska bocznego po lewej stronie
  • Kliknij zakładkę import
  • Wybierz plik bazy danych pobrany za pomocą WP Migrate DB w kroku 2
  • Kliknij Go

Jak przeprowadzić migrację elementu lub instalatora witryny Wordpress 8

Krok 5: Edytuj plik wp-config.php

W tym momencie pliki i baza danych Twojej witryny powinny znajdować się w nowej lokalizacji.

Teraz musisz powiedzieć swojej witrynie, aby korzystała z nowej bazy danych utworzonej w kroku 3.

Aby to zrobić, edytuj plik wp-config.php w zmigrowanej witrynie i wprowadź informacje o nowej bazie danych:

ręcznie migrować witrynę WordPress Elementor

Krok 6: Znajdź i zamień adresy URL w treści Elementora (jeśli zmieniasz domenę)

Jeśli zmieniasz nazwy domen, przejdź do Elementor → Narzędzia. Następnie kliknij kartę Zastąp adres URL i użyj narzędzia, aby zaktualizować adresy URL zawartości elementu Elementor:

Krok 7: Zregeneruj CSS Elementora

Po zaktualizowaniu adresów URL zawartości elementu Elementor przejdź do Elementor → Narzędzia a następnie kliknij przycisk Regeneruj pliki aby zmusić Elementor do regeneracji swojego CSS:

ręcznie migrować witrynę WordPress Elementor

Czy masz więcej pytań dotyczących migracji WordPressa?

Na tym kończy się nasz przewodnik dotyczący migracji WordPressa, w tym zawartości Elementora.

Pobierz Elementor Pro teraz!

Wnioski

Jeśli masz pytania dotyczące bezpiecznego przenoszenia stron internetowych utworzonych za pomocą WordPress i Elementor Pro do nowych hostów internetowych i / lub nazw domen? Daj nam znać commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Elementor: Przedstawiamy najlepszy kreator stron WordPress

Elementor: Przedstawiamy najlepszy kreator stron WordPress

Chcesz odkryć prezentację najlepszego Kreatora stron WordPress: Elementor?

WordPress to najpopularniejszy CMS na świecie. Jednak jeśli chodzi o projektowanie strony na interfejsie, domyślny zestaw narzędzi WordPressa znacznie odbiega od innych platform do tworzenia witryn, takich jak Wix czy Squarespace.

Ta wada WordPressa zaczyna być już nieobecna dzięki mnóstwu potężnych wtyczek, które upraszczają pracę. Z tego powodu przedstawimy Ci ten samouczek, wtyczkę WordPress, która pozwoli ci tworzyć niesamowite strony domowe, wszystko za darmo.

Elementor to narzędzie do tworzenia stron, które pozwala tworzyć profesjonalnie wyglądające strony z niesamowitą prędkością, a wszystko to na Twoim blogu. Wtyczka jest darmowa i dostępna w Katalog wtyczek WordPress.

Elementor został niedawno opisany na Produkt Hunt, i wzbudził zainteresowanie wielu użytkowników WordPress w grupach na Facebooku.

Możesz się zastanawiać, jak Elementor radzi sobie z tak wieloma Page Builder To już istnieje.

Przewaga prędkości

Kiedy mamy do czynienia strony konstruktora » ważna jest kwestia szybkości. Elementor to obecnie najszybszy kreator stron. Czy w „ przeciągnij i upuść Który działa bez opóźnień lub krótkich czasów ładowania stron zaprojektowanych przez Elementor.

Zobacz także: Jak stworzyć kartę efektu portfela z Elementor

Szybkość i wydajność wpływają nie tylko na witrynę, ale także na wrażenia użytkownika. Idea „ Strona budowniczy „To pozwala ci pracować na żywo, nie tracąc prędkości, jest decydującym czynnikiem dla wygody użytkownika.

Wtyczka interfejsu DragDropDesign

Zaleta Open Source

Elementor jest open source. Chociaż istnieją inne „ Strona budowniczy „Darmowy, żaden inny podobny projekt typu open source, oferuje te szerokie możliwości projektowania, z szeregiem funkcji i widżetów.

Darmowa wersja będzie wkrótce dostępna, ale darmowa wersja nadal pozwoli użytkownikom tworzyć profesjonalne strony.

Zobacz także: Jak zmienić obraz po najechaniu kursorem na tekst za pomocą Elementora 

Po uruchomieniu został wyposażony w ponad 6 widżetów. Możesz na to liczyć: przekładkę, ramkę na ikonę, ramkę na zdjęcie, galerię siatki, galerię zdjęć i galerię karuzelową.

Korzyści dla społeczności

Społeczność WordPress odgrywa istotną rolę w rozwoju Elementora. Projekt jest na GitHub, a programiści mogą pomóc go ulepszyć.

Zobacz także nasz samouczek na temat Jak dostosować motyw WordPress za pomocą Elementora

Został również przetłumaczony na kilka języków, w tym japoński, niemiecki i hebrajski. Jest to jedyny „ Strona budowniczy »Kompatybilny z pieluchami RTL (prawo od lewej). Społeczność rośnie z czasem, co jest bardzo obiecujące dla przyszłości wtyczki.

Ewolucja wtyczki

Elementor został pobrany więcej niż 10.000 razy. Został opisany w biuletynie Product Hunt i zdobył już więcej niż przychylne głosy 700. Nowe funkcje są dodawane co tydzień.

Pierwszy krok

Po zainstalowaniu wtyczki zobaczysz nowe menu na desce rozdzielczej „Elementor”.

menu elementarne WordPress

Kliknięcie go przeniesie Cię do strony ustawień wtyczki. Ale ten krok nie jest naprawdę konieczny, ponieważ ustawienia domyślne mogą działać w większości witryn internetowych.

Jeśli jednak chcesz na przykład zdefiniować niestandardowe formaty publikowania, które będą korzystały z wtyczki, musisz wprowadzić pewne poprawki.

Przeczytaj nasz przewodnik Jak zmienić obraz jednym kliknięciem w Elementor

Aby rozpocząć tworzenie strony, wszystko, co musisz zrobić, to uzyskać dostęp do strony (lub do interfejsu tworzenia spersonalizowanego typu publikacji). Na tej stronie zauważysz nowy przycisk zatytułowany: „ Edycja z Elementor”.

edytor budujący strony WordPress

Będziesz wtedy mieć dostęp do interfejsu na żywo na swoim blogu. Stamtąd będzie działać cała magia. Z tego interfejsu możesz zatem dodawać elementy dostępne po prawej stronie do interfejsu swojego bloga. Zauważysz, jak szybko wszystko się dzieje.

Tutorial Elementor

Prawdopodobnie będziesz miał trudności z przyzwyczajeniem się do tego, ale nie musisz się martwić. To wszystko, co na razie musisz wiedzieć. Jeśli masz jakieś pytania, napisz komentarze. 

Pobierz Elementor Pro teraz!

Wnioski

Tu jest ! To tyle w tym artykule, który pokazuje, jak zmienić obraz po najechaniu kursorem na tekst. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Elementor: Jak dostosować motyw WordPress

Elementor: Jak dostosować motyw WordPress

Czy chcesz dowiedzieć się, jak dostosować motyw WordPress za pomocą wtyczki Elementor?

Dostosowywanie motywu WordPress jest jednym z głównych zadań podczas tworzenia witryn WordPress. Ponieważ kontroluje projekt strony internetowej, większość czasu spędza na niej wielu profesjonalistów.

Tworzenie niestandardowego motywu WordPress zwykle wymaga pracy z plikami motywu i edytorem kodu. Zmiany układu zachodzą w plikach szablonów, zmiany projektu za pośrednictwem CSS. Ponadto będziesz musiał stale odświeżać okno przeglądarki, aby pokazać swoje dostosowania, co może być nieco uciążliwe.

Na szczęście z Elementor, ten proces staje się niezwykle łatwy, więc warto to sprawdzić.

Ale wcześniej odkryjmy razem Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu.

Wróćmy do tego, dlaczego tu jesteśmy.

Co to jest motyw WordPress

Motyw WordPress to w istocie zbiór szablonów, które definiują wygląd witryny WordPress.

Motyw WordPress obejmuje wszystko, co wpływa na projekt witryny internetowej, od nagłówków i stopek po schemat kolorów, układ i nie tylko.

Dostępnych jest wiele motywów, zarówno bezpłatnych, jak i premium, które pasują do niemal każdej branży portale fotograficzne, witryny klubów siłowni, strony internetowe salonów fryzjerskich, prawnicze strony internetowe, i wiele więcej.

Po co dostosowywać motyw WordPress?

Jednym z głównych powodów tworzenia strony internetowej jest promocja firmy. Czy jest lepszy sposób na zrobienie tego niż stworzenie unikalnej strony internetowej, która promuje styl i projekt firmy.

Czy możesz sobie wyobrazić, że Amazon, eBay lub Google są tym, czym są bez ich unikalnego projektu?

Oczywiście, że nie i to jeden z powodów, dla których chcemy dostosować motyw WordPress. Chcemy, aby był wyjątkowy i dostosowany do przesłania naszej firmy.

Czasami, a raczej często, korzystasz z motywu WordPress, który jest nękany przez kiepski projekt, kolory, które nie pasują do siebie lub motyw, który jest zbyt ciężki i wpływa tylko na wydajność witryny. sieć. Motyw WordPress może być potężny, z wyjątkiem tego, co ci przeszkadza. Dostosuj go i zmień to, co może rozwiązać wszystkie twoje problemy i stworzyć lepsze wrażenia użytkownika.

Jak dostosować motyw WordPress

Istnieje kilka metod dostosowywania motywu WordPress.

  1. Ręcznie, za pośrednictwem modułu dostosowywania WordPress
  2. Z kodem
  3. Z Elementorem

Jak ręcznie dostosować motyw WordPress

Możesz dostosować wybrany motyw WordPress za pomocą wbudowanego dostosowywania WordPress. Jeśli robisz to bez kodu, często jesteś ograniczony w tym, co możesz zmienić. Niektóre premium motywy WordPress zapewniają więcej opcji dostosowywania, ale w istocie nie ma dla Ciebie wielu opcji projektowania.

Zanim zagłębimy się w ten obszar, chcielibyśmy zwrócić uwagę, że podczas dostosowywania istniejącego motywu WordPress najlepiej jest użyć motyw potomny, a nie motyw nadrzędny.

Motyw potomny WordPress

Motyw potomny to motyw WordPress, który ma dokładnie takie same funkcje i cechy jak inny motyw WordPress, motyw nadrzędny. Motyw potomny służy do bezpiecznego dostosowywania i modyfikowania motywu bez wpływu na motyw nadrzędny i bez utraty możliwości jego aktualizacji. 

Modyfikator motywu WordPress

Teraz, gdy wiemy, że najlepiej jest pracować z motywem potomnym, nauczmy się, jak dostosować motyw za pomocą dostosowywania WordPress. Aby uzyskać do niego dostęp, przejdź do pulpitu nawigacyjnego, kliknij apparence po lewej stronie i wybierz Nadać cechy osobiste.

Główne funkcje, które możesz modyfikować za pomocą tego modułu dostosowania, są następujące:

Dodanie tytułu, logo i ikony serwisu

Aby dodać lub zmienić tytuł, logo lub ikonę, możesz po prostu przejść do panelu Identity na stronie internetowej. i wybierz każdy z tych elementów, aby je zmodyfikować.

Zmiana kolorów motywu WordPress

Niektóre motywy WordPress umożliwiają zmianę schematów kolorów, ale nie wszystkie, i są to zazwyczaj motywy WordPress premium. Jeśli Twój motyw WordPress umożliwia zmianę schematu kolorów, zobaczysz tę opcję, gdy uzyskasz dostęp do Customizer.

Dodanie menu nawigacyjnych

Konfigurator umożliwia również łatwe dodawanie i modyfikowanie menu nawigacji w witrynie.

Jak dostosować motyw WordPress za pomocą kodu

Zauważysz, że w zakładce Wygląd masz możliwość wyboru edytora motywów. Kliknięcie go przywita Cię oknem z kodem motywu. Ta opcja wymaga dobrego zrozumienia kodowania CSS i nie jest zalecana dla początkujących.

Tutaj będziesz miał dostęp do plików takich jak style.css, funkcje.php, i to jest dokładnie ten scenariusz, do którego będziesz potrzebować motywu potomnego, aby nie uszkodzić swojej witryny.

Innym sposobem dostosowania motywu przez kodowanie jest przesłanie plików za pomocą rozwiązania FTP. Proces obejmuje utworzenie poświadczeń FTP za pośrednictwem dostawcy usług hostingowych, pobranie i zainstalowanie rozwiązania FTP (takiego jak FileZilla), zalogowanie się na swoje konto i edycję plików, które następnie prześlesz przez to samo. Rozwiązanie FTP.

Odkryj nasz przewodnik na Jak zainstalować WordPress z FileZilla

Jeśli nie jesteś zaznajomiony z kodowaniem, nie zalecamy tej opcji.

Łatwo dostosuj motyw WordPress za pomocą Elementora

Możesz to zrobić bezpośrednio z interfejsu użytkownika. Nie ma potrzeby zmieniania ani jednej linii kodu ani ponownego ładowania okna przeglądarki, nawet raz.

Elementor pozwala szybko i łatwo zmienić każdy element witryny za pomocą kilku kliknięć myszką, a nawet zoptymalizować te funkcje pod kątem platformy mobilnej.

Elementor znacznie ułatwia ten proces, wykorzystując zawartość dynamiczną i umożliwiając podgląd stron. W ten sposób możesz od razu zobaczyć, jak zmiany w projekcie wpłyną na twoją rzeczywistą witrynę i zawartość.

Dostosuj nagłówek i stopkę

Elementor zapewnia pełną elastyczność, jeśli chodzi o projektowanie nagłówków i stopek. Wszyscy wiemy, jak nudne może być, że masz motyw WordPress i nie możesz zmienić ani jednego aspektu projektu nagłówka lub stopki. Potrzebujesz specjalistycznych motywów, wtyczek itp.

Z Elementorem to proste.

1. Utwórz szablon nagłówka

Najpierw skonfiguruj nowy szablon nagłówka. Aby to zrobić, przejdź do Elementor> Moje szablony.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 1

Tutaj jednym ze sposobów na rozpoczęcie jest naciśnięcie przycisku Dodaj nowy u góry. Na następnym ekranie użyj menu rozwijanego, aby wybrać Nagłówek jako typ szablonu do zaprojektowania.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 2

Możesz także przejść do tego ekranu, klikając zakładkę Nagłówek z poprzedniego ekranu, a następnie naciskając duży zielony przycisk, który się pojawi.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 3
Wstępnie wybierze nagłówek jako typ szablonu. Tak czy inaczej, musisz dodać odpowiednią nazwę dla szablonu (abyś wiedział, co to będzie później), a następnie kontynuuj, klikając Utwórz szablon.

To cię tu zabierze.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 4

Dzięki Elementor Pro możesz wybierać spośród wstępnie zaprojektowanych bloków nagłówka. Są to szablony projektowe, których możesz użyć jako punktu wyjścia dla własnego projektu, co zamierzamy zrobić w tym przypadku.

Gdy najedziesz kursorem na blok nagłówka, kliknij wstawka umożliwia natychmiastowe rozpoczęcie projektowania. W przeciwnym razie najpierw kliknij obraz, aby wyświetlić większą wersję. Wtedy zawsze możesz nacisnąć wstawka u góry.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 5

W przeciwnym razie, jeśli chcesz zacząć od zera, po prostu zamknij okno, klikając X w prawym górnym rogu.

2. Zmień podstawowy projekt nagłówka

Po wprowadzeniu nowego nagłówka pierwszą rzeczą, którą zauważysz, jest to, że logo i menu, które skonfigurowaliśmy wcześniej, już tam są.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 6

To jest dokładnie powód, dla którego je połączyliśmy i porozmawiamy o tym, jak je dostosować. Jednak najpierw zobaczmy, jak dostosować samą sekcję nagłówka.

Aby to zrobić, po prostu najedź na niego i kliknij przycisk edycji u góry. Spowoduje to otwarcie listy opcji edycji po lewej stronie.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 7

Oto, czym możesz sterować w różnych menu:

  • układ - Kontroluj szerokość sekcji, rozmiar przestrzeni między kolumnami, wysokość, pionową kolumnę i rozmieszczenie treści, przypisany tag HTML i ogólną strukturę.
  • Styl - Tutaj możesz zmienić kolor tła, w tym efekty najechania kursoremnawet dodaj obraz lub wideo jeśli chcesz, dodaj efekty nakładki, obramowania i separatora, a także zmień ustawienia typografii.
  • Zaawansowane - Ta część umożliwia dodawanie atrybutów CSS, takich jak margines, indeks z, animacje, identyfikatory i klasy. Pozwala także uczynić sekcję lepką i kontrolować ustawienia responsywne, a także dodawać niektóre Niestandardowy CSS.

Wszystkie powyższe są dość oczywiste i szybko dostaniesz to, czego chcesz.

3. Dostosuj elementy nagłówka

Możesz jednak edytować nie tylko całą sekcję nagłówka, ale także zawarte w niej elementy. Na przykład, aby dostosować logo witryny, po prostu je kliknij. To również zapewni opcje edycji po lewej stronie.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 8
W przypadku logo daje to następujące możliwości:

  • Treść - Zmień rozmiar obrazu, wyrównanie i miejsce, z którym jest połączony.
  • Styl - Kontroluj szerokość i wysokość, dodawaj efekty CSS i efekty najechania kursorem, dołączaj obramowanie i cień, jeśli chcesz.
  • Zaawansowane - Tutaj znajdziesz zasadniczo te same opcje, co w sekcji nagłówka.

Użyj ustawień, aby dostosować logo tak, jak chcesz, aby było dobrze wyświetlane w nagłówku. Pamiętaj również, że każdy element ma swój własny typ opcji, więc koniecznie sprawdź każdy z nich.

4. Dodaj elementy

Oczywiście z Elementorem możesz również dodawać elementy do nagłówka. Wystarczy kliknąć symbol w prawym górnym rogu, aby zobaczyć, co jest dostępne.

dostosuj motyw WordPress za pomocą wtyczki Elementor.
Podczas edycji szablonu nagłówka, Elementor automatycznie wyświetla odpowiednie bloki na górze listy, co ma największy sens w danych okolicznościach. W tym przypadku są to takie rzeczy, jak logo witryny, menu nawigacyjne i tytuł witryny.

Na przykład, jeśli chcesz dodać tytuł witryny obok logo, po prostu przeciągnij go i upuść. Jednak szablon nagłówka, który obecnie wybraliśmy, pozwala nam dodać go powyżej lub poniżej logo. Ale jest to problem, który będzie można łatwo rozwiązać.

W takim przypadku najedź kursorem na nagłówek i użyj symbolu plusa –+-aby dodać sekcję powyżej.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 10

Kliknij tutaj na fioletowy przycisk, aby wybrać projekt z trzema kolumnami.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 11

Następnie przeciągnij elementy z istniejącej sekcji nagłówka do nowej sekcji i dodaj tytuł strony w środku.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 12

Ale poczekaj, styl jest zupełnie inny! nie ma problemu. Kliknij prawym przyciskiem myszy istniejący nagłówek i wybierz Kopiuj. Następnie kliknij prawym przyciskiem myszy nową sekcję i kliknij tutaj Wklej styl. Elementor zastosuje wówczas styl istniejącej sekcji, którą możesz później zamknąć. 

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 13

Możesz wykonać ten sam proces z dowolnym innym elementem nagłówka i oczywiście ze wszystkimi innymi elementami zawartymi w Elementorze.

Dostosuj unikalny szablon posta

W Elementorze możesz także dostosować szablon pojedynczego posta. Oto jak :

1. Utwórz nowy model

Tworzenie szablonu działa w zwykły sposób. Jednak tym razem wybierz Single jako typ modelu. Następnie poniżej wybierz unikalny szablon, który chcesz edytować. W tym przykładzie z Stanowisko.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 14

Jeśli chcesz stworzyć nowy projekt strony, edytuj stronę 404 (więcej na ten temat później) lub edytuj niestandardowy typ posta w szczególności wybierzesz coś innego. W obu przypadkach wprowadź nazwę i kontynuuj.

Na następnym ekranie możesz normalnie wybierać spośród predefiniowanych szablonów. Jednak w tym przypadku chcemy stworzyć nowy model od podstaw. Więc kliknij X w prawym górnym rogu, aby zamknąć to okno.

2. Skonfiguruj podgląd

Następnie ustaw okno podglądu na istniejący post. Możesz to zrobić, klikając ikonę oka u dołu opcji edytora, a następnie Ustawienia.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 15

W menu, które zostanie otwarte, pod Podgląd dynamiczna zawartość, wybierz Publikować. Następnie w następnym wierszu możesz wyszukać i wybrać istniejący post według nazwy.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 16Gdy to zrobisz, stuknij Zastosuj & Podgląd. Chociaż w tym momencie nie będziesz w stanie nic zobaczyć (ponieważ nic nie ma na stronie), poinformuje Elementor, aby od teraz korzystał z danych w tym poście. Wkrótce przekonasz się, co to oznacza.

3. Utwórzmy sekcję powyżej 

Najpierw utworzymy powyższą sekcję. Tutaj zwykle znajdziesz takie rzeczy, jak tytuł posta i metadane, takie jak autor, data i kategoria.

Pierwszym krokiem jest kliknięcie znaku + i tworzenie sekcji z pojedynczą kolumną.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 17
Gdy to zrobisz, w sekcji układu możesz kontrolować jego szerokość, wysokość, położenie i styl. W tym przypadku nie ma tu wiele do zrobienia. Nie martw się, zawsze możesz wrócić i wprowadzić zmiany później.

Następnie przeciągnij widżet tytułu posta do nowej sekcji.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 18

Kiedy to zrobisz, użyj wszystkich dostępnych opcji, aby dostosować projekt i układ do swoich upodobań. Na przykład oto moje ustawienia, jak to zrobić:

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 19

Jest też fajna funkcja, której powinieneś się nauczyć. Po kliknięciu symbolu klucza w tytule postu możesz dodać statyczną zawartość przed i po danych dynamicznych.

Na przykład, jeśli utworzysz szablon dla określonej kategorii postów, takiej jak wiadomości lub przepisy, możesz dodać go do tytułu posta w następujący sposób:

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 20

W ten sposób te dane pojawią się dla każdego posta w tej kategorii. Nie zamierzam tego używać w tym momencie, ale pomyślałem, że to dla ciebie ważna uwaga dodatkowa.

Pod tytułem wpisu wstawimy Stanowisko Informacia widget aby wyświetlić metadane postu.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 21

Oto ustawienia, których używam:

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 22

Dodatkowo użyłem opcji stylizacji, aby projekt pasował do reszty strony. Upewnij się, że robisz to samo.

4. Skonfiguruj treść wiadomości

Po nagłówku czas na utworzenie treści strony. Jeśli chcesz, aby ta część miała inny wygląd niż nagłówek, musisz skonfigurować nową sekcję. Jednak utrzymuję to w prostocie, więc nie muszę.

Pierwszą rzeczą, którą chcemy wstawić, jest wyróżniony obraz. Aby to zrobić, możesz umieścić widżet o tej samej nazwie pod tym, co już znajduje się na stronie.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 23

W zasadzie nie zmieniłem żadnych ustawień, po prostu zostawiłem wszystko tak, jak jest.

Następnie nadszedł czas na opublikowanie treści. Tutaj też masz odpowiedni blok.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 24
Zauważysz, że w przypadku polecanych obrazów i treści postów Elementor automatycznie pobiera to, co jest już na stronie. Wprowadź wszelkie potrzebne zmiany w projekcie nowego bloku, na przykład baw się ustawieniami typograficznymi.

Poza tym to wszystko. Nie ma tu zbyt wiele pracy, żebyśmy mogli przejść do ostatniej części.

5. Skonfiguruj stopkę

W tym przypadku chcemy, aby stopka pokazywała profil autora, opcje udostępniania i komentarze czytelników. Aby to zrobić, najpierw musimy utworzyć nową sekcję z dwiema kolumnami. Aby uzyskać więcej miejsca dla profilu autora, możesz ustawić go na układ 66.33.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 25

Następnie umieść widget Pole autora w lewej części.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 26

Pamiętaj, aby dostosować styl do swoich potrzeb. Dodałem trochę koloru tła i nieznacznie dostosowałem ustawienia typografii.

Następnie nadszedł czas, aby dodać blok Przyciski udostępniania po prawej stronie.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 27

Możesz zobaczyć moje ustawienia na powyższym zrzucie ekranu.

Następnie wystarczy utworzyć sekcję jeszcze jedną kolumnę w dół i przeciągnąć i upuścić do niej widżet Publikuj komentarze.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 28

(Nawiasem mówiąc, jeśli kiedykolwiek będziesz miał problemy ze znalezieniem któregokolwiek z tych widżetów, po prostu użyj funkcji wyszukiwania).

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 29

Wprowadź wszelkie poprawki w sekcji komentarzy, które uważasz za konieczne (zostawiłem ją tak, jak jest) i jesteś gotowy do publikowania. Oto gotowy projekt:

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 30

Dostosuj szablon archiwum

1. Skonfiguruj szablon archiwum WordPress

Na razie znasz już rozwiązanie dotyczące tworzenia nowych modeli. Jedyna różnica polega na tym, że w tym przypadku wybierzesz Archiwum jako typ modelu.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 31

Następnie, jak zwykle, masz do wyboru kilka klocków lub możesz również stworzyć własny model od podstaw. Jednak w przypadku archiwów masz tylko dwa widgety Elementor, które i tak są ważne.

2. Podaj tytuł archiwum

Pierwszy blok, o którym chcę porozmawiać, to tytuł archiwum Tytuł archiwum.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 32

Oprócz zwykłych ustawień w ramach Styl i zaawansowane, można znaleźć ważną opcję, klikając symbol klucza pod Tytuł.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 33

Tutaj możesz włączyć i wyłączyć, czy Elementor wyświetla typ archiwum na stronie, tak jak część, w której jest napisane Autor: poniżej. Dzieje się to za pomocą przycisku poniżej Uwzględnij kontekst

Nawiasem mówiąc, jak zwykle możesz przeglądać różne archiwa za pomocą ustawień podglądu (Symbol oka> Ustawienia). W ten sposób możesz zobaczyć projekt unikalnych kategorii, tagów, autorów i nie tylko. Miej to na uwadze.

3. Skorzystaj z bloku publikacji archiwalnych

Drugim ważnym widgetem dla archiwów jest Archive Posts. Spowoduje to umieszczenie wszystkich postów należących do dowolnego archiwum na jednej stronie. Kiedy wybierzesz szablon, one już tam są, ale możesz też łatwo dodać je samodzielnie za pomocą tego bloku.

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 34

Rzućmy okiem na dostępne opcje dostosowywania stron archiwum:

  • skóra - Wybierz wyświetlanie swoich postów w stylu klasycznym lub w stylu karty.
  • kolumny - Określa liczbę kolumn, w których wyświetlane są Twoje posty.
  • Pokaż obraz - Aktywuj polecane obrazy na stronach archiwum
  • Kamieniarstwo – Wyświetla elementy w konstrukcji murowanej lub nie.
  • Wielkość obrazu - Rozmiar obrazu, który Elementor powinien używać na stronach archiwum.
  • Tytuł - Chcesz wyświetlać tytuły postów, czy nie?
  • Tag HTML tytułu - Jeśli tak, jaki znacznik HTML powinien być wokół niego umieszczony?
  • Fragment - Dołącz fragmenty swoich postów lub pokazuj tylko tytuł.
  • Fragment Długość - Określić długość ekstraktów.
  • Metadane - Określa metadane postów dostępne dla odwiedzających.
  • Separator między - Symbol separatora między informacjami metadanych.
  • Przeczytaj więcej - Dołącz link „czytaj więcej”, tak czy nie?
  • Odznaka - Pozwala dodać więcej informacji do postów, takich jak kategorie i tagi.
  • Odznaka taksonomii - Tutaj możesz zdecydować, jakie informacje chcesz uwzględnić.
  • Awatar – Dzięki temu możesz zmienić zdjęcie profilowe autorów artykułów

Oprócz powyższego masz kilka innych opcji. Pod Paging, możesz określić, jak powinno być obsługiwane stronicowanie archiwów. Na przykład, jak go wyświetlić, liczbę stron do uwzględnienia i wyrównanie tekstu.

Wreszcie Zaawansowane umożliwia ustawienie komunikatu, który będzie wyświetlany, gdy użytkownik trafi do pustego archiwum. Wszystko inne powinno być znajome. Pamiętaj tylko, że opcje stylu zmieniają się w zależności od wybranej skórki.

4. Kontroluj liczbę publikacji w archiwum

Krótka uwaga na temat szablonów archiwów. Aby zmienić liczbę postów, które pojawiają się w archiwum (lub na stronie Twojego bloga), musisz to zrobić w WordPress pod Ustawienia> Czytanie. 

Jak dostosować szablon nagłówka elementu lub nagłówka motywu Wordpress 35

Tutaj wpisz liczbę postów, które mają widzieć Twoi goście.

personalizacja powierzchowny Motyw WordPress z Elementorem

Dostosowywanie motywów WordPress to chleb powszedni wielu profesjonalistów. Chociaż zwykle wiąże się to z dużym kodowaniem i edycją plików, w przypadku Elementora nie jest to już konieczne.

Jak widać powyżej, wtyczka jest pełnoprawnym edytorem motywów WordPress. Pozwala dostosować każdą jego część z poziomu interfejsu użytkownika. Możesz edytować nagłówek, stopkę, szablony stron i postów, szablony archiwów i nie tylko.

Dzięki możliwości korzystania z dynamicznej zawartości i podglądu dowolnej części witryny możesz zaimplementować wszystkie modne dostosowania

Krótko mówiąc, Elementor ułatwia dostosowanie motywu WordPress. Zamiast żmudnego wprowadzania zmian w dziesiątkach plików i setkach linii kodu, możesz to wszystko szybko zrobić w jednym miejscu.

Pobierz Elementor Pro teraz!

Wnioski

Tu jest ! To wszystko w tym artykule, który pokazuje, jak dostosować motyw WordPress za pomocą Kreatora stron. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...