V dnešním tutoriálu vám ukážeme, jak můžete na stránce Kariéra dynamicky zobrazovat volná pracovní místa. Začněme.

Přehled výsledků

Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

1. Vytvořte stránku Kariéra

Přidejte novou stránku a přepněte do aplikace Visual Builder

Začněte vytvořením nové stránky, pojmenujte ji a přejděte do aplikace Visual Builder.

2. Začněte vytvářet stránku Kariéra na frontendu

Přidejte první část

Přechodové pozadí

Přidejte první část na stránku, otevřete nastavení sekce a použijte gradientní pozadí.

• Barva 1: # ff6600
• Barva 2: # fbff30
• Směr přechodu: 126deg

Dolní dělič

Použijte také spodní dělič.

• Styl oddělení: Hledat v seznamu
• Výška děliče: 8 Vw
• Horizontální opakování děliče: 3x
• Uspořádání přepážek: pod obsah části

vzdálenost

Doplňte parametry sekce přidáním dolního výplně.

• Spodní výplň: 200px

Přidat nový řádek

Struktura sloupců

Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:

Do sloupce přidejte textový modul

Přidat obsah H1

Přidejte textový modul do sloupce řádku pomocí obsah H1 dle vašeho výběru.

Nastavení textu H1

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu H1:

• Písmo názvu: Montserrat
• Hmotnost písma nadpisu: těžká
• Barva textu záhlaví: #ffffff
• Velikost textu záhlaví: 8rem (desktop), 4rem (tablet), 2.5rem (telefon)

Přidejte do sloupce separační modul

viditelnost

Pod textový modul přidejte oddělovací modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

• Zobrazit oddělovač: Ano

Linka

Poté změňte barvu čáry modulu.

• Barva čáry: #ffffff

dimenzování

A dokončete parametry modulu úpravou parametrů kótování.

• Hmotnost děliče: 8px
• Šířka: 30%

Přidat oddíl # 2

Na stránku přidejte další běžnou sekci.

Přidat nový řádek

Struktura sloupců

Přidejte do řádku nový řádek pomocí následující struktury sloupců:

Do sloupce přidejte textový modul

Přidat obsah H2

Přidejte textový modul do sloupce řádku a vložte text obsah H2 dle vašeho výběru.

Nastavení textu H2

Upravte textové parametry H2 následujícím způsobem:

• Hlava 2 Policie: Montserrat
• Bod 2 Váha politiky: těžká
• Barva textu položky 2: # ffa500
• Název 2 Velikost textu: 2.3rem

Přidejte do sloupce separační modul

viditelnost

Další modul, který v tomto sloupci potřebujeme, je separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

• Zobrazit oddělovač: Ano

Linka

Poté změňte barvu čáry modulu.

• Barva čáry: # ffa500

dimenzování

A dokončete parametry modulu úpravou hmotnosti děliče a maximální šířky v kótovacích parametrech.

• Hmotnost děliče: 6px
• Maximální šířka: 80 px

Do sloupce přidejte modul blogu

Obsah

K zobrazení různých volných pracovních míst použijeme modul blogu, který přizpůsobíme podle našich potřeb. Ujistěte se, že platí následující nastavení obsahu:

• Typ zprávy: Zprávy
• Zahrnout kategorie: Marketing
• Délka extraktu: 150

Prvky

V parametrech prvků aktivujeme pouze dvě možnosti:

• Tlačítko Zobrazit více: Ano
• Výňatek z výstavy: Ano

Dispozice

Přepněte na kartu návrhu modulu a ujistěte se, že používáte rozložení na celou šířku.

• Rozložení: plná šířka

Nastavení textu nadpisu

Také změňte nastavení názvu titulu.

• Úroveň titulu: H3
• Písmo názvu: Montserrat
• Velikost textu nadpisu: 1.5rem

Nastavení textu těla

Poté změňte nastavení textu těla.

• Body Police: Raleway
• Velikost textu: 1.1rem
• Výška linie těla: 2.1em

Další informace Nastavení textu

S nastavením textu se dozvíte více.

• Číst dál Police: Montserrat
• Další informace Styl písma: Kapitál
• Další informace Barva textu: #ffffff
• Číst dál Velikost textu: 1rem

vzdálenost

Přidejte do nastavení mezer vlastní okraje a hodnoty odsazení.

• Levý okraj: 100 pixelů (stolní počítač), 50 pixelů (tablet), 0 pixelů (telefon)
• Horní výplň: 0px
• Spodní výplň: 0px

Další informace Button CSS

Dokončete nastavení modulu přidáním tlačítek pro přehrávání CSS na kartě Upřesnit.

max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Klonujte řádek tolikrát, kolikrát je třeba

Jakmile dokončíte linku a všechny její moduly, můžete ji klonovat, kolikrát chcete, v závislosti na počtu oddělení ve vaší společnosti.

Upravte obsah textového modulu

Nezapomeňte upravit obsah H2 každého duplikovaného řádku.

Upravit kategorie blogových modulů

S kategoriemi modulu Blog.

Přidejte modul kódu do sloupce posledního řádku

Chcete-li stylizovat jednotlivé otevřené pracovní stanice, vložte kód CSS

Abychom dokončili návrh, přidáme na poslední řádek naší stránky kódový modul a vložíme následující řádky kódu CSS:

<style>.et_pb_posts .et_pb_post {box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);padding: 50px;border-radius: 20px;background-color: #fff;}</style>

3. Uložte návrh stránky a zobrazte výsledek

Po dokončení návrhu stránky můžete uložit všechny změny, ukončit program Visual Builder a zobrazit výsledek!

Konečný výsledek

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Závěrečné myšlenky

V tomto tutoriálu jsme vám ukázali, jak předvést tyto dynamické, otevřené články na vaší Kariérní stránce pomocí modulu Blog divi. Neváhejte zanechat komentář v sekci komentářů níže.