Tworzenie oszałamiających szablonów niestandardowych wpisów na temat wydarzeń za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy Ci, jak tworzyć oszałamiające niestandardowe szablony typu postów z Divi, korzystając z bezpłatnego pakietu Meetup Layout Pack. Ten samouczek dotyczący przypadków użycia jest możliwy dzięki funkcji Divi Builder Custom Post Type Support, jednej z ostatnich aktualizacji Divi. Zamierzamy stworzyć szablon, który będzie pasował do pakietu Meetup Layout Pack. Po utworzeniu tego szablonu będziesz mógł ponownie wykorzystać go do wszystkich wydarzeń, które udostępniasz w swojej witrynie.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu.

Zainstaluj wtyczkę kalendarza wydarzeń

Przejdź do wtyczek i dodaj nowy

Aby dodać niestandardowe typy wpisów do naszej witryny, użyjemy wtyczki Kalendarz wydarzeń. Jest to darmowa wtyczka, którą można znaleźć, przechodząc do pulpitu WordPress > Wtyczki > Dodaj nowy > Wyszukiwanie wtyczki Kalendarz wydarzeń .

Aktywuj wtyczkę

Po zainstalowaniu wtyczki upewnij się, że od razu ją aktywujesz, aby móc zacząć z niej korzystać.

Zmień ustawienia dostosowywania motywu

Zmień typografię

Teraz, zanim utworzymy wydarzenie, zacznijmy od prawidłowego poznania podstaw naszej witryny. Otwórz Konfigurator motywów, przechodząc do pulpitu WordPress > Wygląd > Dostosuj . Przejdź do typografii swojej witryny, wybierając kolejno Ustawienia ogólne > Typografia . Gdy już tam będziesz, zastosuj następujące ustawienia:

• Rozmiar tekstu ciała: 16
• Wysokość linii ciała: 1,9
• Czcionka nagłówka: Roboto

Ustawienia kalendarza wydarzeń

Wtyczka Kalendarz wydarzeń ma również własne ustawienia w konfiguratorze motywów. Wróć do głównego menu Konfiguratora motywu > Kalendarz wydarzeń > Motyw ogólny > I użyj następujących kolorów:

• Kolor akcentu: #06c8ff
• Polecany kolor podświetlenia: #06c8ff

Wróć do ustawień Kalendarz wydarzeń > Motyw ogólny i użyj tego samego koloru „#06c8ff” dla wszystkich opcji, które możesz tam znaleźć.

Dodaj nowe wydarzenie

Dodaj nowe wydarzenie

Jesteśmy teraz gotowi do stworzenia nowego wydarzenia. Aby to zrobić, przejdź do pulpitu WordPress > Wydarzenia > Dodaj nowy . Po dodaniu nowego wydarzenia pamiętaj, aby nadać mu również tytuł.

Dodaj szczegóły wydarzenia

Kontynuuj, wpisując szczegóły wydarzenia. To zawiera:

• Data i godzina
• Lokalizacja
• Organizatorzy
• Strona wydarzenia
• Koszt wydarzenia

Dodaj wyróżniony obraz

Dodaj wyróżniony obraz do swojego wydarzenia. Później w tym poście usuniemy to z frontendu, ale nadal będziemy go potrzebować do udostępniania społecznościowego.

Zmień ustawienia strony Divi

W prawym rogu wydarzenia zobaczysz Ustawienia strony Divi. Tam usuń pasek boczny, wybierając opcję „Bez paska bocznego” dla układu strony.

Opublikuj wydarzenie

Jesteśmy teraz gotowi do rozpoczęcia pracy nad frontendem. Śmiało i opublikuj swoje wydarzenie.

To jest domyślny projekt strony bez włączenia Visual Builder:

Otwórz stronę docelową Meetup i zapisz elementy projektu

Znajdź i zapisz wiersz w bibliotece Divi

Efektywna praca jest ważniejsza niż ciężka praca. Dlatego zaoszczędzimy sobie trochę czasu i wysiłku, ponownie wykorzystując elementy pakietu Meetup Layout Pack. Zacznij od otwarcia strony docelowej za pomocą programu Divi's Visual Builder. Następnie znajdź następujący wiersz na swojej stronie i zapisz go w swojej bibliotece Divi:

Znajdź i zapisz sekcję w bibliotece Divi

Potrzebujemy również następującej sekcji, więc śmiało zapisz również tę:

Rozpocznij tworzenie niestandardowego szablonu wydarzenia

Dodaj niestandardowe linie kodu CSS, aby dopasować pakiet układu Meetup

Możemy używać Visual Buildera dla stron wydarzeń, ale niestety nie możemy go używać wszędzie. Aby upewnić się, że wszystko jest zgodne z pakietem Meetup Layout Pack, z wyprzedzeniem dodamy kilka wierszy kodu CSS:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Przełącz się na Visual Builder

Możemy teraz przełączyć się na korzystanie z Visual Builder na naszym wydarzeniu!

Dodaj nową sekcję

Zdjęcie w tle

Zobaczysz, że na stronie znajduje się już sekcja. To jest miejsce na stronie, które możemy modyfikować. Zacznij od otwarcia ustawień sekcji i dodaj obraz tła „ bg-4.png ”. Możesz znaleźć ten obraz w Bibliotece multimediów, jeśli już przesłałeś pakiet układu Meetup do swojej witryny. Wraz z obrazem tła użyj następujących ustawień:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: dolny prawy

Rozstaw

Otwórz ustawienia odstępów w swojej sekcji i dodaj „100px” do górnego marginesu.

Granica

Tworzymy również tego rodzaju efekt osi czasu dla naszego szablonu. Przejdź do ustawień granicy i dodaj następującą lewą ramkę:

• Szerokość lewej krawędzi: 7px
• Kolor lewej krawędzi: #8301e9

Dodaj nowy wiersz

Struktura kolumny

Teraz, gdy skończyliśmy modyfikować ustawienia sekcji, możemy zacząć dodawać nasze wiersze. Dodaj nowy wiersz o następującej strukturze kolumn:

Rozmiary

Otwórz ustawienia swojego wiersza i włącz opcję „Make This Row Fulliwdth” w ustawieniach rozmiaru. Zamierzamy to zrobić dla każdego wiersza w tym układzie.

Dodaj moduł tekstowy do wiersza

Rozmiary

Następnie dodaj moduł tekstowy z opisem wydarzenia, przejdź do ustawień rozmiaru i użyj następującej szerokości:

• Komputer stacjonarny: 47%
• Tablet i telefon: 100%

Importuj zapisany wiersz

Tuż pod dodanym wierszem przejdź dalej i zaimportuj wiersz zapisany do biblioteki Divi.

Rozmiary

Musimy zmienić niektóre rzeczy w tym wierszu, zaczynając od ustawień rozmiaru. Włącz opcję „Ustaw ten wiersz o pełnej szerokości”.

Usuń moduł tekstu podstawowego i moduł przycisków

Następnie usuń akapit modułu tekstowego i modułu przycisku z pierwszej kolumny.

Klonuj moduł tekstowy i usuń rozmiar

Śmiało i sklonuj moduł tekstowy w pierwszym rzędzie i umieść go w pierwszej kolumnie nowego wiersza. Otwórz następnie Ustawienia rozmiaru i usuń dostosowaną szerokość dla pulpitu.

Importuj zapisaną sekcję

Skończyliśmy modyfikować pierwszą sekcję! Śmiało i zaimportuj sekcję, którą zapisałeś jako następną.

Dodaj obramowanie

Do tej sekcji dodajemy również lewą ramkę:

• Szerokość lewej krawędzi: 7px
• Kolor lewej krawędzi: #06c8ff

Zmień rozmiar każdego wiersza

W sekcji, którą właśnie zaimportowałeś, znajduje się kilka wierszy. Włącz opcję „Ustaw ten wiersz o pełnej szerokości” dla każdego z tych wierszy.

Zmień wyrównanie przycisków

Na koniec zmień również Wyrównanie przycisku na lewo.

Zapisz szablon w bibliotece Divi

Dodaj do biblioteki

Szablon układu jest gotowy! Możesz teraz zapisać go w swojej bibliotece Divi i wykorzystać ponownie do innych wydarzeń.

Zapowiedź

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

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadku użycia pokazaliśmy, jak tworzyć oszałamiające niestandardowe szablony wpisów na temat wydarzeń. Stworzony przez nas szablon pasuje do stylu pakietu Meetup Layout Pack. Po utworzeniu tego szablonu zapisaliśmy go również w Bibliotece Divi, abyśmy mogli ponownie wykorzystać go również do innych wydarzeń. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!