V dnešnom tutoriáli vám ukážeme, ako môžete dynamicky zobrazovať voľné pracovné miesta na svojej stránke Kariéra. Začnime.

Prehľad výsledkov

Predtým, ako sa ponoríme do tutoriálu, poďme sa rýchlo pozrieť na výsledok v rôznych veľkostiach obrazovky.

1. Vytvorte stránku Kariéra

Pridanie novej stránky a prejsť na Visual Tvorca

Začnite vytvorením novej stránky, pomenujte svoju stránku a prejdite do programu Visual Builder.

2. Spustite vytváraní stránky Voľná ​​na frontende

Pridajte prvú časť

Gradient pozadia

Pridajte prvú sekciu na stránku, otvorte nastavenia sekcie a použite gradientné pozadie.

• Farba 1: # ff6600
• Farba 2: # fbff30
• Smer sklonu: 126 °

Dolný delič

Použite tiež dolný delič profilov.

• Štýl oddelenia: Vyhľadajte v zozname
• Výška oddeľovača: 8 Vw
• Horizontálne Opakovanie delič: 3x
• Usporiadanie rozdeľovačov: pod obsah časti

vzdialenosť

Vyplniť parametre sekcii pridaním nižší odpruženie.

• Spodné čalúnenie: 200px

Pridať nový riadok

Štruktúra stĺpcov

Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:

Pridajte do stĺpca textový modul

Pridajte obsah H1

Pridajte textový modul do stĺpca riadka pomocou obsah H1 podľa vlastného výberu.

Nastavenia textu H1

Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu H1:

• Písmo názvu: Montserrat
• Hmotnosť písma názvu: ťažká
• Farba textu hlavičky: #ffffff
• Veľkosť textu hlavičky: 8rem (desktop), 4rem (tablet), 2.5rem (telefón)

Pridajte do kolóny separačný modul

viditeľnosť

Hneď pod textový modul pridajte oddeľovač. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

• Zobraziť oddeľovač: Áno

Linka

Potom zmeniť farbu čiary modulu.

• Farba čiary: #ffffff

dimenzovanie

A dokončiť parametre modulu zmenou parametrov návrhu.

• Hmotnosť deliča: 8px
• Šírka: 30%

Pridajte časť # 2

Pridajte na stránku ďalšiu pravidelnú sekciu.

Pridať nový riadok

Štruktúra stĺpcov

Pridať nový riadok do časti s použitím nasledujúcu štruktúru stĺpce:

Pridajte do stĺpca textový modul

Pridajte obsah H2

Pridajte textový modul do stĺpca riadka a vložte text obsah H2 podľa vlastného výberu.

Nastavenia textu H2

Zmena textu Nastavenie H2 modul nasledovne:

• Hlava 2 Polícia: Montserrat
• Položka 2 Váha politiky: ťažká
• Farba textu položky 2: # ffa500
• Hlava 2 Veľkosť textu: 2.3rem

Pridajte do kolóny separačný modul

viditeľnosť

Ďalším modulom, ktorý v tomto stĺpci potrebujeme, je separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

• Zobraziť oddeľovač: Áno

Linka

Potom zmeniť farbu čiary modulu.

• Farba čiary: # ffa500

dimenzovanie

A vyplniť parametre modulu zmenou hmotnosti deliteľ a maximálnu šírku v konštrukčných parametrov.

• Hmotnosť deliča: 6px
• Maximálna šírka: 80 px

Pridajte do stĺpca blogový modul

Obsah

Na zobrazenie rôznych voľných pracovných miest použijeme modul blogu, ktorý upravíme podľa našich potrieb. Uistite sa, že platia nasledujúce nastavenia obsahu:

• Typ správy: Príspevky
• Zahrnúť kategórie: Marketing
• Dĺžka extraktu: 150

Položky

V parametroch prvkov, sú len dve možnosti by sme aktivovať, sú:

• Zobraziť ďalšie tlačidlo: áno
• Vzorka show: Yes

dispozície

Prepnite na kartu návrhu modulu a uistite sa, že používate rozloženie na celú šírku.

• Dispozícia: po celej šírke

Nastavenia názvu nadpisu

Zmeňte tiež nastavenia názvu titulu.

• Úroveň Názov: H3
• Písmo názvu: Montserrat
• Veľkosť textu názvu: 1.5rem

Nastavenia textu tela

Potom zmeňte nastavenia textu tela.

• Police Telo: Raleway
• Veľkosť textu: 1.1rem
• Výška linky tela: 2.1em

Ďalšie informácie Nastavenia textu

S textovým nastavením sa dozviete viac.

• Čítať viac Police: Montserrat
• Ďalšie informácie Štýl písma: Veľké
• Viac informácií Farba textu: #ffffff
• Čítať viac Veľkosť textu: 1rem

vzdialenosť

Pridajte vlastné okraje a hodnoty výplne do nastavení medzery.

• Ľavý okraj: 100px (desktop), 50 px (tabliet) 0px (telefón)
• Horná vypchávka: 0px
• Spodné čalúnenie: 0px

Viac informácií Button CSS

A dokončite nastavenia modulu pridaním tlačidiel prehrávania CSS na karte rozšírené.

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 riadok toľkokrát, koľkokrát je to potrebné

Po dokončení linky a všetkých jej modulov ju môžete naklonovať toľkokrát, koľkokrát chcete, v závislosti od počtu oddelení vo vašej spoločnosti.

Upravte obsah textového modulu

Nezabudnite upraviť obsah H2 každého duplikovaného riadku.

Upravte kategórie blogových modulov

S kategóriami modulu Blog.

Pridajte modul kódu do stĺpca posledného riadku

Ak chcete štylizovať jednotlivé otvorené pracovné stanice, vložte kód CSS

Na dokončenie návrhu, pridáme posledný riadok kódu modul nášho CSS a vložte nasledujúce riadky kódu:

<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. Ak nie je návrh stránky a zobrazí výsledok

Akonáhle ste dokončili návrh stránky, môžete ušetriť nejaké zmeny, ukončite Visual Builder a zobrazí výsledok!

Konečný výsledok

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

záverečné myšlienky

V tomto návode sme vám ukázali, ako prezentovať tieto dynamické články s otvoreným koncom na stránke kariéry pomocou modulu Blog divi. Neváhajte a zanechajte komentár v sekcii komentárov nižšie.