Przejdź do głównej treści

Jak dodać dynamiczny tytuł strony i hasło do globalnego nagłówka Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Wiedza o tym, jak dodać dynamiczny tytuł witryny i hasło do globalnego nagłówka Divi, będzie przydatna podczas tworzenia witryn Divi. Jest kilka dobrych powodów, aby to zrobić. Z jednej strony nie wszystkie witryny mają logo. Tytuł witryny jest dobrym zamiennikiem logo. Innym powodem jest wzmocnienie marki poprzez umieszczenie ważnych informacji w witrynie, tak aby wszyscy je widzieli.

W tym samouczku pokażemy, jak dodać dynamiczny tytuł witryny i slogan do globalnego nagłówka Divi. To rozwiązanie dynamicznie wyodrębni tytuł witryny i slogan z zaplecza WordPress. Dodatkowo będziesz mieć wszystkie potężne opcje projektowania Divi, aby dostosować tytuł i slogan, jak chcesz!

Możliwy wynik

Oto podgląd projektu, który zbudujemy w tym samouczku.

Dynamiczny szablon globalnego nagłówka tytułu witryny 6

Zwróć uwagę na tytuł witryny i slogan w górnej środkowej części nagłówka, który jest wyświetlany dynamicznie.

Przykład modyfikacji tytułu Divi

Darmowe pobieranie

Dołącz do Divi Newlsetter, a wyślemy Ci e-mailem kopię pakietu Ultimate Divi Landing Page Layout Pack wraz z mnóstwem innych darmowych i niesamowitych zasobów Divi, porad i wskazówek. Postępuj zgodnie z nim, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli jesteś już subskrybentem, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz, aby uzyskać dostęp do pakietu układu.POBIERZ

Aby zaimportować szablon, przejdź do Divi> Generator motywów.

Kliknij ikonę przenośności w prawym górnym rogu strony.

W wyskakującym oknie przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Wybierz szablon divi

Po zakończeniu ogólny szablon nagłówka będzie dostępny w Divi Theme Builder.

Zmodyfikuj globalny nagłówek divi

W dalszej części przejdziemy do projektu.

Tytuł strony i hasło na WordPress

Każda witryna WordPress ma tytuł witryny i slogan. Tytuł witryny to po prostu nazwa witryny, a slogan to krótkie wyrażenie, które zwykle wyjaśnia, co to jest.

Nierzadko dodaje się tytuł witryny podczas instalacji WordPressa i zapomina o nim.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Dostosuj tytuł Divi

Niektórzy ludzie nawet nie zdają sobie sprawy, że slogan istnieje, nie mówiąc już o poświęceniu czasu na jego aktualizację. Co więcej, gdy używasz motywu Divi, tytuł strony i slogan nie będą domyślnie widoczne na Twojej stronie, więc łatwo je zignorować. Jednak tytuł witryny i slogan są istotnymi częściami witryny i będą rozpoznawane przez wyszukiwarki.

Możesz znaleźć i zaktualizować tytuł witryny i slogan w WordPress w dowolnym momencie, przechodząc do pulpitu nawigacyjnego WordPress i przechodząc do Ustawienia> Ogólne.

Możesz też wybrać inną trasę za pomocą narzędzia dostosowywania motywu, aby zaktualizować tytuł witryny w ustawieniach ogólnych.

Dostosuj tożsamość WordPress

Teraz, gdy wiemy, gdzie tytuł strony i hasło znajdują się w backendzie WordPress, zobaczmy, jak możemy dodać je do nagłówka Divi!

Jak dodać dynamiczny tytuł strony i hasło do globalnego nagłówka w Divi

Importowanie wstępnie zaprojektowanego szablonu globalnego nagłówka

W tym samouczku skupimy się na tym, jak dodać dynamiczny tytuł witryny i slogan do istniejącego nagłówka, zamiast tworzyć pełny nagłówek od podstaw. Zaoszczędzi to czas i poprawi przejrzystość. Aby rozpocząć projekt nagłówka, zaimportujemy wstępnie zdefiniowany globalny szablon nagłówka z naszego czwarty pakiet generatora motywów .

Kiedy już to zrobisz pobrałem paczkę tworzenie motyw , rozpakuj plik i zlokalizuj domyślny plik JSON szablonu strony internetowej.

Następnie przejdź do Divi> Theme Builder.

Kliknij ikonę przenośności w prawym górnym rogu. W wyskakującym okienku przenośności wybierz domyślny plik JSON szablonu witryny internetowej i kliknij przycisk Importuj.

Import modelu Divi

Po dodaniu szablonu do kreatora motywów usuń szablon stopki i kliknij, aby edytować ogólny nagłówek.

Usuń szablon ze stopki

Dodanie dynamicznego tytułu witryny i sloganu do nagłówka

W edytorze układu szablonów zobaczysz gotowy nagłówek już zaprojektowany. Możemy od razu rozpocząć dostosowywanie.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Przenieś logo

Aby rozpocząć, przeciągnij moduł obrazu, który wyświetla logo (dynamicznie) ze środkowej kolumny górnego wiersza do lewej kolumny górnego wiersza.

Dodaj moduł wezwania do działania, aby wyświetlić tytuł witryny i slogan

Następnie dodaj nowy moduł wezwania do działania w środkowej kolumnie górnego wiersza (tam, gdzie znajdowało się logo).

Dostosuj wezwanie do działania

W celu wyświetlenia tytułu witryny i sloganu użyjemy modułu Call to Action.

Ale zanim zaczniesz dodawać zawartość, najpierw wybierz NIE, aby użyć koloru tła.

Skonfiguruj wezwania do działania

Dodaj dynamiczny tytuł witryny

W ustawieniach treści najedź kursorem na pole wprowadzania tytułu i kliknij ikonę „Użyj zawartości dynamicznej”. Następnie wybierz z listy „Tytuł witryny”.

Dodaj dynamiczne hasło witryny

Następnie umieść kursor myszy nad obszarem treści i wybierz ikonę „Użyj zawartości dynamicznej”. Następnie wybierz z listy „Site Tagline”.

Dodaj slogan witryny Divi

Dodaj dynamiczny link do strony głównej

Tytuł witryny często przekierowuje do strony głównej po kliknięciu, zwłaszcza jeśli zastępujesz logo. Aby przekierować cały kurs na stronę główną, dodaj link do strony głównej jako zawartość dynamiczną do adresu URL linku do kursu.

Dodaj link do strony głównej

Projekt tekstu tytułu i hasła witryny

Teraz tytuł i slogan witryny są wyświetlane dynamicznie w nagłówku. Teraz musimy tylko dodać trochę stylu. Pamiętaj, że musimy dostosować tekst tytułu, aby zaprojektować tytuł witryny i tekst podstawowy, aby zaprojektować slogan.

Przejdź do karty projektu i zaktualizuj następujące elementy:

  • Czcionka tytułu: Heebo
  • Waga czcionki tytułu: pogrubiona
  • Styl czcionki tytułu: TT
  • Rozmiar tekstu tytułu: 32px (komputer stacjonarny), 24px (tablet i telefon)
  • Odstępy między literami tytułu: 0.3em
  • Czcionka ciała: Roboto
  • Styl czcionki ciała: kursywa
  • Kolor tekstu ciała:
  • Rozmiar tekstu głównego: 13 pikseli
  • Odstępy między literami: 0.1em
  • Wysokość linii nadwozia: 1em
Dostosuj czcionkę tytułu Divi

Aby pomóc w wyśrodkowaniu, usuń domyślne wypełnienie poniżej tekstu podstawowego, dodając następujący niestandardowy CSS do opisu promocji:

padding-bottom: 0px
Dodaj niestandardowy kod Divi CSS

Dodatkowe korekty projektu

W tej ostatniej części samouczka wprowadzimy dodatkowe korekty projektu w nagłówku, aby upewnić się, że elementy pozostaną wyśrodkowane w każdej kolumnie i nadać przyciskowi niepowtarzalny wygląd. Dodamy również przed i po squiggly linię do sloganu (tylko dla kopnięć).

Pionowe centrowanie kolumn / treści

W tej chwili górny wiersz to „Wyrównanie wysokości kolumn”, która korzysta z właściwości flex. Możemy to wykorzystać, dodając mały fragment kodu css, aby upewnić się, że wszystkie kolumny pozostaną wyśrodkowane pionowo w wierszu. Aby to zrobić, otwórz ustawienia dla górnego rzędu i dodaj następujący CSS do elementu głównego:

elementy wyrównujące: środek;

Aktualizowanie kolumny za pomocą przycisku

Następnie otwórz ustawienia dla kolumny 3 w górnym rzędzie i wyjmij kolor tła i wypełnienie.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Dostosuj przycisk kontaktu Divi

Aktualizowanie tła przycisku

Następnie otwórz ustawienie modułu przycisków i zaktualizuj tło nowym gradientem w następujący sposób:

  • Tło gradientowe Lewy kolor: #ffffff
  • Kolor gradientu prawego tła: # 1dbf73
  • Kierunek gradientu: 135deg
  • Pozycja początkowa: 10%
  • Pozycja końcowa: 0%
Dostosuj tło przycisku Divi

Dodawanie przed i po znakach do hasła

Każdy element zawartości dynamicznej można zmienić, klikając ikonę koła zębatego. Aby dodać znaki przed i po sloganie, otwórz ustawienia modułu wezwania do działania zawierającego hasło i kliknij ikonę edycji na dynamicznej zawartości hasła serwisu. Następnie dodaj znaki do wpisów przed i po.

Wyświetl slogan divi

Ostateczny wynik

Aby zobaczyć wynik, otwórz dowolną stronę w swojej witrynie. Dynamiczny tytuł witryny i slogan powinny być pięknie wyświetlane!

Wynik końcowy divi

końcowe przemyślenia

To naprawdę fajne, że możesz dostosować ogólny nagłówek, dodając dynamiczny tytuł witryny i slogan. Wydaje się, że będzie to przydatne w wielu witrynach. Podoba mi się również pomysł umieszczenia tytułu witryny i sloganu oprócz logo, aby jeszcze lepiej przedstawić markę.

Źródło: Elegancki motyw

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer