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å layouten av accentmönstren för blurb-modulen frimåste du ladda ner det 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 formen Nedan. Som ny prenumerant får du ännu mer Divi-godhet och ett Divi Layout-paket varje måndag fri ! Om du redan finns på listan anger du bara din e-postadress nedan och klickar på Ladda ner. Du kommer inte att "återregistreras" 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:

  • 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

Nu är vi 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 innehåll platshållare (titeltexten och brödtexten) och klicka för att använda en ikon istället för en bild för blurb-texten.

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

Slutresultat

Låt oss nu se det slutliga resultatet.

Divi slutresultat

Avslutande tankar

Lägga till presentationsikoner som designaccenter till din 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 ramarna för textmodulen som en partiell överlagring för de omgivande ikonerna. Resultatet är unikt och öppnar dörren för att utforska 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.