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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Umiejętność dodawania dynamicznego tytułu strony i hasła do globalnego nagłówka Divi będzie przydatna podczas tworzenia stron Divi. I jest kilka dobrych powodów, aby to zrobić. Z jednej strony nie wszystkie strony mają logo. Tytuł strony jest dobrym zamiennikiem logo. Innym powodem jest promocja marki poprzez umieszczenie istotnych informacji na stronie, gdzie wszyscy ją zobaczą.

W tym samouczku pokażemy, jak dodać dynamiczny tytuł strony i hasło do globalnego nagłówka Divi. To rozwiązanie dynamicznie wyodrębnia tytuł witryny i hasło zaplecza z WordPress. Ponadto będziesz mieć wszystkie zaawansowane opcje projektowania Divi, aby dostosować tytuł i opisać go tak, jak chcesz!

Możliwy wynik

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

Zwróć uwagę na tytuł strony i slogan na górze pośrodku nagłówka, który jest wyświetlany dynamicznie.

Darmowe pobieranie

Dołącz do Divi Newlsetter, a prześlemy Ci e-mailem kopię najlepszego pakietu układów strony docelowej Divi, a także mnóstwo innych bezpłatnych i niesamowitych zasobów Divi, wskazówek i sztuczek. Postępuj zgodnie z nim, a będziesz mistrzem Divi w krótkim czasie. 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 kartę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

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

W dalszej części przejdziemy do projektu.

Tytuł strony i hasło na WordPress

Każda witryna WordPress ma tytuł strony i hasło. Tytuł strony to w zasadzie nazwa strony, a hasło to krótkie zdanie, które zwykle wyjaśnia, co to jest.

Często zdarza się, aby dodać tytuł strony podczas instalacji WordPressa i zapomnieć o tym.

Ł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]

I niektórzy nawet nie zdają sobie sprawy, że slogan istnieje, nie mówiąc już o poświęceniu czasu na jego aktualizację. Ponadto podczas korzystania z motywu Divi tytuł witryny i hasło nie będą widoczne w domyślnej witrynie, więc łatwo je zignorować. Jednak tytuł strony i hasło są istotnymi elementami witryny i zostaną rozpoznane przez wyszukiwarki.

Możesz zlokalizować i zaktualizować tytuł witryny i hasło w WordPress w dowolnym momencie, wchodząc do pulpitu nawigacyjnego WordPress i wybierając Ustawienia> Ogólne.

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

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 globalnego szablonu nagłówka

W tym samouczku skupimy się na tym, jak dodać dynamiczny tytuł witryny i slogan do istniejącego nagłówka zamiast tworzyć od zera pełny nagłówek. Pozwoli to zaoszczędzić czas i poprawić przejrzystość. Aby rozpocząć projektowanie nagłówka, zaimportujemy z niego predefiniowany globalny szablon nagłówka 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> Kreator motywów.

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

Po dodaniu szablonu do generatora motywów usuń szablon stopki i kliknij, aby zmodyfikować globalny nagłówek.

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]

Dodaj dynamiczny tytuł strony i hasło do nagłówka

W edytorze układu szablonu zobaczysz wcześniej przygotowany nagłówek. Możemy od razu rozpocząć dostosowywanie.

Przenieś logo

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

Dodaj moduł wezwania do działania, aby wyświetlić tytuł strony i hasło

Następnie dodaj nowy moduł Wezwania do działania do środkowej kolumny górnego rzędu (w którym było logo).

Użyjemy modułu Wezwania do działania, aby wyświetlić tytuł strony i hasło.

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

Dodaj dynamiczny tytuł witryny

W ustawieniach zawartości umieść wskaźnik myszy nad obszarem 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 najedź kursorem na obszar ciała i wybierz ikonę „Użyj zawartości dynamicznej”. Następnie wybierz z listy „Tagline strony”.

Dodaj dynamiczny link do strony głównej

Często tytuł witryny przekierowuje na stronę główną po kliknięciu, szczególnie jeśli zastępujesz logo. Aby przekierować cały moduł na stronę główną, dodaj łącze strony głównej jako zawartość dynamiczną do adresu URL łącza modułu.

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

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

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]

Aktualizowanie tła przycisku

Następnie otwórz ustawienie modułu przycisków i zaktualizuj tło o nowy gradient tła 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%

Dodawanie przed i po znakach do hasła

Każdy element treści dynamicznej można edytować, klikając ikonę koła zębatego. Aby dodać znaki przed i po sloganie, otwórz parametry modułu wezwania do działania zawierającego slogan i kliknij ikonę modyfikacji na dynamicznej treści sloganu witryny. Następnie dodaj znaki do wpisów przed i po.

Ostateczny wynik

Aby zobaczyć wynik, otwórz dowolną stronę w swojej witrynie. Powinieneś zobaczyć dynamiczny tytuł strony i hasło wyświetlane pięknie!

końcowe przemyślenia

Naprawdę miło jest móc dostosować globalny nagłówek za pomocą dynamicznego tytułu i hasła witryny. To wydaje się być przydatne dla wielu stron. Podoba mi się również pomysł włączenia tytułu strony i hasła oprócz logo, aby jeszcze mocniej przedstawić markę.

Źródło: Elegancki motyw

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie 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