Jak stworzyć stronę główną ogłoszenia ślubnego z Divi

Opublikowany: 2017-05-16

Ten post jest częścią 1 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.

Utworzenie strony z ogłoszeniami ślubnymi to kreatywny sposób na poinformowanie gości, że bierzesz ślub. Podając im adres URL Twojej witryny, pozostaną w kontakcie. Będą też mogli zobaczyć szczegóły ślubu online, kiedy tylko zechcą.

Przyjrzyjmy się układowi strony głównej, który krok po kroku pomożemy Ci zbudować:

Tworzenie menu nawigacyjnego

Pokażemy Ci dokładnie, jak utworzyć stronę z ogłoszeniami, galerię i listę prezentów dla Twojej witryny ślubnej. Ten pierwszy post poświęcony jest tworzeniu strony z ogłoszeniami. Ale zanim tam pójdziemy, chcemy upewnić się, że goście mogą sprawnie poruszać się po Twojej witrynie.

Dlatego najpierw musisz stworzyć odpowiednie i eleganckie menu nawigacyjne.

Zacznij od przejścia do Divi > Opcje motywu > i prześlij logo , którego chcesz używać w całej witrynie.

Kliknij Zapisz zmiany i przejdź do stron swojej witryny WordPress. Dodaj nową stronę, na której utworzysz stronę ogłoszenia. Zrób to samo dla strony galerii i strony z listą prezentów, które pokażemy Ci, jak tworzyć w nadchodzących postach.

Na razie zostawmy zawartość pustą i przejdź do dostosowywania motywów swojej witryny, aby zmodyfikować menu nawigacyjne. Zacznij od dodania stron swojej witryny do swojego menu, przechodząc do Menu > Dodaj menu > Dodaj strony do swojego menu . To menu powinno być głównym menu Twojej witryny.

Następnie przejdź do Nagłówek i nawigacja > Główny pasek menu i wprowadź następujące zmiany:

Wysokość menu: 66
Dostosuj Maks. wysokość logo w zależności od wymiarów obrazu
Rozmiar tekstu: 16
Odstępy między literami: 2
Czcionka: Raleway Light
Styl czcionki: pogrubiony
Kolor tekstu: #9b7461
Kolor tła: rgba (155, 116, 97, 0,13)

Teraz wróć do Nagłówka i nawigacji i zmień styl nagłówka na „Wyśrodkowany” w formacie nagłówka.

Zapisz i opublikuj wprowadzone zmiany.

Rozpocznij na stronie z ogłoszeniami

Witryna składa się z czterech sekcji, a każda z nich wnosi swoją wartość do serwisu – dopełniając zapowiedź ślubu. Szczegółowo wyjaśnimy każdą sekcję i pokażemy, jak dokładnie możesz stworzyć ten sam projekt, co układ pokazany powyżej.

Sekcja bohaterów (w tym odliczanie)

Pierwsza część projektu to nagłówek. Postanowiliśmy sprawić, by goście czuli natychmiastową interakcję ze stroną internetową i weselem, umieszczając w niej Moduł Odliczania. W konstruktorze Divi sekcja nagłówka wygląda tak:

W tej części witryny użyjemy standardowej sekcji z pełnym jednym wierszem w trybie pełnej szerokości. W sekcji wiersza musisz dodać trzy moduły; dwa moduły tekstowe i jeden moduł odliczania. Moduł odliczania znajduje się pośrodku obu modułów tekstowych.

Zacznij korzystać z pierwszego modułu tekstowego

Zacznij od dodania modułu tekstowego do wiersza. Wpisz tekst, którego chcesz użyć, zmień orientację tekstu na „Środek” i zastosuj następujące zmiany w zakładce Zaawansowane ustawienia projektu:

Rozmiar czcionki tekstu: 100px (komputer), 80px (tablet), 66px (telefon)
Czcionka tekstu: mandarynka
Kolor tekstu: #9b857b

Na tej samej karcie przewiń w dół i zmień marginesy modułu tekstowego, dodając „10%” na górze i „5%” na dole.

Kliknij Zapisz i wyjdź.

Moduł zliczający (komputer stacjonarny)

Dodaj moduł odliczania poniżej właśnie utworzonego modułu tekstowego. W zakładce Ustawienia ogólne dodaj datę i godzinę ślubu oraz zmień kolor tła na „#fae4de”. Użyjemy tego odliczania tylko na komputerach stacjonarnych, wyłącz je na tabletach i telefonach.

Przejdź do Zaawansowanych ustawień projektowania i wprowadź następujące zmiany:

Czcionka liczb: mandarynka
Rozmiar czcionki liczb: 74px
Kolor czcionki liczb: #9b857b
Wysokość linii liczb: 70px
Czcionka etykiety: Raleway Light
Rozmiar czcionki etykiety: 14px
Kolor tekstu etykiety: #9b857b
Wysokość linii etykiety: 25px

Na tej samej karcie przewiń w dół i dostosuj górne niestandardowe dopełnienie do „10%”, a dolne niestandardowe dopełnienie do „10%”.

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

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Twoje odliczanie będzie teraz wyglądać dokładnie tak, jak na obrazie układu, który pokazaliśmy powyżej.

Moduł odliczania (tablet i telefon)

Teraz idź dalej, sklonuj poprzednie odliczanie i wyłącz je na pulpicie (zamiast tabletu i telefonu). Następnie wprowadź następujące zmiany w module:

Rozmiar czcionki liczb: 72px (zarówno tablet, jak i telefon)
Wysokość linii liczb: 70px
Rozmiar czcionki etykiety: 14px (tablet), 12px (telefon)

I zmień kod w głównym elemencie zakładki CSS na:

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Drugi moduł tekstowy

Teraz pod modułem odliczania dodaj kolejny moduł tekstowy. Na karcie Ustawienia ogólne zmień orientację tekstu na „Środek”. Kontynuuj, dodając imię pana młodego i panny młodej i przechodząc do karty Zaawansowane ustawienia projektu.

W zaawansowanych ustawieniach projektu wprowadź następujące zmiany:

Czcionka tekstu: mandarynka
Rozmiar czcionki tekstu: 50px
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,7 em

Kontynuuj przewijanie na karcie Zaawansowane ustawienia projektu do Margines niestandardowy i dodaj „10%” do górnego marginesu.

Rozdzielacz

Ostatnią częścią tej sekcji bohatera jest przegroda. Dodaj separator i zmień kolor na karcie Ogólne na „#9b857b”. Upewnij się, że przegroda jest również „widoczna”.

Następnie przejdź do zakładki Projekt i ustaw styl dzielnika „Solidny”, pozycję dzielnika „Góra”, zmień wagę dzielnika na „1px” i ukryj na urządzeniu mobilnym.

Przejdź do zakładki CSS i dodaj następujący kod do głównego elementu:

margin-left: auto;
margin-right: auto;
width: 30%;

Kliknij Zapisz i wyjdź. Ukończyłeś pierwszą sekcję strony, która powinna wyglądać tak:

Możemy teraz przejść do drugiej części tego układu, w której możesz zacząć opowiadać gościom swoją historię.

Opowiadanie historii zapowiedzi: druga część

Ta druga sekcja ma dwa symetryczne rzędy, które tworzą jedną część strony głównej ślubu. Ta część ma nieco mniejszą szerokość, co zapewnia nieco większą perspektywę na Twojej witrynie.

Pierwszy rząd sekcji

Zacznij od stworzenia standardowej sekcji, zmień kolor tła na „#fffaf6” i dodaj „5%” do dolnej wyściółki. Następnie dodaj dwukolumnowy wiersz do tej sekcji.

Następnie otwórz ustawienia wiersza. W ustawieniach ogólnych wybierz „TAK”, aby użyć niestandardowej szerokości, zmień jednostkę na wartość procentową i wpisz „90%”. Przewiń w dół w tej samej zakładce, aktywuj Szerokość rynny i ukryj dla telefonu i tabletu.

Następnie przejdź do zakładki Zaawansowane ustawienia projektu, wyrównaj wysokości kolumn i dodaj „#9b857b” jako kolor tła pierwszej kolumny. Na tej samej karcie zmień dopełnienie kolumny 1 na „5%” u góry, „10%” po prawej, „5%” na dole i „10%” po lewej stronie.

W przypadku drugiej kolumny nie musimy ustawiać koloru tła, ale zamiast tego przesyłamy obraz tła.

Moduł tekstowy

Teraz dodaj moduł tekstowy w pierwszej kolumnie wiersza. Na karcie Ustawienia ogólne ustaw orientację tekstu na „Środek” i wpisz tekst, który chcesz udostępnić w polu tekstowym. Następnie przejdź do zakładki Zaawansowane ustawienia projektu.

Na karcie Zaawansowane ustawienia projektu wprowadź następujące zmiany:

Maksymalna szerokość: 500px (tylko dla komputerów stacjonarnych)
Czcionka tekstu: mandarynka
Rozmiar czcionki tekstu: 44
Kolor tekstu: #fffaf6

I dodaj 5% do dolnej wyściółki.

Naciśnij Zapisz i wyjdź i dodaj kolejny moduł tekstowy. Ustaw orientację tekstu jako „wyjustowaną”. Kontynuuj, wprowadzając następujące zmiany w module tekstowym w ustawieniach projektu:

Maksymalna szerokość: 500px
Rozmiar czcionki tekstu: 14px
Czcionka tekstu: Raleway Light
Styl czcionki: pogrubiony
Kolor czcionki tekstu: #fffaf6
Wysokość linii tekstu: 1,7 em

Naciśnij Zapisz i wyjdź.

Klonuj poprzedni rząd

Teraz sklonuj właśnie utworzony wiersz. Sklonowany wiersz zostanie automatycznie umieszczony pod tym, który właśnie utworzyłeś. Ale w tym przypadku moduły muszą znajdować się po przeciwnej stronie. Umieść dwa moduły tekstowe w drugiej kolumnie zamiast w pierwszej.

Następnie otwórz ustawienia wiersza i dodaj obraz tła do pierwszej kolumny. Usuń wszystkie ustawienia dopełnienia wprowadzone w dopełnieniu pierwszej kolumny i umieść je w dopełnieniu drugiej kolumny.

Naciśnij Zapisz i wyjdź i gotowe.

Wiersz na telefon i tablet

Utwórz kolejny dwukolumnowy wiersz i ukryj na pulpicie. Ustaw wiersz o pełnej szerokości i zmień szerokość rynny na „3”.

Następnie przejdź do karty Projekt i prześlij obraz tła dla obu kolumn i wprowadź następujące zmiany w niestandardowym dopełnieniu obu kolumn:

Top 5%
Prawo: 10%
Dół: 5%
Po lewej: 10%

Po dodaniu tej drugiej sekcji, oto jak powinien teraz wyglądać Twój układ:

drużba, druhna, drużbowie i drużbowie

Dlaczego nie umieścić najważniejszych osób w swoim życiu na swojej ślubnej stronie internetowej? Oddanie, kto będzie drużbą, druhną, drużbami i drużbami, może dać dodatkowy impuls Twojej witrynie.

Aby dodać tę część do swojej witryny, zacznij od dodania nowej sekcji standardowej do swojej strony. W tej nowej sekcji będziesz musiał utworzyć trzy wiersze z różnymi kolumnami i modułami.

Teraz, po utworzeniu sekcji, która jest sekcją standardową, nadaj jej następujący kolor tła: „#fae4de”. Nie będziesz musiał nic więcej zmieniać w ustawieniach sekcji, więc możesz nacisnąć Zapisz i wyjdź.

Tworzenie modułu tekstowego

Następnie utwórz pierwszy wiersz o pełnej szerokości. Jedyne, co musisz tam umieścić, to moduł tekstowy. Otwórz moduł tekstowy, wypełnij pole tekstowe i wybierz „Środek” w polu Orientacja tekstu.

Następnie przejdź do Zaawansowanych ustawień projektowania, ustaw czcionkę tekstu na „Tangerine”, rozmiar czcionki tekstu na „100px” (komputer i tablet) i „68%” (telefon) oraz kolor czcionki tekstu na „#9b857b”. Przewiń w dół tę samą kartę i zmień marginesy na „10%” u góry i „5%” u dołu.

Kliknij Zapisz i wyjdź. Twój pierwszy moduł i rząd są teraz gotowe.

Dodaj kolejny wiersz, w tym przypadku z dwiema kolumnami i dodaj 5% do górnego i dolnego marginesu. Następnie dodaj moduł osoby w pierwszej kolumnie wiersza.

Moduł obrazu i osoby

Idąc dalej, otwórz ustawienia modułu osoby. Prześlij obraz, wprowadź adres URL kanałów mediów społecznościowych w polach i napisz o nich trochę w polu tekstowym. Jeśli nie masz pewności, jakie wymiary powinny mieć Twoje obrazy, zajrzyj do tego wpisu na blogu.

Następnie przejdź do Zaawansowanych ustawień projektowania i dokonaj następujących zmian:

Czcionka nagłówka: Raleway Light
Styl czcionki nagłówka: pogrubiony
Rozmiar czcionki nagłówka: 14
Kolor tekstu nagłówka: #9b857b
Wysokość linii nagłówka: 1em
Czcionka ciała: Raleway Light
Styl czcionki ciała: pogrubiony
Rozmiar czcionki ciała: 14
Kolor tekstu ciała: #9b857b
Wysokość linii ciała: 1,7 em

Otwórz ustawienia modułu osoba i przejdź do zakładki CSS. W polu Obraz członka dodaj następujący kod:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Teraz idź dalej i sklonuj moduły obrazu i osoby i umieść je w prawej kolumnie.

Kontynuuj, dodając nowy wiersz z czterema kolumnami i ponownie sklonuj moduł Obraz i Osoba (cztery razy) i umieść je w każdej kolumnie. Kod i ustawienia, których użyliśmy po raz pierwszy, będą dotyczyły wszystkich.

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

Gdzie i kiedy

To ostatnia część Twojej ślubnej strony głównej, gdzie poinformujesz publiczność o miejscu i czasie Twojego ślubu. W tej sekcji potrzebujemy wiersza z 3 kolumnami (1/2, 1/4, 1/4) z następującym kolorem tła: „#fffaf6”.

Dodawanie mapy

W pierwszej kolumnie tej sekcji dodaj moduł Mapa. Aby móc korzystać z funkcji mapy, musisz wprowadzić klucz Google API. Jeśli nie masz klucza API, przeczytaj tutaj, jak go zrobić. Wpisz adres swojego ślubu i pozwól modułowi znaleźć lokalizację. Aby utworzyć pinezkę na mapie, dodaj nową pinezkę i ponownie umieść lokalizację, pinezka pojawi się na mapie.

W pozostałych kolumnach wykorzystamy moduły tekstowe i notki. Dodaj moduł tekstowy i ustaw Orientację tekstu w Ustawieniach ogólnych na „Środek”. Następnie przejdź do Zaawansowanych ustawień projektowania i wprowadź następujące zmiany:

Czcionka tekstu: mandarynka
Rozmiar czcionki tekstu: 50px
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,7 em

Ustawienia tego modułu tekstowego dotyczą modułów tekstowych w obu kolumnach.

Moduł Blurb

W module Tekst dodaj moduł Blurb. Wybierz ikonę lokalizacji, zmień jej kolor na „#f9c8b8”, dodaj lokalizację w polu tekstowym i zmień orientację tekstu na „Środek”. Następnie przejdź do Zaawansowanych ustawień projektowania i wprowadź następujące zmiany:

Rozmiar czcionki ikony: 42px
Czcionka ciała: Raleway Light
Styl czcionki: pogrubiony
Rozmiar czcionki ciała: 14
Kolor tekstu ciała: #9b857b
Wysokość linii ciała: 1em

W następnej kolumnie zrób dokładnie to samo. Zmień tylko ikonę notki na zegar i dodaj informacje „kiedy” w polu tekstowym.

Otóż to. Twój układ powinien teraz wyglądać tak gładko, jak układ w tym samouczku:

Dalej

W drugiej części tego miniserialu zobaczymy jak stworzyć stronę galerii przeznaczoną do udostępniania zdjęć swoim gościom po ślubie. 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!