Jak stworzyć dynamiczny szablon wpisu otwarcia pracy za pomocą kreatora motywów Divi i ACF

Kiedy używasz Divi Theme Builder w połączeniu z dynamiczną zawartością, szybko zauważysz, że zastępujesz wtyczki samodzielnie stworzonymi szablonami. W dzisiejszym samouczku pokażemy, jak stworzyć całkowicie dynamiczny szablon ogłoszenia o otwarciu pracy przy użyciu Divi Theme Builder i grupy pól ACF. Ten dynamiczny szablon wpisu z ofertami pracy jest w pełni konfigurowalny, a plik JSON można pobrać za darmo!

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 szablon stanowiska otwarcia pracy ZA DARMO

Aby położyć ręce na szablonie bezpłatnego ogłoszenia o pracę, najpierw musisz go pobrać 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 kategorie postów

Przejdź do kategorii postów

Pierwszą częścią tworzenia szablonu otwartego stanowiska pracy jest dodanie nowych kategorii stanowisk, których będziesz używać dla dodawanych otwartych stanowisk pracy. Przejdź do kategorii postów w panelu WordPress.

Dodaj kategorie stanowisk pracy

Dodaj kategorię nadrzędną i osobną kategorię dla każdego działu.

• Otwarcie pracy
  • Komunikacja
  • Projekt
  • Rozwój
  • Marketing
  • …

2. Zainstaluj ACF i skonfiguruj pola projektu

Zainstaluj i aktywuj ACF

Kontynuuj, instalując i włączając darmową wtyczkę Advanced Custom Fields.

Skonfiguruj grupę pól

Skonfiguruj nową grupę pól, przechodząc do pulpitu WordPress > Pola niestandardowe > Dodaj nowe .

Chcemy, aby grupa pól pojawiała się wyłącznie w postach, które są częścią nadrzędnej kategorii, którą dodaliśmy w poprzedniej części tego samouczka. W tym celu upewnij się, że w grupie pól obowiązują następujące reguły:

• Typ postu jest równy Post i
• Kategoria postu jest równa Otwarciu pracy

Dodaj pola

Po utworzeniu grupy pól nadszedł czas na dodanie różnych pól. Aby odtworzyć dokładnie ten sam szablon, co w podglądzie tego samouczka, będziesz potrzebować następujących pól niestandardowych:

• Obowiązki
  • Etykieta pola: Obowiązki
  • Typ pola: obszar tekstowy
• Wymagane doświadczenie
  • Etykieta terenowa: Wymagane doświadczenie
  • Typ pola: Edytor Wysiwyg
• Wymagane umiejętności
  • Etykieta pola: Wymagane umiejętności
  • Typ pola: Edytor Wysiwyg
• Kwalifikacje bonusowe
  • Etykieta pola: kwalifikacje bonusowe
  • Typ pola: Edytor Wysiwyg
• Lokalizacja
  • Etykieta pola: Lokalizacja
  • Typ pola: Tekst
• Rodzaj pracy
  • Etykieta pola: Typ pracy
  • Typ pola: Pole wyboru
  • Do wyboru: Pełny etat + Niepełny etat + Freelancer (nowa linia dla każdego wyboru)
• Zastosuj przekierowanie
  • Etykieta pola: Zastosuj przekierowanie
  • Typ pola: Url

3. Dodaj nowy wpis na blogu

Dodaj tytuł stanowiska, krótki opis i kategorie

Po uzupełnieniu grupy pól niestandardowych i wszystkich jej pól, nadszedł czas na utworzenie przykładowego ogłoszenia o otwartym stanowisku pracy. Wpisz tytuł, opis stanowiska i wybierz kategorie.

Wypełnij wszystkie pola niestandardowe

Kontynuuj, wypełniając wszystkie pola niestandardowe.

4. Utwórz nowy szablon

Przejdź do kreatora motywów Divi i dodaj nowy szablon

Gdy Twój przykładowy post na blogu jest już na miejscu, nadszedł czas, aby utworzyć szablon otwartego stanowiska pracy! Aby to zrobić, przejdź do Divi Theme Builder i kliknij „Dodaj nowy szablon”.

Używać

Użyj szablonu na postach w kategorii Otwarcie pracy.

5. Rozpocznij tworzenie treści szablonu

Teraz zacznij budować projekt, klikając „Dodaj niestandardową bryłę” i wybierając „Zbuduj niestandardową bryłę”. Spowoduje to przekierowanie do edytora szablonów.

Sekcja 1

Tło gradientowe

W edytorze szablonów Divi zauważysz sekcję. Otwórz tę sekcję i dodaj tło gradientowe.

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

Dolny rozdzielacz

Dodaj dolną przegrodę do następnej sekcji.

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

Rozstaw

I dodaj także dolną wyściółkę.

• Dolna wyściółka: 400px

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł Blurb do kolumny 1

Treści dynamiczne

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy w kolumnie 1, jest moduł Blurb. Wybierz dynamiczną zawartość lokalizacji dla pola tytułu i pozostaw pole zawartości puste.

• Tytuł: Lokalizacja

Wybierz ikonę

Kontynuuj, wybierając ikonę.

Ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikony w następujący sposób:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 25px

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu H3.

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Lato
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 1.4rem

Animacja

Na koniec usuń animację ikony w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

Clone Blurb Module i umieść duplikat w kolumnie 2

Po ukończeniu modułu Blurb w kolumnie 1 możesz go sklonować raz i umieścić duplikat w drugiej kolumnie.

Zmień dynamiczną zawartość i ikonę

Upewnij się, że zmieniłeś dynamiczną zawartość tytułu wraz z ikoną.

• Tytuł: Rodzaj pracy

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

W ostatniej kolumnie dodaj moduł przycisku. Dodaj wybraną kopię.

Dynamiczny link

Następnie wybierz link przekierowania dynamicznego zastosowania.

• URL linku przycisku: Zastosuj przekierowanie
• Cel linku przycisku: w nowej karcie

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie na różnych rozmiarach ekranu.

• Wyrównanie przycisków: w prawo (komputer stacjonarny), w lewo (tablet i telefon)

Ustawienia przycisków

Stylizuj również przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1rem
• Kolor tekstu przycisku: #ff6600
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 100px
• Czcionka przycisku: Montserrat
• Styl czcionki przycisku: wielkie litery

Rozstaw

I uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Wybierz następującą strukturę kolumn:

Dodaj moduł tekstowy do kolumny

Treści dynamiczne

Dodaj nowy moduł tekstowy do kolumny i wybierz dynamiczną zawartość tytułu posta.

• Treść dynamiczna: tytuł posta/archiwum

• Przed: <H1>
• Po: </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ść

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

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: #ffffff

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 8px
• Szerokość: 30%
• Wyrównanie modułu: do lewej

Dodaj sekcję #2

Rozstaw

Do następnej sekcji! Usuń wszystkie domyślne górne wyściółki.

• Górna wyściółka: 0px

Dodaj wiersz nr 1

Struktura kolumny

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

Rozstaw

Otwórz ustawienia wiersza i usuń domyślną górną wyściółkę.

• Górna wyściółka: 0px

Dodaj moduł treści posta do kolumny

Kolor tła

Dodaj moduł treści posta do wiersza i zmień kolor tła na biały.

• Kolor tła: #ffffff

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Raleway
• Rozmiar tekstu: 1,1 rem
• Wysokość linii tekstu: 2,1 em

Rozstaw

Następnie pobaw się wartościami odstępów na różnych rozmiarach ekranu.

• Górny margines: -300px
• Górna wyściółka: 100px (komputer stacjonarny), 50px (tablet i telefon)
• Dolna wyściółka: 100px (komputer), 50px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 50px (tablet i telefon)
• Prawe dopełnienie: 100px (komputer), 50px (tablet i telefon)

Granica

Dodaj też promień obramowania.

• Wszystkie rogi: 20px

Cień Pudełka

I uzupełnij ustawienia modułu, dodając subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,09)

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny wiersza z pewną zawartością H2.

Ustawienia tekstu H2

Zmień 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: 1,5 rem

Dodaj moduł dzielnika do kolumny

Widoczność

Następnym modułem, którego potrzebujemy, jest moduł rozdzielający. Upewnij się, że moduł „Pokaż dzielnik” jest włączony.

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: #ffa500

Rozmiary

I uzupełnij ustawienia modułu, bawiąc się ustawieniami rozmiaru.

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

Dodaj moduł tekstowy nr 2 do kolumny

Treści dynamiczne

Następnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest kolejny moduł tekstowy. Wybierz odpowiednią zawartość dynamiczną.

• Treść dynamiczna: wymagane doświadczenie

Upewnij się, że włączyłeś surowy kod HTML.

• Włącz surowy HTML: Tak

Ustawienia tekstu

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

• Czcionka tekstu: Raleway
• Rozmiar tekstu: 1,1 rem

Nieuporządkowane ustawienia tekstu listy

Zmodyfikuj również nieuporządkowaną wysokość wiersza listy.

• Nieuporządkowana wysokość linii listy: 2,3 em

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 50px
• Dolna wyściółka: 50px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Granica

Dodaj też promień obramowania.

• Wszystkie rogi: 20px

Cień Pudełka

I uzupełnij ustawienia modułu, dodając subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,09)

Dodaj wiersz nr 3

Struktura kolumny

Do ostatniego rzędu! Użyj następującej struktury kolumn:

Klonuj moduły w kolumnie 2 dwa razy i umieść duplikaty w kolumnie 1 i 2 nowego rzędu

Dwukrotnie sklonuj moduły dodane do poprzedniego wiersza i umieść duplikaty w nowym wierszu.

Zmień tekst modułu nr 1 Kopiuj

Upewnij się, że zmieniłeś kopię H2 każdego zduplikowanego modułu tekstowego.

Zmień moduł tekstowy #2 Treść dynamiczna

Wraz z treścią dynamiczną.

• Treść dynamiczna: wymagane umiejętności

• Zawartość dynamiczna: kwalifikacje bonusowe

Ponownie upewnij się, że nieprzetworzony kod HTML jest włączony dla obu modułów tekstowych zawierających zawartość dynamiczną.

• Włącz surowy HTML: Tak

6. Zapisz zmiany w kreatorze motywów i wyświetl wyniki

Po ukończeniu treści szablonu możesz zapisać wszystkie zmiany w kreatorze motywów i wyświetlić wyniki w swoim przykładowym poście o otwartej pracy!

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć dynamiczny i w pełni konfigurowalny szablon otwartego stanowiska pracy za pomocą Divi Theme Builder i wtyczki ACF. W naszym szablonie postów użyliśmy wyłącznie treści dynamicznych, co sprawia, że ​​dodawanie przyszłych wolnych stanowisk pracy do Twojej witryny nie wymaga wysiłku. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, 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.