Kako ustvariti tablico za predogled vsebine v Diviju

Rifat Divi Tutorials Apr 21, 2022

Demo/predogled artiklov je lahko uspešna marketinška taktika, če jih uporabljate na svojem spletnem mestu. To je še posebej uporabno, ko gre za promocijo digitalnih izdelkov, kot so e-knjige. Dražiš jih z okusom tega, kar pride, zato bodo zahtevali še več. V današnjem članku vas bomo naučili, kako uporabiti Divijevo pomično tablico za prikaz gradiva za dražljivke. S pomočjo vgrajenih funkcij Divi bomo stolpec spremenili v pomikajoč vsebnik (ki naj bi izgledal kot tablica), ki lahko vsebuje vse vrste informacij. S tem orodjem lahko promovirate prvih nekaj poglavij vseh modelov e-knjig iz svojega portfelja ali druge vsebine.

Dajmo, gremo!

Design Glimpse

Tukaj si lahko ogledate, kako bo izgledala tablica za predogled vsebine, ki jo je mogoče pomikati, potem ko zaključimo z oblikovanjem.

Segment načrtovanja 1. del: Struktura vsebnika

Ustvarite novo stran na nadzorni plošči in nadaljujte z Uredi z Divi . Nato izberite Zgradi iz nič in začnite graditi.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Dodajanje vrstic

Začnimo z vrstico z dvema stolpcem. Ne pozabite, da to ustvarjamo v privzetem razdelku.

Nastavitve: stolpec 1

Barva ozadja

Nato pojdite na možnosti stolpca 1 in mu dajte belo ozadje.

  • Barva ozadja: #ffffff

Obroba in oblazinjenje

Zdaj dodajte nekaj oblazinjenja stolpcu in dodajte obrobo nanj.

  • Padding: 25px (zgoraj, spodaj, levo, desno)
  • Zaobljeni vogali: 20px
  • Širina obrobe: 30px
  • Barva obrobe: #000000

Škatla senca

Da bo ta zasnova nekoliko bolj podrobna in poglobljena, ji dodajmo senco loka.

  • Box Shadow: glejte posnetek zaslona
  • Horizontalni položaj sence škatle: 5px
  • Navpični položaj sence škatle: 5 slikovnih pik
  • Barva sence: #555555

Višina po meri & Širina z uporabo CSS

Če želite omogočiti brskanje po vsebini, nastavite višino stolpca na določeno vrednost. Vsebina bo zdaj presegla največjo velikost stolpca. Želimo ohraniti razmerje stranic tablice stabilno, zato je nastavitev polne širine za stolpec smiselna. Pojdite na zavihek Napredno in naredite naslednje spremembe višine in širine stolpca:

Dodajte naslednji CSS po meri v namizno različico na glavnem elementu pod možnostjo CSS po meri.

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

Zdaj dodajte kodo v mobilno različico.

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

Navpični preliv: pomikanje

Vsebina se bo sčasoma prekoračila zaradi nove nastavljene višine stolpca. Možnost vidnega navpičnega prelivanja nastavite na "pomikanje", da zagotovite, da je prelivanje materiala mogoče opaziti s pomikanjem po stolpcu.

  • Navpični preliv: pomikanje

Segment oblikovanja, 2. del: Dodajte vsebino tabličnemu računalniku

Zdaj bomo dodali nekaj vsebine v stolpec ali tablico. V notranjosti lahko prikažete vse, kar so izdelali moduli Divi. Tukaj bomo naredili e- knjigo , ki bo pokazala, kje bo nekaj vsebine, naslovna slika in akcijski gumb, ki ga ustvari modul blurb.

Gumb CTA s sliko ozadja

Tablični računalniku bomo dodali blurb modul, ki bo obiskovalca obvestil o pomikanju. Poleg ikone in besedila bomo za predogled naslovnice uporabili sliko ozadja.

Nastavitve modula Blurb

Naredite naslednje prilagoditve modula blurb.

  • Naslov: Pomaknite se do Predogled
  • Uporabi ikono: DA
  • Ikona: glej posnetek zaslona
  • Gradient ozadja Leva barva: prozorna
  • Desna barva preliva ozadja: #ffffff
  • Začetni položaj: 20%
  • Končni položaj: 85%
  • Postavite gradient nad sliko ozadja: DA

Na zavihku načrtovanja spremenite naslednje nastavitve.

  • Barva ikone: #000000
  • Velikost pisave ikone: 80px (namizni in tablični računalnik), 70px (telefon)
  • Pisava naslova: Montserrat
  • Poravnava besedila naslova: središče
  • Barva besedila naslova: #000000

Višino blurb-a lahko prilagodimo tako, da se ujema z višino stolpca, da zapolni tablico. Ker ima naš stolpec vnaprej določeno velikost, ta odstotek višine deluje. Ko bomo dodali zgornje oblazinjenje, bomo lahko premaknili ikono in naslov na dno stolpca.

Če želite povečati in premestiti blurb, posodobite naslednje:

  • Višina: 1000 x 025
  • Rob: 25px spodaj
  • Oblazinjenje: 400 slikovnih pik (namizni in tablični računalnik), 270 slikovnih pik (telefon)

Slika naslovnice knjige

Naslednji element, ki ga bomo dodali, je naslovna slika. Dodajte slikovni modul pod prejšnji modul blurb.

Uporabite isto sliko kot na modulu blurb.

Besedilna vsebina

Zadnji element na tabličnem računalniku, ki ga bomo dodali, je nekaj besedilne vsebine. Za to uporabite besedilni modul.

Nato dodajte naslednjo kodo v telo iz razdelka Besedilo .

<h3>Chapter 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>Chapter 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?

Na zavihku načrtovanje posodobite naslednje sloge.

  • Pisava naslova 3: Montserrat
  • Teža pisave naslova 3: ultra krepko
  • Naslov 3 Poravnava besedila: na sredino
  • Naslov 3 Višina vrstice: 1,3 em
  • Oblazinjenje: 10% (zgoraj & spodaj)

Segment oblikovanja, 3. del: Končni popravek

Nastavitev vrstice - posodobljeno

Zdaj, ko imamo vso vsebino na mestu, prilagodimo nastavitve vrstice, da bo bolj odzivna.

  • Širina: 100% (namizni računalnik), 90% (tableta in telefon)
  • Največja širina: 1080px (namizni računalnik), 488px (tablični računalnik in telefon)

Stolpec 2 Vsebina

Do sedaj smo opravili samo delo v stolpcu 1. Zdaj bomo dodali nekaj vsebine v stolpec 2, da bo naš dizajn bolj privlačen in očarljiv. Dodali bomo besedilne module in module gumbov, da bo dizajn bolj naraven.

Končni rezultat

Torej, tukaj je čudovita tablica za predogled vsebine, ki jo je izdelal Divi.

Zavijanje

Najpomembnejša prednost tega modula za predogled/tabličnega računalnika je, da ga lahko uporabljamo v različnih situacijah. Ker je tablica v bistvu stolpec Divi, je lahko material, ki ga želite predstaviti, oblikovan s poljubnim številom modulov Divi (besedilo, slika, gumb). Če boste morali v prihodnosti na svojem spletnem mestu ponuditi vsebino za predogled/sneak peek, upajmo, da bo to koristno. Delite svoje misli v razdelku za komentarje in ne pozabite deliti s prijatelji, ker jih morda potrebujejo!