Vill du skapa en responsiv bildrutnätslayout med DIVI ?
Byggaren Divi har fantastiska inbyggda moduler som använder rutnätsvyer,
Men ibland kanske du vill skapa din egen anpassade bildrutnätslayout med CTA-länkar. Detta ger dig mer kontroll över designen och innehåll som du vill visa för varje rutnätsobjekt utan att behöva tillgripa ett plugin.
Idag visar vi dig hur du skapar en responsiv bildrutnätslayout med CTA-länkar med hjälp av de inbyggda designalternativen i Divi.
Låt oss börja!
undersökningen
Här är en kort översikt över resultatet vi kommer att få i slutet av denna handledning.
Skapa en sida med Divi Theme Builder
Från WordPress Dashboard, skapa en ny webbsida genom att gå till Sidor >> Lägg till
Ge sedan en titel till din sida och klicka sedan på " Använd Divi Builder ".
Klicka sedan på " börja bygga«
Skapa specialsektionslayouten
Lägg till ett nytt avsnitt "Specialitet". vänster sidofältslayout en tredjedel två tredjedelar.
Välj layouten för kolumnerna som visas i skärmdumpen nedan:
Ta bort standardavsnittet så att bara det nya specialiserade avsnittet finns kvar.
Öppna avsnittsinställningarna och ändra bakgrundsfärgen enligt följande:
- Bakgrund: #84dbda
Under fliken Stil, uppdatera följande alternativ:
- Utjämna kolumnhöjder: JA
- Använd anpassad rännans bredd: JA
- Rännviddsbredd: 1
- Inre bredd: 100%
Läs också: Hur flyter jag blogginlägg i DIVI?
- Maximal inre bredd: 1px (dator), 080px (surfplatta och telefon)
- Intern marginal (topp och botten): 12vh
- Kolumn 1 Utfyllnad (överst och neder): 0px
Med avsnittsformaten på plats lägger du till en rad med en kolumn i avsnittet.
Linjeinställningar
Uppdatera linjeparametrarna enligt följande:
- Använd anpassad rännbredd: JA
- Kolumnavstånd: 1
- Harmonisera kolumnhöjder: JA
- Intern marginal (topp och botten): 0px
Skapa en andra rad genom att duplicera den första.
Ändra sedan dubblettraden till en layout med två kolumner.
Lägga till bilder som kolumnbakgrundsbilder
Nu när alla rader och kolumner är på plats är vi redo att lägga till våra bilder i vår rutnätslayout.
För att säkerställa att bilderna är responsiva i rutnätslayouten lägger vi till var och en av våra bilder som bakgrundsbilder till var och en av de fyra kolumnerna i avsnittet.
Eftersom varje bakgrundsbild kommer att ha en bakgrundsstorlek på " omslag ", kommer bilden alltid att fylla hela kolumnen när du justerar webbläsarens storlek.
Översta raden kolumn bakgrundsbild
För att komma igång, öppna kolumninställningarna på den översta raden.
Lägg sedan till en bakgrundsbild i kolumnen.
Nedre raden kolumn bakgrundsbilder
Öppna sedan inställningarna för kolumn 1 i den andra (nedre) raden och lägg även till en bakgrundsbild till denna kolumn.
Lägg sedan till en bakgrundsbild i kolumn 2 på samma rad.
Avsnitt kolumn 1 bakgrundsbild
Och slutligen, öppna avsnittsinställningarna "specialitet" och lägg till en bakgrundsbild i kolumn 1.
Tillägg av modulen "Call to Action" ovanpå bilderna i varje kolumn
Nu när våra bakgrundsbilder har lagts till i varje kolumn i rutnätslayouten lägger vi till en "Call to Action"-modul i varje kolumn.
Genom att använda en "Call to Action"-modulöverlagring på kolumnbakgrundsbilden kan du enkelt lägga till anpassade bakgrundsöverlagringsstilar och svävningseffekter till kolumnbakgrundsbilden.
För det här exemplet kommer vi bara att använda knappelementet från Action Call-modulen, men du kan enkelt lägga till innehåll av titeln eller texten ovanför knappen.
Vi kommer att lägga till den första "Call to Action"-modulen i kolumnen på översta raden.
Innehåll
Uppdatera modulinställningarna för "Call to Action" enligt följande:
- ta bort titeltext
- radera brödtext
- Knapplänk URL: #
ANMÄRKNING: Att lägga till ett "#" för knappens länk-URL är bara ett fyllmedel för tillfället för att knappen ska visas. Om du lägger till den halvtransparenta bakgrundsfärgen när du svävar får du en fin anpassad överlagringsfärg när du håller muspekaren över modulen (och bilden bakom den).
- Bakgrundsfärg: transparent (skrivbord), rgba (255,235,77,0.5) (hovra)
Knappstilar
Gå till fliken Stil och ändra knappinställningarna för modulen "Uppmaning" enligt följande:
- Använd anpassade stilar för Knapp: JA
- Knapptextstorlek: 22px
- Knappens textfärg: #ffeb4d
- Bakgrundsknapp: #000000 (skrivbord), #ec5f00 (hovra)
- Knappkantsbredd: 0 pixlar
- Knappkantradie: 100 px
- Knapptypsnitt: Quicksand
- Dämpad ljusknapp: halvfet
- Utfyllnadsknapp: 0,5 em topp, 0,5 em botten, 2 em vänster, 2 em höger
Storlek, stoppning och kantband
Därefter måste vi se till att vår modul har en viss höjd för att exponera bakgrundsbilden av kolumnen bakom den.
För att göra detta kommer vi att lägga till interna marginaler (överst och nedre) till modulen.
Vi kommer också att lägga till en subtil ram till modulen för att ge den en liten separation från andra bilder i rutnätslayouten.
Använd följande inställningar:
- Bredd: 100%
- Intern marginal (topp och botten): 15vh
- Nedre kantbredd: 5px
- Vänster kantbredd: 5px
- Kantfärg: rgba (255,255,255,0.5)
ANMÄRKNING: Användning av längdenheten vh för utfyllnad kommer att göra utfyllnadsvärdet relativt till höjden på webbläsarens vyport. Så dina bildrutnätselement kommer att växa och krympa i höjd i proportion till webbläsarfönstret.
Vertikal centrering av innehållet i modulen "Call to action".
För att säkerställa att innehåll av "Action Call"-modulen förblir vertikalt centrerad, kan vi lägga till ett litet utdrag av anpassad CSS med hjälp av flex-egenskapen.
Under den avancerade fliken lägger du till följande CSS till huvudelementet:
display:flex;
flex-direction:column;
justify-content:center;
Lade till uppmaningsöverlagring i andra kolumner
Nu när den första "Call to Action"-modulen är anpassad, kopiera och klistra in modulen i de andra tre kolumnerna i layouten, inklusive de två kolumnerna i den nedre raden och kolumn 3 i avsnittet.
För att säkerställa att modulen "Call to Action" täcker hela höjden av kolumn 1 i den specialiserade sektionen, ställ in minimihöjden till 100 %.
- Minsta höjd: 100 %
Det är över ! Låt oss se slutresultatet.
Slutresultat
Här är slutresultatet av den responsiva bildrutnätslayouten på en webbsida med svävningseffekterna.
Och så här reagerar rutnätet när du justerar webbläsarens storlek.
Ladda ner DIVI nu!!!
Slutsats
Responsiva bildrutnätslayouter fortsätter att vara en populär aspekt på många webbplatser. Den visuella dragningskraften som bakgrundsbilden ger i kombination med uppmaningsöverlägget kan verkligen visa de viktiga navigeringslänkarna.
Dessutom kommer den lyhörda karaktären hos bildrutnätslayouten att se bra ut på alla enheter, vilket alltid är en nödvändighet.
Vi hoppas att den här guiden kommer att vara användbar för dig i dina framtida projekt för att skapa webbplats. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser om du behöver fler element för att slutföra dina webbplatsskapande projekt.
Du kan också följa vår guide på 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.
.
