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 Elementoremdla 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.
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.
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.
Otworzy się strona płatności i zostaniesz poproszony o podanie adresu e-mail. Po wprowadzeniu go kliknij przycisk UTWÓRZ KONTO
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.
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
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
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.
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.
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.
Krok 2: Przygotuj link do efektu dźwiękowego
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ć.
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.
Krok 3: Dodaj następujący kod HTML
Aby wytworzyć dźwięk z przycisku, musimy użyć następującego kodu HTML.
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.
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.
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.
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.
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.
Zamień nazwę klasy CSS przycisku
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.
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ę.
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.
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.
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.
z 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 przyciskui przeciągnij go i upuść w obszarze edycji z panelu widżetów. Następnie zmień przycisk teksty i 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.
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.
Następnie zdefiniujemy podstawy tej metody. Na polu Z-Index, wprowadź liczbę 9999 ; sprawi, że przycisk będzie zawsze z przodu (pływający).
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.
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
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.
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.
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.
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.
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.
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:
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
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:
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:
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.
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.
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.
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.
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.
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ć.
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”.
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.
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”.
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.
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.
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.
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ć.
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.
Ręcznie, za pośrednictwem modułu dostosowywania WordPress
Z kodem
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.
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.
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.
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.
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.
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.
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ą.
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.
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.
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.
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.
Kliknij tutaj na fioletowy przycisk, aby wybrać projekt z trzema kolumnami.
Następnie przeciągnij elementy z istniejącej sekcji nagłówka do nowej sekcji i dodaj tytuł strony w środku.
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ąć.
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.
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.
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.
Gdy 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ą.
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.
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ć:
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:
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 Informaciawidgetaby wyświetlić metadane postu.
Oto ustawienia, których używam:
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.
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.
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.
Następnie umieść widget Pole autora w lewej części.
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.
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.
(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).
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:
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.
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 widgetyElementor, które i tak są ważne.
2. Podaj tytuł archiwum
Pierwszy blok, o którym chcę porozmawiać, to tytuł archiwum Tytuł archiwum.
Oprócz zwykłych ustawień w ramach Styl i zaawansowane, można znaleźć ważną opcję, klikając symbol klucza pod Tytuł.
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.
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.
Tutaj wpisz liczbę postów, które mają widzieć Twoi goście.
personalizacja powierzchownyMotyw 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.
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.
Poufność i pliki cookie: ta witryna używa plików cookie. Kontynuując przeglądanie tej strony, zgadzasz się na jej użycie.
Aby dowiedzieć się więcej, w tym jak kontrolować pliki cookie, zobacz:
Polityka plików cookie
Gdy 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.
