In de tutorial van vandaag laten we je zien hoe je vacatures dynamisch kunt weergeven op je carrièrepagina. Laten we beginnen.
Resultaat overzicht
Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.
1. Maak een carrièrepagina
Voeg een nieuwe pagina toe en schakel over naar Visual Builder
Begin met het maken van een nieuwe pagina, geef uw pagina een titel en ga naar Visual Builder.
2. Begin met het maken van de carrièrepagina op de frontend
Voeg de eerste sectie toe
Achtergrond met kleurovergang
Voeg de eerste sectie toe aan de pagina, open de sectie-instellingen en gebruik een verloopachtergrond.
- Kleur 1: # ff6600
- Kleur 2: # fbff30
- Verlooprichting: 126 graden
Lagere scheidingswand
Gebruik ook een scheidingswand in het onderste gedeelte.
- Stijl van scheiding: zoeken in de lijst
- Divider hoogte: 8vw
- Horizontale herhaling van de verdeler: 3x
- Opstelling van verdelers: onder de inhoud van de sectie
tussenruimte
Voltooi de sectieparameters door lagere opvulling toe te voegen.
- Vulling onderkant: 200px
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe aan de kolom
Voeg H1-inhoud toe
Voeg een tekstmodule toe aan de rijkolom met inhoud H1 naar keuze.
H1 tekstinstellingen
Schakel over naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen dienovereenkomstig:
- Titel lettertype: Montserrat
- Gewicht lettertype titel: zwaar
- Kleur koptekst: #ffffff
- Tekstgrootte koptekst: 8rem (desktop), 4rem (tablet), 2.5rem (telefoon)
Voeg een scheidingsmodule toe aan de kolom
zichtbaarheid
Voeg net onder de tekstmodule een scheidingsmodule toe. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Wijzig vervolgens de lijnkleur van de module.
- Lijnkleur: #ffffff
sizing
En voltooi de moduleparameters door de dimensioneringsparameters te wijzigen.
- Gewicht verdeler: 8px
- Breedte: 30%
Voeg sectie # 2 toe
Voeg nog een normaal gedeelte toe aan de pagina.
Voeg een nieuwe regel toe
Kolomstructuur
Voeg een nieuwe regel toe aan de sectie met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe aan de kolom
Voeg H2-inhoud toe
Voeg een tekstmodule toe aan de rijkolom en voeg tekst in inhoud H2 naar keuze.
H2 tekstinstellingen
Wijzig de H2-tekstparameters van de module als volgt:
- Titel 2 Politie: Montserrat
- Item 2 Gewicht van het beleid: zwaar
- Tekstkleur van item 2: # ffa500
- Titel 2 Tekstgrootte: 2.3rem
Voeg een scheidingsmodule toe aan de kolom
zichtbaarheid
De volgende module die we in deze kolom nodig hebben, is een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Wijzig vervolgens de lijnkleur van de module.
- Lijnkleur: # ffa500
sizing
En voltooi de moduleparameters door het gewicht van de verdeler en de maximale breedte in de maatparameters te wijzigen.
- Gewicht verdeler: 6px
- Maximale breedte: 80 px
Voeg een blogmodule toe aan de kolom
Inhoud
Om de verschillende vacatures weer te geven, zullen we een blogmodule gebruiken die we aanpassen aan onze behoeften. Zorg ervoor dat de volgende inhoudinstellingen van toepassing zijn:
- Soort bericht: Berichten
- Voeg categorieën toe: Marketing
- Extractie lengte: 150
Communie
In de parameters van de elementen zijn de enige twee opties die we activeren de volgende:
- Toon meer knop: Ja
- Fragment uit de show: Ja
Aanleg
Schakel over naar het tabblad moduleontwerp en zorg ervoor dat u een lay-out over de volledige breedte gebruikt.
- Indeling: volledige breedte
Instellingen voor titeltekst
Wijzig ook de titeltekstinstellingen.
- Titel niveau: H3
- Titel lettertype: Montserrat
- Tekstgrootte titel: 1.5 rem
Instellingen hoofdtekst
Wijzig vervolgens de instellingen voor de hoofdtekst.
- Lichaamspolitie: Raleway
- Tekstlichaamsgrootte: 1.1rem
- Hoogte van de lichaamslijn: 2.1em
Meer informatie Tekstinstellingen
Met de tekstinstellingen leert u meer.
- Lees meer Politie: Montserrat
- Meer informatie Letterstijl: Capital
- Meer informatie Tekstkleur: #ffffff
- Lees meer Tekstgrootte: 1rem
tussenruimte
Voeg aangepaste marges en opvulwaarden toe aan de afstandsinstellingen.
- Linkermarge: 100 px (desktop), 50 px (tablet), 0 px (telefoon)
- Bovenste vulling: 0 px
- Vulling onderkant: 0px
Meer informatie Knop CSS
En voltooi de module-instellingen door CSS-afspeelknoppen toe te voegen op het tabblad Geavanceerd.
max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;
Kloon de lijn zo vaak als nodig
Nadat u de lijn en alle modules hebt voltooid, kunt u deze zo vaak als u wilt klonen, afhankelijk van het aantal afdelingen in uw bedrijf.
Bewerk de inhoud van de tekstmodule
Zorg ervoor dat u de H2-inhoud van elke dubbele regel bewerkt.
Bewerk categorieën van blogmodules
Met de categorieën van de Blog-module.
Voeg een codemodule toe aan de kolom van de laatste regel
Voeg CSS-code in om afzonderlijke open werkstations te stileren
Om het ontwerp te voltooien, voegen we een codemodule toe aan de laatste regel van onze pagina en voegen we de volgende regels CSS-code in:
<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. Sla het paginaontwerp op en geef het resultaat weer
Als u klaar bent met het ontwerpen van de pagina, kunt u alle wijzigingen opslaan, Visual Builder afsluiten en het resultaat bekijken!
Eindresultaat
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Final gedachten
In deze zelfstudie hebben we u laten zien hoe u deze dynamische, open artikelen op uw carrièrepagina kunt presenteren met behulp van de blogmodule van Divi. Laat gerust een reactie achter in de commentaarsectie hieronder.
hallo, ik ben bij het gedeelte waar je code moet invoegen, maar wanneer ik opsla en naar de site ga, wordt de stijl niet toegepast en verschijnt de code online zonder de stijltags. Dank u voor uw hulp.
Goede dag!