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

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

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.

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.

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:

dopełnienie-dolne: 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.

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

Jak stworzyć płynne przejście z efektami przewijania na Divi

Jak stworzyć płynne przejście z efektami przewijania na Divi

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.

Przejście między sekcją divi

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
Sekcja parametrów Divi

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
Konfiguracja odstępów Divi

rozstaw

Następnie dodaj niestandardowy górny i dolny margines.

  • Górny margines: 200px
  • Dolny margines: 200px
Konfiguracja odstępów Divi

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.

Nasze usługi oferowane przez ekspertów w tej chwili

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

  • Tytuł 2 Policja: kwartalna
  • Nagłówek 2 Rozmiar tekstu: 80px (komputer stacjonarny), 50px (tablet), 40px (telefon)
  • Wysokość drugiej linii głowy: 2em
Szef policji

rozstaw

Następnie dodaj niższy margines na tablecie i telefonie.

  • Dolny margines: 50 pikseli (tylko tablet i telefon)
Konfiguracja odstępów w tekście Divi

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

Przejdźmy do drugiej kolumny. Tam pierwszym potrzebnym modułem jest moduł tekstowy z pewnym opisem.

Pole tekstowe Content divi

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: kabina
  • Styl czcionki tekstu: wielkie litery
  • Kolor tekstu: # 000000
  • Rozmiar tekstu: 18 pikseli (komputer stacjonarny), 15 pikseli (tablet), 13 pikseli (telefon)
  • Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
  • Wysokość linii tekstu: 3em
Parametr tekstu Divi

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
Widoczny rozdzielacz

Linia

Następnie zmień kolor linii modułu.

  • Kolor linii: # 000000
Kolor tła rozdzielacza

zaklejania

Następnie wprowadź zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 28%
Rozmiar separatora Divi

rozstaw

Dodajemy również górny margines.

  • Górny margines: 10px
Rozstaw modułów separatora Divi

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
Sekcja 2 odstępy divi

przepełnienia

Ukryj także przepełnienia.

  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty
Ukryj przepełnienia modułu Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie pierwszego wiersza, korzystając z następującej struktury kolumn:

Wybierz układ divi

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
Sekcja rozdzielacza konfiguracji rynny

rozstaw

Następnie usuń wszystkie domyślne górne i dolne wypełnienie.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px
Ustawienia odstępów między modułami linii Divi 1

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia kolumny 1 i zmień kolor tła.

  • Kolor tła: # f7f7f7
Konfiguracja tła modułu Divi Line

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 kolumn modułu wiersza

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.

  • Górne wypełnienie: 100 pikseli (komputer stacjonarny), 50 pikseli (tablet i telefon)
  • Dolne wypełnienie: 200px
  • Lewa wyściółka: 150 pikseli (biurko), 0 pikseli (tablet i telefon)
Ustawienia odstępów między modułami Divi

Dodaj moduł separacji do kolumny 1

widoczność

W pierwszej kolumnie pierwszym potrzebnym modułem jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż separator: Tak
Pokaż separator divi 1

Linia

Następnie zmień kolor linii modułu.

  • Kolor linii: # 000000
Ustawienia separatora Divi

zaklejania

Wprowadź także zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 50%
Rozmiar separatora Divi

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3

Kolejnym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy z zawartością H3.

Ustawienie sekcji treści Divi

Ustawienia tekstu H3

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H3:

  • Tytuł 3 Policja: kwartalna
  • Kolor tekstu pozycji 3: # 000000
  • Pozycja 3 Rozmiar tekstu: 50 pikseli (komputer stacjonarny), 40 pikseli (tablet), 35 pikseli (telefon)
  • Wysokość drugiej linii głowy: 3em

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

W drugiej kolumnie pierwszym potrzebnym modułem jest moduł tekstowy z pewną zawartością opisu.

Ustawienie modułu tekstowego Divi

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

  • Czcionka tekstu: kabina
  • Styl czcionki tekstu: wielkie litery
  • Rozmiar tekstu: 18 pikseli (komputer stacjonarny), 15 pikseli (tablet), 13 pikseli (telefon)
  • Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
  • Wysokość linii tekstu: 3em
Dopasowanie czcionki tekstu Divi

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Kolejnym i ostatnim potrzebnym modułem jest moduł przycisków. Wprowadź wybraną kopię.

Ustawienie zawartości modułu tekstowego

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
Ustawienie stylu przycisku Divi
  • Przycisk czcionki: kwartalny
  • Waga czcionki przycisku: pogrubiona
Ustawienia koloru przycisku Divi

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
Ustawienia odstępów między przyciskami modułu Divi

Pozycja

I odpowiednio zmień położenie przycisku:

  • Pozycja: absolutna
  • Lokalizacja: u dołu po lewej
Regulacja pozycji modułu przycisku Divi

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.

Clone divi module

Zmień całą zawartość

Pamiętaj, aby edytować całą zawartość w zduplikowanych wierszach.

Edytuj zawartość sekcji divi

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
Zastosuj efekty przewijania Divi

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
Skonfiguruj divi sekcji animacji zanikania

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
Konfiguracja animacji przewijania Divi

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
Animacja zanikania linii Divi

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
Animacja przewijania modułu Divi Line

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
Ustawienia animacji wyglądu modułu Divi Line

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Ostateczne demo

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.

Jak stworzyć karuzelę przewijania członka zespołu za pomocą Divi

Jak stworzyć karuzelę przewijania członka zespołu za pomocą Divi

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.

Przewiń członka zespołu divi

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)
Konfiguracja parametrów

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
Konfiguracja przepełnienia

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

Wybierz układ divi

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
Parametr linii Divi

rozstaw

Dodajemy również niestandardowe górne i dolne wypełnienie.

  • Górna wyściółka: 100px
  • Dolne wypełnienie: 100px
Konfiguracja divi z odstępami między wierszami

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Wprowadź wybraną zawartość H2.

Poznaj drużynę

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

  • Tytuł czcionki 2: Quicksand
  • Tytuł czcionki 2: pogrubiony
  • Kolor tekstu pozycji 2: # 000000
  • Nagłówek 2 Rozmiar tekstu: 70px (komputer stacjonarny), 50px (tablet), 40px (telefon)
Odstępy w tekście Divi

Dodaj moduł separacji do kolumny

widoczność

Następnie dodaj moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż separator: Tak
Pokaż separator divi

Linia

Następnie wprowadź zmiany w ustawieniach linii.

  • Kolor linii: # edf000
  • Styl linii: jednolity
  • Pozycja linii: góra
Styl odstępów Divi

zaklejania

I uzupełnij parametry modułu, odpowiednio modyfikując parametry wymiarowania:

  • Waga dzielnika: 20px
  • Szerokość: 11%
  • Wyrównanie modułu: lewo
  • Wysokość: 20px
Wymiarowanie modułu linii Divi

Dodaj linię # 2

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Konfiguracja kolumny Divi

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%
Konfiguracja szerokości rynny

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)
Konfiguracja stylu odstępów między wierszami

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.

Parametr divi konfiguracji linii

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
Konfiguracja tylnej kolumny Divi

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
Dodaj obraz tła kolumny Divi

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.

szerokość: 100%! ważne; margines: 50px 0px 50px 0px! ważne;
Kod kolumny divi css

Dodaj moduł osoby do kolumny

Dodaj treść

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.

Imię osoby Divi

Usuń zdjęcie

Następnie usuń obraz. Zamiast tego używamy obrazu tła kolumny.

Usuń obraz divi

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
Konfiguracja tła modułu osoby

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%
Personalizacja tytułu modułu Divi

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
Personalizacja ciała Divi

Ustaw ustawienia tekstu

Następnie wprowadź zmiany w ustawieniach tekstu pozycji.

  • Pozycja czcionki: Otwórz Sans
  • Kolor tekstu pozycji: # edf000
Pozycja Divi

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%
Rozstaw modułów Divi Person

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)
Odstępy modyfikacji linii divi

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
Konfiguracja animacji przewijania Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Biuro

Przewiń członka zespołu divi

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.

Jak dodać więcej ikon mediów społecznościowych do Divi

Jak dodać więcej ikon mediów społecznościowych do Divi

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:

Ikony społeczne divi

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 .

Opcje motywu Divi

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.

Divi wordpress

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.

Tworzenie artykułów Divi

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.

Układ Divi Gutenberg

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.

Wstawienie modułu w mediach społecznościowych

Zostaniesz poproszony o wybranie sieci społecznościowych, które chcesz, zanim zaczniesz je dostosowywać. Kliknij Dodaj nową sieć społecznościową .

Dodaj moduł społecznościowy Divi

Następnie wybierz jedną z rozwijanej listy.

Dodaj nową sieć społecznościową

Po wybraniu tej opcji dodaj adres URL swojego profilu. Opcjonalnie możesz wybrać kolor, gradient, tło itp. specyficzne dla jego ikony.

Dostosuj przycisk sieci społecznościowej

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.

Dostosuj ikony społecznościowe

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 .

Śledź nas przycisk divi

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.

Przycisk Divi śledź nas

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.

Konstruktor Divi

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 .

Dodaj model Divi

Jeśli masz już skonfigurowane szablony, po prostu kliknij Edytuj ołówek lub kliknij dwukrotnie sekcję, którą chcesz zmodyfikować.

Układ Divi

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ł .

Wybierz moduł społecznościowy

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.

Moduł mediów społecznościowych divi

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).

Wygląd na divi z przyciskiem udostępniania

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.

Ruch modułu udostępniania społecznościowego Divi

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.

ikony 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.

Personalizacja motywu Divi

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.

Dodaj globalną stopkę divi

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.

Stworzenie dynamicznej siatki korzyści dla produktów WooCommerce

Stworzenie dynamicznej siatki korzyści dla produktów WooCommerce

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.

Możliwy divi wyniku

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 .

Zainstaluj zaawansowaną wtyczkę niestandardowego pola

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.

Utwórz pola ACF

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 zasady

Dodaj pierwsze pole

Kontynuuj, dodając nowe pole tytułu pierwszej korzyści produktu.

  • Etykieta pola: tytuł świadczenia 1
  • Typ pola: tekst
Dodaj pole ac
Personalizacja pola Divi

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
Skonfiguruj pola ACF

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.

Tworzenie produktów Divi

Wypełnij pola Korzyści produktu

I spełnij zalety produktu.

Wypełnij pola zalet divi

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”.

Kreator motywów Divi

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ą.

Dodaj wszystkie produkty woocommerce

Wejdź do edytora szablonów brył modelu

Następnie wprowadź treść modelu, klikając „Dodaj niestandardową treść” i wybierając „Utwórz niestandardową treść”.

Budowanie ciała divi

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
Konfiguracja tła sekcji Divi

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
Konfiguracja rozstawu sekcji Divi

Dodaj nową linię

Struktura kolumny

Kontynuujmy dodając nowy wiersz do sekcji o następującej strukturze:

Konfiguracja układu modułu linii

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%
Ustawienia odstępów między modułami liniowymi

rozstaw

Usuń wszystkie górne i dolne wewnętrzne odstępy.

  • Wysoki margines wewnętrzny: 0px
  • Niski margines wewnętrzny: 0px
Ustawienia odstępów między modułami Divi Line

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
Ustawienia woo moduł powiadomień koszyka divi

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 divi modułu Woo cart

Ustawienia tekstu

Przejdź do zakładki „Projekt” i zmień czcionkę tekstu.

  • Czcionka tekstu: Karla
Ustawienia czcionek modułu Divi

Ustawienie przycisku

Zakończ ustawienia wtyczki, określając ustawienia stylu:

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 20px
  • Kolor tekstu przycisku: # 000000
  • Tło przycisku: # ffd623
  • Szerokość obramowania przycisku: 0px
  • Przycisk z zaokrągloną ramką: 0px
Ustawienia kolorów modułu powiadomień koszyka Woo
  • Czcionka przycisku: Oswald
  • Styl czcionki przycisku: Shift
Dostosowanie projektu koloru modułu ogłoszeń wózka Woo
  • Wysoki margines wewnętrzny: 20px
  • Niski margines wewnętrzny: 20px
  • Lewy margines wewnętrzny: 50 pikseli
  • Wewnętrzny prawy margines: 50 pikseli
Konfiguracja modułu projektowania woo koszyka uwaga

Dodaj sekcję # 2

Tło gradientowe

Dodaj kolejną zwykłą sekcję poniżej poprzedniej. Następnie otwórz ustawienia i użyj gradientowego tła w następujący sposób:

  • Kolor 1: # 000000
  • Kolor 2: #ffffff
  • Pozycja startowa:
    • Pulpit: 30%
    • Tabletka: 57%
    • Telefon: 54%
  • Pozycja końcowa:
    • Pulpit: 30%
    • Tabletka: 57%
    • Telefon: 54%
Tylna regulacja modułu Divi Line

rozstaw

Przejdźmy do zakładki Projekt i dodajmy wysoki wewnętrzny margines.

  • Najlepsze wypełnienie: 150px
Konfiguracja odstępów między modułami Divi Line

Dodaj nową linię

Struktura kolumny

Kontynuuj, dodając nową linię o takiej samej strukturze, jak pokazano poniżej:

Konfiguracja stylu Divi Line

zaklejania

Nie dodając jeszcze żadnych modów, otworzymy ustawienia i zmienimy odstępy w następujący sposób:

  • Użyj niestandardowych rynien: Tak
  • Miejsce na rynnę: 1
  • Szerokość: 95%
  • Maksymalna szerokość: 2560 pikseli
  • Wyrównanie linii: środkowy
Moduł divi konfiguracji rynny

Rozstaw

Usuniemy również górny margines wewnętrzny.

  • Najlepsze wypełnienie: 0px
Konfiguracja odstępów między modułami Divi

Główny element

Aby wyśrodkować zawartość kolumny na pulpicie, użyjemy dwóch wierszy kodu CSS w głównym elemencie modułu row.

Desktop:

wyświetlacz: flex; wyrównaj elementy: środek;

Tablet i telefon:

display: block;
Ustawienia stylu modułu Divi Line

Dodaj moduł Woo Image do kolumny 1

Treść dynamiczna

Czas dodać moduły, zaczniemy od modułu Woo Images w kolumnie 1. Upewnij się, że wybrano „Ten produkt”.

  • Produkt: ten produkt
Ustawienia modułu obrazu produktu Woocommerce

Efekt animacji przewijania w pionie

Dodajemy subtelny ruch do obrazu za pomocą efektu przewijania ruchu w poziomie w zakładce Zaawansowane.

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie:
    • Biuro: -4
    • Tablet i telefon: 0
  • Średnie przesunięcie: 0
  • Przesunięcie końcowe: 0
  • Efekt ruchu wyzwalania: środek elementu
Regulacja modułu obrazu Divi

Dodaj moduł tytułu Woo do kolumny 2

Dynamiczna treść

W kolumnie 2 pierwszy potrzebny nam mod to modyfikacja tytułu Woo. Upewnij się, że w obszarze zawartości dynamicznej jest wybrana opcja „Ten produkt”.

  • Produkt: ten produkt
siatka korzyści produktu

Ustawienia tekstu tytułowego

Następnie przejdź do karty projektowania i stylizuj tekst tytułu w następujący sposób:

  • Czcionka tytułu: Oswald
  • Styl czcionki tytułu: wielkie litery
  • Kolor tekstu tytułu: # ffd623
  • Rozmiar tekstu tytułu: 80 pikseli
Dostosowanie projektu modułu tytułu Divi

rozstaw

Ukończ moduł Woo title, dodając lewy i prawy margines.

  • Lewy margines: 5%
  • Prawy margines: 5%
Ustawienie modułu tytułu Divi

Dodaj moduł opisu Woo do kolumny 2

Dynamiczna treść

Przejdźmy do następnego modułu, który jest modułem opisu Woo. Używamy do tego następujących dynamicznych treści:

  • Produkt: ten produkt
  • Typ opisu: Krótki opis
Ustawienia modułu opisu produktu

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: Karla
  • Kolor tekstu: #dbdbdb
  • Rozmiar tekstu: 17 pikseli (komputer stacjonarny i tablet), 15 pikseli (telefon)
  • Wysokość linii tekstu: 1,9 em
Opis modułu regulacji kolorów divi

zaklejania

Następnie zmień szerokość na różnych rozmiarach ekranu.

  • Szerokość: 59% (komputer stacjonarny), 82% (tablet i telefon)
Regulacja szerokości modułu podsumowania Divi

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%
Moduł opisu produktu Divi

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
Ustawienie tekstu modułu podsumowania Divi

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.

Konfiguracja divi podsumowania modułu obrazu

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
Moduł regulacji Divi

Ustawienia tekstu tytułu

Następnie modyfikujemy ustawienia tekstu tytułowego.

  • Czcionka tytułu: Oswald
  • Styl czcionki tytułu: wielkie litery
  • Rozmiar tekstu tytułu: 25px
Skonfiguruj czcionkę modułu podsumowania Divi

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

  • Czcionka ciała: Karla
  • Rozmiar tekstu: 17 pikseli (komputer stacjonarny i tablet), 15 pikseli (telefon)
  • Wysokość linii ciała: 1,9 em
Skonfiguruj podsumowanie modułu tekstowego div i

zaklejania

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%
Skonfiguruj rozmiar modułu podsumowania Divi

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)
Skonfiguruj odstępy między modułami podsumowania Divi

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;
Dodaj moduł divi kodu CSS

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.

Nazwa produktu sekcja divi

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.

Obraz modułu podsumowania Divi

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)
Zasady modułu podsumowania Divi

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
Moduł podsumowania divi konfiguracji z zaokrąglonymi krawędziami

Dodaj także dolną ramkę do pierwszego modułu Blurb.

  • Szerokość dolnej krawędzi: 1px
  • Kolor dolnej ramki: # 000000
Skonfiguruj dolny margines divi
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
Podsumowanie modułu granicy konfiguracji divi
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
siatka korzyści produktu

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
Dodaj do ustawień modułu divi karty

Ustawienia pola

Przejdź do następnej zakładki projektu i zmień ustawienia pola.

  • Kolor tła pól: #ffffff
  • Kolor tekstu pola: # 000000
Skonfiguruj styl koloru dodaj do koszyka moduł divi
  • Zaokrąglone pola: 0px (wszystkie rogi)
  • Szerokość dolnej granicy pól: 1px
  • Kolor dolnej granicy pól: # 000000
Skonfiguruj odstępy między sekcjami divi

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
Skonfiguruj projekt przycisku Divi
  • Czcionka przycisku: Oswald
  • Styl czcionki przycisku: wielkie litery
Skonfiguruj przycisk Divi
  • Górna wyściółka: 20px
  • Dolne wypełnienie: 20px
  • Lewe dopełnienie: 50px
  • Prawa wyściółka: 50 pikseli
Skonfiguruj rozmiar modułu Divi

rozstaw

I uzupełnij parametry modułu, dodając niestandardowe wartości marginesów.

  • Górny margines: 100px
  • Lewy margines: 5%
Skonfiguruj odstępy divi

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!

Zapisz projekt divi
Zapisz modyfikacje Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Wynik demonstracyjny

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.

Jak wdrożyć tryb ciemny na swojej stronie za pomocą Divi

Jak wdrożyć tryb ciemny na swojej stronie za pomocą Divi

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.

Przełącz tryb ciemny

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.

Sekcja Divi

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.

Moduł podsumowania Divi

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
Konfiguracja ikony Divi
  • Szerokość: 50px
  • Wyrównanie modułu: centrum
  • Wysokość: 25px
Konfiguracja rozmiaru Divi
  • Margines: 0 pikseli niski
  • Zaokrąglone rogi: 4px
  • Szerokość obramowania: 2px
  • Kolor obramowania: # 666666
Konfiguracja Divi border

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:

zawartość: „światło”; pozycja: absolutna; lewa: -35px; góra: 0px;

Dodaje to etykietę do modułu Blurb, który po kliknięciu zmienimy z „jasnego” na „ciemny”.

Przycisk przełączania Divi

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
Przycisk przełączania czcionki

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.

Dodaj moduł kodu

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
Kod CSS Divi

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
Sekcja divi selektora CSS

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.

Wybierz układ divi 1

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.

  1. Możemy dodać klasę CSS do każdego elementu strony osobno.
  2. 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.
  3. 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.

Dodaj do wszystkich wyspecjalizowanych sekcji

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.

Dodaj do modułów tekstowych

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.

Wyczyść tryb

A oto jak powinna wyglądać strona w trybie ciemnym.

Tryb ciemny

Dodatkowe zasoby

Oto kilka innych zasobów, które mogą Cię zainteresować.

końcowe przemyślenia

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.