Gå till innehållet

Hur man anpassar blurb-modulen för att fokusera på innehåll 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]

Att använda presentationsikoner som estetiska detaljer kan ge din layout en unik design som du kanske aldrig har tänkt på. Förutom att placera ikonen för en presentationsmodul för att täcka en textmodul, kan du använda bakgrunden och kanten på textmodulen för att utforma ikonen. Detta skapar en fin designaccent som ramar in innehållet samtidigt som dina ikoner får en helt unik design.

I den här handledning kommer jag att visa dig hur du kan stilisera presentationsikoner som design accenter för ditt innehåll i Divi.

undersökningen

Här är några exempel på designen vi kommer att bygga i denna handledning.

Designöversikt blurb divi-modul

Ladda ner provlayouterna för den här självstudien

För att få tag på accentmönsterlayouten för gratis blurb-modulen måste du ladda ner den först med knappen nedan. För att få tillgång till nedladdningen måste du prenumerera på vår Divi Daily-e-postlista med hjälp av formuläret nedan. Som ny abonnent får du ännu mer Divi-godhet varje måndag och ett gratis Divi Layout-paket! Om du redan finns i listan anger du bara din e-postadress nedan och klickar på nedladdning. Du kommer inte att "omregistreras" eller få ytterligare e-postmeddelanden.

Ladda ner

Börja med designen från början

För att komma igång, skapa en ny sida och ge din sida en titel. Sedan distribuerar du Divi-byggaren på det offentliga delsystemet. Lägg till ett vanligt avsnitt med en rad med en kolumn. Innan du lägger till din första modul, uppdatera radinställningarna med följande:

Använd den anpassade rännbredden: JA
Anpassad rännbredd: 1

Detta eliminerar alla anpassade marginaler mellan moduler.

Skapa textmodulen

Lägg sedan till en textmodul inuti raden.

Lägg till en divi-textmodul

Uppdatera textmodulen med följande påfyllningstext:

Våra tjänster detta avsnitt visar listan över de olika tjänster vi erbjuder våra kunder.

Lägg till en divisektionStylisera textmodulen

Uppdatera nu resten av textmodulparametern enligt följande:

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]

  • Bakgrundsfärg: #ffffff
  • Rubrik 2 Teckensnitt: Nunito
  • Titel 2 Teckensnitt vikt: fet
  • Titel 2 Teckensnittstyp: TT
  • Titel 2 Textfärg: #f24a5b
  • Titel 2 Textstorlek: 42 pixlar (skrivbord), 32 pixlar (surfplatta), 22 pixlar (telefon)
  • Titel 2 Letter Spacing: 16px
  • Titel 2 Linjehöjd: 1.3em
Divi-modulhuvudinställning

  • Bredd: 500px (skrivbord), 490px (tablett)
  • Justering av modulen: centrum
  • Anpassad stoppning (skrivbord): 40px längst upp, 40px längst ner, 50px till vänster, 50px till höger
  • Anpassad stoppning (telefon): 20px till vänster, 20px till höger
  • Breddens bredd: 10px
  • Gränsfärg: #ffffff

Modulkonfigurationstextstorlek och dimension

Eftersom vi ska överlappa textmodulen med presentationsikoner måste vi se till att textmodulen sitter ovanför ikonerna i z-space-ordningen. För att göra detta måste vi först lägga till följande CSS-kodavsnitt i CSS-området i huvudelementet i textmodulen:

position: relativ;

Ställ sedan in z-indexvärdet till 1.

Anpassad wordpress css

Nu kommer denna textmodul att placeras ovanpå alla andra moduler som överlappar varandra, vilket är viktigt för designen.

Skapa Blurb-ikonen

Vi är nu redo att skapa den första blurb-ikonen. För att göra detta måste vi först lägga till en Blurb-modul och dra den till toppen av textmodulen. Ta sedan bort det fiktiva innehållet (titeltexten och brödtexten) och klicka för att använda en ikon istället för en bild för blurb.

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]

Uppdatera sedan följande designparametrar:

  • Ikonfärg: # 2ea3f2
  • Använd ikonstorlek: JA
  • Ikonstorlek: 100 pixlar
  • Anpassad marginal: 0px längst ner (detta tar bort den undre marginalen mellan modulerna, inte nödvändigt om du använder 1 rännbredd)

Sedan, eftersom vi inte använder någon text med modulen (endast ikonen), kan vi ta bort standardbottenmarginalen under layoutikonen. För att göra detta, lägg till följande anpassade CSS-kod i Blurb Image CSS-området:

Blurb Bild CSS:

marginal-botten: 0px

Blurb divi-inställningar

Kopiera Blurb-ikonen

Innan vi börjar positionera blurb, låt oss fortsätta, duplicera blurb-modulen och dra den under textmodulen. Du bör nu ha en presentationsikon ovan och under textmodulen.

Cloud blurb divi-konfiguration och dupliceringPositioneringspresentationsikoner med Transform

För att placera presentationsikonerna kommer vi att använda Divis transformationsalternativ, som gör att vi kan placera presentationsmodulen med ikonen var som helst på sidan.

Positioneringsblankett Ikon #1

Om du vill placera den övre blurb-ikonen öppnar du inställningarna för blurb-modulen och uppdaterar följande:

  • Transformera översätt X-axeln (skrivbord): -242px
  • Transformera översätt Y-axeln (skrivbord): 50px
  • Transformera translate X-axeln (telefon): -170px

Du kan dock lägga till detta enligt de inställningar du har gjort.

presentation ikoner

Positioneringsblankett Ikon # 2

Låt oss göra den större innan vi placerar presentationsikonen. För att göra detta, öppna inställningarna för Blurb-modulen och ändra teckenstorleken på ikonen till 150 pixlar.

Placera sedan presentationsikonen genom att uppdatera följande transformationsalternativ:

  • Transformera översätt X-axeln (skrivbord): 242px
  • Transformera översätt Y-axeln (skrivbord): -100px
  • Transformera översätt X-axeln (telefon): 190px

Designavsnitt suddig divi

Skapande av ett annat avsnitt

Från och med nu kan vi hämta inspiration från det vi har gjort, för att skapa en annan zon med ett annat arrangemang. Allt du behöver göra är att skapa en ny kolumn och kopiera de tidigare modulerna. För att kopiera flera gånger, håll muspekaren över varje modul medan du håller ner CTRL-tangenten på tangentbordet.

Kopiera divi-modulen

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]

Slutresultat

Låt oss nu se det slutliga resultatet.

Divi slutresultat

Avslutande tankar

Att lägga till presentationsikoner som designaccent till ditt innehåll är ett exempel på hur två moduler kan kombineras för att skapa en helt unik design. I det här fallet fungerar bakgrunden och gränsen för textmodulen som ett delvis överlägg för de omgivande ikonerna. Resultatet är unikt och öppnar dörren till utforskningen av flera designvarianter. Utforska gärna olika ikoner och färgkombinationer för att skapa något för dina egna behov.

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

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
5 aktier
del5
tweet
Enregistrer