En av de intressanta sakerna med att bygga layouter med Divi är de många sätt vi kan närma oss en design. Moduler som innehåller innehåll är ett bra exempel. Vi kan använda deras innehållsalternativ, eller så kan vi använda dem tillsammans med andra moduler för att skapa några unika mönster. Till exempel tillåter kombinationer av moduler oss att skapa sticky/fasta element. I den här artikeln kommer vi att se hur du gör din Divi-rekommendationsmodul sticky/fasta samtidigt som du låter innehållet rulla som vanligt.
Förhandsvisning
Här är en titt på vad vi kommer att göra. Mobilversionen av den här designen kommer inte att vara sticky/fasta, så Vi visar bara skrivbordsversionen för förhandsvisningen.
My Divi Testimonial Sticky Module Exempel
Som mitt exempel använder Vi målsidan från gratis Layoutpaket för elektriska tjänster som är tillgängligt inom Divi. Den här sidan har redan en rekommendationssektion nära botten av layouten, men den har en helt annan design. Vi kommer att ersätta vittnesmålen i det avsnittet och återspegla stilen i den nya designen. Vi behåller titeln, men Vi kommer att återskapa den för att visa inställningarna.
För den här handledningen kommer Vi att bygga vittnesmålet med två moduler. Vi kommer att använda rekommendationsmodulen för att visa bilden, namnet, jobbtiteln och företaget. För betygsinnehållet använder Vi en textmodul. Textmodulen rullar som vanligt. Rekommendationsmodulen kommer att förbli på plats medan användaren rullar tills de har nått slutet av rekommendationen. Sedan rullar rekommendationsmodulen med textmodulen.
Skapa rubriken Sticky Testimonial Section
Skapa först en nytt avsnitt och lägg till a rad med en kolumn. Den här raden kommer att innehålla titeln, som kommer att centreras.
Titeltextmodul
Lägg sedan till a textmodul för titeln.
Öppna sedan textmodulens inställningar. Ändra texten till Rubrik 3 och lägg till titeln i innehållsredigeraren.
- Text: Rubrik 3
- Innehåll: Nöjda kunder
Designinställningar
Gå sedan till designfliken. Ställ in Textjustering till Centrerad.
Välj H3 för Rubriktext. Välj Chakra Petch för typsnittet. Ställ in vikten på fet och färgen på svart.
- Typsnitt: Chakra Petch
- Vikt: Fet
- Färg: #000000
Slutligen väljer du surfplatta-ikonen för textstorleken och ställ in Desktop Size till 50px, Tablet Size till 28px och Phone Size till 20px. Stäng modulens inställningar.
- Storlek: Desktop 50px, surfplatta 28px, Phone20px
Lägg till en rad för det första vittnesmålet
Nästa, lägg till en 2/3, 1/3 rad under rubriken. Den här raden kommer att innehålla det första innehållet.
Radinställningar
Öppna designfliken och aktivera Utjämna kolumnhöjder.
- Utjämna kolumnhöjder: Ja
Kolumninställningar
Öppna inställningar för den första kolumnen med radens inställningar.
Scrolla ner till Kantstilar och välj Top Border Style. Ändra bredden till 2px och färgen till #ffd600. Stäng radinställningarna. Detta kommer att lägga till en gul linje ovanför innehållet som det ursprungliga textsektionen vi ersatte.
- Kantstilar: Topp
- Översta kantfärg: #ffd600
- Bredd: 2px
Rekommendationstextmodul
Därefter lägger vi till textmodul för innehållet i sektionen. Lägg till en textmodul i den vänstra kolumnen, under den gula linjen.
Gå in i innehållet i din sektion in i innehållsredigeraren.
Gå sedan till designfliken. Välj Chakra Petch för typsnittet. Ställ in vikten på fet och färgen på svart. För textstorlek, välj 30px för skrivbordet och 14px för surfplatta. Telefoninställningen kommer att följa surfplattan automatiskt, så vi behöver inte ändra den. Ställ in textradshöjden till 2em. Detta skapar en gigantisk utskriftsrekommendation som kommer att dra uppmärksamhet.
- Typsnitt: Chakra Petch
- Vikt: Fet
- Svart färg
- Storlek: Desktop 30px, surfplatta 14px
- Linjehöjd: 2em
Scrolla ner till Textjustering och välj Centrerad. Stäng textmodulens inställningar.
Inställningar för vittnesbördsmodul
Lägg sedan till a Rekommendationsmodul till höger kolumn. Detta kommer att vara sticky/fasta och visa personens namn, företagsnamn, jobbtitel och bild.
Innehållsinställningar
Öppna modulens inställningar och lägg till innehållet i sektionen. Lämna Kroppsinnehållet tomt. Vi har använt textmodulen för det.
- Författare
- Jobbtitel
- Företag
- Bild
Scrolla ner till Bakgrund och ställ in den på vit.
Välj sedan Pin-ikon. Detta är den sticky/fasta versionen av bakgrunden som gör att bakgrunden kan ändra färg när modulen blir sticky/fast. Välj svart som bakgrundsfärg.
- Klibbig bakgrundsfärg: #000000
Citat ikon
Gå sedan till designfliken. Välj #ffd600 för citatikonens färg.
Bild
Scrolla ner till Bild och ställ in bredd och höjd till 150px. Ändra de rundade hörnen till 0px.
- Bildbredd: 150px
- Rundade hörn: 0px
Text
Scrolla ner till Textjustering och välj alternativet Centrerad. Detta centrerar författarens namn, jobbtitel och företagsnamnstext.
Författare Text
Under Författare Text, välj Chakra Petch för typsnittet och ställ in stilen till fet och centrerad för justeringen. Välj svart för den vanliga färgen. Välj Pin-ikonen och ställ in den klibbiga färgen till #ffd600. Ställ in skrivbordsstorleken till 20px och surfplattans storlek till 14px.
- Typsnitt: Chakra Petch
- Vanlig textfärg: svart
- Fäst textfärg: #ffd600
- Storlek: 20px Desktop, 14px Tablet
Positionstext
Bläddra sedan till Positionstext. Välj Exo som teckensnitt. Välj svart för den vanliga textfärgen. Klicka på Pin-ikonen och ställ in den fästa färgen till vit.
- Typsnitt: Exo
- Vanlig textfärg: #000000
- Fäst textfärg: #ffffff
Företagstext
Scrolla ner till Företagstext. Välj Exo som teckensnitt. Välj svart för den vanliga textfärgen. Klicka på Pin-ikonen och ställ in den fästa färgen till vit.
- Typsnitt: Exo
- Vanlig textfärg: #000000
- Fäst textfärg: #ffffff
Box skugga
Bläddra till Box skugga och välj det första alternativet.
- Box Shadow: alternativ för första skugga
Scrolleffekter
Slutligen, gå till fliken Avancerat och scrolla ner till Scrolleffekter. Välj Desktop och välj Stick to Top för Sticky Position. Ställ in Sticky Top Offset till 50px. Ställ in det nedre sticky/fasta elementet till kolumn. Detta talar om för modulen hur och var den ska hålla sig.
- Sticky Position: Håll dig till toppen
- Sticky Top Offset: 50px
- Nedre klibbiga element: Kolumn
Välj Tablettikon för sticky/fasta Positionen och välj Stick inte. Detta gör att modulen inte fastnar för surfplattor och telefonenheter. Stäng modulens inställningar.
- Sticky Position: Inte fast
Nu, när du rullar, fastnar rekommendationsmodulen till toppen av skärmen och ändrar färg.
När modulen är i linje med botten av kolumnen, rullar den med kolumnen.
Duplicera den första sektionen
Nästa, vi ska skapa den andra raden genom att kopiera den första raden och göra ändringar. Håll muspekaren över raden och klicka på dubblettikonen.
Slutligen öppnar du text- och rekommendationsmoduler en i taget och ersätt det tidigare innehållet med det nya betygsinnehållet. När du har gjort ändringarna stänger du modulerna och sparar din sida. Lägg till fler sektioner genom att upprepa dupliceringsprocessen. Du har nu en intressant sticky/fasta sektion med två rader som sticker ut och ser bra ut.
Resultat
Avslutande tankar
Det är vår titt på hur du gör din Divi-rekommendationsmodul sticky/fasta. Divis inställningar kan göra vilket element som helst klibbigt. När du använder moduler tillsammans, såsom textmoduler för innehåll och rekommendationsmoduler för den stödjande informationen, kan du skapa några intressanta mönster. De vittnesmål vi har skapat här är bara ett exempel på hur du använder Divis moduler och klibbiga inställningar tillsammans.