De flesta webbplatser har en "Heroes"-sektion, som inte längre behöver bevisa sig själv. Dess roll är inte bara att sticka ut, utan också att delas upp i flera element som förstärker den uppmaning till handling som finns. Hjälten avsnitt till innehåll split med lättförståelig struktur är mycket populära och används ofta av olika typer av webbplatser.
Och även om att skapa hjältesektioner till innehåll delad för kontoret verkar enkelt, man ska inte alltid lita på utseende. Det är här denna handledning kommer till användning. Vi kommer att återskapa en mycket interaktiv mobil delad hjältesektion som inte bara kommer att se bra ut på mobilen, utan oavsett skärmstorlek. Vi kombinerar också utmärkta animationer för att matcha 2019 års designstil perfekt. Vi hoppas att den här handledningen inspirerar dig att skapa dina egna mobilhjältesektioner innehåll dela.
Låt oss gå!
undersökningen
Innan vi dyker in i handledningen, låt oss ta en titt på vad du kan få efter att ha slutfört den här handledningen.
Gränssnittsdesign
Lägg till en ny sektion
avstånd
Börja med att skapa en ny sida eller öppna en befintlig. Lägg till ett nytt vanligt avsnitt i det, gå till avståndsinställningarna och ta bort alla vanliga topp- och bottenvaddmarginaler.
- Bästa vaddering: 0px
- Padding Bottom: 0px
Lägg till en ny rad
Strukturen av kolonnen
Vi fortsätter att lägga till en ny rad och använda följande kolumnstruktur:
Bakgrundsfärg
Utan att lägga till fler moduler öppnar du radinställningarna och lägger till en helt svart bakgrundsfärg.
- Bakgrundsfärg: #000000
Kolumn 1 bakgrundsfärg
Lägg också till en svart bakgrundsfärg i den första kolumnen.
- Kolumn 1 Bakgrundsfärg: #000000
Kolumn 2 bakgrundsfärg
Samma sak för den andra kolumnen.
- Kolumn 2 Bakgrundsfärg: #000000
dimensionering
Gå sedan till storleksinställningarna och låt raden och dess kolumner fylla hela skärmens bredd.
- Gör den här linjen full bredd: Ja
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Utjämna kolumnhöjder: Ja
avstånd
Vi tar också bort alla standard- och undermarginaler på linjen.
- Padding på toppen: 0px
- Padding Bottom: 0px
- Klädsel höger: 1vw
display
Slutligen ser vi till att de två kolumnerna visas sida vid sida på mindre skärmar. För att göra detta måste vi lägga till en enda rad CSS-kod på fliken Avancerat på raden.
display: flex; |
Lägg till en bildmodul i kolumn 1
Lämna bildområdet tomt
Vi har nu alla moduler vi behöver! Du måste börja med bildmodulen i den första kolumnen. Istället för att ladda upp en bild till bildområdet laddar vi upp bilden till bakgrundsinställningarna i nästa steg, så vi måste ta bort bilden som läggs till som standard. Således kan vi leka med hur bilden är placerad och hur mycket utrymme den upptar i vår rad.
Lägg till en bakgrundsfärg
Gå till bakgrundsinställningarna för bildmodulen och lägg till en bakgrundsfärg. I nästa steg kommer vi att kombinera denna bakgrundsfärg och en bakgrundsbild med en blandningseffekt för att göra bilden mörkare.
- Bakgrundsfärg: #686868
Lägg till en bakgrundsbild
Lägg till en valfri bakgrundsbild och ändra bakgrundsinställningarna i enlighet därmed:
- Bakgrundsstorlek: Omslag
- Bakgrundsbildens position: mitt
- Upprepa bakgrundsbild: Ingen upprepning
- Bakgrundsbildmix: multiplicera
dimensionering
Vi använde två kolumner av samma storlek för raden vi arbetar med, men resultatet är inte detsamma. Vi kommer att ändra storleken på varje tillagd modul manuellt så att det ser ut som om vi använder en annan kolumnstruktur. Anledningen till att vi gör detta (istället för att bara välja en annan kolumnstruktur) är att göra allt lyhört.
på mindre skärmar. Öppna måttparametrarna för bildmodulen och ändra bredden.
- Bredd: 88%
- Justering av modulen: vänster
avstånd
Nu måste vi bestämma storleken på vår bild i avståndsinställningarna. Vi använder också en bildskärmsenhet för dessa värden för att säkerställa att vår design förblir full respons, oavsett skärmstorlek.
- Övre stoppning: 26.3vw (skrivbord), 48vw (surfplatta), 72vw (telefon)
- Klädsel längst ner: 26.3vw (skrivbord), 48vw (surfplatta), 72vw (telefon)
animering
Slutligen lägger vi till en bildanimering i bildmodulen. När du väl har använt animeringen kommer du att märka att bilden inte kommer att visas förrän det går in i den första kolumnen. Den andra kolumnens bakgrundsfärg förblir högst upp på bildmodulen när den dras åt vänster.
- Animeringsstil: Slide
- Repeat Animation: En gång
- Animeringsriktning: vänster
- Animation Varaktighet: 1450ms
- Intensity Animation: 60%
- Animering Starta opacitet: 100%
Lägg till en knappmodul i 1-kolumnen
Lägg till en kopia
Nästa modul vi behöver i kolumn 1 är en knappmodul. Ange en kopia efter eget val.
Knappinställningar
Gå sedan till fliken Design och ändra knappinställningarna.
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 1.5vw (skrivbord), 2.5vw (surfplatta), 4vw (telefon)
- Knapptextfärg: #ffffff
- Knapp bakgrundsfärg: #e02b20
- Bredden på knappgränsen: 0px
- Radi av gränsen för knappen: 1px
- Knapp typsnitt: Poppins
- Typsnittsvikt: fet
avstånd
Ändra också avståndsvärdena.
- Övre marginal: -3.3vw (skrivbord), -6vw (surfplatta), -9.1vw (telefon)
- Vänster Padding: 8vw
- Klädsel höger: 8vw
Skugga låda
Och lägg till en subtil skugga för att skapa djup på sidan.
- Box Shadow Blur Force: 20px
- Skuggfärg: rgba (0,0,0,0.3 XNUMX XNUMX)
Lägg till textmodul # 1 i kolumn 2
Lägg till H1-innehåll
På andra kolumnen! Den första modulen vi behöver är en textmodul. Lägg till valfritt H1-innehåll.
H1 Textinställningar
Gå sedan till fliken Design och ändra H1-textinställningarna.
- Teckensnitt: Poppins
- Titeltextfärg: #ffffff
- Texttitelstorlek: 4vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
avstånd
Ändra också avståndsvärdena.
- Övre marginal: 12vw
- Vänster marginal: -20vw
- Höger marginal: 17vw (skrivbord), 15vw (surfplatta), 1vw (telefon)
animering
Och lägg till en subtil animering.
- Animeringsstil: Slide
- Repeat Animation: En gång
- Animationsriktning: Ned
- Animation Varaktighet: 1450ms
- Intensity Animation: 10%
- Animering Starta opacitet: 100%
Lägg till en delningsmodul i 2-kolumnen
synlighet
Nästa modul vi behöver i andra kolumnen är en delningsmodul. Se till att alternativet "Visa separator" är aktiverat.
- Visa Divider: Ja
Färg
Gå sedan till fliken Design och ändra separatorns färg.
- Färg: #e02b20
animering
Lägg till en animering till divisionsmodulen nästa.
- Animeringsstil: Slide
- Repeat Animation: En gång
- Animationsriktning: Höger
- Animation Varaktighet: 1450ms
- Intensity Animation: 83%
- Animering Starta opacitet: 100%
Lägg till textmodul # 2 i kolumn 2
Lägg till innehåll
Låt oss gå vidare till nästa och sista modul vi behöver i den andra kolumnen! Lägg till en beskrivning av ditt val.
Textinställningar
Gå sedan till textinställningarna på fliken Design och gör några ändringar därefter:
- Text teckensnitt: Poppins
- Textens tyngdtext: Lätt
- Textfärg: #919191
- Textstorlek: 0.9vw (skrivbord), 1.8vw (surfplatta), 2.2vw (telefon)
- Spacing av textbokstäver: 0.1vw
- Höjd på textrad: 2.2em
avstånd
Ändra också avståndsvärdena.
- Övre marginal: 9vw (skrivbord), 19vw (surfplatta), 23vw (telefon)
- Nedre marginal: 12vw (skrivbord), 19vw (surfplatta), 23vw (telefon)
- Vänster marginal: -3vw
- Höger marginal: 20vw (skrivbord), 6vw (surfplatta), 3vw (telefon)
animering
Och till slut lägger du till en blekningsanimation till modulen så är du klar!
- Animeringsstil: Fade
- Repeat Animation: En gång
- Animation Varaktighet: 1400ms
- Animeringsfördröjning: 1000 ms
- Animering Starta opacitet: 0%
Avslutande tankar
I den här handledningen visade vi dig hur du skapar fantastiska hjältesektioner med delat innehåll Divi. Hjältesektioner med delat innehåll är mycket populära och används ofta på webben, men det är också viktigt att se till att de är mycket lyhörda. Om du har några frågor eller förslag, se till att lämna en kommentar och dela den gärna på sociala medier!
