Textomslagsbilder är en vanlig designteknik som vanligtvis används i tryckta medier, såsom tidskrifter och tidningar. Men du kan också hitta detta använt på webben, speciellt för blogginlägg. Att linda text runt en bild är faktiskt en ganska standard del av WordPress som innebär en enkel justering av justering i WYSIWYG-redigeraren. Det enda problemet är att det är svårt att styla din sida med standardredigeraren i WordPress. Det är där det Divi kan hjälpa !

Även om den här handledningen fokuserar på bilder, kan du faktiskt använda samma process för att slå in text i vilken modul som helst. Divi.

undersökningen

Här är en titt på huvuddesignen vi ska bygga idag.

I det här exemplet visar jag dig hur du lägger in två kolumner med text runt en centrerad bildmodul. På så sätt kan du skapa en unik layout för tidningar eller tidningar. Men eftersom det inte finns någon "float: center" css-egenskap, behöver vi lite kreativitet med layouten för att få denna design att fungera.

Så här gör du det.

Skapa innehåll i den översta raden med en centrerad bild

För att börja skapa en ny vanlig sektion med en rad med en kolumn. Lägg sedan till en bildmodul i din rad. Ladda upp en bild som är 400 pixlar med 250 pixlar. Storlek måste vara exakt för denna design.

Uppdatera sedan designparametrarna enligt följande:

Maximal bredd: 400px (skrivbord), 100% (tablett)
Justering av modulen: centrum
Anpassad stoppning: 2% längst upp, 2% längst ner, 2% till vänster, 2% till höger

Spara sedan dina inställningar och öppna radinställningarna. Dra ut stoppningen från botten av raden.

Anpassad stoppning: 0px längst ner

Skapa textraden med två kolumner

Under raden som innehåller bilden skapar du en ny rad med två kolumner.

I kolumn 1, lägg till en textmodul med en innehåll dummy.

Kopiera sedan textmodulen och klistra in den i 2-kolumnen för en andra kolumn med text.

Skapa tomt utrymme med flytande avdelare

För att skapa det utrymme vi behöver för bilden kan vi använda delningsmoduler. I den vänstra kolumnen ska vi skapa en avdelningsmodul som är hälften så stor som bilden och flyta den till höger så att vår textmodul sveper runt avdelaren. Sedan i den högra kolumnen ska vi skapa en annan separator som är hälften så stor som bilden och flyta den åt vänster.

För att göra detta, skapa en separationsmodul och placera den direkt ovanför textmodulen i 1-kolumnen.

Uppdatera sedan delade modulinställningar enligt följande:

Visa Divider: NEJ
Bredd: 200px
Höjd: 250px

Se till att höjden är densamma som skapades tidigare och att bredden är exakt hälften av bredden på bilden.

För mobilen vill vi inaktivera separatorer på surfplatta och telefon. För att göra detta, uppdatera synlighetsinställningarna för att stänga av skärmen på surfplattan och telefonen.

Nu när vår första separator har skapats, kopiera separationsmodulen och klistra in den ovanpå textmodulen i 2-kolumnen.

Därefter måste vi flyta våra avdelare. För att göra detta, öppna avdelningsinställningarna i kolumn 1 och lägg till följande anpassade CSS-kod i huvudelementet:

float: höger;

Öppna sedan delningsmodulinställningarna i kolumn 2 och lägg till följande anpassade CSS-kod till huvudelementet:

float: left;

Flytta bilden på plats med en anpassad marginal

Nu måste vi bara minska vår bild i första raden så att den passar in i det utrymme vi har skapat med våra avdelare.

Öppna inställningar för bildmodul och lägg till följande anpassade marginaler:

Anpassad marginal: Låg -250px (skrivbord), 20px (surfplatta)

Här är resultatet hittills.

Lägg till en titel i avsnittet

Det sista steget är valfritt, men om du vill lägga till en titel i avsnittet skapar du en textmodul och placerar den ovanför bilden.

Lägg sedan till innehåll följande till textmodulen:

Lär dig mer om hur du ger

Uppdatera sedan textinställningarna enligt följande:

Bakgrundsfärg: #000000
Titel 2 Teckensnitt: Playfair Display
Titel 2 Textjustering: Central Titel
2-textfärg: #ffffff
Titel 2 Linjehöjd: 2em

Motivera text för en renare text wrap design

När du omger text med bilder, särskilt om texten är centrerad på detta sätt, är det alltid en bra idé att motivera den omgivande texten. I det här fallet är det bara att ändra textens orientering till motivera två textmoduler som innehåller vår innehåll av att slå in text.

Slutresultat

Här är det slutliga resultatet.

Avslutande tankar

Att veta hur man effektivt omger text med bilder kan verkligen få ditt innehåll att se professionellt ut och lätt att läsa. Konceptet är ganska enkelt. Allt du behöver göra är att flytta din bild till höger eller vänster och sedan använda anpassade avstånd runt bilden för buffring. Och det jag gillar är att du kan använda vilken modul som helst (inte bara bilder) för att infoga text i vilken typ av innehåll som helst Divi. Jag hoppas att detta ger dig lite inspiration till ditt nästa projekt.

Hoppas att höra från dig i kommentarerna.