De donkere modus wordt steeds populairder als een handige optie waarmee gebruikers internet kunnen ervaren met minder vermoeidheid van de ogen. Laten we eerlijk zijn, we hebben allemaal de neiging om meer tijd te besteden aan het staren naar schermen dan we waarschijnlijk zouden moeten, dus elk extra gemak voor de gebruikerservaring (zoals de donkere modus) kan een lange weg gaan.
Besturingssystemen, programma's en browsers bevatten doorgaans ingebouwde mogelijkheden voor donkere modus, maar sommige ontwikkelaars tillen het naar een ander niveau door een aangepaste donkere modus-ervaring op te nemen voor hun Site web. Het idee is om meer controle te krijgen over het uiterlijk van hun Site web in donkere modus zonder concessies te hoeven doen aan merk en/of design.
In deze zelfstudie laten we u zien hoe u vanuit het niets een aangepaste donkere modus-schakelaar in Divi kunt maken zonder een plug-in. Met deze schakelfunctie voor de donkere modus heeft u controle over het ontwerp van de donkere modus en krijgt u een betere gebruikerservaring die is afgestemd op uw merk.
Laten we beginnen!
overzicht
Hier is een voorbeeld van het ontwerp dat we in deze tutorial zullen bouwen.
Hier is de aangepaste donkere modusschakelaar die we gaan maken.
En hier is de voor en na voor donkere modus toegepast op een van onze vooraf gedefinieerde lay-outs.
En hier is de donkere modusschakelaar toegevoegd aan een algemene koptekst. Merk op hoe de licht / donker-modus blijft wanneer u door de site bladert.
Deel 1: de switch maken vanuit de donkere modus
In dit eerste deel van de tutorial zullen we een schakelaar voor de donkere modus bouwen met een pagina in Divi. Zodra de schakelaar met de code is aangemaakt, kunt u deze opslaan in de Divi-bibliotheek en overal in uw Site web.
Voeg om te beginnen een rij van één kolom toe aan het standaardgedeelte wanneer u helemaal opnieuw opbouwt met Divi aan de voorkant.
Samenvatting module toevoegen
Om de aangepaste schakelaar te bouwen, gaan we een Blurb-module ontwerpen met een beetje aangepaste CSS.
Voeg een nieuwe presentatietekstmodule toe aan de regel.
Inhoud
Verwijder de inhoud Standaarddummy voor titel en hoofdtekst. Voeg vervolgens het vierkante pictogram toe in plaats van de afbeelding.
Ontwerpfase
Ga naar de ontwerpinstellingen en werk het volgende bij:
- Pictogramkleur: # 666666
- Uitlijning afbeelding / pictogram: links
- Lettergrootte pictogram: 22 pixels
- Breedte: 50px
- Uitlijning van de module: midden
- Hoogte: 25px
- Marge: 0 px laag
- Afgeronde hoeken: 4px
- Randbreedte: 2px
- Randkleur: # 666666
Aangepaste CSS
Zodra het ontwerp op zijn plaats is, schakelt u over naar het geavanceerde tabblad. Voeg onder Aangepaste CSS de volgende aangepaste CSS toe aan het hoofdelement om ervoor te zorgen dat de overloop niet wordt verduisterd door de vormgeving van de afgeronde hoeken.
overloop: zichtbaar! belangrijk;
Voeg vervolgens de volgende aangepaste CSS toe aan het element After:
inhoud: "licht"; positie: absoluut; links: -35px; boven: 0px;
Dit voegt een label toe aan de Blurb-module die we met een klik van "licht" naar "donker" zullen veranderen.
Tekst ontwerp
Omdat de post-pseudo-elementtekst de hoofdtekststijlen erft, kunnen we de hoofdtekststijlen met behulp van de Divi-opties als volgt toevoegen:
- Lichaamslettertype: Roboto
- Tekst hoofdtekst: # 666666
- Hoofdtekstgrootte: 13px
- Afstand van de letters van het lichaam: 1px
Aangepaste code toevoegen met een codemodule
Om de benodigde code (CSS / JQuery) toe te voegen om de donkere modusschakelaar te bedienen, zullen we een codemodule gebruiken.
Maak een nieuwe codemodule onder de Blurb-module in dezelfde kolom.
Plak vervolgens de volgende code in het codegebied:
/*** 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");}});
Aangepaste CSS-klassen toevoegen
Aangepaste code vereist dat u een aangepaste CSS-klasse heeft toegevoegd aan de Blurb-module of -switch. Hierdoor kan de blurb de schakeling van de donkere modus en de on-click-functionaliteit activeren.
Blurb-moduleklasse
Open de instellingen van de Blurb-module en voeg als volgt een aangepaste CSS-klasse toe:
- CSS-klasse: et-dark-toggle
Klasse geschikt voor donkere modus
We moeten ook een aangepaste CSS-klasse toevoegen aan elk Divi-element dat we in de donkere modus willen hebben. Zodra het element de CSS-klasse heeft, zal dat element de aangepaste "donkere modus" CSS erven in de code die we hebben toegevoegd nadat de donkere modus was ingeschakeld. Deze methode geeft ons meer controle over ons ontwerp in de donkere modus, omdat sommige elementen in de donkere modus misschien niet hoeven te worden gestileerd.
Om te beginnen kunnen we de donkere modus toevoegen aan de sectie met onze donkere modusschakelaar.
Open de sectieparameters en voeg de volgende CSS-klasse toe:
- CSS-klasse: geschikt voor et-dark-modus
Deel 2: Dark Mode-functies toevoegen aan een Divi-pagina
Nu we de CSS-code en klassen hebben, zijn we klaar om de Dark Mode-functionaliteit en het ontwerp toe te passen op een hele pagina in Divi. Om dit te doen, gebruiken we onze Premade-indeling van de landingspagina van de mobiele app.
Om de lay-out toe te voegen, opent u het instellingenmenu onder aan de visuele builder en klikt u op het pictogram Nieuwe lay-out toevoegen.
Selecteer vervolgens de lay-out van de bestemmingspagina van de mobiele app op het tabblad Voorgedefinieerde lay-outs.
Zorg ervoor dat de optie “Vervangen inhoud bestaand” is NIET geselecteerd. U wilt het gedeelte met de schakelaar voor de donkere modus niet wissen.
Omdat de stijl van de donkere modus alleen van toepassing is op elementen met de CSS-klasse "capabele en donkere modus", kunnen we ervoor kiezen om op verschillende manieren aan de pagina toe te voegen.
- We kunnen de CSS-klasse afzonderlijk aan elk element van de pagina toevoegen.
- We zouden de CSS-klasse kunnen uitbreiden naar elementen over de hele pagina (dat zou sneller zijn dan handmatig doen). We zouden bijvoorbeeld de sectie-instellingen voor de bovenste sectie kunnen openen en de CSS-klasse voor die sectie kunnen uitbreiden naar alle secties van de pagina.
- We kunnen de CSS-klasse toevoegen aan de algemene standaardinstellingen van het element. Hiermee wordt de CSS-klasse op alle site-brede elementen toegepast, waardoor de donkere modus op de hele site wordt toegevoegd. We kunnen bijvoorbeeld sectie-instellingen openen en op het pictogram voor algemene standaard klikken om de standaardinstellingen van de algemene sectie te wijzigen. Vervolgens kunnen we de CSS-klasse toevoegen en deze als CSS-klasse registreren voor alle secties van de site.
De CSS-klasse toevoegen aan pagina-elementen
Voor dit voorbeeld gaan we de pagina-elementen bijwerken door de CSS-klasse toe te voegen aan algemene standaardinstellingen voor secties en tekstmodules. En we zullen gaandeweg ook enkele toevoegingen doen aan de andere elementen op de pagina.
Alle secties
Om de CSS-klasse aan alle secties toe te voegen, opent u de instellingen van de bovenste sectie die de donkere modusschakelaar bevat. Wijzig vervolgens de algemene standaardinstellingen van de sectie en voeg de volgende CSS-klasse toe aan de algemene standaardinstellingen van de sectie:
- CSS-klasse: geschikt voor et-dark-modus
Alle gespecialiseerde secties
Voeg ook de CSS-klasse toe aan de algemene standaardinstellingen in de gespecialiseerde sectie.
Tekstmodules
Open vervolgens de instellingen voor een van de tekstmodules op de pagina en voeg dezelfde CSS-klasse toe aan de algemene tekststandaarden.
Om het resultaat te testen, ga naar de live-pagina en klik op de donkere modus-schakelaar bovenaan de pagina.
Zo ziet de pagina eruit in de heldere modus.
En hier is hoe de pagina eruit zou moeten zien in de donkere modus.
Aanvullende bronnen
Hier zijn anderen ressources dat zou je kunnen interesseren.
- Hoe typografie en lay-out aan te passen op Divi
- Hoe een hersluitbare glijdende call-to-action op Divi toe te voegen
- Hoe elementen op dezelfde lijn uit te lijnen op Divi
- Hoe geanimeerde secties te creëren door op Divi Builder te klikken
Final gedachten
Uw Divi-site uitrusten met een aangepaste schakelknop voor de donkere modus kan een geweldige manier zijn om de gebruikerservaring te verbeteren en een geheel nieuw ontwerp te creëren dat zowel aangenaam als verlichtend is. Ik hoop dat dit nuttig voor je zal zijn.
