Divi: Jak vytvořit kompaktní jezdec posudku pro záhlaví

Chtěli byste vložit kompaktní jezdec posudku pro hlavičku Divi?

Přidání posudků na váš web je efektivní způsob, jak vybudovat důvěryhodnost vaší firmy (nebo vaší značky) a vybudovat důvěru u uživatelů. Návštěvníci. 

Posuvník posudků je praktický nástroj pro prezentaci posudků na jednom místě. S ohledem na to má smysl přidat do záhlaví kompaktní posuvník posudků, aby tyto posudky byly jednou z prvních věcí, které uživatel uvidí, když navštíví váš webové stránky.

V tomto tutoriálu vám ukážeme, jak vytvořit kompaktní posuvník posudků, který zobrazí krátké posudky v záhlaví vašeho Webové stránky. 

Abychom toho dosáhli, upravíme Divi Slider Module zábavným a jedinečným způsobem.

Začněme!

Ale než budete moci objevit našeho průvodce na Divi, nejlepší téma WordPress na světě a nejjednodušší použití

přehled

Zde je kompaktní testovací posuvník, který vytvoříme pomocí modulu Divi's Slider.

A tady je ten samý jezdec posudku přidaný do globální hlavičky.

A takhle to vypadá na mobilu.

Vytvořte novou stránku pomocí Divi Builder

Chcete-li začít, budete muset provést následující:

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Jak vytvořit kompaktní jezdec posudků v Divi

Přidat nový řádek a modul posuvníku

Chcete-li začít, přidejte do sekce řádek s jedním sloupcem.

Poté přidejte na řádek modul Slider.

Upravit snímek

V části nastavení posuvníku odeberte výchozí druhý snímek pod kartou Obsaha poté kliknutím změňte nastavení pro zbývající snímek.

Obsah snímku

Pod kartou Obsah z nastavení snímku aktualizujte následující:

• Název: „Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Tlačítko: Přečíst vše
• Tělo: — Tatiana Gagelman

Po dokončení uložte nastavení snímku.

Čtěte také: Divi: Jak používat nastavení masky pozadí a možnosti transformace vzoru

Aktualizujte nastavení posuvníku

Duplikovat ovládací prvky pro posunutí a skrytí

Po aktualizaci prvního snímku pomocí obsah, duplikujte tento snímek a vytvořte jeden nebo více dalších snímků.

Poté ve skupině možností Prvky, skryjte ovládací prvky posuvníku aktualizací následujícího:

• Zobrazit ovládání: NE

Aktualizujte pozadí všech snímků

Dále přidáme pozadí, které bude použito pro všechny snímky.

Chcete-li přidat pozadí, aktualizujte následující:

• Přechod pozadí:
  • Zastavení přechodu 0 %: #000000
  • Zastavení přechodu 100 %: #000000

• Obrázek na pozadí:
  • Velikost: Fit
  • Pozice: Střed vlevo
  • Směs: Svítivost

Nastavení posuvníku

Na kartě Design, aktualizujte následující:

víko

• Použít překrytí pozadí: ANO
• Barva překrytí pozadí: rgba (0,0,0,0.7)

Název textu

• Název:
  • Úroveň nadpisu: H4
  • Písmo: Josefin Sans
  • Tloušťka písma: střední
  • Zarovnání textu: vlevo
  • Velikost textu: 16px (stolní počítač a tablet), 14px (telefon)
  • Výška řádku: 1,5 m

Tělo textu

• Tělo:
  • Písmo: Josefin Sans
  • Zarovnání textu: vlevo
  • Barva textu: #aaaaaa
  • Vzdálenost mezi písmeny: 0,05 em

knoflík

• Použít vlastní velikost pro tlačítko: ANO
• Knoflík :
  • Velikost textu: 1 em
  • Barva textu: Výchozí (Počítač), #000 (Při umístění kurzoru myši)
  • Barva pozadí (počítač): rgba (255,255,255,0.19)
  • Barva pozadí (umístění myši): #ffffff
  • Šířka okraje: 0 pixelů
  • Vzdálenost mezi písmeny: 0,05 em
  • Písmo: Josefin Sans
  • Okraj: 0px (nahoře a dole)
  • Výplň: 0px (nahoře a dole), 0,6 em (vlevo a vpravo)

Automatické vyplňování a animace

Dále aktualizujte vzdálenost posuvníku, aby byla kompaktní, a nastavte požadovanou rychlost automatické animace.

• Okraj: 0px (nahoře a dole)
• Polstrování: 1 em (nahoře a dole), 5 % (levý a pravý)
• Automatická animace: ZAPNUTO
• Rychlost automatické animace: 3500

Vlastní CSS

Na kartě pokročilý, přidejte následující vlastní CSS pro aktualizaci stylu každého prvku posuvníku (nadpis, tlačítko a šipky)

Název snímku

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Tím zajistíte, že název snímku nebude vytvářet zalomení řádku na menších obrazovkách.

Posuvné tlačítko

position:absolute;
bottom: 1em;
right: 6%;

To dává tlačítku absolutní polohu, takže je umístěno hluboko pod nadpisem a napravo od snímku, čímž je posuvník ještě kompaktnější.

Přetáhněte šipky

font-size: 30px;
margin-top: -15px;

Pouze zmenšuje šipky pro navigaci posuvníku, aby vyhovovaly kompaktní velikosti posuvníku.

Tip: Přidejte stejnou barvu pozadí do sloupce pro hladší přechody snímků

Chcete-li to provést, otevřete nastavení nadřazeného sloupce posuvníku a přidejte následující barvu pozadí:

• Pozadí: #000000

Přidání obrázků pozadí autora na snímek

Chcete-li do snímku zahrnout obrázek pozadí autora, můžete tak učinit přidáním obrázku pozadí ke každému snímku.

Jakmile přidáte obrázek na pozadí na snímek, obrázek na pozadí zdědí styly, které jsou již na místě pod nastavením posuvníku (nikoli snímku).

Výsledek

Podívejte se na konečný výsledek.

Přidání kompaktního jezdce posudku do šablony záhlaví

Uložte modul do knihovny Divi

Než budeme moci přidat kompaktní jezdec posudku do globální hlavičky, musíme nejprve zaregistrovat modul v knihovně Divi. 

Můžete to udělat tak, že umístíte kurzor myši na modul Slider a kliknete na tlačítko " Přidat do knihovny“. Poté rozvržení pojmenujte a klikněte na tlačítko " Uložit do knihovny".

Do šablony záhlaví přidáno kompaktní rozvržení modulu posudku

Upravit vlastní záhlaví

Jakmile bude nový modul jezdce reference uložen do knihovny, jsme připraveni jej přidat do vlastní hlavičky.

Přístup k Divi > Tvůrce motivůa poté klikněte na ikonu, která vám umožní upravit " Vlastní záhlaví".

Vložte uložený modul jezdce posudku z knihovny

V editoru rozvržení záhlaví kliknutím přidejte modul kompaktního jezdce posudku tam, kde ho chcete zobrazit.

V mod "InsertModule", vyberte kartu "Přidat z knihovny". Najděte kompaktní jezdec posudků, který jste dříve uložili v knihovně, a vyberte jej.

Po načtení uložte změny.

Viz také: Divi: Jak zobrazit modul Fullwidth Header na celou obrazovku

Konečný výsledek

Níže je posuvník doporučení přidaný do globálního záhlaví.

Zde máme jezdec s doporučením bez obrázků na pozadí autora.

A takhle to vypadá na mobilu.

Stáhněte si DIVI hned teď!!!

Proč investovat do čističky vzduchu?

Kompaktní posuvník posudků může být novým přírůstkem do záhlaví čehokoli Webové stránky snaží se zvýšit důvěryhodnost svých služeb na nejviditelnějším místě svých webových stránek. 

Můžete jej také použít k přesměrování Návštěvníci na stránku s doporučeními nebo na prodejní stránku, abyste zvýšili konverze. Doufáme, že vám to bude užitečné ve vašich dalších projektech Divi.

Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...