Chceli by ste pridať obsah upútavky do rolovacieho tabletu na Divi?
Pridávanie obsahu upútavky do vášho webové stránky môže byť stratégia marketing efektívne. Toto funguje obzvlášť dobre pre podporovať veci ako e-knihy. Dáte im ukážku obsahu, aby chceli viac.
V dnešnom návode vám ukážeme, ako predviesť obsah upútavky v rozbaľovacom tablete v Divi.
Aby sme to dosiahli, využijeme vstavané možnosti Divi na premenu stĺpca na rozbaľovací kontajner (navrhnutý tak, aby vyzeral ako tablet), ktorý môže obsahovať akýkoľvek typ obsahu, ktorý chcete.
Môžete ho použiť na podporovať v prvých kapitolách akejkoľvek elektronickej knihy si prezrite vzorové návrhy z vášho portfólia alebo akýkoľvek iný typ obsahu.
Začnime!
prehľad
Tu je rýchly pohľad na tablet s rolovateľným obsahom, ktorý vytvoríme v tomto návode.
Vytvorte novú stránku pomocou Divi Builder
Na hlavnom paneli WordPress prejdite na „Stránky > Pridať nový“
Zadajte názov, ktorý vám dáva zmysel, a potom kliknite „Použiť DiviBuilder“
potom kliknite na tlačidlo "Začať budovať"
Dizajn tabletu s rolovateľným obsahom upútavky v Divi
Vytvorenie rozbaľovacieho kontajnera na tablety so stĺpcom Divi
Pridajte riadok
Ak chcete začať, vytvorte riadok s dvoma stĺpcami s pravidelnou sekciou.
Nastavenia stĺpca 1
Farba pozadia
Otvorte nastavenia stĺpca 1 a pridajte do stĺpca biele pozadie.
- Pozadie: #ffffff
Hranica a okraj
Prejdite na kartu dizajn rozbaľovacia možnosť riadkovanie a zmeňte nastavenia takto:
- Výplň (hore, dole, vľavo a vpravo): 25 pixelov (hore, dole, vľavo, vpravo)
Potom vyberte možnosť Hranice a podľa toho zmeňte nastavenia:
- Zaoblené rohy: 20px
- Šírka orámovania: 30px
- Farba orámovania: #000000
Tieňová skrinka
Ak chcete dať dizajnu tabletu hĺbku, potiahnite túto možnosť nadol Shadow Box a pridajte nasledujúci tieň poľa:
- Box Shadow: pozri snímku obrazovky
- Box Shadow (horizontálne a vertikálne) Poloha: 5 px
- Farba tieňa: #555555
Vlastná výška a šírka stĺpca pomocou CSS
Kľúčom k tomu, aby bolo možné posúvať obsah stĺpca, je dať mu definovanú výšku. To spôsobí, že obsah prekročí výšku stĺpca.
Chceme tiež, aby pomer strán tabletu zostal konzistentný, preto je dobré dať stĺpcu aj maximálnu šírku.
Ak chcete stĺpcu priradiť vlastnú výšku a šírku, prejdite na kartu pokročilý a aktualizujte nasledovné:
pod Vlastné CSS, pridajte nasledujúci CSS pre zobrazenie pracovnej plochy (hlavný prvok):
height:650px;
max-width: 488px;
Potom aktivujte kartu pre iné zobrazenie a prilepte nasledujúci vlastný CSS pre displej telefónu hlavného prvku:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vertikálne pretečenie: rolovanie
Ako už bolo spomenuté, kolóna má teraz definovanú výšku, ktorá nevyhnutne spôsobí, že obsah kolóny pretečie vertikálne.
Ak chcete zabezpečiť, aby sa pretekajúci obsah mohol zobraziť posúvaním stĺpca nadol, nastavte možnosť vertikálneho pretečenia viditeľnosti na "posunúť". Ak to chcete urobiť, rozbaľte možnosť Viditeľnosť tab pokročilý
- Vertikálne pretečenie: Rolovanie
Pridajte obsah upútavky do rozbaľovacieho stĺpca
V tomto bode je stĺpec (alebo polica) pripravený na obsah. Na vytvorenie obsahu ukážky môžete použiť ľubovoľný modul Divi v tomto stĺpci.
V tomto príklade pridávame fiktívny obsah elektronickej knihy, ktorý bude pozostávať z modulu záložka (na zobrazenie úvodnej výzvy na akciu), modul Obraz (na zobrazenie obalu knihy) a modul text (pre zobrazenie niektorých kapitol elektronickej knihy).
Rolovanie CTA (Call to Action) s pozadím obálky knihy
Prvá položka obsahu upútavky, ktorú pridáme, je modul záložka ktorá bude slúžiť ako výzva na akciu „prejdi na ukážku“.
Ako obrázok na pozadí použijeme ikonu prezentácie, názov a pozadie s obálkou knihy a prekrytie s farebným prechodom.
V stĺpci tablet pridajte modul záložka.
Aktualizujte obsah nasledovne:
- Nadpis: Prejdite a prečítajte si úryvok
Rozbaľovacia možnosť "Obrázok a ikona"
- Použiť ikonu: Áno
- Ikona: pozri snímku obrazovky
Potom vyberte možnosť pozadia a pridajte gradient
- Farba ľavej strany: rbga (0,0,0,0,0.0)
- Farba pravej strany: #ffffff
- Počiatočná pozícia: 20%
- Konečná pozícia: 85%
- Štvorcový prechod nad obrázkom na pozadí: ÁNO
Potom pridajte obrázok obalu knihy. Najlepšie výsledky dosiahnete pridaním obrázka s rozmermi približne 600 x 850 pixlov .
Na karte Návrh aktualizujte nasledujúce štýly ikony a názvu:
- Farba ikony: #000000
- Veľkosť písma ikony: 80px (stolný počítač a tablet), 70px (telefón)
- Písmo názvu: Montserrat
- Zarovnanie textu nadpisu: na stred
- Farba textu: #000000
Potom môžeme presunúť ikonu a nadpis v stĺpci nadol pridaním horného okraja.
Ak chcete upraviť veľkosť a rozmiestniť reklamu, aktualizujte nasledujúce:
- výška: 100%
- Okraj: 25 pixelov (dole)
- Výplň: 400 pixelov (stolný počítač a tablet), 270 pixelov (telefón)
Obrázok obálky knihy
Ďalším obsahom upútavky bude obrázok obálky knihy. Ak chcete pridať obrázok, jednoducho pridajte modul Obrázok pod modul Blurb.
Potom nahrajte rovnaký obrázok, aký ste použili pre reklamné pozadie.
Obsah textového náhľadu
Naším posledným obsahom upútavky bude text, ktorý bude obsahovať niekoľko fiktívnych kapitol z našej elektronickej knihy. Ak chcete pridať text, pridajte nový modul Text pod predchádzajúci obrázok.
Potom prilepte nasledujúci kód HTML do karty s hlavným textom:
<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?
Na karte Návrh aktualizujte štýl nadpisu a medzery takto (Nadpis 3):
- Písmo: Montserrat
- Hmotnosť písma: Ultra Bold
- Zarovnanie textu: na stred
- Výška riadku: 1,3 em
- Výplň: 10 % (horná a spodná časť)
Pár posledných úprav
Aktualizujte parametre linky
Keď je obsah na svojom mieste, musíme urobiť nejaké úpravy v riadku, aby bol dizajn citlivejší. Otvorte Nastavenia linky a aktualizujte nasledovné:
- Šírka: 100 % (stolný počítač), 90 % (tablet a telefón)
- Maximálna šírka: 1px (stolný počítač), 080px (tablet a telefón)
Pridajte ďalší obsah do stĺpca 2
V tomto bode môžeme v prípade potreby pridať ďalší obsah do stĺpca 2. V tomto príklade sme pridali modul Text a modul Button a prispôsobili sme ich podobne ako dizajn zobrazený v našom balíku rozloženia elektronickej knihy.
Stiahnite si DIVI teraz!!!
Konečný výsledok
Teraz sa pozrime na konečný výsledok.
Pozrite si obsah rozbaľovacieho zoznamu, ktorý je k dispozícii vo vnútri tabletu prenosného počítača.
A takto sa dizajn ukladá na obrazovke tabletu a telefónu.
záver
Možno najlepšia vec na tomto dizajne rolovacieho tabletu je jeho všestrannosť. Pretože tablet je v podstate stĺpec Divi, môžete použiť ľubovoľný počet modulov Divi (text, obrázok, tlačidlo) na navrhnutie obsahu, ktorý chcete prezentovať.
Dúfam, že vám to pomôže, keď budete nabudúce potrebovať predviesť nejaký obsah upútavky webové stránky.
Ak sa chcete o Divi dozvedieť viac, neváhajte navštíviť náš katalóg Divi návody. Môžete sa tiež poradiť Ako vytvoriť stránku Blog s modulom Divi Blog
Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.
Môžete sa však tiež poradiť naše zdroje, Ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.
...
