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 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.
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.
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.
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
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.
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ę.
Projektując stronę usług, chcesz mieć pewność, że odwiedzający zauważą wszystkie oferowane przez Ciebie usługi. W wielu przypadkach będzie to tylko jedna konkretna usługa, której szukają, ale jeśli zapewnisz usprawniony sposób w strukturze usług, Twoi goście będą bardziej skłonni traktować je wszystkie.
W tym samouczku pokażemy, jak wykazać się kreatywnością dzięki efektom przewijania Divi i stworzyć płynne przejście usługi. Możesz także pobrać plik JSON za darmo!
Chodźmy.
Możliwy wynik
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
1, odtwórz strukturę elementów
Dodaj sekcję # 1
rozstaw
Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień wartości wypełnienia na ekranach o różnych rozmiarach.
Górna wyściółka: 80 pikseli (komputer stacjonarny i tablet), 0 pikseli (telefon)
Dolne wypełnienie: 80px
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i zastosuj następujące zmiany w parametrach wymiarowania:
Użyj niestandardowej szerokości rynny: Tak
Szerokość rynny: 1
Szerokość: 90%
Maksymalna szerokość: 1580 pikseli
rozstaw
Następnie dodaj niestandardowy górny i dolny margines.
Górny margines: 200px
Dolny margines: 200px
Dodaj moduł tekstowy do kolumny 1
Dodaj zawartość H2
Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Wprowadź dowolną zawartość H2, jaką chcesz.
Ustawienia tekstu H2
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:
Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
Wysokość linii tekstu: 3em
Dodaj moduł separacji do kolumny 2
widoczność
Kolejnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.
Pokaż separator: Tak
Linia
Następnie zmień kolor linii modułu.
Kolor linii: # 000000
zaklejania
Następnie wprowadź zmiany w parametrach rozmiaru.
Waga dzielnika: 3px
Szerokość: 28%
rozstaw
Dodajemy również górny margines.
Górny margines: 10px
Dodaj sekcję # 2
rozstaw
Przejdźmy do następnej zwykłej sekcji. Usuń domyślną górną wyściółkę z sekcji.
Górna wyściółka: 0px
przepełnienia
Ukryj także przepełnienia.
Przelew poziomy: ukryty
Przelew pionowy: ukryty
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie pierwszego wiersza, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii, uzyskaj dostęp do parametrów wymiarowania i wprowadź następujące zmiany:
Użyj niestandardowej szerokości rynny: Tak
Szerokość rynny: 1
Wyrównaj wysokości kolumn: Tak
Szerokość: 90%
Maksymalna szerokość: 1580 pikseli
rozstaw
Następnie usuń wszystkie domyślne górne i dolne wypełnienie.
Górna wyściółka: 0px
Dolne wypełnienie: 0px
Ustawienia kolumny 1
Kolor tła
Następnie otwórz ustawienia kolumny 1 i zmień kolor tła.
Kolor tła: # f7f7f7
rozstaw
Uzupełnij ustawienia kolumny, dodając niestandardowe wartości wypełnienia na ekranach o różnych rozmiarach.
Górna wyściółka: 200 pikseli (biurko), 100 pikseli (tablet i telefon)
Wyściółka u dołu: 200px (biurko), 100px (tablet i telefon)
Lewa wyściółka: 8%
Prawa wyściółka: 8%
Ustawienia kolumny 2
rozstaw
Kontynuuj, otwierając ustawienia w kolumnie 2. Przejdź do karty Zaawansowane i dodaj niestandardowe wartości wypełnienia na ekranach o różnych rozmiarach.
Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
Wysokość linii tekstu: 3em
Dodaj moduł przycisku do kolumny 2
Dodaj kopię
Kolejnym i ostatnim potrzebnym modułem jest moduł przycisków. Wprowadź wybraną kopię.
Ustawienia przycisków
Następnie stylizuj przycisk.
Użyj niestandardowych stylów przycisku: Tak
Rozmiar tekstu przycisku: 20 pikseli
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: # 000000
Szerokość obramowania przycisku: 0px
Przycisk czcionki: kwartalny
Waga czcionki przycisku: pogrubiona
rozstaw
Dodaj także niestandardowe wypełnienie.
Górna wyściółka: 50px
Dolne wypełnienie: 50px
Lewe dopełnienie: 100px
Prawa wyściółka: 100 pikseli
Pozycja
I odpowiednio zmień położenie przycisku:
Pozycja: absolutna
Lokalizacja: u dołu po lewej
Klonuj linię tyle razy, ile to konieczne
Po ukończeniu całej linii i wszystkich jej modułów możesz sklonować całą linię trzy razy.
Zmień całą zawartość
Pamiętaj, aby edytować całą zawartość w zduplikowanych wierszach.
2. Zastosuj efekty przewijania
Efekty przewijania w pierwszym rzędzie
Ruch poziomy
Po wypełnieniu wszystkich wierszy w sekcji nadszedł czas, aby dodać efekty przewijania. Otwórz pierwszy rząd sekcji i dodaj ruch poziomy.
Aktywuj ruch poziomy: Tak
Rozpocznij przesunięcie: -5
Średnie przesunięcie: 0 (przy 26%)
Przesunięcie końcowe: 0
Efekt ruchu wyzwalania: środek elementu
Zanikaj i znikaj
Użyj także przychodzącego i wychodzącego efektu zanikania.
Aktywuj pojawianie się i zanikanie: Tak
Początkowe krycie: 100%
Średnie krycie: 100% (przy 50%)
Koniec krycia: 0% (do 53%)
Efekt ruchu wyzwalania: środek elementu
Efekty przewijania w środkowym rzędzie
Ruch pionowy
Następnie dodamy efekty przewijania do wszystkich linii między pierwszą a ostatnią linią sekcji. Najpierw użyj ruchu pionowego:
Aktywuj ruch pionowy: Tak
Rozpocznij przesunięcie: -4
Średnie przesunięcie: 0 (przy 26%)
Przesunięcie końcowe: 0
Efekt wyzwalania ruchu: środek elementu
Zanikaj i znikaj
Aktywuj również efekt zanikania wejścia i wyjścia.
Aktywuj pojawianie się i zanikanie: Tak
Początkowe krycie: 0%
Średnie krycie: 100% (od 27% do 50%)
Przesunięcie końcowe: 0 (przy 53%)
Efekt ruchu wyzwalania: środek elementu
Efekty przewijania ostatniej linii
Ruch pionowy
Następnie otwórz ostatni wiersz sekcji i dodaj następujący ruch pionowy:
Aktywuj ruch pionowy: Tak
Rozpocznij przesunięcie: -4
Średnie przesunięcie: 0 (przy 26%)
Przesunięcie końcowe: 0
Efekt ruchu wyzwalania: środek elementu
Zanikaj i znikaj
Z przychodzącym i wychodzącym efektem zanikania i gotowe!
Aktywuj pojawianie się i zanikanie: Tak
Początkowe krycie: 0%
Średnie krycie: 100% (od 27% do 50%)
Koniec krycia: 100% (do 53%)
Efekt ruchu wyzwalania: środek elementu
Ostateczny wynik
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak stworzyć piękne przejście usługi z efektami przewijania Divi. Jeszcze zanim jeden serwis zniknie, zaczyna się pojawiać drugi, dając przyjemne dla oka przejście. Takie podejście pomoże Ci wyróżnić każdą usługę na indywidualnym poziomie. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Podczas tworzenia strony Informacje prawdopodobnie zechcesz również przedstawić członków swojego zespołu. W ten sposób umożliwiasz odwiedzającym interakcję z osobami stojącymi za Twoją firmą. Jeśli szukasz sposobu na ożywienie sekcji członków zespołu na zwoju, ten samouczek może być dla Ciebie. Stworzymy automatycznie przewijającą się karuzelę członków zespołu, która będzie się poruszać w miarę przewijania strony przez odwiedzających.
Demonstracja
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
Początek poczęcia
Dodaj nową sekcję
rozstaw
Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj niestandardowe wypełnienie na różnych rozmiarach ekranu.
Górna wyściółka: 200 pikseli (biurko), 100 pikseli (tablet i telefon)
Wyściółka u dołu: 200px (biurko), 100px (tablet i telefon)
przepełnienia
Aby upewnić się, że w naszym projekcie nie pojawi się poziomy pasek przewijania, ukryjemy przepełnienia sekcji w zakładce Zaawansowane.
Przelew poziomy: ukryty
Przelew pionowy: ukryty
Dodaj wiersz nr 1
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy, przejdź do zakładki projektu i zmień szerokość i maksymalną szerokość w ustawieniach rozmiaru.
Szerokość: 90%
Maksymalna szerokość: 1580 pikseli
rozstaw
Dodajemy również niestandardowe górne i dolne wypełnienie.
Górna wyściółka: 100px
Dolne wypełnienie: 100px
Dodaj moduł tekstowy do kolumny
Dodaj zawartość H2
Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Wprowadź wybraną zawartość H2.
Ustawienia tekstu H2
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:
Następnie dodaj moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.
Pokaż separator: Tak
Linia
Następnie wprowadź zmiany w ustawieniach linii.
Kolor linii: # edf000
Styl linii: jednolity
Pozycja linii: góra
zaklejania
I uzupełnij parametry modułu, odpowiednio modyfikując parametry wymiarowania:
Waga dzielnika: 20px
Szerokość: 11%
Wyrównanie modułu: lewo
Wysokość: 20px
Dodaj linię # 2
Struktura kolumny
Do następnego rzędu! Użyj następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i zmodyfikuj parametry rozmiaru w następujący sposób:
Użyj niestandardowej szerokości rynny: Tak
Szerokość rynny: 2
Szerokość: 100%
Maksymalna szerokość: 100%
rozstaw
Następnie dodaj lewą i prawą wyściółkę tylko na mniejszych ekranach.
Lewa wyściółka: 5% (tylko tablet i telefon)
Prawa dopełnienie: 5% (tylko tablet i telefon)
Parametry kolumny (5x)
Teraz, w następnych trzech krokach tego samouczka, wprowadzimy pewne zmiany w kolumnach. Zastosuj trzy kroki do każdej kolumny w rzędzie.
Tło gradientowe
Najpierw dodaj gradientowe tło do każdej kolumny.
Kolor 1: rgba (255,255,255,0)
Kolor 2: rgba (0,0,0,0,84)
Rodzaj gradientu: liniowy
Pozycja początkowa: 25%
Pozycja końcowa: 86%
Umieść gradient nad obrazem tła: Tak
Obraz tła
Następnie prześlij wybrany obraz tła. Ten obraz tła reprezentuje każdego członka zespołu, więc użyj innego obrazu dla każdej kolumny.
Rozmiar obrazu tła: okładka
Pozycja obrazu tła: środek
Główny element
Uzupełnij ustawienia kolumny, dodając niestandardowy CSS do głównego elementu tabletu w każdej kolumnie. Te wiersze kodu CSS pomogą nam umieścić kolumny jedna pod drugą na tablecie zamiast dwóch obok siebie.
Aby udostępnić informacje o członkach zespołu, użyjemy modułu Person. Dodaj pierwszy moduł Person do kolumny 1 i użyj dowolnej zawartości.
Usuń zdjęcie
Następnie usuń obraz. Zamiast tego używamy obrazu tła kolumny.
Obraz tła
Następnie dodamy nakładkę obrazu jako obraz tła modułu. Możesz znaleźć ten, którego używamy, pobierając folder na początku tego samouczka.
Rozmiar obrazu tła: okładka
Pozycja obrazu tła: środek
Ustawienia tekstu tytułowego
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu tytułu w następujący sposób:
Poziom tytułu: H3
Czcionka tytułu: Quicksand
Waga czcionki tytułu: pogrubiona
Kolor tekstu tytułu: #ffffff
Rozmiar tekstu tytułu: 230%
Ustawienia tekstu podstawowego
Zmień także ustawienia tekstu podstawowego.
Czcionka ciała: Otwórz Sans
Kolor tekstu: #ffffff
Wysokość linii ciała: 2,2 em
Ustaw ustawienia tekstu
Następnie wprowadź zmiany w ustawieniach tekstu pozycji.
Pozycja czcionki: Otwórz Sans
Kolor tekstu pozycji: # edf000
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardowe wartości wypełnienia do ustawień odstępów.
Górna wyściółka: 70%
Dolna wyściółka: 10%
Lewa wyściółka: 10%
Prawa wyściółka: 10%
Zduplikuj moduł Osoba 4 razy
Po ukończeniu modułu Osoba możesz cztery razy sklonować cały moduł.
Umieść duplikaty w pozostałych kolumnach
Umieść zduplikowane moduły w pozostałych czterech kolumnach wiersza. Pamiętaj, aby edytować również zawartość.
Zamień Row w karuzelę z automatycznym przewijaniem
Zmień rozmiar linii # 2
Teraz, aby przekształcić ten wiersz w automatycznie przewijającą się karuzelę członków zespołu, musimy ponownie otworzyć ustawienia wiersza i zmienić szerokość i maksymalną szerokość w ustawieniach rozmiaru.
Szerokość: 180%
Maksymalna szerokość: 220% (biurko), 100% (tablet i telefon)
Dodaj ruch poziomy linii 2
Uzupełnij ustawienia linii, dodając ruch poziomy do ustawień efektu przewijania w zakładce Zaawansowane i gotowe!
Aktywuj ruch poziomy: Tak
Rozpocznij przesunięcie:
Biuro: 2,5
Tablet i telefon: 0
Średnie przesunięcie: 0 (przy 40%)
Przesunięcie końcowe:
Biuro: -25 (62%)
Tablet i telefon: 0
Efekt ruchu wyzwalania: środek elementu
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi. W szczególności odtworzyliśmy piękną, automatycznie przewijającą się karuzelę członków zespołu. Gdy odwiedzający przewijają stronę w dół, pojawia się kolejna część karuzeli.
Divi pozwala kontrolować i projektować każdy szczegół witryny, od nagłówka po stopkę. Jednym z najczęściej klikanych elementów każdej witryny są ikony mediów społecznościowych. Zaangażowana publiczność chce Cię znaleźć gdzie indziej i poznać. Oczywiście będziesz chciał, aby było to tak proste, jak to tylko możliwe.
Pokażemy Ci więc, jak aktywować dodatkowe ikony mediów społecznościowych w opcjach motywu Divi, jak używać Divi Builder do wstawiania ikon mediów społecznościowych w dowolnym miejscu na stronie lub poście oraz jak korzystać z tej mocy. motywu Divi Builder, aby dodać ikony mediów społecznościowych do każdego zakamarka witryny.
Jak łatwo aktywować dodatkowe ikony mediów społecznościowych w stopce Divi
Najłatwiejszym sposobem dodania większej liczby ikon mediów społecznościowych do witryny Divi jest przejście do panelu Opcje motywu , aktywując opcje dla Facebooka, Twittera, Instagrama i RSS. Następnie wszystko, co musisz zrobić, to wpisać adresy URL swojego profilu w polach. Gdy to zrobisz, zobaczysz je jako linki w postaci ikon w stopce witryny:
W menu pulpitu nawigacyjnego WordPress przejdź do Divi - opcje motywu i kliknij zakładkę ogólny . Przewiń w dół, aby zobaczyć przełącznik sieciowy. Ponadto, tuż pod tymi przełącznikami, pamiętaj, aby wprowadzić adresy URL dla każdej aktywowanej ikony społecznościowej Divi. W przeciwnym razie pojawi się ikona, ale po jej kliknięciu użytkownik nie będzie nigdzie. Używać # zamiast adresu URL utrzyma użytkownika na stronie, a nie przekierowuje go do pliku strona 404 .
Przewiń do końca opcji motywu i kliknij Zapisz zmiany . Teraz możesz przejść do stopki swojej witryny i kliknąć ikony społecznościowe, aby je przetestować!
Jeśli nie widzisz ikon w stopce, sprawdź dostosowywanie motywu pod Wygląd - dostosuj i upewnij się, że Pokaż ikony społecznościowe jest zaznaczone w opcjach stopki.
Jeśli jednak chcesz mieć jeszcze więcej opcji dla ikon stopek społecznościowych, przewijaj dalej w dół do naszej sekcji w Divi Theme Builder, gdzie omawiamy zarówno niestandardowe szablony, jak i ogólne ustawienia domyślne.
Jak korzystać z Divi Builder, aby dodawać narzędzia do śledzenia mediów społecznościowych do strony lub publikować treści
Czasami umieszczanie dodatkowych ikon mediów społecznościowych między blokami tekstu, obrazami lub innymi treściami w treści stron lub postów może mieć sens. Na przykład Twoja strona docelowa lub strona Informacje byłyby dobrym miejscem do dodania dodatkowych ikon społecznościowych, aby użytkownicy wiedzieli, jak się z Tobą skontaktować. Z pewnością będą się wyróżniać bardziej niż tylko linkowanie do Twoich profili społecznościowych za pomocą zwykłego tekstu. Ponadto ludzie szukają rozpoznawalnych ikon.
Możesz użyć Divi Builder, aby wstawić ikony mediów społecznościowych bezpośrednio na swoje strony lub posty za pomocą rozszerzenia śledzenie w mediach społecznościowych .
Za każdym razem, gdy utworzysz lub otworzysz istniejącą stronę lub artykuł na pulpicie WordPress, zobaczysz duży fioletowy przycisk z pytaniem, czy chcesz użyć Divi Builder, czy nie.
I oczywiście, że tak. Po prostu kliknij Użyj Divi Builder aby zacząć budować swoją stronę lub publikować od podstaw (lub z jednego z naszych predefiniowane układy ). Dodatkowo możesz dołączyć ikony mediów społecznościowych Divi, jeśli używasz domyślnego edytora WordPress. Wszystko, co musisz zrobić, to wstawić blok Układ Divi i wykonaj te same kroki, co poniżej.
Możesz użyć tego narzędzia do zaprojektowania swojej strony lub postu, jak chcesz, korzystając z dostępnych modułów kreatora stron. Jeśli korzystasz z Divi Builder po raz pierwszy, możesz najpierw sprawdzić ten przegląd, aby uzyskać jasne zrozumienie, jak to działa.
Kiedy będziesz gotowy dodać ikony mediów społecznościowych do swojej strony, kliknij czarne kółko + w sekcji, w której chcesz umieścić swoje ikony mediów społecznościowych i przewiń do pola śledzenie w mediach społecznościowych wydaje.
Zostaniesz poproszony o wybranie sieci społecznościowych, które chcesz, zanim zaczniesz je dostosowywać. Kliknij Dodaj nową sieć społecznościową .
Następnie wybierz jedną z rozwijanej listy.
Po wybraniu tej opcji dodaj adres URL swojego profilu. Opcjonalnie możesz wybrać kolor, gradient, tło itp. specyficzne dla jego ikony.
Po dodaniu pierwszej sieci społecznościowej możesz kontynuować dodawanie innych sieci, wykonując te same czynności. Wszystkie zostaną wymienione na karcie Treść z ustawienia śledzenia w mediach społecznościowych . Możesz je edytować, kopiować lub zmieniać ich kolejność, przeciągając je i upuszczając na miejscu.
Po dodaniu sieci społecznościowych przejdź do zakładek Treść et Koncepcja aby bawić się innymi opcjami dostosowywania. Możesz zmienić wszystko, od cienia ramki, promienia krawędzi, odstępów, filtrów, a nawet animacji wprowadzającej do modułu ikon. Masz również możliwość dołączenia przycisku Śledź aby wszystkie Twoje ikony przyciągały więcej uwagi. Po zakończeniu kliknij zielony tyk .
Następnie możesz przesuwać ikony po stronie, pracując nad ich odstępami i układem według własnego uznania. (The Opcje transformacji Divi nawiasem mówiąc, są niesamowite.) Jeśli jesteś zadowolony ze wszystkich swoich decyzji, naciśnij zielony przycisk Zapisz (lub Publikuj) w prawym dolnym rogu, aby zarejestrować nowy moduł ikon mediów społecznościowych. Jeśli nie widzisz przycisku Opublikuj / Zapisz, naciśnij fioletowa elipsa (trzy kropki) w dolnej środkowej części ekranu, aby rozwinąć menu.
Następnie ikony mediów społecznościowych będą widoczne w Twojej witrynie.
Korzystanie z narzędzia Divi Theme Builder do dodawania ikon mediów społecznościowych
Jak wspomnieliśmy powyżej, Divi Theme Builder to potężne narzędzie, które zapewnia pełną kontrolę nad każdym aspektem Twojej witryny. Jeśli więc chcesz dodawać ikony mediów społecznościowych w dowolnym miejscu, generator motywów Cię obejmuje.
Aby rozpocząć z generatorem motywów, przejdź do Divi - generator motywów w panelu WordPress.
Chodzi głównie o dodawanie ikon mediów społecznościowych do istniejącego układu kreatora motywów Divi. Lub do nowego! Nie ma znaczenia, czy dodajesz do nagłówka, stopki czy całej treści witryny - a nawet do niektórych kategorii lub innych wyspecjalizowanych typów stron. Będziesz postępować zgodnie z tym samym procesem.
Najpierw znajdziemy sekcję, którą chcemy dodać. Ponownie, może być globalny lub spersonalizowany. Jeśli nigdy wcześniej nie korzystałeś z narzędzia do tworzenia motywów, jest to łatwe. Do poszczególnych postów będziemy dodawać ikony mediów społecznościowych. Możesz więc zacząć od kliknięcia Dodaj nowy model i wybierając Wszystkie posty ou Wiadomości w określonych kategoriach . Następnie sprawdź kategorie, które chcesz uwzględnić. Następnie kliknij Utwórz szablon .
Jeśli masz już skonfigurowane szablony, po prostu kliknij Edytuj ołówek lub kliknij dwukrotnie sekcję, którą chcesz zmodyfikować.
Proces dodawania ikon mediów społecznościowych tutaj jest taki sam, jak opisano powyżej w generatorze. Ponieważ jednak używasz konstruktora motywów zamiast tylko edytować jedną stronę, ikony nie pojawią się tam, gdzie wybierzesz. Szablony można dodawać do nagłówków, stopek i szablonów globalnych. Możesz wybrać, jak i kiedy mają się pojawiać, bez konieczności ich konfigurowania. Nie strona po stronie, jak powyżej.
Na przykład, jeśli chcemy dołączyć ikony mediów społecznościowych pod tytułem posta, ale nad treścią każdego wpisu na blogu, który publikujemy, po prostu dodamy moduł do śledzić portale społecznościowe. Kliknij kółko Noir + i wybierz go w oknie dialogowym Włóż moduł .
Następnie po prostu przeciągnij moduł w miejsce, w którym mają się pojawiać ikony mediów społecznościowych. (W tym miejscu używamy trybu szkieletowego). Następnie wystarczy dodać sieci społecznościowe, które chcesz wyświetlić. Następnie dostosowujesz rozmiar i kolorystykę, tak jak powyżej.
I tak po prostu dodałeś ikony mediów społecznościowych do generatora motywów Divi. Pojawią się one w każdym utworzonym poście na blogu (w tym przykładzie).
A jeśli nie podoba ci się ich wygląd, generator motywów można łatwo dostosować. Po prostu przeciągnij je w inne miejsce, na przykład na górę paska bocznego.
Pamiętaj, aby kliknąć zielony przycisk Enregistrer w rogu. Teraz każdy post na blogu z tym szablonem w witrynie zostanie przesłany z ikonami mediów społecznościowych u góry paska bocznego.
Dodawanie ikon mediów społecznościowych do nagłówka i stopki za pomocą Divi Theme Builder
Może domyślne ikony mediów społecznościowych w ustawieniach Divi nie działały lub nie zapewniały wystarczającej personalizacji. W takim przypadku zawsze możesz użyć konstruktora motywów, aby całkowicie go dostosować.
W każdym szablonie możesz dodać niestandardową stopkę. Spowoduje to zastąpienie domyślnego Divi. Każdy szablon bez szablonu niestandardowego wyświetli domyślny element motywu. Ikony mediów społecznościowych mogą się różnić od postów do archiwum strony, w zależności od potrzeb użytkowników.
Możesz także dodać globalną stopkę, która zastąpi wszystko inne utworzone przez Ciebie stopki. (Dotyczy to również treści globalnych i nagłówków).
Jeśli zaprojektowałeś 4 niestandardowe stopki dla postów, stron, projektów i kategorii, a następnie utworzyłeś stopkę globalną, będzie widoczna tylko stopka globalna.
Szablony globalne świetnie nadają się do ikon mediów społecznościowych w całej witrynie, np. Dla gazety lub marki. Podczas gdy spersonalizowane szablony z ikonami społecznościowymi mogą być najlepsze dla indywidualnych twórców, którzy są częścią sieci.
Korzystając z Divi Builder dla niestandardowych nagłówków, stopek i szablonów treści, możesz dodawać ikony mediów społecznościowych do prawie każdej części Divi, którą chcesz. Nie jesteś ograniczony do domyślnych projektów ani nie musisz zagłębiać się w system plików WordPress. Dodatkowo, dzięki generatorowi motywów, możesz użyć dowolnej opcji projektowania Divi, aby urozmaicić ikony mediów społecznościowych i sprawić, by wyróżniały się we właściwy sposób dla każdej konkretnej publiczności.
Wnioski
Gdy masz domyślne opcje stopki Divi, narzędzie Divi Builder dla postów i stron, moc Divi Theme Builder, nie ma powodu, dla którego musisz zainstalować wtyczka do dodawania ikon mediów społecznościowych do Twojej witryny. Divi daje Ci pełną kontrolę nad tym, jak wyglądają Twoje ikony społecznościowe i gdzie się znajdują.
Niezależnie od tego, czy chcesz promować markę, autora gościa, stajnię twórców treści, czy tylko miejsca, w których można Cię znaleźć w Internecie, Divi ma na to sposób. Jesteśmy jednostronni, ale uważamy, że jest to najłatwiejszy, najłatwiejszy i najbardziej stylowy sposób na dodanie ikon mediów społecznościowych do Twojej witryny.
Sposób projektowania strony produktu ma natychmiastowy wpływ na zachowanie odwiedzających. Dobrze wykonany i spersonalizowany projekt strony produktu może ułatwić odwiedzającym podjęcie decyzji, czy chcą kupić Twój produkt. Jeśli szukasz sposobu na uatrakcyjnienie strony produktu, prawdopodobnie spodoba Ci się ten samouczek.
Pokażemy Ci, jak uwzględnić dynamiczną siatkę korzyści produktu w swoim projekcie za pomocą Divi i wtyczki Advanced Custom Fields. Zaczniemy od utworzenia grupy pól dla świadczeń. Następnie wypełnimy niestandardowe pola na naszej stronie produktu i uwzględnimy dynamiczną zawartość w naszym szablonie strony produktu.
Możliwy wynik
Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.
1. Zainstaluj wtyczkę ACF i wtyczkę Field Benefit Field Group
Zainstaluj wtyczkę Advanced Custom Fields
Aby wyświetlić różne zalety produktu w zapleczu naszych produktów, będziemy używać bezpłatnej wtyczki Advanced Custom Fields. Uzyskaj dostęp do swojego Backend WordPress> Wtyczki> Dodaj nową> Znajdź wtyczkę ACF> Zainstaluj> Aktywuj .
Przejdź do pól niestandardowych i dodaj nową grupę pól
Po zainstalowaniu i aktywacji wtyczki ACF będziesz mógł uzyskać dostęp do swoich pól niestandardowych i dodać nową grupę pól.
Ustawienia grupy pól
Nadaj swojej nowej grupie pól tytuł i pozwól jej pojawiać się tylko na stronach produktów.
„Typ wiadomości” oznacza „Produkt”
Dodaj pierwsze pole
Kontynuuj, dodając nowe pole tytułu pierwszej korzyści produktu.
Etykieta pola: tytuł świadczenia 1
Typ pola: tekst
Powtórz ten krok dla pozostałych pól
Zrób to samo z innymi zaletami produktu i ich opisami. Wszystkie te pola wymagają przypisania typu pola „Tekst”.
Tytuł usługi 1
Opis korzyści 1
Tytuł usługi 2
Opis korzyści 2
Tytuł usługi 3
Opis korzyści 3
Tytuł usługi 4
Opis korzyści 4
2. Dodaj korzyści do produktów
Otwórz lub dodaj nowy produkt
Po utworzeniu grupy pól i pól możesz dodać korzyści produktowe do swoich produktów na poziomie indywidualnym. Otwórz wybrany produkt lub utwórz nowy.
Wypełnij pola Korzyści produktu
I spełnij zalety produktu.
3. Utwórz szablon strony produktu w Divi Theme Builder
Idź do Divi Theme Builder i dodaj nowy szablon
Czas zacząć od Divi! Aby utworzyć nowy szablon, przejdź do Divi Theme Builder i kliknij „Dodaj nowy szablon”.
Użyj szablonu dla wszystkich produktów
Używamy tego szablonu do wszystkich produktów, ale zamiast tego możesz wybrać produkty z określoną kategorią lub etykietą.
Wejdź do edytora szablonów brył modelu
Następnie wprowadź treść modelu, klikając „Dodaj niestandardową treść” i wybierając „Utwórz niestandardową treść”.
Edytuj sekcję # 1
Kolor tła
W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła na czarny.
Kolor tła: # 000000
rozstaw
Przejdź do karty projektu sekcji i dodaj niestandardowe wypełnienie u góry i u dołu.
Najlepsze wypełnienie: 10px
Wyściółka u dołu: 10 pikseli
Dodaj nową linię
Struktura kolumny
Kontynuujmy dodając nowy wiersz do sekcji o następującej strukturze:
rozstaw
Bez dodawania żadnych modów, otwórzmy ustawienia wierszy i dokonaj pewnych korekt odstępów.
Użyj spersonalizowanej rynny: Tak
Szerokość rynny: 1
Szerokość: 90%
Maksymalna szerokość: 100%
rozstaw
Usuń wszystkie górne i dolne wewnętrzne odstępy.
Wysoki margines wewnętrzny: 0px
Niski margines wewnętrzny: 0px
Dodaj moduł Woo Cart Notice do kolumny
Treść dynamiczna
Jedynym modułem, którego potrzebujemy w tej linii i sekcji, jest moduł Woo Cart Notice. Upewnij się, że w sekcji dynamicznej jest wybrana opcja „Ten produkt”.
Produkt: ten produkt
Kolor tła
Następnie otwórz ustawienia modułu i użyj przezroczystego tła.
Kolor tła: rgba (0,0,0,0)
Ustawienia tekstu
Przejdź do zakładki „Projekt” i zmień czcionkę tekstu.
Następnie zmień szerokość na różnych rozmiarach ekranu.
Szerokość: 59% (komputer stacjonarny), 82% (tablet i telefon)
rozstaw
Uzupełnij moduł opisu Woo, dodając niestandardowe wartości marginesów w ustawieniach odstępów.
Górny margines: 50px
Dolny margines: 100px
Lewy margines: 5%
Prawy margines: 5%
Dodaj moduł Blurb do kolumny 2
Dynamiczna treść
Aby wyświetlić zalety produktu, które dodaliśmy w pierwszej części tego samouczka, użyjemy modułów Blurb. Dodaj pierwszy moduł Blurb i użyj dynamicznej zawartości pierwszej korzyści wygenerowanej dla tytułu i ciała.
Tytuł: Tytuł świadczenia 1
Ciało: opis korzyści 1
Załaduj obrazek
Prześlij zdjęcie lub użyj ikony wybranego następnie. Te, których używaliśmy w tym samouczku, możesz znaleźć w folderze pobierania, który mogłeś pobrać na początku tego samouczka.
Ustawienia obrazu / ikony
Przejdź do karty projektu modułu i zmień ustawienia obrazu / ikony w następujący sposób:
Umieszczenie obrazu / ikony: Góra
Wyrównanie obrazu / ikony: w lewo
Ustawienia tekstu tytułu
Następnie modyfikujemy ustawienia tekstu tytułowego.
Następnie przejdź do ustawień rozmiaru i zmień szerokości. Ważne jest, aby szerokość główna była mniejsza niż 50%, co pozwoli nam pokazać dwa moduły Blurb obok siebie w następnych krokach.
Szerokość obrazu: 25%
Szerokość: 49%
rozstaw
Dodamy również spacje wokół modułu Blurb, używając niestandardowych wartości wypełnienia na różnych rozmiarach ekranu.
Górna wyściółka: 8%
Dolna wyściółka: 8%
Lewa wyściółka: 8% (komputer stacjonarny i tablet), 2% (telefon)
Prawa dopełnienie: 8% (komputer stacjonarny i tablet) 2% (telefon)
Główny element
Teraz upewnimy się, że moduł Podsumowanie wyświetla tekst obok siebie, w dwóch krokach. Najpierw upewnimy się, że szerokość modułu jest mniejsza niż 50% (tak jak zrobiliśmy w poprzednim kroku). Następnie użyjemy właściwości w wierszu. Dodamy tę właściwość CSS do głównego elementu w sekcji zaawansowanej.
display: inline-block;
Sklonuj moduł podsumowania 3 razy
Po ukończeniu pierwszego modu Blurb możesz go sklonować trzy razy. Automatycznie zauważysz, że moduły Blurb pojawiają się w siatce.
Edytuj obrazy modułu Blurb
Edytuj obraz w każdym zduplikowanym bloku Blurb. Znajdziesz je w folderze pobierania, który być może został pobrany na początku tego artykułu.
Zmodyfikuj zawartość dynamiczną modułu Blurb
Zmodyfikuj także zawartość dynamiczną każdego duplikatu modułu Blurb.
Tytuł: tytuł usługi (2,3 lub 4)
Treść: opis zalet (2,3 lub 4)
Dodaj ramki do modułów Blurb indywidualnie
Ustawienia obramowania modułu 1
Teraz, aby zakończyć projektowanie naszej siatki, dodamy obramowania do modułów Blurb na poziomie indywidualnym. Otwórz pierwszy mod Blurb i użyj prostej ramki.
Szerokość prawej ramki: 1px
Kolor prawej ramki: # ffd623
Dodaj także dolną ramkę do pierwszego modułu Blurb.
Szerokość dolnej krawędzi: 1px
Kolor dolnej ramki: # 000000
Ustawienia obramowania modułu 2
Następnie otwórz drugi moduł Blurb i użyj dolnej ramki.
Szerokość dolnej krawędzi: 1px
Kolor dolnej ramki: # 000000
Ustawienia obramowania modułu 3
Uzupełnij projekt siatki, dodając prostą ramkę do trzeciego modułu Blurb.
Szerokość prawej ramki: 1px
Kolor prawej ramki: # ffd623
Dodaj Woo Dodaj do koszyka Moduł w kolumnie 2
Dynamiczna treść
Ostatnim modułem, którego potrzebujemy w naszym projekcie, jest moduł Woo Add to Cart. Upewnij się, że w obszarze zawartości dynamicznej jest wybrana opcja „Ten produkt”.
Produkt: ten produkt
Ustawienia pola
Przejdź do następnej zakładki projektu i zmień ustawienia pola.
Kolor tła pól: #ffffff
Kolor tekstu pola: # 000000
Zaokrąglone pola: 0px (wszystkie rogi)
Szerokość dolnej granicy pól: 1px
Kolor dolnej granicy pól: # 000000
Ustawienia przycisków
Następnie odpowiednio stylizuj przycisk:
Użyj niestandardowych stylów przycisku: Tak
Rozmiar tekstu przycisku: 20 pikseli
Kolor tekstu przycisku: # 000000
Kolor tła przycisku: # ffd623
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 0px
Czcionka przycisku: Oswald
Styl czcionki przycisku: wielkie litery
Górna wyściółka: 20px
Dolne wypełnienie: 20px
Lewe dopełnienie: 50px
Prawa wyściółka: 50 pikseli
rozstaw
I uzupełnij parametry modułu, dodając niestandardowe wartości marginesów.
Górny margines: 100px
Lewy margines: 5%
3. Zapisz zmiany w generatorze motywów i wyświetl podgląd wyniku
Po zakończeniu projektowania szablonu strony produktu możesz zapisać wszystkie zmiany Konstruktora motywów i wyświetlić wyniki na swoich produktach!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak wykazać się kreatywnością za pomocą następnego szablonu strony produktu Divi. W szczególności pokazaliśmy, jak dołączyć dynamiczną siatkę korzyści produktu, aby dodać dodatkowe korzyści do strony produktu. Stworzyliśmy ten samouczek przy użyciu Divi w połączeniu z wtyczką Advanced Custom Fields. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Tryb ciemny nadal zyskuje na popularności jako wygodna opcja dla użytkowników, pozwalająca użytkownikom korzystać z sieci przy mniejszym zmęczeniu oczu. Spójrzmy prawdzie w oczy, wszyscy spędzamy więcej czasu na wpatrywaniu się w ekrany, niż powinniśmy, więc każda dodatkowa wygoda dla użytkownika (np. Tryb ciemny) może wiele zdziałać.
Systemy operacyjne, programy i przeglądarki zazwyczaj zawierają wbudowane funkcje trybu ciemnego, ale niektórzy programiści przenoszą to na inny poziom, włączając niestandardowy tryb ciemny dla swojej witryny. Chodzi o to, aby uzyskać większą kontrolę nad wyglądem witryny w trybie ciemnym bez konieczności rezygnacji z brandingu i / lub projektu.
W tym samouczku pokażemy, jak utworzyć niestandardowy przełącznik trybu ciemnego w Divi od zera bez wtyczki. Dzięki tej funkcji przełączania trybu ciemnego będziesz mieć kontrolę nad projektem trybu ciemnego i będziesz mieć lepsze wrażenia użytkownika dostosowane do Twojej marki.
Zacznijmy!
badanie
Oto podgląd projektu, który zbudujemy w tym samouczku.
Oto niestandardowy przełącznik trybu ciemności, który stworzymy.
A oto przed i po dla trybu ciemnego zastosowanego do jednego z naszych predefiniowanych układów.
A oto przełącznik trybu ciemnego dodany do globalnego nagłówka. Zwróć uwagę, jak tryb jasny / ciemny pozostaje podczas przeglądania witryny.
Część 1: Budowa przełącznika z trybu ciemnego
W tej pierwszej części samouczka zamierzamy zbudować przełącznik trybu ciemnego ze stroną w Divi. Po utworzeniu przełącznika z kodem będziesz mógł zapisać go w bibliotece Divi i dodać w dowolnym miejscu na swojej stronie internetowej.
Aby rozpocząć, dodaj wiersz z jedną kolumną do sekcji domyślnej podczas tworzenia od podstaw za pomocą Divi w interfejsie.
Dodaj moduł podsumowania
Aby zbudować przełącznik niestandardowy, zaprojektujemy moduł Blurb z odrobiną niestandardowego CSS.
Dodaj nowy moduł tekstowy prezentacji do wiersza.
Treść
Usuń domyślną fikcyjną zawartość tytułu i treści. Następnie dodaj kwadratową ikonę w miejsce obrazu.
Koncepcja
Przejdź do ustawień projektu i zaktualizuj następujące elementy:
Kolor ikony: # 666666
Wyrównanie obrazu / ikony: w lewo
Rozmiar czcionki ikony: 22 piksele
Szerokość: 50px
Wyrównanie modułu: centrum
Wysokość: 25px
Margines: 0 pikseli niski
Zaokrąglone rogi: 4px
Szerokość obramowania: 2px
Kolor obramowania: # 666666
Niestandardowy CSS
Po utworzeniu projektu przejdź do karty Zaawansowane. W sekcji Niestandardowy CSS dodaj następujący niestandardowy CSS do głównego elementu, aby upewnić się, że przepełnienie nie jest zasłonięte stylem zaokrąglonych rogów.
przepełnienie: widoczne! ważne;
Następnie dodaj następujący niestandardowy CSS do elementu After:
Dodaje to etykietę do modułu Blurb, który po kliknięciu zmienimy z „jasnego” na „ciemny”.
Projekt tekstu podstawowego
Ponieważ tekst pseudoelementu postu dziedziczy style tekstu podstawowego, możemy dodać style tekstu podstawowego za pomocą opcji Divi w następujący sposób:
Czcionka ciała: Roboto
Kolor tekstu: # 666666
Rozmiar tekstu podstawowego: 13px
Rozstaw liter ciała: 1px
Dodawanie niestandardowego kodu za pomocą modułu kodu
Aby dodać niezbędny kod (CSS / JQuery) do obsługi przełączania trybu ciemnego, użyjemy modułu kodu.
Utwórz nowy moduł kodu w module Blurb w tej samej kolumnie.
Następnie wklej następujący kod w obszarze kodu:
/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});
Dodawanie niestandardowych klas CSS
Kod niestandardowy wymaga dodania niestandardowej klasy CSS do modułu lub przełącznika Blurb. Umożliwi to notce uruchomienie przełączania trybu ciemnego i funkcji po kliknięciu.
Klasa modułu Blurb
Otwórz ustawienia modułu Blurb i dodaj niestandardową klasę CSS w następujący sposób:
Klasa CSS: et-dark-toggle
Klasa zdolna do trybu ciemnego
Musimy również dodać niestandardową klasę CSS do każdego elementu Divi, który ma mieć tryb ciemny. Gdy element będzie miał klasę CSS, ten element odziedziczy niestandardowy CSS „trybu ciemnego” w kodzie, który dodaliśmy po włączeniu trybu ciemnego. Ta metoda daje nam większą kontrolę nad projektem w trybie ciemnym, ponieważ niektóre elementy mogą nie wymagać stylizacji w trybie ciemnym.
Na początek możemy dodać tryb ciemny do sekcji zawierającej nasz przełącznik trybu ciemnego.
Otwórz parametry sekcji i dodaj następującą klasę CSS:
Klasa CSS: obsługuje tryb et-dark
Część 2: Dodawanie funkcji trybu ciemnego do strony Divi
Teraz, gdy mamy już kod CSS i klasy, jesteśmy gotowi do zastosowania funkcji Dark Mode i projektu do całej strony w Divi. Aby to zrobić, użyjemy naszego gotowego układu strony docelowej aplikacji mobilnej.
Aby dodać układ, otwórz menu ustawień u dołu kreatora wizualnego i kliknij ikonę Dodaj nowy układ.
Następnie wybierz układ strony docelowej aplikacji mobilnej z zakładki Predefiniowane układy.
Upewnij się, że opcja „Zastąp istniejącą treść” NIE jest zaznaczona. Nie chcesz czyścić sekcji za pomocą przełącznika trybu ciemnego.
Ponieważ stylizacja w trybie ciemnym będzie dotyczyła tylko elementów z klasą CSS „zdolny i tryb ciemny”, możemy dodać do strony różne sposoby.
Możemy dodać klasę CSS do każdego elementu strony osobno.
Moglibyśmy rozszerzyć klasę CSS na elementy na całej stronie (byłoby to szybsze niż robienie tego ręcznie). Na przykład moglibyśmy otworzyć ustawienia sekcji dla górnej sekcji i rozszerzyć klasę CSS dla tej sekcji na wszystkie sekcje strony.
Możemy dodać klasę CSS do globalnych wartości domyślnych elementu. Spowoduje to zastosowanie klasy CSS do wszystkich elementów w całej witrynie, dodając możliwości trybu ciemnego w całej witrynie. Na przykład moglibyśmy otworzyć ustawienia sekcji i kliknąć globalną ikonę domyślną, aby zmienić globalne ustawienia domyślne sekcji. Następnie możemy dodać klasę CSS i zarejestrować ją jako klasę CSS dla wszystkich sekcji witryny.
Dodanie klasy CSS do elementów strony
W tym przykładzie zaktualizujemy elementy strony, dodając klasę CSS do globalnych wartości domyślnych do sekcji i modułów tekstowych. W miarę upływu czasu będziemy też dodawać inne elementy strony.
Wszystkie sekcje
Aby dodać klasę CSS do wszystkich sekcji, otwórz ustawienia górnej sekcji, która zawiera przełącznik trybu ciemnego. Następnie zmień globalne wartości domyślne sekcji i dodaj następującą klasę CSS do globalnych ustawień domyślnych sekcji:
Klasa CSS: obsługuje tryb et-dark
Wszystkie specjalistyczne sekcje
Dodaj także klasę CSS do globalnych ustawień domyślnych w sekcji specjalistycznej.
Moduły tekstowe
Następnie otwórz ustawienia jednego z modułów tekstowych na stronie i dodaj tę samą klasę CSS do globalnych ustawień domyślnych tekstu.
Aby przetestować wynik, przejdź do strony na żywo i kliknij przełącznik trybu ciemnego u góry strony.
Oto jak powinna wyglądać strona w trybie kasowania.
A oto jak powinna wyglądać strona w trybie ciemnym.
Dodatkowe zasoby
Oto kilka innych zasobów, które mogą Cię zainteresować.
Wyposażenie witryny Divi w niestandardowy przełącznik trybu ciemnego może być świetnym sposobem na zwiększenie komfortu użytkowania i stworzenie zupełnie nowego projektu, który zarówno cieszy, jak i odciąża oko. Mam nadzieję, że ci się to przyda.
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
