W dzisiejszym samouczku pokażemy, jak możesz dynamicznie wyświetlać oferty pracy na stronie Kariery. Zaczynajmy.

Przegląd wyników

Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.

1. Utwórz stronę kariery

Dodaj nową stronę i przejdź do Visual Builder

Zacznij od utworzenia nowej strony, nadaj jej tytuł i przejdź do Visual Builder.

2. Rozpocznij tworzenie strony Kariery w interfejsie użytkownika

Dodaj pierwszą sekcję

Tło gradientowe

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

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

Dolny rozdzielacz

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

• Styl separacji: Szukaj na liście
• Wysokość dzielnika: 8 vw
• Pozioma powtarzalność dzielnika: 3x
• Układ przegródek: pod treść sekcji

rozstaw

Uzupełnij parametry sekcji, dodając niższe wypełnienie.

• Dolne wypełnienie: 200px

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H1

Dodaj moduł tekstowy do kolumny wiersza za pomocą treść H1 według własnego wyboru.

Ustawienia tekstu H1

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

• Czcionka tytułu: Montserrat
• Waga czcionki tytułu: duża
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 8 resz (komputer), 4 resz (tablet), 2.5 resz (telefon)

Dodaj moduł separacji do kolumny

widoczność

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

• Pokaż separator: Tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: #ffffff

zaklejania

I uzupełnij parametry modułu, modyfikując parametry wymiarowania.

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

Dodaj sekcję # 2

Dodaj kolejną zwykłą sekcję do strony.

Dodaj nową linię

Struktura kolumny

Dodaj nowy wiersz do sekcji przy użyciu następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny wiersza i wstaw tekst treść H2 według własnego wyboru.

Ustawienia tekstu H2

Zmodyfikuj parametry tekstowe H2 modułu w następujący sposób:

• Tytuł 2 Policja: Montserrat
• Pozycja 2 Waga polisy: ciężka
• Kolor tekstu pozycji 2: # ffa500
• Tytuł 2 Rozmiar tekstu: 2.3rem

Dodaj moduł separacji do kolumny

widoczność

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

• Pokaż separator: Tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: # ffa500

zaklejania

I uzupełnij parametry modułu, zmieniając ciężar dzielnika i maksymalną szerokość w parametrach wymiarowania.

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

Dodaj moduł blogu do kolumny

Treść

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

• Typ wiadomości: wiadomości
• Uwzględnij kategorie: Marketing
• Długość ekstraktu: 150

Elementy

W parametrach elementów jedyne dwie aktywowane przez nas opcje to:

• Pokaż więcej przycisk: Tak
• Fragment serialu: Tak

Usposobienie

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

• Układ: pełna szerokość

Ustawienia tekstu tytułowego

Zmień także ustawienia tekstu tytułowego.

• Poziom tytułu: H3
• Czcionka tytułu: Montserrat
• Rozmiar tekstu tytułu: 1.5rem

Ustawienia tekstu podstawowego

Następnie zmień ustawienia tekstu podstawowego.

• Body Police: Raleway
• Rozmiar tekstu: 1.1rem
• Wysokość linii ciała: 2.1em

Dowiedz się więcej Ustawienia tekstu

Dzięki ustawieniom tekstu dowiedz się więcej.

• Czytaj więcej Policja: Montserrat
• Dowiedz się więcej Styl czcionki: Capital
• Dowiedz się więcej Kolor tekstu: #ffffff
• Czytaj więcej Rozmiar tekstu: 1rem

rozstaw

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

• Lewy margines: 100 pikseli (komputer stacjonarny), 50 pikseli (tablet), 0 pikseli (telefon)
• Górna wyściółka: 0px
• Dolne wypełnienie: 0px

Dowiedz się więcej Button CSS

Uzupełnij ustawienia modułu, dodając przyciski odtwarzania CSS 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 linię tyle razy, ile to konieczne

Po ukończeniu linii i wszystkich jej modułów możesz sklonować ją tyle razy, ile chcesz, w zależności od liczby działów w Twojej firmie.

Edytuj zawartość modułu tekstowego

Pamiętaj o edycji zawartości H2 w każdej zduplikowanej linii.

Edytuj kategorie modułów blogu

Z kategoriami modułu Blog.

Dodaj moduł kodu do kolumny ostatniego wiersza

Wstaw kod CSS, aby stylizować pojedyncze otwarte stacje robocze

Aby zakończyć projektowanie, dodamy moduł kodu do ostatniego wiersza naszej strony 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 wynik

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

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym samouczku pokazaliśmy Ci, jak zaprezentować te dynamiczne, otwarte artykuły na swojej Stronie kariery za pomocą modułu Blog Divi. Zapraszam do pozostawienia komentarza w sekcji komentarzy poniżej.