Gå till innehållet

Så här byter du bokstäver till bakgrund 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]

När det gäller bakgrundsmasker brukar användare använda bildredigeringsprogramvara utanför Divi och sedan ladda upp bilden till webbplatsen de skapar. Även om detta är ett ganska bekvämt sätt att anpassa din webbplats, är det inte nödvändigtvis den enda lösningen. Du kan också skapa bakgrundsmasker inom Divi, som kombinerar olika designelement och filteralternativ på ett kreativt sätt. Det är precis vad vi ska göra i det här inlägget! Vi förvandlar överdimensionerade karaktärer till bakgrundsmasker som ser bra ut oavsett skärmstorlek. Vi hoppas att den här guiden inspirerar dig att skapa dina egna mönster med stora karaktärer och Divis inbyggda alternativ.

Låt oss gå!

Exempel på förhandsvisning

Innan vi dyker in i handledningen, här är de typer av bakgrunder du kan uppnå med denna teknik.

Divi bakgrund

Conception

Vi börjar designen genom att skapa en svart bakgrund med en bokstav som har en bild som bakgrund.

Lägg till en ny sektion

Bakgrundsfärg

Låt oss börja med det första exemplet! Lägg till ett nytt vanligt avsnitt till en ny eller befintlig sida och lägg till en bakgrund till detta avsnitt:

  • Bakgrundsfärg: #000000

Divi sektion justering

avstånd

Gå sedan till avståndsinställningarna och ta bort all standard vaddering för topp och botten.

  • Toppad padding: 0px
  • Botten stoppning: 0px

Divi vaddering

överflöde

Byt till fliken Avancerat och dölj avsnittets överflöd. Detta kommer att bli viktigt senare i denna handledning när vi placerar om textmodulen som innehåller den stora karaktären.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold

Överflöd dold divi

Lägg till rad 1

Kolumnstruktur

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

Första radstrukturen

Kolumn 1 bakgrundsfärg

Utan att lägga till några moduler ännu, öppna radinställningarna och lägg till en bakgrundsfärg i den första kolumnen.

  • Kolumn 1 Bakgrundsfärg: #848484

Divi bakgrundskolumn

1-kolumnen Bakgrundsbild

Lägg också till en bakgrundsfärg. För att kombinera bakgrundsfärgen och bilden ska vi använda ett blandningsläge.

  • Blandning av kolumnbakgrundsbild: Multiplicera

Divi bakgrundsbilddesign

dimensionering

Byt till fliken Design och låt raden fylla hela skärmens bredd med följande storleksinställningar:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Bredd: 100%
  • Maximal bredd: 100%

Bakre delningsbredd

avstånd

Vi blir också av med alla anpassade polstring i raden.

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]

  • Toppad padding: 0px
  • Botten stoppning: 0px

Divi nexopos linje

Lägg till en textmodul i en kolumn

Lägg till ett tecken i innehållsområdet

Det är dags att lägga till textmodulen som innehåller en överdimensionerad karaktär. Lägg till bokstaven "o" i innehållsområdet.

Textmodul med en bokstav på bakgrundsdivi

Bakgrundsfärg

Fortsätt genom att gå in i bakgrundsinställningarna och lägg till en svart bakgrundsfärg.

  • Bakgrundsfärg: #000000

Svart divi bakgrund

Textinställningar

Gå till fliken Design och ändra textinställningarna. Lägg märke till hur vi använder ett högt värde för textstorleken.

  • Text teckensnitt: Poppins
  • Textstorlek: 100vw
  • Textorientering: Center

Divi textmodul anpassning

avstånd

Gå sedan till avståndsinställningarna och lägg till anpassade marginal- och stoppningsvärden.

  • Övre marginal: -6vw
  • Bästa vaddering: 15vw
  • Botten stoppning: 49vw

stora tecken

filter

Det är dags att göra magi! Öppna modulens filterinställningar och ändra sammanslagningsläget i enlighet därmed:

  • Blandningsläge: Multiplicera
  • Ljusstyrka: du kan ändra detta värde efter dina önskemål

Visa bakgrund på divi-text

Lägg till 2-raden

Kolumnstruktur

När ditt stora tecken har lagts till i designen kan du fortsätta genom att lägga till de återstående modulerna som du vill visa i avsnittet, helst genom att lägga till en ny rad:

Välj divi-layout

dimensionering

Utan att lägga till några moduler ännu, öppna radinställningarna och låt den uppta hela skärmens bredd.

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Bredd: 100%
  • Maximal bredd: 100%

Anpassa divi-modulradenavstånd

Ta också bort all standard upp och ner stoppning

  • Toppad padding: 0px
  • Botten stoppning: 0px

Intern marginal divi

Lägg till textmodul # 1 i kolumnen

Lägg till H1-innehåll

I den här nya raden kan du lägga till de moduler du väljer. För att återskapa det exakta exemplet som delas i förhandsgranskningen av det här inlägget, börja med att lägga till en textmodul med H1-innehåll.

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]

Divi titel design design

H1 Textinställningar

Gå till fliken Design och ändra H1-textinställningarna.

  • Titel typsnitt: Playfair Display
  • Typsnittsvikt: fet
  • Titel Textinriktning: Center
  • Titeltextfärg: #ffffff
  • Text Titel Storlek: 6vw

Konfiguration av Divi-huvudteckensnittavstånd

Fortsätt genom att gå till avståndsinställningarna och låt textmodulen överlappa den stora karaktären genom att lägga till en negativ toppmarginal. Vi ser också till att det finns utrymme till vänster och höger om modulen för att säkerställa lyhördhet.

  • Övre marginal: -47vw
  • Vänster marginal: 1vw
  • Höger marginal: 1vw

Design divi titelavstånd design

Lägg till en delningsmodul i kolumnen

synlighet

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

  • Visa Divider: Ja

Visa separator på divi

Färg

Gå till designfliken nästa och ändra avdelarens färg.

  • Färg: #ffffff

Divi färgavgränsare

dimensionering

Ändra även dimensioneringsparametrarna.

  • Divider vikt: 13px
  • Bredd: 16%
  • Justering av modulen: centrum

Divi separator storlek

avstånd

Lägg också till en övre marginal för att skapa ett mellanrum mellan textmodulen och delningsmodulen.

  • Övre marginal: 16vw

Avdelningsavstånd

Lägg till textmodul # 2 i kolumnen

Lägg till innehåll

Nästa modul vi behöver är en textmodul med styckeinnehåll.

Lägg till separatormodul för divi

Textinställningar

Öppna textinställningarna och gör följande ändringar:

  • Text teckensnitt: Open Sans
  • Textfärg: #ffffff
  • Textstorlek: 1vw (skrivbord), 2vw (surfplatta), 2.5vw (telefon)
  • Höjd på textrad: 1.9em
  • Textorientering: Center

Inställningar för Divi-textmodul

avstånd

Lägg också till anpassade avståndsvärden.

  • Övre marginal: 3vw
  • Nedre marginal: 3vw (stationär dator), 10vw (surfplatta och telefon)
  • Vänster marginal: 27vw (skrivbord), 10vw (surfplatta), 8vw (telefon)
  • Höger marginal: 27vw (skrivbord), 10vw (surfplatta), 8vw (telefon)

Anpassning av divi-modulavstånd

Lägg till en knappmodul i kolumnen

Lägg till en kopia

På nästa och sista modul, som är en knappmodul. Ange en kopia efter eget val.

Lägg till divi-knappmoduluppriktning

Fortsätt genom att ändra knappjustering på fliken Design.

  • Justering av knapparna: mittpunkten

Divi-knappmoduljusteringKnappinställningar

Byt till knappinställningarna och anpassa knappen efter önskemål.

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]

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 1vw (skrivbord), 2.5vw (surfplatta), 3vw (telefon)
  • Knapptextfärg: #ffffff
  • Bredden på knappgränsen: 1px
  • Radi av gränsen för knappen: 0px
  • Knapp typsnitt: Öppna Sans
  • Typsnittsvikt: Ultra fet
  • Teckensnittstyp: versaler

Anpassa stil för divi-knappmodul

avstånd

Slutligen lägger vi också till anpassade marginal- och fyllvärden för att få önskat resultat.

  • Nedre marginal: 10vw
  • Padding: 15px
  • Botten stoppning: 15px
  • Vänster padding: 50px
  • Möjningstryck: 50px

Inställning av Divi-knappmodul

Slutresultat

Det här ser ut som vi har byggt hittills.

Slutresultat av divi-design

Avslutande tankar

I den här artikeln har vi visat dig hur du använder stora tecken för att skapa fantastiska bakgrundsmasker med Divi. Detta är ett utmärkt sätt att skapa en anpassad webbdesign utan att behöva använda bildredigeringsprogram. Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet 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
2 aktier
del2
tweet
Enregistrer