Jak stworzyć szablon kartki z przepisami za pomocą Divi Theme Builder?

Opublikowany: 2019-11-26

Blogerzy kulinarni i twórcy przepisów wiedzą, jak ważne jest spójne spojrzenie na publikowane przepisy. Powszechnym rozwiązaniem jest użycie wtyczki karty z przepisami, ale wiąże się to z ograniczeniami projektowymi. Teraz, dzięki Divi Theme Builder, możesz stworzyć własny szablon karty z przepisami do wykorzystania w całej witrynie i blogu. Dzięki wtyczce Advanced Custom Fields (ACF) zaprojektowanie unikalnej i wielokrotnego użytku karty z przepisami jest łatwiejsze niż kiedykolwiek.

W tym poście pokażemy, jak stworzyć szablon karty z przepisami z dynamiczną zawartością. Korzystając z ustawień Divi Theme Builder, projekt można zastosować do postów na blogu, które zawierają przepisy, wybierając tę konkretną kategorię. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnego stylu kart z przepisami z własnymi, niestandardowymi polami.

Przyjrzyjmy się, jak projekt wygląda na różnych rozmiarach ekranu.

Podgląd szablonu karty przepisu

Przyjrzyjmy się, jak projekt wygląda na różnych rozmiarach ekranu.

Pulpit

Tablet

mobilny

1. Pobierz i zainstaluj wtyczkę Advanced Custom Fields

Wyszukaj i zainstaluj

Znajdź wtyczkę ACF, wyszukując „Zaawansowane pola niestandardowe” w pasku wyszukiwania wtyczki, zainstaluj ją i aktywuj.

Dodaj nową grupę pól

Kliknij na zakładkę ACF i wybierz „dodaj nowy”. Nazwij grupę „Karta Przepisu”. Dodaj pola niestandardowe pojedynczo za pomocą przycisku „dodaj pole”.

Dodaj pola niestandardowe

Dla każdego pola niestandardowego kliknij przycisk „dodaj pole”. Każdy z nich można dostosować do innego rodzaju treści. Poniższa lista określa etykietę i typ każdego pola. Dodaj słowo „przepis” na początku każdej etykiety pola, aby łatwo było je znaleźć podczas tworzenia modułów. Nazwa pola zostanie automatycznie wypełniona po dodaniu etykiety.

Tytuł przepisu

Zacznij od tytułu przepisu.

Etykieta pola: Tytuł przepisu
Typ pola: Tekst
Wymagane?: Tak
Tekst zastępczy: Tytuł przepisu
Limit znaków: 30

Autor przepisu

Następnie utwórz pole dla autora.

Etykieta pola: Autor przepisu
Typ pola: Tekst
Wymagane?: Tak
Tekst zastępczy: Autor

Czas przygotowania przepisu

Podążaj za tym z czasem przygotowania.

Etykieta pola: Czas przygotowania przepisu
Typ pola: Numer
Wymagane?: Tak
Tekst zastępczy: ##
Dopisz: Czas przygotowania:
Dołącz: min.

Porcje przepisu

Następnie porcje.

Etykieta pola: porcje przepisu
Typ pola: Numer
Wymagane?: Tak
Tekst zastępczy: ##
Dołącz: porcje:

Porada dotycząca smaku przepisu

Dodaj pole na wskazówkę dotyczącą smaku.

Etykieta pola: wskazówka dotycząca smaku przepisu
Typ pola: Tekst
Wymagane?: Tak
Dopisz: wskazówka dotycząca smaku:
Limit znaków: 40

Obraz przepisu

Teraz dodaj pole obrazu.

Etykieta pola: Obraz przepisu
Typ pola: Obraz
Wymagane?: Tak

Tytuł składników przepisu

Następnie tytuł składników.

Etykieta pola: Tytuł składników przepisu
Typ pola: Tekst
Instrukcje: po prostu napisz to samo, co tekst zastępczy.
Wymagane?: Tak
Tekst zastępczy: Składniki

Lista składników przepisu

Postępuj zgodnie z listą składników.

Etykieta pola: Lista składników przepisu
Typ pola: obszar tekstowy
Instrukcje: Dodaj spację po każdym elemencie
Wymagane?: Tak
Rzędy: 8
Nowe wiersze: Automatycznie dodaj <br>

Tytuł przygotowania przepisu

Przedostatni tytuł preparatu.

Etykieta pola: Tytuł przygotowania przepisu
Typ pola: Tekst
Instrukcje: po prostu napisz to samo, co tekst zastępczy.
Wymagane?: Tak
Tekst zastępczy: Przygotowanie

Lista przygotowania przepisów

Na koniec lista przygotowań.

Etykieta pola: Lista przygotowania przepisów
Typ pola: obszar tekstowy
Instrukcje: Dodaj spację po każdym elemencie
Wymagane?: Tak
Rzędy: 10
Nowe wiersze: Automatycznie dodaj <br>

Opublikuj grupę pól

Opublikuj grupę pól. Twoje okno grupy pól powinno wyglądać jak na poniższym zrzucie ekranu.

Jak uzyskać dostęp do zawartości wtyczki ACF dla szablonu karty przepisów w Divi Builder?

Zaawansowane pola niestandardowe można dodać do modułu Divi, klikając ikonę zawartości dynamicznej. Ta ikona znajduje się w prawym górnym rogu pola treści. Tak to wygląda:

2. Utwórz nowy szablon karty przepisu za pomocą Divi Builder

Kroki kreatora motywów Divi

1. Utwórz kategorię przepisów

Potrzebujesz kategorii o nazwie „przepisy”, aby móc przypisać do niej szablon. Dodaj go w zakładce kategorii za pośrednictwem pulpitu nawigacyjnego.

2. Otwórz Kreator motywów Divi i dodaj nowy szablon

Otwórz kreatora motywów Divi i dodaj nowy szablon.

3. Dodaj globalne ciało

Kliknij 'dodaj globalne ciało' i przypisz szablon do postów w określonych kategoriach > przepisy kulinarne. Następnie kliknij przycisk „utwórz szablon”.

4. Zbuduj niestandardowe ciało

Kliknij „dodaj globalne ciało” i wybierz „dodaj niestandardowe ciało”.

3. Odtwórz projekt karty przepisu za pomocą zawartości dynamicznej

Dodaj nową sekcję

Teraz możemy przystąpić do projektowania szablonu karty z przepisami. Gdy otworzy się kreator Divi, wybierz „buduj od podstaw”. Zacznij od dodania nowej sekcji.

Tło

W ustawieniach sekcji dodaj kolor tła.

Kolor tła: Jasnoszary #ededed

Rozmiary

Dostosuj również rozmiar na karcie projektu.

Szerokość: 100%
Maksymalna szerokość: 100%

Dodaj pierwszy wiersz

Struktura kolumny

Dodaj nowy wiersz z jedną kolumną.

Rozmiary

Przed dodaniem modułów dostosuj ustawienia rozmiaru wiersza.

Maksymalna szerokość: 90%

Ustawienia kolumny

Tło

Dostosuj ustawienia kolumn w wierszu. Najpierw dodaj kolor tła.

Kolor tła: biały #ffffff

Granica

Następnie zmodyfikuj style obramowania.

Zaokrąglone rogi: 1vw wszystkie cztery rogi
Style obramowania: wszystkie cztery strony
Szerokość: 5px
Kolor: bardzo ciemnoszary #333333

Dodaj moduł tekstowy z zawartością dynamiczną

Zadowolony

Po zakończeniu ustawień wierszy i kolumn nadszedł czas na dodanie modułów. Zacznij od dodania modułu tekstowego. W oknie zawartości wybierz dynamiczną zawartość tytułu przepisu. Po wybraniu kliknij ikonę koła zębatego i wprowadź fragmenty H1.

Treść: Tytuł przepisu
Ustawienia ciała:
- Przed: <H1>
- Po:</H1>

Tekst nagłówka

Następnie odpowiednio dostosuj ustawienia tekstu H1:

Poziom nagłówka: H1
Czcionka: Orienta
Waga: pogrubienie
Wyrównanie: Środek
Kolor: bardzo ciemnoszary #3d3d3d
Rozmiar:
- Komputer stacjonarny: 3vw
- Tablet: 4vw
- Telefon: 5vw
Odstępy między literami: 3px
Wysokość linii: 1,5 em

Rozstaw

Zmodyfikuj również wartości odstępów.

Margines dolny:
- Pulpit: -1vw
- Tablet: -2vw
- Telefon: -5vw
Górna wyściółka:
- Komputer stacjonarny + tablet: 1vw
- Telefon: 2vw
Dolna wyściółka: 0vw
Wyściółka lewa + prawa:
- Komputer stacjonarny + tablet: 3vw
- Telefon: 4vw

Dodaj drugi moduł tekstowy z dynamiczną zawartością

Zadowolony

Dodaj drugi moduł tekstowy i wybierz dynamiczną zawartość dla autora receptury.

Treść: Autor przepisu

Tekst

Następnie dostosuj styl tekstu.

Czcionka: Zakoduj Sans
Kolor: bardzo ciemnoszary #3d3d3d
Rozmiar:
- Komputer stacjonarny: 1,4vw
- Tablet: 2.4vw
- Telefon: 3vw
Wyrównanie: Środek

Rozstaw

Następnie dostosuj odstępy.

Górny margines: 1,5vw
Górna wyściółka:
- Komputer stacjonarny + tablet: 0vw
- Telefon: 2vw
Dolna wyściółka: 2vw
Wyściółka lewa + prawa:
- Komputer stacjonarny: 2vw
- Tablet + telefon: 3vw

Dodaj drugi wiersz

Struktura kolumny

Teraz dodaj drugi wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i odpowiednio dostosuj ustawienia rozmiaru:

Szerokość rynny: 2
Szerokość: 90%
Maksymalna szerokość: 100%
Wyrównanie wierszy: do lewej

Rozstaw

Następnie odstępy.

Wyściółka górna + dolna: 0,5vw
Lewa wyściółka: 10vw

Widoczność

Na koniec w zakładce Zaawansowane dostosuj widoczność.

Przepełnienie poziome: Widoczne
Przepełnienie pionowe: Widoczne

Kolumna 1 + 2 + 3 Ustawienia

Granica

Stylizuj wszystkie trzy kolumny w ten sam sposób. Najpierw przejdź do ustawień granic i wprowadź pewne zmiany. Powtórz dla wszystkich trzech kolumn.

Zaokrąglone rogi: 1vw wszystkie cztery rogi
Style obramowania: wszystkie cztery strony
Szerokość: 5px
Kolor: bardzo ciemnoszary #333333

Przekształcać

Aby nadać projektowi efekt najechania, dostosuj ustawienia transformacji w następujący sposób. Powtórz dla wszystkich trzech kolumn.

Skala transformacji po najechaniu: 105% x 105%

Dodaj moduł tekstowy do kolumny 1

Zadowolony

Dodaj moduł tekstowy i na razie pozostaw okno treści puste. Dodamy to później.

Tło

Dodaj kolor tła do modułu.

Kolor tła: limonkowy #b1e88d

Tekst nagłówka

Następnie dostosuj ustawienia tekstu H5.

Poziom nagłówka: H5
Czcionka H5: Orient
Kolor H5: bardzo ciemnoszary #3d3d3d
Rozmiar H5:
- Pulpit: 1vw
- Tablet: 2.3vw
- Telefon: 3.3vw
Wyrównanie: Środek

Rozstaw

Na koniec dostosuj wartości odstępów w następujący sposób.

Górna wyściółka:
- Pulpit: 1vw
- Tablet: 1,5VW
- Telefon: 3.5vw
Dolna wyściółka:
- Komputer stacjonarny: 0,5vw
- Tablet + telefon: 1,5vw
Wyściółka lewa + prawa:
- Komputer stacjonarny: 2vw
- Tablet + telefon: 3vw

Powiel moduł tekstowy z kolumny 1 dwa razy i przejdź do kolumn 2 i 3

W widoku szkieletowym zduplikuj moduł tekstowy w pierwszej kolumnie. Następnie przenieś duplikaty do kolumn 2 i 3.

Dodaj zawartość dynamiczną do modułu tekstowego w kolumnie 1

Dodaj dynamiczną zawartość na czas przygotowania i dostosuj ustawienia.

Treść: Czas przygotowania przepisu
Ustawienia ciała:
- Przed: <H5>Czas przygotowania:
- Po: min.</H5>

Dodaj zawartość dynamiczną do modułu tekstowego w kolumnie 2

Dodaj dynamiczną zawartość do serwowania według przepisów i dostosuj ustawienia.

Treść: Porcje przepisu
Ustawienia ciała:
- Przed: <H5>Porcje:
- Po: </H5>

Dodaj zawartość dynamiczną do modułu tekstowego w kolumnie 3

Dodaj dynamiczną zawartość końcówki smakowej i dostosuj ustawienia.

Treść: wskazówka dotycząca smaku przepisu
Ustawienia ciała:
- Przed: <H5>Wskazówka smakowa:
- Po: </H5>

Dodaj trzeci wiersz

Struktura kolumny

Teraz dodaj trzeci wiersz, używając następującej struktury kolumn:

Rozmiary

Przed dodaniem jakichkolwiek modułów dostosuj rozmiar rzędu.

Niestandardowa szerokość rynny: 2
Szerokość: 80%
Maksymalna szerokość: 100%

Rozstaw

Usuń także domyślny górny margines.

Górny margines: 0vw

Widoczność

Na koniec dostosuj widoczność w zakładce Zaawansowane.

Przepełnienie poziome: Widoczne
Przepełnienie pionowe: Widoczne

Kolumna 1 + 2 + 3 Ustawienia

Granica

Stylizuj wszystkie trzy kolumny w ten sam sposób, zaczynając od ustawień obramowania. Powtórz dla kolumn 2 i 3.

Zaokrąglone rogi: 1vw wszystkie cztery rogi
Style obramowania: wszystkie cztery strony
Szerokość: 5px
Kolor: bardzo ciemnoszary #333333

Przekształcać

Kontynuuj, dodając przekształcenie aktywowania na karcie projektu. Powtórz dla kolumn 2 i 3.

Skala transformacji po najechaniu: 105% x 105%

Dodaj moduł obrazu z dynamiczną zawartością do kolumny 1

Zadowolony

Dodaj moduł obrazu z dynamiczną zawartością do obrazu przepisu.

Obraz: Obraz przepisu

Dodaj moduł tekstowy z zawartością dynamiczną do kolumny 2

Zadowolony

Teraz dodaj moduł tekstowy z dynamiczną zawartością do tytułu składników. Kliknij ikonę koła zębatego i wprowadź fragmenty H3 w następujący sposób.

Treść tekstu: Tytuł składników przepisu
Ustawienia ciała:
- Przed: <H3>
- Po: </H3>

Tekst nagłówka

Następnie dostosuj styl tekstu nagłówka.

Poziom nagłówka: H3
H3 Czcionka: Orient
H3 Kolor: Bardzo Ciemnoszary #3d3d3d
Rozmiar H3:
- Komputer stacjonarny: 1,6vw
- Tablet: 2vw
- Telefon: 5.5vw
Wyrównanie: Środek

Rozstaw

Uzupełnij moduł, dostosowując odstępy.

Dolny margines: 0vw
Górna wyściółka:
- Komputer stacjonarny: 2vw
- Tablet: 3vw
- Telefon: 4vw
Wyściółka lewa + prawa:
- Komputer stacjonarny: 2vw
- Tablet + telefon: 3vw

Dodaj moduł rozdzielający do kolumny 2

Linia

Dodaj moduł rozdzielający i wystylizuj go w następujący sposób.

Kolor: Limonkowy #b1e88d

Rozmiary

Następnie dostosuj wartości rozmiaru.

Waga: 5px
Szerokość: 40%
Wyrównanie: w lewo

Rozstaw

Na koniec dostosuj odstępy.

Górny margines: 0vw

Dodaj moduł tekstowy z zawartością dynamiczną do kolumny 2

Zadowolony

Dodaj moduł tekstowy z dynamiczną zawartością do listy składników. Kliknij ikonę koła zębatego na karcie zawartości dynamicznej i włącz nieprzetworzony kod HTML.

Treść tekstu: Lista składników przepisu
Ustawienia treści: Włącz surowy HTML

Tekst

Następnie dostosuj tekst w następujący sposób.

Czcionka: Zakoduj Sans
Kolor: bardzo ciemnoszary #333333
Rozmiar:
- Komputer stacjonarny: 0,9vw
- Tablet: 2vw
- Telefon: 3vw

Rozstaw

Dostosuj również odstępy.

Górny margines:
- Pulpit: -1vw
- Tablet: -3vw
- Telefon: -5vw
Górna wyściółka:
- Komputer stacjonarny + tablet: 0vw
Dolna wyściółka:
- Komputer stacjonarny: 3vw
- Tablet + telefon: 4vw
Wyściółka lewa + prawa:
- Komputer stacjonarny: 3vw
- Tablet: 4vw
- Telefon: 5vw

Powiel wszystkie moduły w kolumnie 2 i przejdź do kolumny 3

W widoku szkieletowym zduplikuj wszystkie moduły w kolumnie drugiej. Przenieś zduplikowane moduły do kolumny trzeciej w tej samej kolejności.

Dodaj zawartość dynamiczną w 1. module tekstowym w kolumnie 3

Dodaj dynamiczną zawartość tytułu przygotowania.

Treść: Tytuł przygotowania przepisu

Dodaj zawartość dynamiczną w 2. module tekstowym w kolumnie 3

Dodaj także dynamiczną zawartość listy przygotowań do ostatniego modułu tekstowego kolumny.

Treść: Lista przygotowania przepisów

Dodaj czwarty wiersz

Struktura kolumny

Aby uzupełnić szablon, potrzebujemy modułu treści posta. Dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Przed dodaniem modułu dostosuj rozmiar rzędu.

Niestandardowa szerokość rynny: 2
Szerokość: 100%
Maksymalna szerokość: 80%

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

Wypełnienie lewe + prawe: 0vw

Ustawienia kolumny 1

Tło

Dostosuj kolumnę do powyższej karty przepisów. Najpierw dodaj tło.

Kolor tła: biały #ffffff

Rozstaw

Dostosuj również odstępy.

Lewa wyściółka: 0vw

Granica

Na koniec zmodyfikuj ustawienia granic.

Zaokrąglone rogi: 1vw wszystkie cztery rogi
Style obramowania: wszystkie cztery strony
Szerokość: 5px
Kolor: bardzo ciemnoszary #333333

Pozostaw kolumnę 2 pustą.

Dodaj moduł treści posta do kolumny 1

Tekst

Dodaj moduł treści posta do kolumny pierwszej i dostosuj tekst, aby pasował do szablonu karty z przepisami.

Czcionka: Zakoduj Sans
Kolor: bardzo ciemnoszary #333333
Rozmiar:
- Komputer stacjonarny: 0,9vw
- Tablet: 2vw
- Telefon: 3vw
Wysokość linii: 2em

Tekst nagłówka 1

Czcionka: Orienta
Kolor: bardzo ciemnoszary #333333
Rozmiar:
- Komputer stacjonarny: 2vw
- Tablet: 5vw
- Telefon: 6vw

Tekst nagłówka 2

Czcionka: Orienta
Kolor: bardzo ciemnoszary #333333
Rozmiar:
- Komputer stacjonarny: 1,8vw
- Tablet: 4,5vw
- Telefon: 5.5vw

Tekst nagłówka 3

Czcionka: Orienta
Kolor: bardzo ciemnoszary #333333
Rozmiar:
- Komputer stacjonarny: 1,6vw
- Tablet: 4,5vw
- Telefon: 5vw

Rozstaw

Aby dopasować styl karty receptury, dostosuj wartości odstępów.

Wyściółka górna + dolna: 2vw
Wyściółka lewa + prawa:
- Komputer stacjonarny: 4vw
- Tablet + telefon: 6vw

Jeśli chcesz zmienić kolor linii cytatu blokowego lub kolor łącza, możesz to zrobić w dostosowywaniu motywu pod kolorem akcentu.

4. Edytuj / utwórz post za pomocą ustawień wtyczki ACF i szablonu karty przepisów

Wprowadź niestandardowe pola

Otwórz lub dodaj posta. Poniżej obszaru zawartości znajdziesz wszystkie pola niestandardowe dla szablonu karty z przepisami. Aby odtworzyć ten projekt tostów z awokado, wypełnij pola w następujący sposób.

Tytuł przepisu:

Super zielone wegańskie tosty z awokado

Autor przepisu:

Magdalena Swifter – www.veganchef.com

Czas przygotowania przepisu:

Porcje przepisu:

Porada dotycząca smaku przepisu:

Użyj płatków soli morskiej i oleju z pierwszego tłoczenia

Obraz przepisu:

Obraz tosty z awokado

Tytuł składników przepisu:

Składniki

Lista składników przepisu:

3 kromki chleba pełnoziarnistego
1 Dojrzałe Awokado
100 gramów. Gotowany Bób
10g. zielone kiełki
1 posiekana cebula dymka
30g. Rozdrobniony Ser Feta
1 cytryna przekrojona na pół
Odrobina oliwy z oliwek
Posyp solą morską

Tytuł przygotowania przepisu:

Przygotowanie

Lista przygotowań przepisu:

1. Opiekaj kromki chleba według własnych upodobań.
2. Otwórz awokado, usuń miąższ, rozgnieć widelcem.
3. Wyciśnij sok z cytryny na awokado, dopraw solą.
4. Rozłóż puree z awokado na toście.
5. Posyp bób, kiełki i posiekaną dymkę.
6. Dopraw solą.
7. Dodaj pokruszony ser feta.
8. Wykończ oliwą z oliwek.

Nadaj postowi tytuł

Tytuł

Nie zapomnij dodać tytułu do swojego posta.

Przepis na tosty z awokado

Dodaj zawartość, wybierz kategorię i dodaj wyróżniony obraz

Napisz lub wstaw treść posta na blogu do zwykłego edytora. Wybierz kategorię przepisów i dodaj polecany obraz.

Podgląd szablonu karty przepisu

Raz jeszcze przyjrzyjmy się, jak gotowy post z szablonem karty z przepisami wygląda na różnych ekranach.

Pulpit

Tablet

mobilny

To okład!

Przyjrzyjmy się szybko krokom, które podjęliśmy, aby stworzyć ten projekt szablonu karty z przepisami.

Zainstaluj wtyczkę ACF.
Skonfiguruj grupę pól karty przepisów.
Dodaj pola niestandardowe.
Utwórz nowy szablon i przypisz go do postów na blogu w kategorii „przepisy”.
Użyj zawartości dynamicznej z pól ACF w modułach.
Utwórz lub edytuj post na blogu, wypełniając pola.
Dodaj treść posta na blogu.

Ponieważ ten projekt został stworzony jako szablon z dynamiczną zawartością, pozostanie spójny we wszystkich postach na blogu z przepisami, które używają niestandardowych pól wtyczki ACF. Mamy nadzieję, że ten projekt szablonu karty z przepisami zainspiruje wszelkiego rodzaju nowe i innowacyjne szablony przepisów dla Twoich blogów związanych z jedzeniem. Daj nam znać swoje przemyślenia w komentarzach.