Jak stworzyć sekcję Dynamic Careers Job Listing z modułem Divi's Blog?

W poprzednim samouczku Divi pokazaliśmy, jak stworzyć całkowicie dynamiczny szablon otwartego stanowiska pracy za pomocą Theme Buildera Divi i wtyczki Advanced Custom Fields. W dzisiejszym samouczku pokażemy Ci, w jaki sposób możesz dynamicznie prezentować otwarte stanowiska pracy na swojej stronie kariery. Ten samouczek jest kontynuacją posta o szablonie otwartego stanowiska pracy, więc upewnij się, że najpierw odtworzyłeś szablon, a następnie wróć do tego samouczka.

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ dynamicznych ofert pracy za DARMO

Aby położyć ręce na darmowym, dynamicznym układzie list ofert pracy, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Dodaj stronę Karier

Dodaj nową stronę i przełącz się na Visual Builder

Zacznij od utworzenia nowej strony, nadając jej tytuł i przełączając się na Visual Builder.

2. Zacznij budować stronę kariery w interfejsie użytkownika

Dodaj sekcję #1

Tło gradientowe

Dodaj pierwszą sekcję do strony, otwórz ustawienia sekcji i użyj gradientowego tła.

• Kolor 1: #ff6600
• Kolor 2: #fbff30
• Kierunek gradientu: 126 stopni

Dolny rozdzielacz

Użyj również przegrody dolnej części.

• Styl dzielnika: Znajdź na liście
• Wysokość dzielnika: 8vw
• Powtarzanie poziome dzielnika: 3x
• Układ rozdzielaczy: pod treścią sekcji

Rozstaw

Uzupełnij ustawienia sekcji, dodając dolną wyściółkę.

• Dolna wyściółka: 200px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H1

Dodaj moduł tekstowy do kolumny wiersza z wybraną zawartością H1.

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Montserrat
• Grubość czcionki nagłówka: Ciężka
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 8rem (komputer), 4rem (tablet), 2,5rem (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

Tuż pod modułem tekstowym dodaj moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: #ffffff

Rozmiary

I uzupełnij ustawienia modułu, zmieniając ustawienia rozmiaru.

• Waga dzielnika: 8px
• Szerokość: 30%

Dodaj sekcję #2

Dodaj kolejną zwykłą sekcję do strony.

Dodaj nowy wiersz

Struktura kolumny

Dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny wiersza i wstaw wybrane przez siebie treści H2.

Ustawienia tekstu H2

Zmodyfikuj ustawienia tekstu H2 modułu w następujący sposób:

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: Ciężka
• Kolor tekstu nagłówka 2: #ffa500
• Rozmiar tekstu nagłówka 2: 2.3rem

Dodaj moduł dzielnika do kolumny

Widoczność

Następnym modułem, którego potrzebujemy w tej kolumnie, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmodyfikuj kolor linii modułu.

• Kolor linii: #ffa500

Rozmiary

I uzupełnij ustawienia modułu, zmieniając wagę przekładki i maksymalną szerokość w ustawieniach rozmiaru.

• Waga dzielnika: 6px
• Maksymalna szerokość: 80px

Dodaj moduł bloga do kolumny

Zadowolony

Aby wyświetlić różne otwarte stanowiska pracy, użyjemy modułu bloga, który dostosujemy do naszych potrzeb. Upewnij się, że obowiązują następujące ustawienia treści:

• Typ postu: Posty
• Uwzględnij kategorie: Marketing
• Długość fragmentu: 150

Elementy

W ustawieniach elementów jedyne dwie opcje, które włączamy, to:

• Pokaż przycisk Czytaj więcej: Tak
• Pokaż fragment: Tak

Układ

Przejdź do karty projektu modułu i upewnij się, że używasz układu o pełnej szerokości.

• Układ: pełna szerokość

Ustawienia tekstu tytułu

Zmień również ustawienia tekstu tytułu.

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Montserrat
• Rozmiar tekstu tytułu: 1,5 rem

Ustawienia tekstu podstawowego

Następnie zmodyfikuj ustawienia tekstu podstawowego.

• Czcionka ciała: Raleway
• Rozmiar tekstu ciała: 1,1 rem
• Wysokość linii ciała: 2.1em

Przeczytaj więcej ustawień tekstu

Wraz z czytaj więcej ustawień tekstu.

• Czytaj więcej Czcionka: Montserrat
• Czytaj więcej Styl czcionki: Wielkie litery
• Czytaj więcej Kolor tekstu: #ffffff
• Czytaj więcej Rozmiar tekstu: 1rem

Rozstaw

Dodaj niestandardowe wartości marginesów i dopełnienia do ustawień odstępów.

• Lewy margines: 100px (komputer), 50px (tablet), 0px (telefon)
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Czytaj więcej CSS przycisku

I uzupełnij ustawienia modułu, dodając kilka CSS przycisku Czytaj więcej w zakładce Zaawansowane.

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

Klonuj rząd tyle razy, ile potrzeba

Po ukończeniu wiersza i wszystkich jego modułów możesz go sklonować dowolną liczbę razy, w zależności od tego, ile działów ma Twoja firma.

Zmień zawartość modułu tekstowego

Upewnij się, że zmieniłeś zawartość H2 każdego zduplikowanego wiersza.

Zmień kategorie modułów blogów

Wraz z kategoriami modułu Blog.

Dodaj moduł kodu do kolumny ostatniego wiersza

Wstaw kod CSS, aby indywidualnie stylizować otwarte stanowiska pracy

Aby ukończyć projekt, dodamy moduł kodu do ostatniego wiersza na naszej stronie i wstawimy następujące wiersze kodu 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. Zapisz projekt strony i wyświetl wyniki

Po zakończeniu projektowania strony możesz zapisać wszystkie zmiany, wyjść z programu Visual Builder i wyświetlić wynik!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

Ten samouczek jest kontynuacją poprzedniego samouczka, w którym pokazaliśmy, jak utworzyć szablon otwartego stanowiska pracy. W tym samouczku poszliśmy o krok dalej i pokazaliśmy, jak zaprezentować te dynamiczne otwarte stanowiska pracy na swojej stronie kariery za pomocą modułu blogu Divi. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.