Dëshironi të shtoni përmbajtje ngacmuese në një tablet me lëvizje në Divi?

Shtimi i përmbajtjes ngacmuese në faqen tuaj Site Web mund të jetë një strategji marketing efektive. Kjo funksionon veçanërisht mirë për promovojë gjëra të tilla si librat elektronikë. Ju u jepni atyre një pamje paraprake të përmbajtjes në mënyrë që ata të duan më shumë. 

Në tutorialin e sotëm, ne do t'ju tregojmë se si të shfaqni përmbajtjen e reklamave në një tabletë me drop-down në Divi. 

Për ta bërë këtë, ne do të përfitojmë nga opsionet e integruara të Divi për të kthyer një kolonë në një enë me zbritje (të krijuar për t'u dukur si një tabletë) që mund të përfshijë çdo lloj përmbajtjeje që dëshironi. 

Mund ta përdorni për promovojë kapitujt e parë të çdo libri elektronik, shfaqni modele modelesh nga portofoli juaj ose çdo lloj tjetër përmbajtjeje.

Le të fillojmë!

studim

Ja një vështrim i shpejtë i tabletit me përmbajtje të lëvizshme që do të krijojmë në këtë tutorial.

Krijo një faqe të re me Divi Builder

Në pultin e WordPress, shkoni te "Faqet > Shto të reja"

Jepni një titull që ka kuptim për ju, pastaj klikoni "Përdor DiviBuilder"

Pastaj kliko "Fillimi i ndërtimit"

Dizajni i tabletit me përmbajtje ngacmuese të lëvizshme në Divi

Krijimi i kontejnerit të tabletit me zbritje me një kolonë Divi

Shtoni një rresht

Për të filluar, krijoni një rresht me dy kolona me një seksion të rregullt.

Cilësimet e kolonës 1

Ngjyrë e sfondit

Hapni cilësimet e kolonës 1 dhe shtoni një sfond të bardhë në kolonë.

  • Sfondi: #ffffff
Kufiri dhe Margjina

Shkoni te skeda Projektimi opsioni i rënies ndarje dhe ndryshoni cilësimet si më poshtë:

  • Mbushje (lart, poshtë, majtas dhe djathtas): 25 px (lart, poshtë, majtas, djathtas)

Pastaj tërhiqni opsionin Kufi dhe ndryshoni cilësimet në përputhje me rrethanat:

  • Këndet e rrumbullakosura: 20 px
  • Gjerësia e kufirit: 30 px
  • Ngjyra e kufirit: #000000
Kuti me hije

Për t'i dhënë dizajnit të tabletit një thellësi, tërhiqeni opsionin Hija e Kutisë dhe shtoni hijen e mëposhtme të kutisë:

  • Box Shadow: shikoni pamjen e ekranit
  • Kutia e hijes (horizontale dhe vertikale) Pozicioni: 5 px
  • Ngjyra e hijes: #555555
Lartësia dhe gjerësia e personalizuar e kolonës me CSS

Çelësi për ta bërë përmbajtjen e kolonës të lëvizshme është t'i jepni asaj një lartësi të përcaktuar. Kjo do të bëjë që përmbajtja të tejmbushet në lartësinë e kolonës. 

Ne duam gjithashtu që raporti i pamjes së tabletit të qëndrojë i qëndrueshëm, kështu që është një ide e mirë t'i jepni kolonës gjithashtu një gjerësi maksimale. 

Për t'i dhënë kolonës një lartësi dhe gjerësi të personalizuar, shkoni te skeda Avancuar dhe përditësoni sa vijon:

sous Custom CSS, shtoni CSS-në e mëposhtme për ekranin e desktopit (Elementi kryesor):

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

Më pas aktivizoni skedën për ekranin tjetër dhe ngjisni CSS-në e mëposhtme të personalizuar për ekranin e telefonit të elementit kryesor:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vërshimi vertikal: lëviz

Siç u përmend më herët, kolona tani ka një lartësi të përcaktuar e cila në mënyrë të pashmangshme do të bëjë që përmbajtja e kolonës të derdhet vertikalisht.

Për të siguruar që përmbajtja e tejmbushur mund të shihet duke lëvizur poshtë kolonës, vendosni opsionin e tejkalimit vertikal të dukshmërisë në "lëviz". Për ta bërë këtë, zgjeroni opsionin Dukshmëri skedinë Avancuar

  • Vërshimi vertikal: Lëviz

Shto përmbajtjen e reklamave në kolonën rënëse

Në këtë pikë, kolona (ose rafti) është gati për përmbajtje. Ju mund të përdorni çdo modul Divi në këtë kolonë për të krijuar përmbajtjen tuaj të pamjes paraprake. 

Në këtë shembull, ne po shtojmë përmbajtjen e librit elektronik të rremë e cila do të përbëhet nga një modul njoftim (për të shfaqur thirrjen fillestare për veprim), një modul Imazh (për të shfaqur kopertinën e librit) dhe një modul Tekst (për të shfaqur disa kapituj të librit elektronik).

Lëvizje CTA (Thirrje për Veprim) me sfond të kopertinës së librit

Artikulli i parë i përmbajtjes ngacmuese që do të shtojmë është një modul njoftim e cila do të shërbejë si thirrje për veprim "Lëvizni për të parë paraprakisht"

Ne do të përdorim një ikonë prezantimi, titull dhe sfond me një kopertinë libri si imazh të sfondit dhe një mbivendosje të gradientit të ngjyrave.

Në kolonën e tabletit, shtoni një modul njoftim.

Përditësoni përmbajtjen si më poshtë:

  • Titulli: Lëvizni për të lexuar një fragment

Opsioni i zbritjes "Imazhi dhe ikona"

  • Përdorni ikonën: Po
  • Ikona: shikoni pamjen e ekranit

Pastaj tërhiqni opsionin Sfond dhe shtoni një gradient

  • Ngjyra e anës së majtë: rbga (0,0,0,0,0.0)
  • Ngjyra e anës së djathtë: #ffffff
  • Pozicioni fillestar: 20%
  • Pozicioni përfundimtar: 85%
  • Gradient katror mbi sfond Imazhi: PO

Më pas shtoni imazhin e kopertinës së librit. Për rezultate më të mira, shtoni një imazh afërsisht 600 px me 850 px .

Në skedën Dizajn, përditësoni stilet e mëposhtme për ikonën dhe titullin:

  • Ngjyra e ikonës: #000000
  • Madhësia e shkronjave të ikonës: 80 px (desktop dhe tablet), 70 px (telefon)
  • Fonti i titullit: Montserrat
  • Rreshtimi i tekstit të titullit: në qendër
  • Ngjyra e tekstit: #000000

Pastaj mund ta zhvendosim ikonën dhe titullin poshtë kolonës duke shtuar një diferencë të sipërme.

Për të madhësisë dhe hapësirës së turbullt, përditësoni sa vijon:

  •  lartësia: 100%
  • Margjina: 25 px (poshtë)
  • Mbushja: 400 px (desktop dhe tablet), 270 px (telefon)

Imazhi i kopertinës së librit

Pjesa tjetër e përmbajtjes ngacmuese do të jetë një imazh i kopertinës së librit. Për të shtuar një imazh, thjesht shtoni një modul Image poshtë modulit Blurb.

Më pas ngarkoni të njëjtin imazh të përdorur për sfondin blurb.

Përmbajtja e pamjes paraprake të tekstit

Pjesa jonë e fundit e përmbajtjes ngacmuese do të jetë teksti i cili do të përfshijë disa kapituj imagjinar nga libri ynë elektronik. Për të shtuar tekstin, shtoni një modul të ri Teksti poshtë imazhit të mëparshëm.

Tabletë Divi me përmbajtje lëvizëse për ngacmime

Pastaj ngjisni kodin e mëposhtëm HTML në skedën e tekstit të trupit:

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

Nën skedën Dizajn, përditësoni stilin e titullit dhe hapësirën si më poshtë (Titulli 3):

  • Fonti: Montserrat
  • Pesha e shkronjave: Ultra Bold
  • Rreshtimi i tekstit: në qendër
  • Lartësia e linjës: 1,3 em
  • Mbushja: 10% (lart dhe poshtë)

Disa prekje të fundit

Përditësoni parametrat e linjës

Me përmbajtjen në vend, ne duhet të bëjmë disa rregullime në rresht për ta bërë dizajnin më të përgjegjshëm. Hapni Cilësimet e linjës dhe përditësoni sa vijon:

  • Gjerësia: 100% (desktop), 90% (tableti dhe telefoni)
  • Gjerësia maksimale: 1 px (desktop), 080 px (tableti dhe telefoni)

Shtoni përmbajtje shtesë në kolonën 2

Në këtë pikë ne mund të shtojmë përmbajtje shtesë në kolonën 2 nëse është e nevojshme. Për këtë shembull, ne shtuam një modul Teksti dhe një modul Buton dhe i personalizuam ato të ngjashme me dizajnin e treguar në paketën tonë të paraqitjes së librave elektronikë.

Shkarkoni DIVI Tani!!!

Rezultati përfundimtar

Tani le të shohim rezultatin përfundimtar.

Shikoni përmbajtjen me zbritje të disponueshme brenda tabletit të laptopit.

Tableti i lëvizshëm në Divi

Dhe kjo është mënyra se si dizajni grumbullohet në ekranin e tabletit dhe telefonit.

Tableti i lëvizshëm në Divi
Tableti i lëvizshëm në Divi

Përfundim

Ndoshta gjëja më e mirë në lidhje me dizajnin e këtij tableti lëvizës është shkathtësia e tij. Për shkak se tableti është në thelb një kolonë Divi, ju mund të përdorni çdo numër modulesh Divi (tekst, imazh, buton) për të dizajnuar përmbajtjen që dëshironi të shfaqni. 

Shpresoj se kjo do t'ju ndihmojë herën tjetër që ju duhet të shfaqni disa përmbajtje ngacmuese në tuaj Site Web.

Nëse dëshironi të dini më shumë rreth Divi, mos hezitoni të vizitoni katalogun tonë të Divi tutorial. Ju gjithashtu mund të konsultoheni Si të krijoni faqen e Blog me modulin Divi Blog 

Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tonanëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por ndërkohëndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...