Gå till innehållet

Hur man inkluderar en Divi-block på en Gutenberg-artikel

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Att skapa värdefulla blogginlägg tar tid och ansträngning. Tillsammans med att hitta de bästa ämnena att skriva 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, strax innan de sista tankarna. 

Med Divis nya layoutblock kan du nu enkelt skapa en sammanfattningsruta med Divis inbyggda alternativ. I den här guiden går vi igenom processen och du kan också ladda ner JSON-filen gratis!

Låt oss börja återskapa!

Använd publiceringsmallen för det sjätte temapaketet

Ladda ner Sixth Theme Builder Pack

Sammanfattningsrutan som vi kommer att återskapa under denna handledning passar perfekt för inläggsmallen för det sjätte gratis temabyggarpaketet. Gå tillbloggartikel och ladda ner hela paketet.

Ladda ner divi-paketet

Gå till Divi Theme Builder

Gå sedan till Divi Theme Builder.

Gå till temat byggare

Ladda ner publiceringsmallen

Klicka på ikonen i det övre högra hörnet och ladda ner postmallen från Theme Building Pack. Se till att redigera eventuella ändringar i temabyggaren efteråt.

Ladda ner publikationsmodellen

Öppna en befintlig Gutenberg-publikation eller skapa en ny

När du väl har lagt till motsvarande inläggsmall är det dags att skapa sammanfattningsrutan. Öppna eller skapa ett nytt inlägg med Gutenberg.

Skapa en divipublikation

Lägg till en sammanfattning av titeln H2

Mot slutet av blogginlägget lägger vi till en ny H2-titel.

Lägg till gutenberg textmodul titel

Lägg till ett nytt Divi-block online

Nästa kommer vi att lägga till ett nytt Divi-layoutblock.

Lägg till ett 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.

Skapa en ny layout i ett divi-block

Avsnitt inställningar

Bakgrundsfärg

Inuti Divi-layoutblockredigeraren kommer du att märka ett avsnitt. Öppna detta avsnitt och använd en vit bakgrund för det.

  • Bakgrundsfärg: #FFFFFF
Divi bakgrundsfärg

avstånd

Byt till fliken sektionsdesign och lägg till anpassade marginal- och stoppningsvärden.

  • Övre marginal: 100px
  • Vänster marginal: -10% (kontor), 0% (surfplatta och telefon)
  • Höger marginal: -10% (kontor), 0% (surfplatta och telefon)
  • Övre stoppning: 0px
  • Botten stoppning: 0px
Konfiguration av divi-avstånd

gräns

Lägg också till en gränsradie.

  • Nederst till vänster: 16px
  • Nedre höger: 16px
Divi-modul kantkonfiguration

Skugga låda

Med en subtil skugga på lådan.

  • Box Shadow suddighetsstyrka: 60px
  • Rutskuggans utbredningskraft: 10 pixlar
  • Skuggfärg: rgba (0,0,0,0,08)
Skugglådans divi-konfiguration

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Urvalslayout divi

dimensionering

Utan att lägga till en modul ännu, öppna radinställningarna och låt raden uppta hela bredden på sektionsbehållaren.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 100%
  • Max bredd: 100%
Divi line-konfiguration

avstånd

Ta sedan bort den övre och nedre polstringen från linjen.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Avståndsjustering av divi-linjen

Inställningar för kolumn 1

Bakgrundsfärg

Öppna sedan inställningarna i kolumn 1 och använd en vit bakgrundsfärg för detta.

  • Bakgrundsfärg: #FFFFFF
Divi kolumnjustering

avstånd

Lägg också till anpassade fyllningsvärden.

  • Övre stoppning: 70px
  • Botten stoppning: 70px
  • Vänster stoppning: 70 px
  • Höger stoppning: 70px
Avståndsinställningar för kolumnavstånd

Skugga låda

Fortsätt genom att lägga till en subtil rutskugga med en annan standard och sväva skuggfärg.

  • Box Shadow suddighetsstyrka: 50px
  • Standardskuggfärg: rgba (0,0,0,0)
  • Hover-skuggfärg: rgba (0,0,0,0,15)
Divi kolumn bakgrundsinställningar

Hover transformation skala

På svävaren vill vi också skala skalan något.

  • Höger: 105%
  • Låg: 105%
Divi kolumninställning

Hover Z-index

Fyll i kolumnparametrarna genom att lägga till ett hoverindex z.

  • Hover Index Z: 11
Divi kolumnposition

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örjar med en första textmodul. Lägg till ett nummer i innehållsområdet.

Inställning av Divi-text

Lutningbakgrund

Lägg sedan till en lutningsbakgrund.

  • Färg 1: # ff5e92
  • Färg 2: # ffd4b6
  • Lutningsriktning: 165deg

Textinställningar

Gå till fliken moduldesign och ändra textinställningarna enligt följande:

  • Textstilsort: 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 också till en gränsradie.

  • Nederst till vänster, uppe till höger och nedre höger: 100 pixlar
Textmodulens gränskonfiguration 1

CSS huvudelement

För att centrera texten i vår behållare måste vi lägga till några rader CSS-kod till huvudmodulelementet på den avancerade fliken.

display: flex;align-items: center;justify-content: center;

Kodinställning css modul text divi

Placera

Och vi kommer att avsluta modulparametrarna genom att flytta om modulen.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Position: absolut
  • Plats: uppe till vänster
Divi textmodul positionskonfiguration

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 valfritt H3-innehåll.

Lägg till textmodulinnehåll

H3 textinställningar

Ändra sedan storleken på modulen H3-text.

  • Titel 3 Textstorlek: 23px
Divi-textmodulparameter

avstånd

Ändra också avståndsinställningarna.

  • Övre marginal: 100px
  • Nedre marginal: 20px
Konfigurationsdel för modulärt avstånd

Lägg till en separationsmodul i kolumnen

synlighet

Nästa modul vi behöver är en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

  • Visa separator: Ja
Visa diviseparator

Linjeinställningar

Byt till fliken moduldesign och ändra radinställningarna enligt följande:

  • Linjefärg: # ff5e92
  • Linjestil: solid
  • Linjeposition: hög
Divi line inställning

dimensionering

Ändra även storleken på modulen.

  • Divider vikt: 2px
  • Bredd: 20%
Divi storlek

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 innehåll efter eget val.

Textkolumn 3 divi

Kloning kolonn

När du har slutfört kolumnen och alla dess moduler kan du klona hela kolumnen.

Kolumn en divikolumn

Ändra skuggfärgen på standardrutan

Öppna inställningarna i kolumn 2 och ändra standardskuggfärgen.

  • Skuggfärg: rgba (0,0,0,0,06)
Ändra färgen på divi-skuggan

Ändra gradientbakgrund för textmodul nr 1

Öppna den första textmodulen i nästa 2-kolumn och ändra övertoningsbakgrunden.

  • Färg 1: # 7e5ce6
  • Färg 2: # 25b8ee
Ändra bakgrunden för divi-lutningen

Ändra gränsen för textmodul nr 1

Ändra också inställningarna för modulgränsen.

  • Övre vänstra, vänstra och nedre höger: 100 pixlar
Ändra gränsen för divi-textmodulen

Ändra positionen för textmodul nr 1

Och placera om modulen på den avancerade fliken.

  • Plats: uppe till höger
Ändra placeringen av divi-texten

Ändra separatorns färg

Fortsätt genom att öppna inställningarna för separationsmodulen. Ändra linjens färg så att den passar det nya färgschemat.

  • Linjefärg: # 7e5ce6
Ändra färgen på diviseparatorn

Ändra allt innehåll

Ändra slutligen hela innehållet i modulen i kolumn 2.

Ändra innehållet i divi-textmodulen

Klona hela avsnittet två gånger

När du har slutfört det första avsnittet kan du klona det två gånger.

Klona kolumnerna så många gånger som behövs

Ändra avståndet för den första duplikatsektionen

Öppna inställningarna i det första duplikatsektionen och ändra marginalvärdena i enlighet med detta:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Vänster marginal: -5% (stationär dator), 0% (surfplatta och telefon)
  • Höger marginal: -5% (kontor), 0% (surfplatta och telefon)
Anpassa avståndet mellan dellinjer

Ändra avståndet för den andra duplikatsektionen

Öppna också det andra duplikatet, ta bort alla marginalvärden och lägg till en lägre marginal istället.

  • Nedre marginal: 100px
Konfigurera divi-toppmarginalen

Ändra allt innehåll

Ändra slutligen hela innehållet i modulen.

Redigera allt divi-innehåll

Spara layouten i Divi-biblioteket för återanvändning

Om du planerar att använda denna sammanfattningsruta i andra blogginlägg, se till att spara den i ditt Divi-bibliotek så att du enkelt kan komma åt den! Det är allt !

Spara i divibiblioteket

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.

Förhandsgranskning av Divi-design

Avslutande tankar

I den här artikeln har vi visat dig hur du lägger till en sammanfattningsruta till din Gutenberg-artikel med de nya layoutblocken från Divi. Sammanfattningsrutor är ett utmärkt visuellt sätt att hjälpa dina besökare att hitta den information de letar efter. 

Du kan också ladda ner JSON-filen för layouten gratis! Om du har några frågor, lämna gärna en kommentar i kommentarsektionen nedan.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer