Jak stworzyć oś czasu dla harmonogramu ślubu za pomocą wtyczki Divi i modułu osi czasu Divi?

Ten post jest częścią 5 z 5 w naszym miniserialu Jak stworzyć elegancką witrynę ślubną z Divi. W tej serii przeprowadzimy Cię przez najważniejsze etapy tworzenia ślubnej strony internetowej dla siebie lub klienta z Divi.

W pierwszych czterech częściach miniserialu pokazaliśmy, jak tworzyć:

• elegancka strona z ogłoszeniami ślubnymi
• strona galerii
• strona z listą prezentów
• i jak korzystać z wtyczki Automatic Divi Testimonials na swojej stronie ślubnej.

Stworzone przez nas layouty były spójne stylistycznie i łatwe w tworzeniu.

W tej ostatniej części miniserii pokażemy, jak stworzyć oś czasu dla swojej ślubnej witryny internetowej za pomocą wtyczki Divi Timeline Module od Elegant Marketplace. Podamy Ci przykład, jak stworzyć dobrze wyglądającą pionową oś czasu, dzięki której Twoi goście weselni będą na bieżąco informowani o tym, co wydarzy się podczas wielkiego dnia młodej pary.

Przykładowa pionowa oś czasu

Tworzony przez nas układ będzie wyglądał jak na poniższym przykładzie. Porozmawiamy o najważniejszych krokach, które pomogą Ci odnaleźć się na osi czasu. Po przeczytaniu tego posta możesz szybko zacząć, stworzyć własną i nadać dodatkowy akcent swojej witrynie ślubnej.

Kupowanie wtyczki

Jeśli nie posiadasz jeszcze wtyczki Divi Timeline Module, musisz ją kupić na stronie Elegant Marketplace. Wtyczka kosztuje 11 USD. Po zakupie wtyczki na ich stronie internetowej otrzymasz plik ZIP zawierający nowy moduł, który dodasz do swojej witryny.

Instalowanie wtyczki

Zaloguj się do swojej witryny WordPress i przejdź do „Dodaj nowy” w sekcji Wtyczka.

Prześlij plik ZIP otrzymany z zakupu.

Aktywuj wtyczkę i gotowe. Wtyczka automatycznie doda teraz moduły osi czasu do twojego kreatora Divi.

Dwa różne sposoby korzystania z modułu osi czasu Divi na swojej stronie internetowej

Wyświetlanie harmonogramu ślubów

Oś czasu na Twojej stronie ślubnej może naprawdę nadać Twojej witrynie dodatkową wartość dodaną. Możesz użyć osi czasu, aby pokazać, jak będzie wyglądał dzień ślubu. Ta przejrzystość online pomaga Twoim gościom odnaleźć się w napiętym harmonogramie ślubu.

Musisz tylko pamiętać, aby wcześniej udostępnić gościom link do swojej strony ślubnej. W ten sposób będą mogli uzyskać dostęp do informacji w dowolnym miejscu i czasie.

Możesz utworzyć osobną stronę dla osi czasu lub zdecydować się na uwzględnienie jej na jednej z innych stron. Ponieważ oś czasu zajmuje dużo miejsca na ekranie, zalecamy poświęcenie jej zupełnie nowej strony.

Pokazywanie osi czasu związku pary ślubnej

Oprócz tworzenia harmonogramu ślubu za pomocą wtyczki, możesz również użyć modułu osi czasu, aby zaprezentować oś czasu związku pary ślubnej. Uwzględniając sposób, w jaki para się poznała i różne fazy, których doświadczyli w swoim związku, możesz trochę bardziej zaangażować się w gości i przedstawić historię.

Różne rodzaje modułów referencji

Podczas pobierania wtyczki zauważysz cztery dodatkowe moduły na liście modułów. Wszystkie są osiami czasu, ale mają inny cel.

Masz jeden na posty, treści, polecane obrazy, tytuły postów i tylko zwykły pionowy. Dla przykładu osi czasu, który stworzymy w tym poście, użyjemy tylko osi czasu – pionowej. Ten moduł pozwala nam od razu zapisywać informacje w polu treści, bez łączenia się z innymi treściami na stronie, takimi jak Twoje posty.

Zaczynaj

Pokażemy Ci krok po kroku, jak utworzyć następującą oś czasu:

Moduł jest responsywny i będzie dobrze wyglądał na Twoim pulpicie, a także na telefonie czy tablecie. Zacznijmy!

Dodaj elementy osi czasu i osi czasu

Ponieważ moduł osi czasu jest wtyczką innej firmy, nie będziemy mogli dokonywać żadnych wizualnych modyfikacji za pomocą programu Visual Builder. Dlatego po prostu pozostaniemy w backendowej części strony, aby wprowadzić potrzebne zmiany.

Zacznij od dodania nowej strony, którą poświęcisz swojej osi czasu. Na tej stronie będziesz oczywiście potrzebował sekcji bohatera. Jednak poza tym na osi czasu potrzebujesz tylko jednej standardowej sekcji. Dodaj do strony nową sekcję standardową z wierszem o pełnej szerokości. Następnie umieść oś czasu – moduł pionowy w tym rzędzie o pełnej szerokości.

Teraz, w ustawieniach modułu Oś czasu – Pionowy, będziesz mógł dodawać różne elementy osi czasu do tworzonej osi czasu.

Istnieje standardowy przepływ, który zwykle stosuje się podczas ślubu. Zamierzamy stworzyć nowe pozycje na osi czasu dla każdego z następujących wydarzeń:

• Włosy i makijaż panny młodej
• Sesja ślubna
• Ceremonia wstępna
• Ceremonia
• Godzina koktajlowa
• Początek obiadu
• Tosty
• Pierwszy taniec
• Czas tańca
• Pustynia
• Ostatnie słowo podziękowania

Oczywiście wszystko zależy od tego, jak zaplanowałeś dzień ślubu. Możesz dodać dowolną liczbę elementów na osi czasu.

Modyfikacje modułu osi czasu

Ale przed dodaniem elementów osi czasu dokonajmy modyfikacji, które będą musiały zostać zastosowane do wszystkich elementów osi czasu za pośrednictwem modułu oś czasu – pionowy. Przejdź do zakładki Treść na osi czasu – moduł pionowy i zmień kolor linii środkowej na „#fae4de” w podkategorii Tło. Ten kolor zostanie zastosowany do wszystkich linii w module osi czasu, które umożliwiają interakcję różnych elementów osi czasu ze sobą.

Następnie przejdź do zakładki Projekt. Przede wszystkim otwórz podkategorię Tekst i wprowadź następujące zmiany:

• Czcionka tekstu: Raleway Light
• Styl czcionki tekstu: pogrubiony
• Rozmiar czcionki tekstu: 14px
• Kolor tekstu: #9b857b
• Wysokość linii tekstu: 1em

Przewiń w dół tę samą kartę i wprowadź następujące zmiany w podkategorii Tekst etykiety elementu:

• Czcionka etykiety przedmiotu: Raleway Light
• Styl czcionki etykiety przedmiotu: pogrubiony
• Rozmiar czcionki etykiety przedmiotu: 39px
• Kolor tekstu etykiety przedmiotu: #9b857b
• Wysokość linii etykiety przedmiotu: 1,5 em

Ponadto wprowadź następujące zmiany w podkategorii Tekst nagłówków:

• Czcionka nagłówków: mandarynka
• Rozmiar czcionki nagłówków: 70px (komputer i tablet), 60px (tablet)
• Kolor tekstu nagłówków: #9b857b
• Wysokość linii nagłówków: 1,5 em

Wszystkie wyżej wymienione modyfikacje będą miały zastosowanie do każdego elementu na osi czasu. Kliknij Zapisz i wyjdź.

Modyfikacje pozycji na osi czasu

Patrząc na dotychczasowy wynik, można zauważyć, że dokonano modyfikacji w całym obrazie. Teraz musimy wprowadzić indywidualne zmiany w elementach osi czasu. Zacznij od dodania tylko jednego elementu na osi czasu. Następnie przejdź do karty Treść tego elementu osi czasu. Kontynuuj, dodając tytuł do elementu osi czasu w podkategorii Tło.

Następnie dodaj treść, która ma się pojawiać w polu treści (łącznie z godziną kursywą) i wpisz godzinę w polu Etykieta osi czasu. Możesz również dodać lokalizację w tym samym polu, jeśli chcesz.

Zawartość elementu na osi czasu

Treść zapisana w polu pojawi się po przeciwnej stronie osi czasu, gdy ktoś odwiedzi Twoją witrynę za pomocą komputera. Ta etykieta nie pojawia się, gdy ktoś patrzy na Twoją oś czasu na swoim telefonie. Dlatego zalecamy umieszczenie praktycznych informacji, które chcesz udostępnić, w etykiecie przedmiotu również w polu treści. W ten sposób osoby odwiedzające witrynę przez telefon również mogą zobaczyć informacje.

Przewiń w dół tę samą kartę i poszukaj ikony serca na liście ikon przedmiotów, zmień kolor ikony na „#9b857b” i kolor tła ikony na „#fae4de”.

Kliknij Zapisz, a element osi czasu zostanie dodany do osi czasu. W przedstawionym przez nas przykładzie użyliśmy tych samych ustawień dla wszystkich elementów osi czasu. Dlatego zalecamy po prostu sklonowanie pierwszego elementu na osi czasu i wprowadzenie odpowiednich zmian.

Utwórz tyle pozycji na osi czasu, ile potrzebujesz, aby harmonogram ślubu był jak najbardziej przejrzysty dla gości weselnych. Za każdym razem, gdy dodasz nowy element osi czasu, zostanie on automatycznie umieszczony po przeciwnej stronie poprzedniego elementu osi czasu bez konieczności wprowadzania jakichkolwiek ręcznych zmian.

Zawijanie

To była ostatnia część miniserialu Jak stworzyć elegancką stronę ślubną z Divi . Mamy nadzieję, że była to cenna seria postów, które pomogą Ci stworzyć elegancką i zachwycającą witrynę ślubną dla siebie lub swoich klientów. Jeśli masz jakiekolwiek pytania dotyczące tego samouczka lub jeśli masz jakieś prośby o przyszłe samouczki/miniserie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy tego posta na blogu, abyśmy mogli odpowiedzieć Ci z odpowiedziami!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!