Gå till innehållet

Hur man skapar en bild omgiven av text på Divi

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]

Textomslagningsbilder är en vanlig designteknik som vanligtvis används i tryckta medier, såsom tidskrifter och tidningar. Men du kan också hitta det som används på webben, särskilt för blogginlägg. Att slå in text runt en bild är faktiskt en ganska vanlig del av WordPress som innebär en enkel justering av justeringen i WYSIWYG-redigeraren. Det enda problemet är att det är svårt att anpassa stilen på din sida med WordPress-redigeraren. Det är här Divi kan hjälpa!

Även om denna handledning fokuserar på bilder, kan du faktiskt använda samma process för att radera text i alla Divi-moduler.

undersökningen

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

Förhandsgranskning av Divi-design

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

Ändra stil för divi-modul

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

Anpassad stoppning: 0px längst ner

Divi line-inställningar

Skapa textraden med två kolumner

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

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]

Divi-sektion med två kolumner

I 1-kolumnen lägger du till en textmodul med dummyinnehåll.

Lägg till divi 1 textrutaKopiera sedan textmodulen och klistra in den i 2-kolumnen för en andra kolumn med text.

Klistra in divi-textmodulen

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.

Justering av delningsbredd

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.

Inaktivera på

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]

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

Divi separator modul

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;

Lägg till divi float-egendom

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

float: left;

Vänster flottördelare 1

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.

Nuvarande design divi

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 följande innehåll i 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

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]

Hur man donerar textmodul

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årt hudtextinnehåll.

Divi-anpassad text

Slutresultat

Här är det slutliga resultatet.

Centraliserad bild och motiverad text

Avslutande tankar

Att veta hur man effektivt kan omger text i bilder kan verkligen få ditt innehåll att se professionellt och lättläst ut. Konceptet är ganska enkelt. Allt du behöver göra är att flyta bilden höger eller vänster och sedan använda anpassat avstånd runt bilden för bufferten. Och vad jag gillar är att du kan använda vilken modul som helst (inte bara bilder) för att infoga text i alla typer av innehåll i Divi. Hoppas att detta ger dig lite inspiration till ditt nästa projekt.

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

Denna artikel innehåller 1 kommentar

  1. Hej!
    Jag försöker anpassa denna handledning så att den omger en video ... men jag kan inte.
    Är proceduren mer eller mindre densamma?
    Tack och godnatt. Stef

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
0 aktier
del
tweet
Enregistrer