Door naar hoofdmenu

Hoe u de donkere modus op uw site implementeert met Divi

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

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 donkere modus-mogelijkheden, maar sommige ontwikkelaars tillen het naar een ander niveau door een aangepaste donkere modus-ervaring voor hun website op te nemen. Het idee is om meer controle te krijgen over hoe hun website eruitziet in de donkere modus zonder concessies te doen aan branding 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.

Schakel tussen donkere modus

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 gaan we een donkere modusschakelaar bouwen met een pagina in Divi. Zodra de schakelaar is gemaakt met de code, kunt u deze opslaan in de Divi-bibliotheek en deze overal op uw website toevoegen.

Voeg om te beginnen een rij van één kolom toe aan het standaardgedeelte wanneer u helemaal opnieuw opbouwt met Divi aan de voorkant.

Divi-sectie

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 standaard dummy-inhoud voor de titel en hoofdtekst. Voeg vervolgens het vierkante pictogram toe in plaats van de afbeelding.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Divi overzichtsmodule

Opvatting

Ga naar de ontwerpinstellingen en werk het volgende bij:

  • Pictogramkleur: # 666666
  • Uitlijning afbeelding / pictogram: links
  • Lettergrootte pictogram: 22 pixels
Divi-pictogramconfiguratie
  • Breedte: 50px
  • Uitlijning van de module: midden
  • Hoogte: 25px
Divi dimensionering configuratie
  • Marge: 0 px laag
  • Afgeronde hoeken: 4px
  • Randbreedte: 2px
  • Randkleur: # 666666
Divi grensconfiguratie

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.

Divi-schakelknop

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
Schakelknop lettertype

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.

Voeg codemodule toe

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:

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • CSS-klasse: et-dark-toggle
Divi css-code

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
Css selector divi sectie

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 "Bestaande inhoud vervangen" NIET is geselecteerd. U wilt de sectie niet wissen met de donkere modusschakelaar.

Kies divi 1 layout

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.

  1. We kunnen de CSS-klasse afzonderlijk aan elk element van de pagina toevoegen.
  2. 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.
  3. 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.

Voeg toe aan alle gespecialiseerde secties

Tekstmodules

Open vervolgens de instellingen voor een van de tekstmodules op de pagina en voeg dezelfde CSS-klasse toe aan de algemene tekststandaarden.

Toevoegen aan tekstmodules

Om het resultaat te testen, ga naar de live-pagina en klik op de donkere modus-schakelaar bovenaan de pagina.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Zo ziet de pagina eruit in de heldere modus.

Duidelijke modus

En hier is hoe de pagina eruit zou moeten zien in de donkere modus.

Donkere modus

Aanvullende bronnen

Hier zijn enkele andere bronnen die mogelijk interessant voor u zijn.

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.

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer