Jak stworzyć stronę galerii ślubnej z Divi

Opublikowany: 2017-05-17

Ten post jest częścią 2 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 pierwszej części naszego miniserialu pokazaliśmy, jak wykonać elegancką stronę z ogłoszeniami ślubnymi. Ta druga część będzie poświęcona stworzeniu strony galerii w Twojej witrynie ślubnej. Strona galerii jest utrzymana w tym samym stylu, co strona z ogłoszeniami ślubnymi, co pozwala na korzystanie z obu stron w tej samej witrynie bez konieczności wprowadzania wielu zmian.

Pokażemy Ci krok po kroku, jak stworzyć następujący układ za pomocą wizualnego kreatora Divi:

Ten układ składa się z 6 sekcji, które pomogą Ci stworzyć interaktywną i piękną stronę galerii.

Sekcja bohaterów

Zdecydowaliśmy się na bardzo prosty nagłówek, który nie wygląda na zbyt zajęty. Strona galerii będzie już zawierała wiele obrazów i chcemy, aby ludzie skupili się na tym. Posiadanie prostej sekcji bohatera ułatwia gościom znalezienie istoty strony bez zbytniego rozpraszania się wizualizacjami na początku strony.

Utwórz stronę

Zacznij od utworzenia strony za pomocą konstruktora Divi i przełącz się na Visual Builder.

Możesz zobaczyć, że na Twojej nowej stronie jest już jedna sekcja automatycznie. Ta sekcja zawiera w sobie wiersz o pełnej szerokości. W pierwszej części tej sekcji będziemy potrzebować wiersza o pełnej szerokości, więc kontynuuj jego używanie.

Otwórz ustawienia sekcji, którą właśnie utworzyłeś i otwórz podkategorię Tło w zakładce treści. Następnie zmień kolor tła na „#fffaf6”.

Moduł tekstowy

Kontynuuj, dodając moduł tekstowy do kolumny o pełnej szerokości wiersza. Wprowadź tekst w polu tekstowym zakładki Treść i przejdź do zakładki Projekt.

Wybierz podkategorię Tekst na karcie Projekt, aby rozpocząć edycję projektu treści. W przypadku utworzonego przez nas układu musimy wprowadzić następujące zmiany w podkategorii Tekst modułu tekstowego:

Orientacja tekstu: Środek
Czcionka tekstu: mandarynka
Rozmiar czcionki tekstu: 90p (komputer), 80 (tablet), 66 (telefon)
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,7 em

Jeśli nie masz ochoty przewijać w dół i szukać różnych opcji do zmiany, możesz również skorzystać z opcji wyszukiwania. Ta opcja pomaga stać się bardziej produktywnym i natychmiast zmieniać rzeczy bez konieczności wkładania dużego wysiłku. W poniższym przykładzie wyszukujemy po prostu terminy „Czcionka tekstu”, a opcja pojawi się od razu.

Kliknij Zapisz i wyjdź.

Panna Młoda i Pan Młody!

Idąc dalej, będziesz musiał stworzyć sekcję z dwoma indywidualnymi wizerunkami młodej pary.

Śmiało i dodaj nowy dwukolumnowy wiersz tuż pod poprzednim utworzonym wierszem. Otwórz ustawienia wiersza i przejdź do zakładki Projekt.

Następnie przejdź do zakładki Projekt w ustawieniach wiersza i otwórz podkategorię Rozmiar. Aktywuj opcję Niestandardowa szerokość i zmień wartość procentową na „60%”. Przewiń w dół tę samą kartę i dodaj „5%” do dolnego marginesu.

Po raz kolejny możesz wybrać łatwe wyjście i po prostu napisać „Niestandardowa szerokość” w pasku wyszukiwania.

Obraz panny młodej

Dodaj moduł obrazu do pierwszej kolumny wiersza. Prześlij zdjęcie panny młodej w zakładce Treść w podkategorii Obraz i przejdź do zakładki Zaawansowane. Kliknij podkategorię Custom CSS i dodaj następującą linię kodu do pola Main Element:

border: 10px double #9b857b;

Jak wspomniano wcześniej, możesz po prostu wpisać „Główny element” w pasku wyszukiwania, a natychmiast się pojawi. Korzystanie z opcji wyszukiwania może być ogromną oszczędnością czasu, zwłaszcza gdy próbujesz postępować zgodnie z krokami samouczka. Możesz zrobić dokładnie to, co jest wymagane, nie zastanawiając się nad tym zbyt wiele.

Naciśnij Zapisz i wyjdź.

Obraz pana młodego

Jak widać, obrazy mają te same ustawienia. Śmiało i sklonuj moduł obrazu, jedyną rzeczą, którą musisz zmienić, jest obraz. Tak powinna wyglądać do tej pory strona Twojej galerii:

Uwaga z podziękowaniami

Strona galerii zwykle pojawia się na stronie ślubnej po odbyciu się wesela. Ludzie są podekscytowani, widząc zrobione zdjęcia, więc istnieje prawdopodobieństwo, że wszyscy Twoi goście odwiedzą tę stronę. To sprawia, że strona galerii jest idealnym miejscem, aby powiedzieć gościom ostatnią rzecz.

Na początek dodaj do układu nową sekcję standardową. W sekcji użyj wiersza o pełnej szerokości.

Następnie otwórz ustawienia sekcji i zmień kolor tła na „#fffaf6” w podkategorii tła.

Pierwszy moduł tekstowy

Dodaj moduł tekstowy do właśnie utworzonego wiersza. Na karcie Treść wprowadź w polu tekstowym tekst, który ma być wyświetlany w Twojej witrynie. Kontynuuj, przechodząc do karty Projekt.

Zacznij od wybrania podkategorii Tekst na karcie projektu i wprowadź następujące zmiany, wyszukując je ręcznie lub wyszukując je na pasku wyszukiwania:

Orientacja tekstu: Środek
Czcionka tekstu : mandarynka
Rozmiar czcionki tekstu: 70 (komputer stacjonarny i tablet), 50 (telefon)
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1em

Teraz wybierz podkategorię Odstępy w tej samej zakładce i zmień dolny margines na „5%”.

Kliknij Zapisz i wyjdź.

Drugi moduł tekstowy

Dodaj nowy moduł tekstowy pod pierwszym utworzonym modułem tekstowym. W zakładce treści napisz w polu tekstowym podziękowanie, którym chcesz podzielić się z gośćmi i przejdź do zakładki Projekt.

Wprowadź następujące zmiany na karcie Projekt, wyszukując je ręcznie lub wyszukując opcje za pomocą paska wyszukiwania.

Orientacja tekstu: wyjustowana
Czcionka tekstu: Raleway Light
Styl tekstu: pogrubiony
Rozmiar czcionki tekstu: 14
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,6 em

Kliknij Zapisz i wyjdź i gotowe. Oto jak powinna teraz wyglądać Twoja strona galerii:

Sekcja ulubionych zdjęć

Po zakończeniu sekcji z podziękowaniami możesz przejść do sekcji, w której pokazujesz ulubione zdjęcia młodej pary. W tej części użyjesz dwóch sekcji i zastosujesz kod CSS do modułów obrazu, aby wyglądały jak polaroid.

Zacznij od dodania standardowej sekcji. W tej standardowej sekcji będziesz potrzebować wiersza o pełnej szerokości. Otwórz ustawienia sekcji i zmień kolor tła na „#9b857b” w podkategorii Tło na karcie treści.

Następnie dodaj moduł tekstowy do wiersza. Otwórz ustawienia i wprowadź tytuł, który chcesz wyświetlić w polu tekstowym podkategorii Tekst. Idąc dalej, przejdź do zakładki Projekt i dokonaj następujących zmian 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,6 em

Kliknij Zapisz i wyjdź.

Obrazy polaroidowe (komputer stacjonarny)

Do tej części będziesz potrzebować innej standardowej sekcji. W tej sekcji będziesz potrzebować wiersza, który ma 4 kolumny. Zmień kolor tła tej sekcji na „#fae4de” na karcie Treść w podkategorii Tło.

Kontynuuj, dodając moduł obrazu do pierwszej kolumny wiersza. Otwórz ustawienia obrazu i prześlij jeden z ulubionych obrazów w podkategorii Obraz na karcie treści.

Następnie przejdź do zakładki Zaawansowane, kliknij podkategorię CSS ID & Classes i wpisz „polaroid” w polu CSS Class. W polu Element główny dodaj następujący kod:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Teraz, aby uruchomić klasę „polaroid”, musisz przejść do zaplecza swojej witryny. Przejdź do Divi> Opcje motywu> i wstaw następujący kod w polu Custom CSS na dole strony:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Następnie możesz wrócić do Visual Builder. Będziesz potrzebować więcej niż jednego polaroidu, dlatego powinieneś sklonować Image Module 7 razy i upewnić się, że umieściłeś je w różnych kolumnach. Każda kolumna powinna mieć 2 moduły obrazu.

Aby obrazy polaroidowe wyglądały zabawnie, musisz zmienić kod CSS w polu Main Element każdego modułu obrazu osobno. Aby zastosować inny kod, na poniższym obrazku nadaliśmy każdemu modułowi obrazu inny numer:

W zależności od nadanego numeru odpowiednio zmień kod w polu Element Główny. Element główny można znaleźć na karcie Zaawansowane w podkategorii Niestandardowy CSS. Dodaj również wartość do pól Margines niestandardowy w podkategorii Odstępy na karcie Projekt:

Obraz 1

To pierwszy moduł obrazu, który stworzyłeś, zachowaj go w ten sposób.

Obraz 2

Marginesy niestandardowe:
Góra: -10%
Lewo: -20%

Główny element:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

Obraz 3

Marginesy niestandardowe:
Lewo: -20%

Główny element:
Nic

Obraz 4

Marginesy niestandardowe:
Góra: -10%
Lewo: -20%

Główny element:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

Obraz 5

Marginesy niestandardowe:
Nic

Główny element:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

Obraz 6

Marginesy niestandardowe:
Góra: -10%
Lewo: -20%

Główny element:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

Obraz 7

Marginesy niestandardowe:
Lewo: -20%

Główny element:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

Obraz 8

Marginesy niestandardowe:
Góra: -10%
Lewo: -20%

Główny element:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

Po skonfigurowaniu wszystkich obrazów otwórz ustawienia wiersza. Przejdź do zakładki Zaawansowane i ukryj wiersz dla telefonu i tabletu w podkategorii Widoczność.

Upewnij się również, że ludzie mogą otworzyć obraz w tej sekcji, aktywując Lightbox w podkategorii Link na karcie Treść.

Ulubione obrazy (tablet i telefon)

Aby upewnić się, że obrazy są responsywne, dodamy kolejny wiersz do tej samej sekcji. Ustaw wiersz o pełnej szerokości i sklonuj moduły obrazu numer 1 i 5. Umieść te sklonowane moduły w nowym rzędzie. W wersji mobilnej będziemy używać tylko tych dwóch wersji utworzonych przez nas modułów obrazu.

Teraz otwórz ustawienia rzędu. Przejdź do zakładki Zaawansowane i ukryj wiersz na komputerach stacjonarnych w podkategorii Widoczność.

Po wprowadzeniu wszystkich tych zmian Twój układ powinien wyglądać tak na pulpicie:

Galeria według nazwiska (komputer stacjonarny)

Zdjęć robionych na weselach jest zazwyczaj bardzo dużo, co może utrudniać odnalezienie w nich określonej struktury. Dlatego postanowiliśmy nieco uprościć sekcję galerii na tej stronie galerii. Galerie będą wyświetlane na podstawie nazwisk gości, co ułatwi im odnalezienie własnych zdjęć.

Lista nazwisk

Aby rozpocząć, musisz pokazać listę nazwisk i połączyć je z sekcją strony, w której znajdą obrazy.

Utwórz nową sekcję standardową i umieść w niej wiersz o pełnej szerokości. Następnie dodaj moduł tekstowy. Wpisz tekst, który chcesz wyświetlić 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: #9b857b
Wysokość linii tekstu: 1,6 em

Przewiń w dół tę samą kartę i zmień górny margines na „2%” i dolny margines na „5%” w podkategorii Odstępy.

Kliknij Zapisz i wyjdź. Teraz dodaj kolejny wiersz, w tym przypadku z trzema kolumnami. Na karcie Projekt w ustawieniach wiersza zmień dolny margines na „5%” w podkategorii Odstępy.

Następnie dodaj moduł tekstowy do lewej kolumny wiersza. W module tekstowym dodaj jedną trzecią nazwisk gości. Każde z tych nazwisk będzie wymagało linku kotwiczącego do części witryny, do której chcesz je przenieść. Wybierz jedną z nazw, kliknij ikonę linku i wpisz „#” + nazwę. Później w tym poście na blogu powiążesz tę nazwę z określoną sekcją. Powtórz to samo dla każdego z imion na liście.

Wybierz jedną z nazw, kliknij ikonę linku i wpisz „#” + nazwę. Później w tym poście na blogu powiążesz tę nazwę z określoną sekcją. Powtórz to samo dla każdego z imion na liście.

Przejdź do zakładki Projekt i dokonaj następujących zmian w podkategorii Tekst:

Orientacja tekstu: w prawo
Czcionka tekstu: Raleway Light
Styl tekstu: pogrubiony
Rozmiar czcionki tekstu: 20
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,6 em

Idąc dalej, sklonuj moduł tekstowy dwukrotnie i umieść sklonowane moduły w dwóch pozostałych kolumnach. Upewnij się, że zmieniłeś nazwiska na tych listach i orientację tekstu na „Środek” w drugiej kolumnie i „W lewo” w trzeciej kolumnie.

Otwórz ustawienia wiersza i zmień widoczność na tylko pulpit w podkategorii Widoczność na karcie Zaawansowane.

Galeria według nazwiska (tablet i telefon)

Aby upewnić się, że witryna jest responsywna, utworzymy nowy wiersz, który będzie pasował do tabletów i telefonów. Dodaj nowy wiersz z kolumną o pełnej szerokości. Następnie dodaj moduł tekstowy do tego wiersza o pełnej szerokości i wpisz nazwiska w polu tekstowym. Pole tekstowe można znaleźć w podkategorii Tekst na karcie Treść.

Powtórz to samo, co zrobiliśmy w poprzednim wierszu, klikając ikonę linku i wpisując „#” + nazwę w polu adresu URL.

Ale upewnij się, że przypisujesz inny link do kotwicy do każdego drugiego imienia. W tym przykładzie zarówno Avery, jak i Brown będą mieli inne łącze kotwicy niż na komputerach stacjonarnych. Musimy to zrobić, ponieważ w następnej części strony będziemy musieli mieć dwie różne sekcje galerii dla co drugiej galerii. W ten sposób będzie reagował na tablet i telefon.

Na koniec przejdź do zakładki Zaawansowane w wierszu i wyłącz wiersz dla komputerów stacjonarnych w podkategorii Widoczność.

Sekcja galerii (komputer stacjonarny)

W ostatniej części witryny będziemy musieli stworzyć różne sekcje galerii, które reprezentują różne nazwiska. Pokażemy Ci, jak zrobić dwa z nich, a następnie możesz odpowiednio dodać kolejne.

Najpierw dodaj sekcję standardową. Zmień kolor tła na „#fae4de” w podkategorii Tło na karcie Treść

Idąc dalej, dodaj wiersz podobny do tego:

W sekcjach wierszy użyj opcji Szerokość niestandardowa. Przejdź do karty Projekt Wybierz i zmień szerokość niestandardową na „60%” w podkategorii Rozmiar.

Następnie przejdź do zakładki Projekt i zmień górny i dolny margines na „5%”.

Moduł tekstowy

Teraz dodaj moduł tekstowy i wpisz nazwisko rodziny w polu tekstowym w podkategorii Tekst na karcie Treść. Kontynuuj, przechodząc do karty Projekt i wprowadzając następujące zmiany:

Wyrównanie tekstu: do środka
Czcionka tekstu: mandarynka
Rozmiar czcionki tekstu: 60
Kolor tekstu: #9b857b
Wysokość linii tekstu: 1,6 em

Przewiń w dół tę samą kartę i zmień górny margines na „20%” w podkategorii Odstępy.

Przejdź do zakładki Zaawansowane. W polu Identyfikator CSS w podkategorii Identyfikatory i klasy CSS musisz połączyć utworzony powyżej link kotwicy z modułem tekstowym. Tak więc, jeśli pierwszym linkiem do zakotwiczenia na liście było „#adams”, musisz wpisać „adams”. Upewnij się, że identyfikator jest taki sam, jak ten, który połączyłeś z nazwiskiem na wcześniej utworzonej liście.

W drugiej kolumnie wiersza musisz dodać moduł galerii. Wpisz „8” w polu Liczba obrazów w podkategorii Obrazy zakładki Ogólne i wybierz 8 obrazów.

Następnie przejdź do karty Projekt i upewnij się, że Twój układ to „Siatka”, a orientacja miniatury „Krajobraz” w podkategorii Układ.

Idąc dalej, przejdź do zakładki Zaawansowane. Na tej karcie musisz dodać kod do dwóch różnych sekcji podkategorii Custom CSS; główny element i nakładka.

Główny element:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

Narzuta:

-webkit-filter: brightness(0%);

Kliknij Zapisz i wyjdź.

Teraz śmiało sklonuj sekcję. Zmień strukturę kolumn na następującą i przełącz miejsca między modułem tekstowym a modułem galerii:

Zmień obrazy w galerii, nazwisko wymienione w polu tekstowym i identyfikator klasy. Ta sekcja ma również inny kolor tła; „#ffff6”.

Teraz przejdź do karty Zaawansowane w tym wierszu i ukryj ją dla tabletów i telefonów w podkategorii Widoczność.

Możesz kontynuować tworzenie takich sekcji galerii, w zależności od liczby nazwisk obecnych na weselu.

Sekcja Galerii (Mobilna)

Jak wspomnieliśmy wcześniej, co druga sekcja galerii będzie potrzebowała alternatywy dla urządzeń mobilnych. Po prostu sklonuj pierwszy utworzony przez nas wiersz galerii i umieść go w tej samej sekcji, co ostatni utworzony przez nas wiersz galerii.

Następnie otwórz opcje modułu tekstowego. Przejdź do zakładki Projekt i usuń górny margines w podkategorii Odstępy. Następnie przejdź do zakładki Zaawansowane i zmień identyfikator CSS w podkategorii Identyfikatory i klasy CSS na „avery1”. To ten sam identyfikator, co na liście, która dotyczy tabletów i telefonów.

Otóż to. Twój układ powinien teraz wyglądać dokładnie tak, jak ten, który stworzyliśmy i pokazaliśmy na początku tego wpisu na blogu:

Dalej

W trzeciej części tej miniserii zobaczymy, jak stworzyć stronę z listą prezentów do dodania na stronie ślubnej. Jeśli masz jakiekolwiek pytania dotyczące 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, więc wróć do Ciebie 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!