Att använda Divis nya dragbara storleksalternativ hjälper oss inte bara att skapa mycket responsiva webbplatser, utan hjälper oss också att skapa unika interaktioner. Med dessa alternativ kan du anpassa vilken som helst webbplats du skapar och anpassar strukturen på dina sidor baserat på aktuella designtrender.
I denna handledning kommer vi särskilt att visa dig hur du skapar svävaravsnitt med Divi. Vi skapar en ny sida och tillåter visning av alla sektionstitlar, men varje avsnitt öppnas bara på svävar (skrivbord) eller på klick (mobil). Så snart du öppnar ett annat avsnitt stängs det du tidigare öppnat automatiskt. Vi börjar med att förklara det allmänna tillvägagångssättet och fortsätta med att återskapa exemplet som du kan se nedan från grunden. Vi hoppas att den här guiden uppmuntrar dig att skapa din egen design för svävaravsnitt!
Låt oss gå!
undersökningen
Innan du dyker in i lektionen, låt oss ta en snabb titt på resultatet.
Designstadiet
Innan vi dyker in i handledningen kommer vi att gå över tekniken som används för att skapa rollover-sektioner. Du kan tillämpa denna teknik på alla typer av webbplats du bygger, med vilken stil som helst.
1. Lägg till det första avsnittet på din sida
Antag att du startar en ny design på en helt ny sida. Det första du ska göra är att lägga till ett nytt vanligt avsnitt.
2. Lägg till en ny rad inklusive en sektionstitel
Sedan kan du fortsätta genom att lägga till en ny rad med en textmodul inklusive din avsnittstitel. Du kan också lägga till en avdelarmodul och något som indikerar att linjen expanderar vid hovring eller beröring. Det är viktigt att separera avsnittstiteln från resten av innehåll av avsnittet. Så se till att lämna tillräckligt med utrymme mellan avsnittstiteln och allt som följer.
3. Justera resten av innehåll i avsnittet
Designelementen som följer avsnittstitlarna är helt upp till dig. Du kan göra en sektion så lång eller så kort som du vill och använda valfri designstil.
4. Ändra standardhöjderna och håll muspekaren över avsnittet
När du har förfinat avsnittet och alla dess designelement är det dags att skapa rollover-effekten. Standardhöjden för ditt avsnitt är utformat så att det bara matchar sektionens titel. I svävar kommer sektionen att återgå till sin ursprungliga storlek.
5. Dölj vertikalt överflöde
En annan viktig del av denna teknik döljer det vertikala överflödet. När du har ställt in en maximal maximal höjd för ditt avsnitt som är mindre än den ursprungliga sektionshöjden skapas ett överflöde. För att säkerställa att överflödet inte visas måste du se till att det är dolt i avsnittets synlighetsinställningar.
5. Upprepa stegen för alla delar av sidan.
Upprepa samma steg för alla delar av din sida för att skapa en uppenbar användarupplevelse som din besökare kommer att uppskatta.
Början på designen!
Lägg till en ny sektion
Standardbakgrundsfärg
Nu när vi har följt tillvägagångssättet i det här inlägget är det dags att börja sätta saker i verket! Lägg till ett vanligt första avsnitt till en helt ny sida på din webbplats WordPress och öppna sektionsinställningarna. Ändra standardbakgrundsfärgen för ditt avsnitt till en färg som du väljer.
- Bakgrundsfärg: # 000000
Flyga över bakgrundsfärgen
Ändra den här bakgrundsfärgen svävar.
- Bakgrundsfärg: #ffffff
Lägg till rad 1
Kolumnstruktur
Fortsätt lägga till den första raden till ditt avsnitt med följande kolumnstruktur:
Lägg till en textmodul
Lägg till H2-innehåll
Lägg till en textmodul till nästa nya rad. Lägg till en H2-kopia med symbolen '▼' när avsnittet utvecklas.
H2 textinställningar
Gå till fliken Moduldesign och ändra H2-textinställningarna.
- Rubrik 2 Teckensnitt: Trebuchet
- Titel 2 Teckensnitt: Ultra Bold
- Titel 2 Textjustering: Vänster
- Titel 2 Textfärg: #ff0f3b
- Titel 2 Textstorlek: 100 pixlar (skrivbord), 80 pixlar (surfplatta), 60 pixlar (telefon)
- Titel 2 Brevavstånd: -5px
Lägg till en divisionsmodul
synlighet
Den andra och sista modulen vi behöver i den här raden är en delningsmodul. Se till att aktivera alternativet "Visa separator" i synlighetsinställningarna.
- Visa Divider: Ja
Färg
Gå sedan till fliken Design och ändra separatorns färg.
- Färg: #ff0f3b
dimensionering
Ändra också måttparametrarna för modulen.
- Divider vikt: 2px
- Bredd: 14%
Lägg till 2-raden
Kolumnstruktur
Nästa rad! Det är här du måste placera alla innehåll som du vill visa efter att ha svävat (skrivbord) eller klickat (surfplatta och mobil). Vi använder följande kolumnstruktur, men notera att du kan lägga till så många rader och moduler som du vill och anpassa dem efter dina behov:
Lägg till en textmodul i 1-kolumnen
Lägg till innehåll
Placera en textmodul i den första kolumnen med innehållet du väljer.
Textinställningar
Gå till fliken Design i textmodulen och ändra orienteringen av texten.
- Textorientering: Rättfärdiga
Lägg till en textmodul i 2-kolumnen
Lägg till innehåll
Lägg också till en textmodul i den andra kolumnen med innehållet du väljer.
Textinställningar
Ändra igen orienteringen för texten i modulens textinställningar.
- Textorientering: Rättfärdiga
Lägg till dimensioneringsparametrarna till avsnittet
Standardstorlek
När du har slutfört ditt avsnitt är det dags att skapa svävareffekten. Öppna sektionsinställningarna och ändra maximal höjd för olika skärmstorlekar:
- Maximal höjd: 300px (skrivbord), 280px (surfplatta), 260px (telefon)
svävar
Aktivera också svävaralternativet på maximal höjd och lägg till ett värde som är tillräckligt stort för att täcka alla element, oavsett skärmstorlek. Detta värde säkerställer att alla dina element visas utan att den ursprungliga storleken på sektionsbehållaren överskrids.
- Maximal höjd: 5000px
Vertikalt överflöd
Gå sedan till fliken Avancerat i avsnittet och ändra det vertikala överflödet. Detta döljer allt innehåll som går utöver sektionsbehållaren.
- Vertikalt överflöde: dold
övergångar
För att skapa en smidig övergång ändrar vi också övergångsinställningarna på fliken Avancerat.
- Övergångsperiod: 800ms
- Övergångstid: 500 ms
Klona hela avsnittet så många gånger du vill
När du har skapat det första flyover-avsnittet kan du klona det så många gånger du vill.
Ändra rubriktitlar
Naturligtvis vill du ändra titlarna för duplikatavsnitt.
Ändra färgerna i H2-texten
För att skapa variationer i designen ändrar vi också textfärgerna för modulerna som är markerade på utskriftsskärmen nedan.
- Titel 2 Textfärg: #c4c4c4
Ändra separatorns färger
Med separationsfärgerna som följer med textmodulerna.
- Färg: #c4c4c4
undersökningen
Nu när alla steg har slutförts, låt oss ta en sista titt på resultatet.
Avslutande tankar
I den här artikeln har vi visat dig hur du kreativt använder Divis nya alternativ för dragbar storlek för att skapa unika interaktioner med hjälp av svävaravsnitt på vilken webbplats du skapar. Vi började med att förklara tillvägagångssättet och fortsätta med att återskapa designexemplet från grunden. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet nedan.
