Divi , het populaire WordPress-thema, staat bekend om zijn veelzijdige modules waarmee websiteontwerpers en -ontwikkelaars moeiteloos verbluffende lay-outs kunnen maken. Onder zijn indrukwekkende arsenaal aan modules onderscheidt de Divi Divider Module zich als een uniek hulpmiddel waarmee gebruikers boeiende verdelers kunnen maken. In deze blogpost duiken we in de boeiende wereld van gradiëntverdelers en onderzoeken we hoe u de Divi Divider Module kunt gebruiken om uw ontwerpen te verbeteren. We zullen nader bekijken hoe gradiëntverdelers werken en u inspirerende voorbeelden geven om uw creativiteit aan te wakkeren.
Voorbeeld
Hier is een voorbeeld van hoe ons verloopontwerp er uiteindelijk uit zal zien.
Hoe u verloopverdelers kunt maken met Divi's Divider Module
Er bestaan meerdere methoden om een scheidingswand te construeren met behulp van Divi's Divider Module. Standaard toont de module een lijn als scheidingslijn. Het is echter mogelijk om deze lijn te deactiveren en de Achtergrondinstellingen van de module te gebruiken om een scheidingslijn te genereren die kan worden aangepast met behulp van verschillende Achtergrondopties zoals kleuren, verlopen, afbeeldingen en meer. In plaats van de daadwerkelijke verdeler weer te geven, zullen we ons concentreren op het stylen van de container van de verdeler om een uniek vormgegeven verdeler te produceren.
Verdeler verbergen
De procedure is eenvoudig. Voeg eerst een scheidingsmodule toe aan uw lay-out en verberg vervolgens de scheidingslijn onder het tabblad Inhoud.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
Verdeler Achtergrond
Kies vervolgens het achtergrondtype dat u wilt gebruiken in het menu Achtergrondinstellingen op het tabblad Inhoud. We zullen ons in dit bericht concentreren op de achtergrondgradiëntopties.
Voeg maatvoering en afstand toe
Als u een stijlvolle scheidingswand in vrijwel elke maat of vorm wilt bouwen, gebruikt u de opties Grootte en Afstand op het tabblad Ontwerp om de hoogte en breedte van de container van de scheidingswand aan te passen. Om de gewenste grootte te genereren, gebruikt u breedte en hoogte, maximale breedte en maximale hoogte, module-uitlijning en opvulling aan de boven- en onderkant.
Randradius toevoegen
Om de vorm verder op te maken, voegt u randopties toe, zoals Randradius. Hoeken kunnen gezamenlijk of afzonderlijk worden aangepast om fascinerende vormen te creëren. Voor een speciaal ontwerp kunt u bovendien randbreedte, stijlen, enz. toevoegen.
Verloopverdeler
We gebruiken de landingspagina uit het gratis Home Baker Layout Pack uit Divi voor onze eerste verloopverdeler. Het artwork van dit lay-outpakket heeft bruingekleurde kleurverlopen en krachtige, donkere contouren. We repliceren dit met ons verloop door het kleurenpalet van het lay-outpakket te gebruiken. Voor onze eerste illustratie gebruiken we de Divider Module die al aanwezig is in het heldengedeelte. Deze is eenvoudig, maar heeft toch een grote visuele impact. Hier is de lay-out voordat we de Divider Module ter referentie toevoegden.
Zichtbaarheid
Kies Nee voor Divider weergeven onder Zichtbaarheidsopties voor de Divider-module.
- Toon scheidingslijn: Nee
Verloop
Selecteer het tabblad Achtergrondverloop door omlaag te scrollen naar Achtergrond. We voegen hiervoor vijf verloopstops toe. De standaardwaarden voor de andere gradiëntparameters worden gebruikt. De parameters voor elke Gradiëntstop worden hieronder vermeld.
- Eerste verloopstop: 0px, #dcc087
- Tweede verloopstop: 16px, #e6b060
- Derde verloopstop: 22px, #f19d33
- Vierde verloopstop: 31px, #f49826
- Vijfde verloopstop: 48px, #3b261e
Pixels moeten worden gebruikt als gradiënteenheid. De tinten waar we naar op zoek waren, zijn nu beschikbaar. Het enige dat u nog hoeft te doen, is de grootte optimaliseren.
- Verloopeenheid: Pixels
Maatvoering
Kies daarna het tabblad Ontwerpen. Zet 100% voor de breedte onder Maatvoering. Bij alle drie de apparaatformaten moet de Hoogte zijn ingesteld op 40px. Modulaire sluiting slaat uw instellingen op.
- Breedte: 100%
- Hoogte: 40px
Laatste voorbeeld
Nu hebben we hier een laatste voorbeeld van ons verloopontwerp in actie.
Gedachten beëindigen
Daarmee ronden we onze discussie af over het gebruik van Divi 's Divider Module om gradiëntverdelers te maken. Om aangepaste verloopverdelers te maken, gebruikt u de verloopoptie in de Verdeelmodule. We kunnen gradiëntverdelers in verschillende maten en vormen maken door gebruik te maken van de randhoek-, afstand- en maatopties. Met slechts een paar basiskeuzes kunnen we onderscheidende verloopverdelers ontwerpen die zich onderscheiden van de massa.
