Przejdź do głównej treści

Jak utworzyć sekcję dynamicznej listy zadań za pomocą modułu Divi Blog

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

W dzisiejszym samouczku pokażemy, jak możesz dynamicznie publikować oferty pracy na stronie kariery. Zacznijmy.

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 separatora: pod treścią 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 z wybraną zawartością H1.

Ustawienia tekstu H1

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj parametry tekstowe H1:

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

Dodaj moduł separacji do kolumny

widoczność

Tuż pod modułem tekstowym dodaj moduł separacji. 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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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:

dynamiczne kariery

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny wiersza i wstaw wybraną zawartość H2.

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ść

Kolejnym 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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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

Dodaj moduł blogu do kolumny

Treść

Do publikowania różnych ofert pracy użyjemy modułu blogu, który spersonalizujemy zgodnie z naszymi potrzebami. 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 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ł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 wypeł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

I uzupełnij parametry 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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

dynamiczne kariery

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 etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym samouczku pokazaliśmy, jak prezentować te dynamiczne i otwarte artykuły na stronie Kariery za pomocą modułu Blog Divi. Dodaj komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer