Przejdź do głównej treści

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

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Tryb ciemny zyskuje popularność jako wygodna opcja dla użytkowników do przeglądania sieci z mniejszym obciążeniem oczu. Spójrzmy prawdzie w oczy, wszyscy spędzamy więcej czasu na oglądaniu ekranów, niż prawdopodobnie powinniśmy, więc każda dodatkowa wygoda dla użytkownika (np. Tryb ciemny) może przejść długą drogę.

Systemy operacyjne, programy i przeglądarki zazwyczaj zawierają wbudowane funkcje trybu ciemnego, ale niektórzy programiści przenoszą go na wyższy poziom, włączając niestandardową obsługę trybu ciemnego dla swojej witryny. Chodzi o to, aby przejąć większą kontrolę nad wyglądem ich strony internetowej w trybie ciemnym, bez konieczności rezygnacji z marki i / lub wyglądu.

W tym samouczku pokażemy, jak stworzyć od podstaw niestandardowy przełącznik trybu ciemnego bez wtyczki. Dzięki tej funkcji przełączania trybu ciemnego będziesz mieć kontrolę nad projektem trybu ciemnego i uzyskasz 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 tryb 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 utrzymuje się tryb jasnego / ciemnego podczas przeglądania witryny.

Część 1: Budowa przełącznika z trybu ciemnego

W tej pierwszej części samouczka zbudujemy przełącznik w trybie ciemnym ze stroną w Divi. Po utworzeniu wagi za pomocą kodu będziesz mógł zapisać ją w bibliotece Divi i dodać do dowolnej lokalizacji na swojej stronie internetowej.

Aby rozpocząć, dodaj wiersz kolumny do domyślnej sekcji, budując od zera za pomocą Divi z przodu.

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ą zawartość manekina dla tytułu i treści. Następnie dodaj kwadratową ikonę zamiast obrazu.

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

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

Koncepcja

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

  • Kolor ikony: # 666666
  • Wyrównanie obrazu / ikony: w lewo
  • Rozmiar czcionki ikony: 22 pikseli
  • 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 zakończeniu projektowania przejdź do karty Zaawansowane. W obszarze niestandardowego 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”.

Projekt tekstu podstawowego

Ponieważ tekst pseudoelementu po dziedziczy po stylach 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:

Szukasz najlepszych motywów i wtyczek WordPress?

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

<styl> / *** Tryb ciemny Przełącz style * /. et-dark-mode {przejście: wszystkie .5s;}. et-dark-toggle {kursor: wskaźnik; przejście: wszystkie .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! Ważne;} / *** Divi Element Style Dark Mode ** Tutaj możesz dodać styl dla każdego elementu Divi, który ma klasę „et-dark-mode-zdolny”. * // * Sekcja z trybem ciemnym * /. et_pb_section.et-dark-mode-zdolny.et-dark-mode {kolor tła: # 23282d! ważne; mieszanie tła mode: overlay; przejście: krycie .5s easy-in-out; kolor: #dddddd! ważne;} / * Wiersz z trybem ciemnym * /. et_pb_row.et-dark-mode-enable.et-dark-mode {background- kolor: # 23282d! Ważny; kolor: #dddddd! Ważny;} / * Kolumna z trybem ciemnym * /. et_pb_column .et-dark-mode-enable.et-dark-mode {background-color: # 23282d! ważne; color: #dddddd! ważne;} / * Moduł z trybem ciemnym * /. et_pb_module.et-dark-mode .et-dark-mode {kolor tła: przezroczysty! ważny; kolor: #dddddd! ważny;} / * Nagłówki tekstowe z ciemnym trybem * /. et_pb_module.et-dark-mode-enabled.et-dark-mode.et_pb_module_header , .et_pb_module.et-dark-mode-mode.et-dark-mode h1, .et_pb_module.et-dark-mode-przystosowany. et-dark-mode h2, .et_pb_module.et-dark-mode-zdolny.et- tryb ciemny h3, .et_pb_module.et-tryb ciemny tryb.et-tryb ciemny h4, .et_pb_module.et-tryb ciemny tryb.et-tryb ciemny h5, .et_pb_module.et-tryb ciemny- enable.et-dark-mode h6 {color: #dddddd! important;} </style> <script> funkcja 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 && (// wszystko oprócz Firefoxe.code === 22 || // Firefoxe.code === 1014 | | // pole nazwy testu również, ponieważ kod mig nie będzie obecny // wszystko oprócz Firefoxe.name === „QuotaExceededError” || // Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // potwierdź QuotaExceededError tylko wtedy, gdy coś jest już przechowywane. storage.length! == 0;} } jQuery (document) .ready (function ($) {var storageAvailable = window.storageAvailable ('sessionStorage'); $ (". et-dark-toggle"). click (function () {$ (". and-dark -mode-enable, 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')? $ (". I-tryb-ciemny, body ”). addClass („ and-dark-mode ”): $ („. i przystosowany do trybu dark, body ”). removeClass („ and-dark-mode ”);}}); </script>

Dodawanie niestandardowych klas CSS

Kod niestandardowy wymaga dodania niestandardowej klasy CSS do modułu lub przełącznika Blurb. Umożliwi to tekstowi prezentacji przejście do trybu ciemnego i kliknięcie.

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, dla którego chcemy mieć możliwość trybu ciemnego. Gdy element ma klasę CSS, element ten odziedziczy niestandardowy „tryb ciemny” CSS w kodzie, który dodaliśmy po aktywacji trybu ciemnego. Ta metoda daje nam większą kontrolę nad naszym projektem w trybie ciemności, ponieważ niektóre elementy mogą nie wymagać żadnego stylu w trybie ciemności.

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 i klasy CSS, jesteśmy gotowi zastosować funkcjonalność i projekt trybu ciemnego na całej stronie w Divi. Aby to zrobić, wykorzystamy nasz wstępnie przygotowany układ ze strony docelowej aplikacji mobilnej.

Aby dodać układ, otwórz menu ustawień u dołu generatora wizualnego i kliknij ikonę Dodaj nowy układ.

Następnie wybierz układ strony docelowej aplikacji mobilnej na karcie Wstępnie zdefiniowane układy.

Upewnij się, że opcja „Zamień istniejącą zawartość” NIE jest zaznaczona. Nie chcesz wyczyścić sekcji za pomocą przełącznika trybu ciemnego.

Ponieważ styl w trybie ciemnym będzie miał zastosowanie tylko do elementów z klasą CSS „zdolną do pracy w trybie ciemnym”, możemy dodawać do strony na różne sposoby.

  1. Możemy dodać klasę CSS do każdego elementu strony osobno.
  2. Możemy rozszerzyć klasę CSS o elementy na całej stronie (byłoby to szybsze niż robienie tego ręcznie). Na przykład, moglibyśmy otworzyć parametry 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 witrynie, dodając możliwość trybu ciemnego w całej witrynie. Na przykład możemy otworzyć ustawienia sekcji i kliknąć globalną domyślną ikonę, aby zmienić domyślne wartości globalnej sekcji. Następnie możemy dodać klasę CSS i zapisać ją jako klasę CSS dla wszystkich sekcji witryny.

Dodanie klasy CSS do elementów strony

W tym przykładzie zamierzamy zaktualizować elementy strony, dodając klasę CSS do globalnych wartości domyślnych sekcji i modułów tekstowych. W miarę upływu czasu dodamy również inne elementy strony.

Wszystkie sekcje

Aby dodać klasę CSS do wszystkich sekcji, otwórz ustawienia w górnej części, która zawiera przełącznik trybu ciemnego. Następnie zmodyfikuj globalne ustawienia 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.

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

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

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 inne zasoby, które mogą Cię zainteresować.

końcowe przemyślenia

Wyposażenie witryny Divi w niestandardowy przełącznik ciemnej mody może być świetnym sposobem na zwiększenie komfortu użytkowania i stworzenie zupełnie nowego projektu, który cieszy i odciąża wzrok. Mam nadzieję, że ci się przyda.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

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

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