Att skapa värdefulla blogginlägg tar tid och ansträngning. Förutom att hitta de bästa ämnena att skriva om i din nisch, är det också viktigt att hålla läsarna engagerade och låta dem snabbt hitta den information de letar efter.
Nu är ett bra sätt att närma sig denna typ av användarupplevelse att dela en visuell sammanfattningsruta i slutet av ditt blogginlägg, precis innan de sista tankarna.
Med Divis nya layoutblock kan du nu enkelt skapa en sammanfattningsruta med Divis inbyggda alternativ. I den här handledningen går vi igenom processen och du kan också ladda ner JSON-filen för layouten gratis!
Låt oss börja återskapa!
Använd sjätte temapaketets publiceringsmall
Ladda ner Sixth Theme Builder Pack
Sammanfattningsrutan som vi kommer att återskapa genom denna handledning matchar perfekt med inläggsmallen för sjätte temabyggarpaketet fri. Få tillgång tillbloggartikel och ladda ner hela paketet.
Gå till Divi Theme Builder
Gå sedan till Divi Theme Builder.
Ladda ner publiceringsmallen
Klicka på ikonen i det övre högra hörnet och ladda ner inläggsmallen för temabyggarpaketet. Se till att redigera eventuella ändringar som görs i temabyggaren efteråt.
Öppna en befintlig Gutenberg-publikation eller skapa en ny
Nu, när du har lagt till motsvarande inläggsmall, är det dags att skapa sammanfattningsrutan. Öppna eller skapa ett nytt inlägg med Gutenberg.
Lägg till H2-titelsammanfattning
Mot slutet av blogginlägget kommer vi att lägga till en ny H2-titel.
Lägg till ett nytt Divi-block online
Därefter lägger vi till ett nytt Divi-layoutblock.
Skapa en ny layout inuti Divi-blocket
När du har lagt till blocket har du två alternativ. Välj att skapa en ny layout.
Avsnitt inställningar
Bakgrundsfärg
Inuti Divi Layout Block Editor kommer du att märka ett avsnitt. Öppna det här avsnittet och använd en vit bakgrund för det.
- Bakgrundsfärg: #FFFFFF
avstånd
Växla till fliken sektionsdesign och lägg till anpassade marginal- och utfyllnadsvärden.
- Övre marginal: 100px
- Vänstermarginal: -10% (dator), 0% (surfplatta och telefon)
- Högermarginal: -10% (dator), 0% (surfplatta och telefon)
- Övre stoppning: 0px
- Botten stoppning: 0px
gräns
Lägg även till en kantradie.
- Nederst till vänster: 16px
- Nederst till höger: 16px
Skugga låda
Med en subtil boxskugga.
- Box Shadow suddighetsstyrka: 60px
- Rutskuggans utbredningskraft: 10 pixlar
- Skuggfärg: rgba (0,0,0,0,08)
Lägg till en ny rad
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Utan att lägga till en modul ännu, öppna radinställningarna och låt raden ta upp hela bredden av sektionsbehållaren.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Utjämna kolumnhöjder: Ja
- Bredd: 100%
- Max bredd: 100%
avstånd
Ta sedan bort standardstoppningen för topp och botten från raden.
- Övre stoppning: 0px
- Botten stoppning: 0px
Inställningar för kolumn 1
Bakgrundsfärg
Öppna sedan kolumn 1-inställningarna och använd en vit bakgrundsfärg för det.
- Bakgrundsfärg: #FFFFFF
avstånd
Lägg också till anpassade fyllningsvärden.
- Övre stoppning: 70px
- Botten stoppning: 70px
- Vänster stoppning: 70 px
- Höger stoppning: 70px
Skugga låda
Fortsätt genom att lägga till en subtil boxskugga med en annan standard- och svävskuggfärg.
- Box Shadow suddighetsstyrka: 50px
- Standard skuggfärg: rgba(0,0,0,0)
- Hover shadow färg: rgba(0,0,0,0,15)
Hover transformation skala
Vid hovring vill vi även skala kolumnen något.
- Höger: 105%
- Låg: 105%
Hover Z Index
Komplettera kolumnparametrarna genom att lägga till ett hovringsindex z.
- Hover Index Z: 11
Lägg till textmodul # 1 i kolumnen
Lägg till ett nummer i innehållsområdet
Det är dags att lägga till moduler, börja med en första textmodul. Lägg till ett nummer i rutan innehåll.
Lutningbakgrund
Lägg sedan till en gradientbakgrund.
- Färg 1: #ff5e92
- Färg 2: #ffd4b6
- Lutningsriktning: 165deg
Textinställningar
Växla till fliken moduldesign och ändra textinställningarna enligt följande:
- Textfont: Poppins
- Textfärg: #ffffff
- Textstorlek: 26px
- Justering av texten: centrum
dimensionering
Tilldela sedan en bredd och en höjd.
- Bredd: 150px
- Höjd: 150px
gräns
Lägg även till en kantradie.
- Nederst till vänster, uppe till höger och nedre höger: 100 pixlar
CSS huvudelement
För att centrera texten i vår behållare måste vi lägga till några rader med CSS-kod till huvudmodulelementet på fliken Avancerat.
display: flex;align-items: center;justify-content: center;
Placera
Och vi kommer att slutföra modulinställningarna genom att flytta modulen.
- Position: absolut
- Plats: uppe till vänster
Lägg till textmodul # 2 i kolumnen
Lägg till H3-innehåll
Låt oss gå vidare till nästa textmodul. Lägg till några innehåll H3 efter eget val.
H3 textinställningar
Ändra sedan H3-textstorleken på modulen.
- Titel 3 Textstorlek: 23px
avstånd
Ändra även avståndsinställningarna.
- Övre marginal: 100px
- Nedre marginal: 20px
Lägg till en separationsmodul i kolumnen
synlighet
Nästa modul vi behöver är en splittermodul. Se till att alternativet "Visa separator" är aktiverat.
- Visa separator: Ja
Linjeinställningar
Byt till fliken moduldesign och ändra radinställningarna enligt följande:
- Linjefärg: #ff5e92
- Linjestil: solid
- Linjeposition: hög
dimensionering
Ändra även modulstorleken.
- Divider vikt: 2px
- Bredd: 20%
Lägg till textmodul # 3 i kolumnen
Lägg till innehåll
Låt oss gå vidare till nästa och sista textmodul. Lägg till några innehåll som du väljer.
Klona kolumn
När du har slutfört kolumnen och alla dess moduler kan du klona hela kolumnen.
Ändra standard boxskuggfärg
Öppna inställningarna för kolumn 2 och ändra standardskuggfärgen.
- Skuggfärg: rgba (0,0,0,0,06)
Ändra textmodul #1 Gradientbakgrund
Öppna den första textmodulen i nästa 2 kolumn och ändra gradientbakgrunden.
- Färg 1: #7e5ce6
- Färg 2: #25b8ee
Ändra ram för textmodul #1
Ändra även gränsinställningarna för modulen.
- Överst till vänster, nere till vänster och nedre höger: 100 pixlar
Ändra position för textmodul #1
Och placera om modulen på fliken Avancerat.
- Plats: uppe till höger
Ändra separatorfärg
Fortsätt genom att öppna inställningarna för separationsmodulen. Ändra linjefärgen så att den matchar den nya färgpaletten.
- Linjefärg: #7e5ce6
Ändra allt innehåll
Ändra slutligen allt innehåll i modulen i kolumn 2.
Klona hela avsnittet två gånger
När du har slutfört den första delen kan du klona den två gånger.
Ändra avståndet för den första duplicerade sektionen
Öppna inställningarna för det första dubblettavsnittet och ändra marginalvärdena i enlighet med detta:
- Vänstermarginal: -5 % (dator), 0 % (surfplatta och telefon)
- Högermarginal: -5% (dator), 0% (surfplatta och telefon)
Ändra avståndet för den andra dubblettsektionen
Öppna även den andra dubbletten, ta bort alla marginalvärden och lägg till en bottenmarginal istället.
- Nedre marginal: 100px
Ändra allt innehåll
Ändra slutligen allt innehåll i modulen.
Spara layout till Divi-biblioteket för återanvändning
Om du planerar att använda den här sammanfattningsrutan i andra blogginlägg, se till att spara den i ditt Divi-bibliotek så att du enkelt kan komma åt den! Det är allt !
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.
Avslutande tankar
I den här artikeln visade vi dig hur du lägger till en sammanfattningsruta i ditt Gutenberg-inlägg med Divis nya layoutblock. Sammanfattningsrutor är ett bra visuellt sätt att hjälpa dig besökare för att hitta den information de letar efter.
Du kunde också ladda ner JSON-filen för layouten gratis! Om du har några frågor, lämna gärna en kommentar i kommentarsfältet nedan.
