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.
Zwróć uwagę na tytuł witryny i slogan w górnej środkowej części nagłówka, który jest wyświetlany dynamicznie.
Darmowe pobieranie
Dołącz do Divi Newlsetter, a wyślemy Ci e-mailem kopię pakietu Divi Ultimate Landing Page Layout Pack oraz wiele innych Zasoby, darmowe i niesamowite wskazówki i triki Divi. Podążaj za 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.
Po zakończeniu ogólny szablon nagłówka będzie dostępny w Divi Theme Builder.
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.
A niektórzy ludzie nawet nie zdają sobie sprawy, że slogan istnieje, nie mówiąc już o poświęceniu czasu na jego aktualizację. Dodatkowo, przy użyciu Motyw Divi, tytuł witryny i slogan nie będą domyślnie widoczne w Twojej witrynie, więc łatwo je przeoczyć. Jednak tytuł witryny i slogan są podstawowymi elementami 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.
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 znajdź plik JSON z szablon strony internetowej domyślnie.
Następnie przejdź do Divi> Theme Builder.
Kliknij ikonę przenośności w prawym górnym rogu. W wyskakującym oknie przenośności wybierz plik JSON z szablon strony internetowej domyślne i kliknij przycisk Importuj.
Po dodaniu szablonu do kreatora motywów usuń szablon stopki i kliknij, aby edytować ogólny nagłówek.
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.
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).
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.
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 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.
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:
dopełnienie-dolne: 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.
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%
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.
Ostateczny wynik
Aby zobaczyć wynik, otwórz dowolną stronę w swojej witrynie. Dynamiczny tytuł witryny i slogan powinny być pięknie wyświetlane!
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
