Wil je weten hoe je een Blurb-module van Divi gemarkeerd terwijl anderen worden vervaagd?
Ongeacht het type Site web je aan het bouwen bent, is de kans groot dat je op een gegeven moment een lijst met verschillende services, fasen en meer wilt zien.
Een van de gemakkelijkste manieren om zo'n lijst op een aantrekkelijke manier te maken, is door de Blurb-module te gebruiken van Divi. Met Blurb-modules kunt u de inhoud uit de lijst terwijl u eindeloze ontwerpmogelijkheden krijgt.
In deze zelfstudie gaan we nog een stap verder en laten we u zien hoe u een Blurb-module kunt markeren tijdens het zweven en de andere die u hebt weergegeven, vervaagt. Het is een geweldige manier om één Blurb-module tegelijk te benadrukken, zonder dat andere Blurb-modules de lezer afleiden.
Laten we gaan.
overzicht
Laten we, voordat we in deze zelfstudie duiken, eens kijken naar het resultaat op verschillende schermformaten.
Desktopcomputer
Mobiele versie
Laten we beginnen met ontwerpen met Divi
Voeg een nieuw gedeelte toe
Achtergrond kleur
Begin met het toevoegen van een normaal gedeelte aan een nieuwe pagina of aan de pagina waaraan u werkt.
U kunt ook raadplegen: Divi: Hoe maak je een teamledensectie als carrousel
Open sectie-instellingen en verander de achtergrondkleur.
- Achtergrond: #eaeaea
Spacing
Voeg ook afstandswaarden toe.
- Marge (Boven, Onder, Links en Rechts): 2vw
- Opvulling (boven en onder): 0px
Grens
Voltooi de sectieparameters door een randradius toe te voegen.
- Afgeronde hoeken: 20px
Voeg een nieuwe regel toe
Structuur van de kolom
Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur:
Afmetingen
Zonder nog modules toe te voegen, opent u de regelinstellingen en wijzigt u de maatinstellingen.
- Kolomhoogten gelijkmaken: JA
- Breedte: 90%
- Maximale breedte: 1px
- Minimale hoogte: 500px (desktop), automatisch (tablet en telefoon)
Aangepaste CSS (hoofdelement)
Lijn de uit inhoud van de kolom door een enkele regel CSS-code toe te voegen aan het hoofdelement van de rij.
align-items: center;
Voeg de Blurb-module toe aan de 1-kolom
Voeg inhoud toe
De enige module die we in deze tutorial gebruiken, is een Blurb-module.
U kunt deze module echter vervangen door elke module van uw keuze, zolang u de CSS-klasse toevoegt die we in de volgende stappen zullen delen.
Voeg de eerste Blurb-module toe aan kolom 1 en plaats de inhoud de votre choix.
Selecteer het icoon
Selecteer vervolgens een pictogram.
- Gebruik Icoon: JA
- Icoon: Zie screenshot
Achtergrondverloop (zweven)
Gebruik dan alleen een achtergrondverloop bij zweven.
- Verloop stopt
- 20%: #ffffff
- 80%: #0f1bff
- Gradiënttype: Lineair
Pictogram Instellingen (Desktop)
Overschakelen naar tabblad Design van de module en wijzig de pictograminstellingen als volgt:
- Pictogramkleur: #ffffff
- Afbeelding/pictogram afgeronde hoeken: 50px
- Breedte afbeelding/pictogramrand: 5px
- Randkleur: #ffffff
- Plaatsing afbeelding/pictogram: Boven
- Afbeelding/pictogram uitlijning: links
Instellingen voor zweefpictogram
Wijzig de verschillende pictogramkleuren bij de muisaanwijzer.
- Pictogramkleur (zweven): #0f1bff
- Achtergrondkleur afbeelding/pictogram (zweven): #f7f7f7
Instellingen voor titeltekst
Ga verder door de instellingen voor de titeltekst te wijzigen.
- Titel Lettertype: Source Sans Pro
- Lettergewicht: Vet
- Titel Lettertypestijl: TT (hoofdletters)
Instellingen voor titeltekst aanwijzen
Wijzig de kleur van de titeltekst bij de muisaanwijzer.
- Titel Tekst Kleur: #ffffff
Beschrijving Tekstinstellingen (desktop)
Hierna volgen de instellingen voor de hoofdtekst.
- Lichaamslettertype: Open Sans
- Lichaamslijn Hoogte: 2em
Instellingen voor tekstbeschrijving met muisaanwijzer
Gebruik een tekstkleur bij zweven.
- Lichaamstekstkleur (zweven): #ffffff
Spacing
Ga vervolgens naar de afstandsinstellingen en voeg aangepaste opvulwaarden toe.
- Opvulling (boven, onder, links en rechts): 50px
Box Shadow (bureaublad)
We gebruiken ook een doosschaduw.
- Doos Schaduwvervaging Sterkte: 80px
- Box Shadow Spread-sterkte: -20px
- Schaduwkleur: rgba(255,255,255,0.18)
Doosschaduw (zweven)
Verander de kleur van de zweefschaduw.
- Schaduwkleur: rgba(0,0,0,0.18)
CSS-klasse
En om het vervagingseffect te laten plaatsvinden, moeten we een CSS-klasse toewijzen aan onze Blurb-module. Verderop in het artikel zullen we deze CSS-klasse gebruiken in JQuery-code.
- CSS-klasse: blurb-item
Kloon de Blurb-module twee keer en plaats de duplicaten in de resterende kolommen
Nadat u de Blurb-module in kolom 1 hebt voltooid, kunt u deze twee keer klonen en de duplicaten in de resterende kolommen van de rij plaatsen.
Kloon de hele rij
Je kunt de rij zo vaak klonen als je wilt, afhankelijk van het aantal Blurb-modules dat je op je pagina wilt weergeven.
Pas Blurb-modules individueel aan
Natuurlijk moet je de individuele inhoud van elke Blurb-module aanpassen.
Voeg een nieuwe regel toe
Structuur van de kolom
Voeg nog een rij toe aan de sectie met behulp van de volgende kolomstructuur:
Spacing
Open regelinstellingen en verwijder standaard alle bovenste en onderste opvulling. Dit zal helpen de ruimte die door deze rij wordt ingenomen te verminderen.
- Opvulling (boven en onder): 0px
Codemodule toevoegen aan kolom
JQuery- en CSS-code invoegen
Voeg een codemodule toe aan de rijkolom en voeg wat JQuery- en CSS-code in om het effect te bewerkstelligen.
Vergeet niet de JQuery-code tussen de scripttags te zetten en de CSS-code tussen de stijltags zoals je kunt zien in het onderstaande printscherm.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Lees ook: Divi: Hoe maak je een Testimonials-sectie in de vorm van een raster
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Desktopcomputer
Mobiele versie
Download DIVI nu!!!
Conclusie
In dit artikel hebben we je laten zien hoe je creatief kunt worden met de Blurb-modules die je deelt op je Site web.
We hebben u in het bijzonder laten zien hoe u een Blurb-module kunt markeren wanneer u zweeft door de andere die u hebt weergegeven te vervagen.
We hopen dat deze tutorial je zal inspireren voor je volgende projecten. Divi. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
