Jak utworzyć szablon projektu portfela dynamicznego za pomocą Divi i ACF

Szukasz sposobu na usprawnienie sposobu tworzenia elementów portfolio na swojej stronie internetowej? Jeśli tak, pokochasz ten post. W tym samouczku pokażemy, jak utworzyć dynamiczny szablon projektu portfolio za pomocą narzędzia Divi's Theme Builder i wtyczki ACF. Zbudowanie szablonu projektu portfela pozwoli Ci zaprojektować treść szablonu raz i zastosować ją również do wszystkich elementów portfela, które dodasz w przyszłości. Stworzony przez nas szablon pasuje do wszystkich kreatywnych zawodów, ale to tylko wierzchołek góry lodowej. Możesz dodać dowolną liczbę pól i użyć tych w szablonie. Będziesz mógł również bezpłatnie pobrać plik JSON projektu, który odtworzymy!

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 projektu portfolio dynamicznego ZA DARMO

Ważne: będziesz musiał ręcznie dodać dynamiczną zawartość do każdego modułu po skonfigurowaniu pól ACF i przesłaniu pliku szablonu JSON do Theme Buildera.

Aby położyć swoje ręce na darmowym szablonie projektu dynamicznego portfolio, 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. Zainstaluj ACF i skonfiguruj pola projektu

Zainstaluj i aktywuj ACF

Zacznij od zainstalowania bezpłatnej wtyczki Advanced Custom Fields na swojej stronie WordPress. Po zainstalowaniu upewnij się, że go również aktywujesz.

Skonfiguruj grupę pól

Po zainstalowaniu i aktywacji wtyczki nadszedł czas, aby rozpocząć tworzenie pól niestandardowych. Przejdź do ustawień wtyczki i dodaj nową grupę pól.

Zmodyfikuj lokalizację swojej grupy pól. Chcemy, aby pojawił się tylko w naszych projektach.

• Typ postu – jest równy – Projekt

Dodaj pola

Kontynuuj, dodając nowe pole dla każdego z wymienionych poniżej elementów:

• Problem
  • Etykieta pola: Problem
  • Typ pola: obszar tekstowy
• Rozwiązanie
  • Etykieta pola: Rozwiązanie
  • Typ pola: obszar tekstowy
• Zaświadczenie
  • Etykieta pola: referencja
  • Typ pola: Tekst
• Osoba kontaktowa
  • Etykieta pola: osoba kontaktowa
  • Typ pola: Tekst
• Obraz osoby kontaktowej
  • Etykieta pola: Obraz osoby kontaktowej
  • Typ pola: Obraz
• Osoba kontaktowa Stanowisko pracy
  • Etykieta pola: Stanowisko osoby kontaktowej
  • Typ pola: Tekst
• Logo klienta
  • Etykieta pola: Logo klienta
  • Typ pola: Obraz
• Witryna klienta
  • Etykieta pola: Witryna klienta
  • Typ pola: Url
• Czas trwania projektu
  • Etykieta pola: Czas trwania projektu
  • Typ pola: Zakres
  • Dołącz: tygodnie

Wiedz, że możesz dodać tyle pól, ile chcesz, w zależności od szablonu projektu, który chcesz utworzyć. Aby odtworzyć dokładny projekt, który był pokazany na podglądzie tego posta, potrzebujesz wszystkich wymienionych powyżej pól.

2. Utwórz nowy projekt

Dodaj tytuł i opis projektu portfela

Po skonfigurowaniu grupy pól i wszystkich jej pól nadszedł czas na utworzenie przykładowego projektu. Przejdź do pulpitu WordPress, dodaj nowy projekt i wprowadź tytuł oraz opis.

Prześlij wyróżniony obraz

Następnie prześlij wybrany obraz.

Wypełnij wszystkie pola niestandardowe

Kontynuuj, wypełniając wszystkie różne pola niestandardowe dodane w pierwszej części samouczka.

3. Utwórz nowy szablon

Przejdź do kreatora motywów Divi i utwórz nowy szablon

Czas zacząć budować szablon! Przejdź do Divi Theme Builder i dodaj nowy szablon.

Używać

Zastosuj szablon do wszystkich swoich projektów.

• Użyj na: wszystkie projekty

4. Rozpocznij tworzenie treści szablonu

Kontynuuj, zaczynając budować niestandardową treść szablonu.

Sekcja 1

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i dodaj czarny kolor tła.

• Kolor tła: #000000

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 250px
• Dolna wyściółka: 250px

Granica

Dodaj również lewy i prawy dolny promień obramowania.

• Na dole po lewej: 8vw
• Na dole po prawej: 8vw

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Następnie dodaj moduł tekstowy i umieść zawartość w polu treści.

• Treść: Czas trwania projektu:

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Kolor tekstu: #a0a0a0
• Rozmiar tekstu: 1.2rem

Dodaj moduł tekstowy nr 2 do kolumny

Treści dynamiczne

Dodaj kolejny moduł tekstowy do kolumny i wybierz dynamiczną zawartość czasu trwania projektu.

• Treść dynamiczna: czas trwania projektu
• Po: tygodniach

Ustawienia tekstu

Następnie zmień ustawienia tekstowe modułu.

• Czcionka tekstu: Lora
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1,5 rem

Dodaj moduł tekstowy nr 3 do kolumny

Treści dynamiczne

Dodaj kolejny moduł tekstowy i wybierz dynamiczną zawartość tytułu posta/archiwum.

• Treść dynamiczna: tytuł posta/archiwum
• Przed: <H1>
• Po: </H1>

Ustawienia tekstu H1

Stylizuj ustawienia tekstu H1 modułu.

• Czcionka nagłówka: Montserrat
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 6rem (komputer), 3rem (tablet i telefon)

Rozstaw

Uzupełnij ustawienia modułu, dodając trochę górnego i dolnego marginesu.

• Górny margines: 100px
• Margines dolny: 100px

Dodaj moduł treści posta

Ustawienia tekstu

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie, jest moduł treści posta. To pokaże opis twojego projektu. Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Lora
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1,5 rem (komputer stacjonarny), 0,9 rem
• Wysokość linii tekstu: 2em

Dodaj wiersz nr 2

Struktura kolumny

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

Dodaj moduł obrazu do kolumny 1

Treści dynamiczne

Dodaj moduł obrazu do kolumny 1 i wybierz dynamiczną zawartość logo klienta.

• Treść dynamiczna: Logo klienta

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Następnie dodaj moduł tekstowy do kolumny 2 i wprowadź wybraną kopię.

Połącz zawartość dynamiczną

Połącz moduł ze stroną internetową klienta, wybierając dynamiczną zawartość strony internetowej klienta w ustawieniach linku.

• Treść dynamiczna: Witryna klienta

Ustawienia tekstu

Następnie zmień ustawienia tekstowe modułu.

• Czcionka tekstu: Montserrat
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1,5 rem
• Wysokość linii tekstu: 1em

Rozstaw

Dodaj też niestandardową wyściółkę dolną.

• Dolna wyściółka: 50px

Granica

I uzupełnij ustawienia modułu, dodając dolną ramkę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #ffc300

Dodaj sekcję #2

Rozstaw

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

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

Dodaj wiersz

Struktura kolumny

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

Rozstaw

Otwórz ustawienia wiersza i usuń wszystkie domyślne górne dolne wyściółki.

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

Dodaj moduł obrazu do kolumny

Treści dynamiczne

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł obrazu. Połącz obraz z wyróżnionym obrazem projektu.

• Treść dynamiczna: polecany obraz

Granica

Dodaj również lewy i prawy dolny promień obramowania.

• Na dole po lewej: 8vw
• Na dole po prawej: 8vw

Dodaj sekcję #3

Rozstaw

Dodaj kolejną regularną sekcję z niestandardową górną i dolną wyściółką.

• Górna wyściółka: 250px
• Dolna wyściółka: 250px

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H2

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

Ustawienia tekstu H2

Zmień ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pogrubiona
• Rozmiar tekstu nagłówka 2: 2rem

Dodaj moduł tekstowy do kolumny 2

Treści dynamiczne

Przejdź do drugiej kolumny, dodaj moduł tekstowy i użyj dynamicznej zawartości problemu.

• Treść dynamiczna: Problem

Ustawienia tekstu

Następnie zmień ustawienia tekstowe modułu:

• Czcionka tekstu: Lora
• Rozmiar tekstu: 1,5rem (komputer stacjonarny), 0,9vw (tablet i telefon)
• Wysokość linii tekstu: 2em

Klonuj rząd

Po zakończeniu rzędu sklonuj go całkowicie.

Zmień kopię modułu tekstowego w kolumnie 1

Zmień kopię modułu tekstowego kolumny 1 zduplikowanego wiersza.

Zmień dynamiczną zawartość modułu tekstowego w kolumnie 2

Zmodyfikuj również dynamiczną zawartość modułu tekstowego w kolumnie 2 zduplikowanego wiersza.

• Treść dynamiczna: rozwiązanie

Dodaj moduł przycisku do kolumny 2 zduplikowanego wiersza

Dodaj kopię

Kontynuuj, dodając moduł przycisku do kolumny 2 zduplikowanego wiersza. Dodaj wybraną kopię.

Ustawienia przycisków

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

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1,5 rem
• Kolor tekstu przycisku: #000000
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Montserrat

Rozstaw

Uzupełnij ustawienia modułu, dodając górny margines.

• Górny margines: 100px

Dodaj sekcję #4

Kolor tła

Do następnej i ostatniej sekcji! Dodaj czarny kolor tła.

• Kolor tła: #000000

Granica

Dodaj również górny lewy i prawy promień obramowania do sekcji.

• U góry po lewej: 8vw
• U góry po prawej: 8vw

Dodaj wiersz

Struktura kolumny

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

Dodaj moduł referencji do kolumny

Treści dynamiczne

Dodaj moduł referencji do wiersza i wybierz dynamiczną zawartość dla różnych elementów wewnątrz modułu.

• Autor: Osoba kontaktowa
• Stanowisko: Osoba kontaktowa Stanowisko pracy
• Ciało: Referencje
• Obraz: Obraz osoby kontaktowej

Elementy

Następnie wyłącz ikonę cytatu.

• Pokaż ikonę wyceny: Nie

Kolor tła

Następnie zmień kolor tła modułu na czarny.

• Kolor tła: #000000

Ustawienia tekstu

Przejdź na zakładkę projektu modułu i zmień kolor tekstu.

• Kolor tekstu: jasny

Ustawienia tekstu podstawowego

Następnie zmodyfikuj ustawienia tekstu podstawowego.

• Czcionka ciała: Montserrat
• Rozmiar tekstu ciała: 2rem (komputer), 1,5rem (tablet i telefon)

Ustawienia tekstu autora

Zmień też ustawienia tekstu autora.

• Czcionka autora: Lora
• Rozmiar tekstu autora: 1.4rem (komputer stacjonarny), 0.9rem (tablet i telefon)

Ustawienia tekstu pozycji

I uzupełnij ustawienia modułu, zmieniając odpowiednio ustawienia tekstu pozycji:

• Czcionka pozycji: Lora
• Kolor tekstu pozycji: #a8a8a8
• Rozmiar tekstu pozycji: 1,4 rem (komputer stacjonarny), 0,9 rem (tablet i telefon)

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

Po zakończeniu tworzenia szablonu zapisz wszystkie zmiany Divi Theme Builder i wyświetl wynik w swoim projekcie!

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ć piękny szablon projektu portfolio za pomocą Divi Theme Builder i wtyczki ACF. To świetny sposób na usprawnienie sposobu wyświetlania projektów w witrynie. Gdy przypiszesz szablon do wszystkich swoich projektów, zostanie on automatycznie zastosowany do przyszłych dodanych przez Ciebie elementów portfolio. Udało Ci się również pobrać szablonowy plik JSON tego projektu 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.