Vill du lägga till teaserinnehåll till en rullningsbar surfplatta på Divi?

Lägga till teaserinnehåll till din webbplats kan vara en strategi marknadsföring effektiv. Detta fungerar särskilt bra för främja saker som e-böcker. Du ger dem en förhandstitt på innehållet så att de vill ha mer. 

I dagens handledning visar vi dig hur du visar upp teaserinnehåll i en rullgardinsplatta i Divi. 

För att göra detta kommer vi att dra nytta av Divis inbyggda alternativ för att förvandla en kolumn till en rullgardinsbehållare (designad för att se ut som en surfplatta) som kan innehålla vilken typ av innehåll du vill. 

Du kan använda den för främja de första kapitlen i en e-bok, se exempeldesigner från din portfölj eller någon annan typ av innehåll.

Låt oss börja!

undersökningen

Här är en snabb titt på surfplattan med rullningsbart innehåll som vi kommer att skapa i den här handledningen.

Skapa en ny sida med Divi Builder

Gå till i WordPress-instrumentpanelen "Sidor > Lägg till nytt"

Ge en titel som är vettig för dig och klicka sedan "Använd DiviBuilder"

klicka sedan på "Börja bygga"

Surfplattadesign med rullningsbart teaserinnehåll i Divi

Skapa den nedrullningsbara tablettbehållaren med en Divi-kolumn

Lägg till en rad

Börja med att skapa en rad med två kolumner med en vanlig sektion.

Inställningar för kolumn 1

Bakgrundsfärg

Öppna inställningarna för kolumn 1 och lägg till en vit bakgrund till kolumnen.

  • Bakgrund: #ffffff
Kant och marginal

Gå till fliken Designa rullgardinsmenyn Förband och ändra inställningarna enligt följande:

  • Utfyllnad (överst, botten, vänster och höger): 25px (överst, botten, vänster, höger)

Dra sedan ner alternativet Border och ändra inställningarna därefter:

  • Rundade hörn: 20px
  • Kantbredd: 30px
  • Kantfärg: #000000
Skugga låda

Dra ner alternativet för att ge surfplattans design lite djup Box skugga och lägg till följande boxskugga:

  • Box Shadow: se skärmdump
  • Box Shadow (horisontell och vertikal) Position: 5 px
  • Skuggfärg: #555555
Anpassad kolumnhöjd och bredd med CSS

Nyckeln till att göra kolumninnehåll rullningsbart är att ge det en definierad höjd. Detta kommer att få innehållet att svämma över kolumnhöjden. 

Vi vill också att surfplattans bildförhållande ska förbli konsekvent, så det är en bra idé att ge kolumnen en maximal bredd också. 

För att ge kolumnen en anpassad höjd och bredd, gå till fliken Advanced Open water och uppdatera följande:

Sous Anpassad CSS, lägg till följande CSS för skrivbordsskärmen (huvudelement):

height:650px;
max-width: 488px;

Aktivera sedan fliken för annan display och klistra in följande anpassade CSS för telefondisplayen för huvudelementet:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vertikalt spill: rulla

Som nämnts tidigare har kolonnen nu en definierad höjd som oundvikligen kommer att få innehållet i kolonnen att svämma över vertikalt.

För att säkerställa att överflödande innehåll kan ses genom att rulla nedåt i kolumnen, ställ in alternativet för vertikal översvämning för synlighet till "skrolla". För att göra detta, expandera alternativet Sikt flik Advanced Open water

  • Vertikalt spill: Bläddra

Lägg till teaser-innehåll i rullgardinskolumnen

Vid det här laget är kolumnen (eller hyllan) redo för innehåll. Du kan använda vilken Divi-modul som helst i den här kolumnen för att skapa ditt förhandsgranskningsinnehåll. 

I det här exemplet lägger vi till dummy e-boksinnehåll som kommer att bestå av en modul blurb (för att visa den första uppmaningen), en modul Bild (för att visa bokomslaget) och en modul text (för att visa några kapitel i e-boken).

Rullande CTA (Call to Action) med bokomslagsbakgrund

Det första teaserinnehållet vi kommer att lägga till är en modul blurb som kommer att fungera som en uppmaning till handling "rulla för att förhandsgranska"

Vi kommer att använda en presentationsikon, titel och bakgrund med ett bokomslag som bakgrundsbild och en färggradientöverlagring.

Lägg till en modul i spaltkolumnen blurb.

Uppdatera innehållet enligt följande:

  • Titel: Bläddra för att läsa ett utdrag

Dropdown-alternativ "Bild och ikon"

  • Använd ikon: Ja
  • Ikon: se skärmdump

Dra sedan ner alternativet Bakgrund och lägg till en gradient

  • Färg på vänster sida: rbga(0,0,0,0,0.0)
  • Färg på höger sida: #ffffff
  • Startposition: 20%
  • Slutposition: 85 %
  • Fyrkantig gradient ovanför bakgrundsbild : JA

Lägg sedan till bokomslagsbilden. För bästa resultat, lägg till en bild cirka 600 x 850 px .

På fliken Design uppdaterar du följande stilar för ikonen och titeln:

  • Ikonfärg: #000000
  • Ikonteckensnittsstorlek: 80px (dator och surfplatta), 70px (telefon)
  • Titel Teckensnitt: Montserrat
  • Titel Textjustering: centrerad
  • Textfärg: #000000

Sedan kan vi flytta ikonen och rubriken ner i kolumnen genom att lägga till en övre marginal.

Uppdatera följande om du vill ha storlek och utrymme för texten:

  •  Höjd: 100%
  • Marginal: 25px (botten)
  • Utfyllnad: 400px (dator och surfplatta), 270px (telefon)

Bilden av bokomslaget

Nästa teaserinnehåll kommer att vara en bild av bokomslaget. För att lägga till en bild lägger du bara till en bildmodul under Blurb-modulen.

Ladda sedan upp samma bild som används för blurb-bakgrunden.

Innehållet i textförhandsgranskningen

Vårt sista teaserinnehåll kommer att vara texten som kommer att innehålla några fiktiva kapitel från vår e-bok. För att lägga till texten, lägg till en ny textmodul under föregående bild.

Divi-surfplatta med rullande innehåll för teasers

Klistra sedan in följande HTML-kod i brödtextfliken:

<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Under fliken Design uppdaterar du rubrikstilen och avståndet enligt följande (Rubrik 3):

  • Typsnitt: Montserrat
  • Teckensnittsvikt: Ultra fet
  • Textjustering: Centrerad
  • Linjehöjd: 1,3 em
  • Vaddering: 10 % (topp och botten)

Några sista detaljer

Uppdatera radparametrar

Med innehållet på plats måste vi göra några justeringar av raden för att göra designen mer responsiv. Öppna Linjeinställningar och uppdatera följande:

  • Bredd: 100% (dator), 90% (surfplatta och telefon)
  • Max bredd: 1px (dator), 080px (surfplatta och telefon)

Lägg till ytterligare innehåll i kolumn 2

Vid det här laget kan vi lägga till ytterligare innehåll till kolumn 2 om det behövs. För det här exemplet lade vi till en textmodul och en knappmodul och anpassade dem på samma sätt som designen som visas i vårt e-bokslayoutpaket.

Ladda ner DIVI nu!!!

Slutresultat

Låt oss nu se det slutliga resultatet.

Kolla in rullgardinsmenyn som finns på den bärbara surfplattan.

Scrollbar surfplatta på Divi

Och det är så designen hamnar på surfplattan och telefonens skärm.

Scrollbar surfplatta på Divi
Scrollbar surfplatta på Divi

Slutsats

Det kanske bästa med den här rullande surfplattans design är dess mångsidighet. Eftersom surfplattan i huvudsak är en Divi-kolumn kan du använda valfritt antal Divi-moduler (text, bild, knapp) för att designa innehållet du vill visa upp. 

Hoppas detta hjälper dig nästa gång du behöver visa upp lite teaserinnehåll på din webbplats.

Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen 

Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Du kan dock också konsultera våra resurserom du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tidendela den här artikeln på dina olika sociala nätverk.

.