Jak stworzyć stronę z listą prezentów na swój ślub z Divi

Opublikowany: 2017-05-18

Ten post jest częścią 3 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 dwóch częściach naszego miniserialu pokazaliśmy, jak stworzyć elegancką stronę z ogłoszeniami ślubnymi i galerię z Divi. Ta trzecia część będzie poświęcona stworzeniu strony z listą prezentów w Twojej witrynie ślubnej.

Pokażemy Ci krok po kroku, jak utworzyć następujący układ za pomocą Visual Builder of Divi:

Układ ma pięć sekcji, a każda z nich wnosi do całości swoją wartość. Zanurzmy się w pierwszym!

Sekcja bohaterów

Sekcja bohaterów jest naprawdę uproszczona, ale właśnie tego szukamy w tej miniserii; prostota i elegancja. Używamy tej samej palety kolorów, co w dwóch poprzednich samouczkach ślubnych, więc jeśli podążasz dalej, możesz łatwo dodać tę stronę do strony ślubnej, którą już zacząłeś tworzyć.

Zaczynaj

Zacznij od dodania nowej strony do swojej witryny WordPress i nadaj jej nazwę. Następnie aktywuj Divi Builder i od razu przejdź do Visual Builder.

Dodaj nową sekcję do właśnie utworzonej strony. Otwórz ustawienia sekcji i zmień obraz tła w podkategorii Tło na karcie Treść. W tym przykładzie wybraliśmy symetryczny obraz tła sekcji, aby uzyskać ten dodatkowy efekt.

Kontynuuj, dodając do sekcji wiersz o pełnej szerokości. Otwórz ustawienia wiersza i zmień kolor tła na „rgba(122,122,122,0.56)” w podkategorii Tło na karcie Zawartość.

Idąc dalej, przejdź do zakładki Projekt. Otwórz podkategorię Rozmiar, ustaw wiersz na pełną szerokość i wpisz „1” jako Szerokość rynny.

Przewiń w dół i otwórz podkategorię Odstępy. Musimy dodać „200px” do górnego i dolnego wypełnienia dla komputerów stacjonarnych oraz „150px” do górnego i dolnego wypełnienia dla tabletów i telefonów.

W tej samej podkategorii dodaj „-50px” do górnego i dolnego marginesu w przypadku tabletów i telefonów.

Pierwszy moduł tekstowy

Idąc dalej, dodaj nowy moduł tekstowy do wiersza. Dodaj swój tekst w podkategorii Tekst na karcie Treść. Następnie przejdź do zakładki Projekt i wprowadź następujące zmiany w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: mandarynka
  • Rozmiar czcionki tekstu: 100 (komputer stacjonarny i tablet), 68 (telefon)
  • Kolor tekstu: #fffaf6
  • Wysokość linii tekstu: 1,5 em

Drugi moduł tekstowy

Utwórz kolejny moduł tekstowy tuż pod nim. Przejdź do zakładki Treść i wprowadź swój tekst w podkategorii Tekst. Następnie przejdź do zakładki Projekt i wprowadź następujące zmiany w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: Raleway Light
  • Styl czcionki tekstu: pogrubiony
  • Rozmiar czcionki tekstu: 20px (komputer), 14px (tablet i telefon)
  • Kolor tekstu: #fffaf6
  • Wysokość linii tekstu: 1,5 em

Twój nagłówek powinien wyglądać do tej pory tak:

Sekcja Wprowadzenie

W tym układzie chcemy dać ludziom wybór. Mogą wybrać, czy chcą kupić coś dla Panny Młodej, Pana Młodego, czy dla obojga.

Zacznij od utworzenia nowej sekcji i dodaj wiersz z jedną kolumną. Zmień kolor tła na „#fffaf6” w podkategorii Tło na karcie Treść. Następnie otwórz ustawienia wiersza i przejdź do zakładki Projekt. Dodaj „5%” do górnego i dolnego marginesu tylko dla komputerów stacjonarnych.

Tytuł sekcji

W tym rzędzie. jedyne, co musimy dodać, to moduł tekstowy. Wpisz tytuł, który ma się pojawić w podkategorii Tekst na karcie Treść. Przejdź do karty Projekt i wprowadź następujące zmiany w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: mandarynka
  • Styl czcionki tekstu: pogrubiony
  • Rozmiar czcionki tekstu: 60px (komputer), 50px (tablet i telefon)
  • Kolor tekstu: #9b857b
  • Wysokość linii tekstu: 1,7 em

Teraz otwórz podkategorię Rozmiar i zmień Maks. szerokość na „500px”.

Kontynuuj, otwierając podkategorię Odstępy w tej samej zakładce i dodaj „3%” do górnego i dolnego wypełnienia.

Następnie przejdź do zakładki Zaawansowane i dodaj następujący kod do elementu głównego w podkategorii Custom CSS: 

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Teraz dodaj kolejny wiersz z jedną kolumną do tej samej sekcji. Nie musimy nic zmieniać w ustawieniach tego wiersza.

Moduł obrazu

Dodaj moduł obrazu do wiersza i prześlij obraz w podkategorii Obraz na karcie Treść. Następnie przejdź do zakładki Projekt, usuń miejsce pod obrazem, wybierz „Wyśrodkuj” dla wyrównania obrazu i zawsze wyśrodkuj obraz na urządzeniu mobilnym.

Następnie przejdź do zakładki Zaawansowane i dodaj następujący kod do pola Element główny w podkategorii Niestandardowy CSS: 

height: 100px;
width: 150px;

Pierwszy moduł tekstowy

Pod modułem obrazu dodaj pierwszy moduł tekstowy sekcji. Wprowadź tekst w polu tekstowym w podkategorii Tekst na karcie Treść i przejdź do karty Projekt. W podkategorii Tekst wprowadź następujące zmiany:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: Raleway Light
  • Rozmiar czcionki tekstu: 24px
  • Kolor tekstu: #9b857b
  • Wysokość linii tekstu: 1,5 em

Przewiń w dół tę samą kartę i dodaj „30px” do górnego marginesu w podkategorii Odstępy.

Na koniec przejdź do zakładki Zaawansowane tego samego modułu tekstowego i dodaj następujący kod do elementu głównego w podkategorii Niestandardowy CSS: 

font-weight:400;

Drugi moduł tekstowy

Dodaj kolejny moduł tekstowy do sekcji i wpisz tekst w polu tekstowym w podkategorii Tekst na karcie Treść. Następnie przejdź do zakładki Projekt i dokonaj następujących modyfikacji:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: Raleway Light
  • Styl czcionki tekstu: pogrubiony
  • Rozmiar czcionki tekstu: 16px
  • Kolor tekstu: #9b857b
  • Wysokość linii tekstu: 1,5 em

Przewiń w dół tę samą kartę i zmień Maks. szerokość na „300px” w podkategorii Rozmiar. Zmień również górny margines na „5%” w podkategorii Odstępy.

Następnie przejdź do zakładki Zaawansowane i dodaj następujący kod do elementu głównego w podkategorii Custom CSS: 

font-weight: 300;

Klonuj moduł obrazu i moduły tekstowe

Dodaj kolejny wiersz, ale tym razem z trzema kolumnami, do tej samej sekcji.

Pierwsza kolumna i ostatnia kolumna wiersza wymagają tych samych modułów, co poprzedni wiersz; moduł obrazu i dwa moduły tekstowe. Te moduły muszą mieć takie same ustawienia jak te, które stworzyliśmy wcześniej, więc jedyne, co zrobimy, to je sklonować. Po dwukrotnym sklonowaniu każdego modułu umieść je w lewej i prawej kolumnie nowego wiersza i zmień obraz i tekst.

Następnie przejdź do zakładki Projekt wiersza i dodaj „5%” do dolnego marginesu w podkategorii Odstępy.

Moduł obrazu panny młodej

Teraz dodaj moduł obrazu do drugiej kolumny wiersza. Prześlij obraz i przejdź do zakładki Projekt. Upewnij się, że ustawiłeś Wyrównanie obrazu na „W lewo” i aktywuj opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym” w podkategorii Wyrównanie.

Przewiń w dół tę samą kartę i dodaj „5%” do górnego marginesu w podkategorii Odstępy.

Następnie przejdź do zakładki Zaawansowane i dodaj następujący kod do elementu głównego w podkategorii Custom CSS: 

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Na koniec wyłącz moduł obrazu na telefonach i tabletach.

Moduł obrazu pana młodego

Sklonuj poprzedni moduł obrazu i umieść go w tej samej kolumnie, co poprzedni. Zmień przesłany obraz i przejdź do zakładki Projekt. Otwórz podkategorię Wyrównanie i zmień Wyrównanie obrazu na „Prawo”.

Ponadto dostosuj górny margines na „-60%” w podkategorii Odstępy.

Możemy teraz przejść do sekcji listy prezentów układu. Twój układ powinien wyglądać do tej pory tak:

Lista życzeń/prezentów

Dodaj nową sekcję standardową i zmień kolor tła na „#fae4de” w podkategorii Tło na karcie Treść.

Moduł tekstowy: Tytuł

Dodaj wiersz o pełnej szerokości do sekcji i ustaw go na pełną szerokość. Następnie sklonuj moduł tekstowy, który stworzyliśmy w drugiej sekcji i umieść go w tym module wierszy.Zmień tekst w postach tekstowych i zmień kolor tła na „#fffaf6” w polu Element główny w podkategorii Niestandardowy CSS modułu Zaawansowane patka.

Lista prezentów/Lista życzeń: Korzystanie z modułu suwaka

Dodaj nowy wiersz z 3 kolumnami do sekcji i zmień niestandardową szerokość „65%” w podkategorii Rozmiar na karcie Projekt. Kontynuuj, dodając moduł tekstowy do pierwszego wiersza i dokonaj następujących zmian w podkategorii Tekst na karcie Projekt:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: Raleway Light
  • Styl czcionki tekstu: pogrubiony
  • Rozmiar czcionki tekstu: 24px
  • Kolor tekstu: #9b857b
  • Wysokość linii tekstu: 1,5 em

Przewiń w dół tę samą kartę i dodaj „30px” do górnego marginesu w podkategorii Odstępy.

Teraz sklonuj moduł tekstowy dwa razy i umieść po jednym w każdej kolumnie.

Następnie dodaj moduł suwaka. Przejdź do zakładki Zaawansowane suwaka i dodaj następujący kod do elementu głównego w podkategorii Custom CSS: 

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Idąc dalej, dodaj nowy slajd. Na slajdzie prześlij obraz tła jednego z przedmiotów, które chcesz umieścić na liście prezentów w podkategorii Tło na karcie Treść. Następnie wprowadź nazwę elementu i tekst przycisku w podkategorii Tekst tej samej karty. Zmień również adres URL w podkategorii Link. Dodaj tyle slajdów, ile potrzebujesz w jednej kategorii i powtórz to samo.

Kontynuuj, dodając nowy wiersz, ale teraz tylko z 2 kolumnami.

Zmień szerokość niestandardową na „55%” w podkategorii Rozmiar na karcie Projekt i zmień dolny margines na „5%” w podkategorii Odstępy.

Moduł tekstowy i moduł suwaka, które utworzyliśmy w poprzednim module wierszy, mają te same ustawienia, których potrzebujemy we wszystkich innych modułach tekstowych i suwakach. Śmiało i sklonuj oba cztery razy i umieść je w pozostałych kolumnach każdego modułu rzędowego.

Twój układ powinien teraz wyglądać tak:

Formularz kontaktowy (komputer)

Celem formularza kontaktowego w układzie jest umożliwienie ludziom przekazania prezentu, który kupują dla pary. Po odebraniu prezentu można go zastąpić innym na stronie internetowej. Dzięki temu mniej prawdopodobne jest, że dwóch gości przyniesie ze sobą ten sam prezent.

Utwórz nową sekcję standardową i zmień kolor tła na #fffaf6 w podkategorii Tło na karcie Treść.

Pierwszy rząd

Wiersz, którego potrzebujemy w tej sekcji, jest taki sam jak w innych sekcjach. Po prostu sklonuj poprzednio używany moduł wierszy z modułem tekstowym i umieść go w sekcji. Jedyne, co musisz zrobić, to dokonać pewnych modyfikacji w ustawieniach modułu tekstowego. Zmień kolor tekstu i tła w elemencie głównym na #fae4de.

Drugi rząd

Teraz dodaj wiersz z dwiema kolumnami i ukryj wiersz na tabletach i telefonach w podkategorii Widoczność na karcie Zaawansowane. Umieść Moduł Formularza Kontaktowego w pierwszej kolumnie i dokonaj następujących zmian w różnych podkategoriach zakładki Projekt.

Tekst pola formularza:

  • Czcionka pola formularza: Raleway Light
  • Rozmiar czcionki pola formularza: 18px
  • Kolor tekstu pola formularza: #9b857b
  • Wysokość linii pola formularza: 1,7 em

Granica:

  • Wejściowy promień graniczny: 15
  • Użyj obramowania: tak
  • Kolor obramowania: #d7dce1
  • Szerokość obramowania: 1px
  • Styl obramowania: Solidny

Przycisk:

  • Rozmiar tekstu przycisku: 15
  • Rozmiar tekstu przycisku: 15
  • Kolor tekstu przycisku: #fffaf6
  • Kolor tła przycisku: #9b857b
  • Szerokość obramowania przycisku: 9
  • Kolor obramowania przycisku: #9b857b
  • Promień obramowania przycisku: 4

W zakładce Treść modułu Formularza kontaktowego możesz teraz dodać trzy pola; Imię i nazwisko, e-mail i wiadomość.

Ręcznie zmień kolor tła każdego pola na #fae4de.

Na koniec dodamy moduł tekstowy do drugiej kolumny, aby poinformować gości o procesie. Przejdź do karty Projekt i wprowadź następujące zmiany w kategorii Tekst:

  • Orientacja tekstu: Środek
  • Czcionka tekstu: Raleway Light
  • Styl czcionki tet: pogrubienie
  • Rozmiar czcionki tekstu: 16
  • Kolor tekstu: #9b857b
  • Wysokość linii liter: 1,5 em

Przewiń w dół tę samą kartę i dodaj „300 pikseli” do maksymalnej szerokości w podkategorii wymiarowania.

Na koniec wpisz „5px” na górnym marginesie w podkategorii Odstępy.

Formularz kontaktowy (tablet i telefon)

Sklonuj poprzednio utworzony wiersz i po prostu zamień się miejscami (i kolumnami) Modułu Formularza Kontaktowego i Modułu Tekstu. Przejdź do zakładki Zaawansowane i ukryj wiersz dla komputerów stacjonarnych.

Twój układ powinien teraz wyglądać tak:

Dalej

W czwartej części tej miniserii pokażemy, jak stworzyć internetową księgę gości na swój ślub z Divi i auto referencjami. Jeśli masz jakieś uwagi do tego samouczka lub jeśli masz jakieś prośby o przyszłe samouczki; upewnij się, że zostawiłeś komentarz w sekcji komentarzy tego posta na blogu, abyśmy mogli się z tobą skontaktować!

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!