Vill du veta hur man sätter en Blurb-modul från Divi markeras samtidigt som andra suddas ut?
Oavsett vilken typ av webbplats du bygger är chansen stor att du någon gång vill se en lista över olika tjänster, stadier och mer.
Ett av de enklaste sätten att närma sig att skapa en sådan lista på ett attraktivt sätt är att använda Blurb-modulen från Divi. Blurb-moduler låter dig strukturera vackert innehåll från listan samtidigt som det ger dig oändliga designmöjligheter.
I den här handledningen tar vi det ett steg längre och visar dig hur du markerar en Blurb-modul när du håller muspekaren och suddar de andra du har visat. Det är ett bra sätt att betona en Blurb-modul i taget, utan att låta andra Blurb-moduler distrahera läsaren.
Låt oss gå.
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
Stationär dator
Mobilversion
Låt oss börja designa med Divi
Lägg till en ny sektion
Bakgrundsfärg
Börja med att lägga till en vanlig sektion på en ny sida eller den du arbetar med.
Du kan också konsultera: Divi: Hur man skapar en gruppmedlemssektion som en karusell
Öppna avsnittsinställningar och ändra bakgrundsfärgen.
- Bakgrund: #eaeaea
Förband
Lägg även till mellanrumsvärden.
- Marginal (överst, botten, vänster och höger): 2vw
- Utfyllnad (topp och botten): 0px
Border
Komplettera sektionsparametrarna genom att lägga till en kantradie.
- Rundade hörn: 20px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
Storlek
Utan att lägga till några moduler ännu, öppna linjeinställningarna och ändra storleksinställningarna.
- Utjämna kolumnhöjder: JA
- Bredd: 90 %
- Max bredd: 1px
- Min höjd: 500px (dator), automatisk (surfplatta och telefon)
Anpassad CSS (huvudelement)
Rikta in innehåll i kolumnen genom att lägga till en enda rad med CSS-kod till radens huvudelement.
align-items: center;
Lägg till Blurb-modulen i 1-kolumnen
Lägg till innehåll
Den enda modulen vi använder i den här handledningen är en Blurb-modul.
Du kan dock ersätta denna modul med valfri modul så länge du lägger till CSS-klassen som vi kommer att dela med oss av i nästa steg.
Lägg till den första Blurb-modulen i kolumn 1 och infoga innehåll som du väljer.
Välj ikonen
Välj sedan en ikon.
- Använd ikonen: JA
- Ikon: Se skärmdump
Bakgrundsgradient (hovra)
Använd sedan en bakgrundsgradient endast vid hovring.
- Gradient stannar
- 20 %: #ffffff
- 80 %: #0f1bff
- Gradienttyp: Linjär
Ikoninställningar (skrivbord)
Byt till flik Designa i modulen och ändra ikoninställningarna enligt följande:
- Ikonfärg: #ffffff
- Bild/ikon Rundade hörn: 50px
- Bild-/ikonkantbredd: 5 px
- Kantfärg: #ffffff
- Bild/ikonplacering: Överst
- Bild/ikonjustering: vänster
Inställningar för muspekaren
Ändra de olika ikonfärgerna när du svävar.
- Ikonfärg (hovra): #0f1bff
- Bild/ikon Bakgrundsfärg (Hover): #f7f7f7
Titeltextinställningar
Fortsätt genom att ändra titeltextinställningarna.
- Titeltypsnitt: Source Sans Pro
- Teckensnittsvikt: Fet
- Titel teckensnitt: TT (versaler)
Håll muspekaren över titeltextinställningar
Ändra rubrikens textfärg när du håller muspekaren.
- Titel Text Färg: #ffffff
Beskrivning Textinställningar (skrivbord)
Nästa är brödtextinställningarna.
- Body Font: Open Sans
- Kroppslinjehöjd: 2 em
Inställningar för beskrivningstext för muspekaren
Använd en textfärg när du håller muspekaren.
- Brödtextfärg (svävare): #ffffff
Förband
Gå sedan till avståndsinställningar och lägg till anpassade utfyllnadsvärden.
- Utfyllnad (överst, botten, vänster och höger): 50px
Box Shadow (skrivbord)
Vi använder även en boxskugga.
- Box Shadow Blur Styrka: 80px
- Box Shadow Spridningsstyrka: -20px
- Skuggfärg: rgba(255,255,255,0.18)
Box Shadow (hovra)
Ändra färgen på svävskuggan.
- Skuggfärg: rgba(0,0,0,0.18)
CSS klass
Och för att oskärpaeffekten ska inträffa måste vi tilldela en CSS-klass till vår Blurb-modul. Senare i artikeln kommer vi att använda denna CSS-klass i JQuery-kod.
- CSS-klass: blurb-objekt
Klona Blurb-modulen två gånger och placera dubbletterna i de återstående kolumnerna
När du har slutfört Blurb-modulen i kolumn 1 kan du klona den två gånger och placera dubbletterna i de återstående kolumnerna på raden.
Klona hela raden
Du kan klona raden så många gånger du vill, beroende på hur många Blurb-moduler du vill visa på din sida.
Anpassa Blurb-moduler individuellt
Naturligtvis måste du ändra det individuella innehållet i varje Blurb-modul.
Lägg till en ny rad
Strukturen av kolonnen
Lägg till ytterligare en rad i sektionen med följande kolumnstruktur:
Förband
Öppna linjeinställningar och ta bort all topp- och bottenstoppning som standard. Detta kommer att bidra till att minska utrymmet som tas upp av den här raden.
- Utfyllnad (topp och botten): 0px
Lägg till kodmodul i kolumnen
Infoga JQuery och CSS-kod
Lägg till en kodmodul i radkolumnen och infoga lite JQuery- och CSS-kod för att få effekten att hända.
Glöm inte att sätta JQuery-koden mellan skripttaggarna och CSS-koden mellan stiltaggarna som du kan se på utskriftsskärmen nedan.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Läs också: Divi: Hur man skapar en vittnesmålssektion i form av ett rutnät
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Stationär dator
Mobilversion
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln har vi visat dig hur du blir kreativ med Blurb-modulerna du delar på din webbplats.
Specifikt har vi visat dig hur du markerar en Blurb-modul när du svävar genom att göra de andra du har visat suddiga.
Vi hoppas att den här handledningen kommer att inspirera dig för dina nästa projekt. Divi. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
