Chceli by ste vložiť kompaktný posúvač posudku pre hlavičku Divi?
Pridanie posudkov na vašu stránku je efektívny spôsob, ako vybudovať dôveryhodnosť pre vašu firmu (alebo vašu značku) a vybudovať dôveru u používateľov. Návštevníci.
Posúvač posudkov je praktický nástroj na prezentáciu posudkov na jednom mieste. Vzhľadom na to má zmysel pridať do hlavičky kompaktný posúvač posudkov, aby boli tieto posudky jednou z prvých vecí, ktoré používateľ uvidí, keď navštívi váš webové stránky.
V tomto návode vám ukážeme, ako vytvoriť kompaktný posúvač posudkov na zobrazenie krátkych posudkov v hlavičke vášho webové stránky.
Aby sme to dosiahli, upravíme Divi Slider Module zábavným a jedinečným spôsobom.
Začnime!
Ale skôr, ako objavíte nášho sprievodcu ďalej Divi, najlepšia téma WordPress na svete a najľahšie použiteľné
prehľad
Tu je kompaktný posúvač posudkov, ktorý vytvoríme pomocou modulu Divi's Slider.
A tu je ten istý posúvač svedectva pridaný do globálnej hlavičky.
A takto to vyzerá na mobile.
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Ako vytvoriť kompaktný posúvač posudkov v Divi
Pridať nový riadok a modul posúvača
Ak chcete začať, pridajte do sekcie riadok s jedným stĺpcom.
Potom do riadku pridajte modul Slider.
Upraviť snímku
V nastaveniach posúvača odstráňte predvolenú druhú snímku pod kartou obsaha potom kliknutím zmeňte nastavenia pre zostávajúcu snímku.
Obsah snímky
Pod kartou obsah z nastavení snímky aktualizujte nasledovné:
- Názov: „Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Tlačidlo: Čítať všetko
- Telo: — Tatiana Gagelman
Po dokončení uložte nastavenia snímky.
Prečítajte si tiež: Divi: Ako používať nastavenia masky pozadia a možnosti transformácie vzoru
Aktualizujte nastavenia posúvača
Duplicitné ovládanie posúvania a skrytia
Po aktualizácii prvej snímky pomocou obsah, duplikujte túto snímku a vytvorte jednu alebo viac ďalších snímok.
Potom v skupine možností Prvky, skryte ovládacie prvky posúvača aktualizáciou nasledujúcich údajov:
- Zobraziť ovládanie: NIE
Aktualizujte pozadie všetkých snímok
Ďalej pridáme pozadie, ktoré sa použije pre všetky snímky.
Ak chcete pridať pozadie, aktualizujte nasledovné:
- Prechod pozadia:
- Gradient Stops 0%: #000000
- Zastavenie prechodu 100 %: #000000
- Obrázok na pozadí:
- Veľkosť: Fit
- Pozícia: Stred vľavo
- Zmes: Svietivosť
Nastavenia posúvača
Pod záložkou dizajn, aktualizujte nasledovné:
veko
- Použiť prekrytie na pozadí: ÁNO
- Farba prekrytia pozadia: rgba (0,0,0,0.7)
Názov textu
- Názov:
- Úroveň nadpisu: H4
- Písmo: Josefin Sans
- Hmotnosť písma: stredná
- Zarovnanie textu: vľavo
- Veľkosť textu: 16px (stolný počítač a tablet), 14px (telefón)
- Výška riadku: 1,5 m
hlavný text
- Telo:
- Písmo: Josefin Sans
- Zarovnanie textu: vľavo
- Farba textu: #aaaaaa
- Vzdialenosť medzi písmenami: 0,05 em
gombík
- Použiť vlastnú veľkosť pre tlačidlo: ÁNO
- Tlačidlo:
- Veľkosť textu: 1 em
- Farba textu: predvolená (počítač), #000 (umiestnením kurzora myši)
- Farba pozadia (počítač): rgba (255,255,255,0.19)
- Farba pozadia (umiestnenie myši): #ffffff
- Šírka okraja: 0 pixelov
- Vzdialenosť medzi písmenami: 0,05 em
- Písmo: Josefin Sans
- Okraj: 0px (hore a dole)
- Výplň: 0px (hore a dole), 0,6 em (vľavo a vpravo)
Automatická výplň a animácia
Potom aktualizujte rozstup posúvača tak, aby bol kompaktný, a nastavte požadovanú rýchlosť automatickej animácie.
- Okraj: 0 pixelov (hore a dole)
- Polstrovanie: 1 em (hore a dole), 5 % (vľavo a vpravo)
- Automatická animácia: ZAPNUTÉ
- Rýchlosť automatickej animácie: 3500
Vlastné CSS
Pod záložkou pokročilý, pridajte nasledujúci vlastný CSS na aktualizáciu štýlu každého prvku posúvača (nadpis, tlačidlo a šípky)
Názov snímky
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Tým sa zabezpečí, že názov snímky nevytvorí zlom riadku na menších obrazovkách.
Posuvné tlačidlo
position:absolute;
bottom: 1em;
right: 6%;To dáva tlačidlu absolútnu polohu, takže je dostatočne umiestnené pod nadpisom a napravo od snímky, vďaka čomu je posuvník ešte kompaktnejší.
Potiahnite šípky
font-size: 30px;
margin-top: -15px;Len zmenšuje navigačné šípky posúvača, aby vyhovovali kompaktnej veľkosti posúvača.
Tip: Pridajte rovnakú farbu pozadia do stĺpca, aby ste dosiahli plynulejšie prechody medzi snímkami
Ak to chcete urobiť, otvorte nastavenia nadradeného stĺpca posúvača a pridajte nasledujúcu farbu pozadia:
- Pozadie: #000000
Pridanie obrázkov na pozadí autora na snímku
Ak chcete do snímky zahrnúť obrázok pozadia autora, môžete tak urobiť pridaním obrázka pozadia na každú snímku.
Po pridaní obrázka pozadia na snímku obrázok pozadia zdedí štýly, ktoré sú už umiestnené pod nastaveniami posúvača (nie snímky).
výsledok
Pozrite si konečný výsledok.
Pridanie kompaktného posúvača posudku do šablóny hlavičky
Uložte modul do knižnice Divi
Predtým, ako budeme môcť pridať kompaktný posúvač posudkov do globálnej hlavičky, musíme najprv zaregistrovať modul do knižnice Divi.
Môžete to urobiť umiestnením kurzora myši na modul Slider a kliknutím na tlačidlo " Pridať do knižnice“. Potom pomenujte rozloženie a kliknite na tlačidlo " Uložiť do knižnice„.
Do šablóny hlavičky bolo pridané kompaktné rozloženie modulu posudku
Upraviť vlastnú hlavičku
Po uložení nového modulu posúvača posudkov do knižnice sme pripravení ho pridať do vlastnej hlavičky.
Prístup k Divi > Tvorca tém, potom kliknite na ikonu, ktorá vám umožní upraviť " Vlastná hlavička„.
Vložte uložený modul posúvača posudkov z knižnice
V editore rozloženia hlavičky kliknutím pridajte modul kompaktného posúvača posudkov tam, kde ho chcete zobraziť.
V mod "Vložiť modul", vyberte kartu "Pridať z knižnice". Nájdite kompaktný posúvač posudkov, ktorý ste predtým uložili v knižnici, a vyberte ho.
Po načítaní uložte zmeny.
Pozri tiež: Divi: Ako zobraziť modul Fullwidth Header na celej obrazovke
Konečný výsledok
Nižšie je uvedený posúvač posudku pridaný do globálnej hlavičky.
Tu máme posúvač svedectva bez obrázkov na pozadí autora.
A takto to vyzerá na mobile.
Stiahnite si DIVI teraz!!!
záver
Kompaktný posúvač posudkov môže byť novým prírastkom do hlavičky čohokoľvek webové stránky snaží sa zvýšiť dôveryhodnosť svojich služieb na čo najviditeľnejšom mieste svojej webovej stránky.
Môžete ho použiť aj na presmerovanie Návštevníci na stránku s posudkami alebo predajnú stránku, aby ste zvýšili konverzie. Dúfame, že to bude pre vás užitočné vo vašich ďalších projektoch Divi.
Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
