Jak tworzyć oszałamiające referencje galerii 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ć wspaniałe referencje galerii za pomocą pakietu Divi's Wedding Planner Layout Pack. Ten samouczek pomoże Ci połączyć referencje z Twoim portfolio w tym samym miejscu. Dzięki temu możesz zbliżyć się o krok do przekonania odwiedzających o swoich umiejętnościach i przekształcenia ich w leady. W przypadku wyświetlanych obrazów zastosujemy również subtelny efekt po najechaniu kursorem.

Weźmy się za to!

Zapowiedź

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

Po najechaniu

Otwórz stronę docelową pakietu planowania ślubu

Zacznij od otwarcia strony docelowej, którą utworzyłeś za pomocą oszałamiającego pakietu układów Wedding Planner od Divi.

Modyfikuj sekcję Referencje

Usuń drugi wiersz

Ten układ zawiera już sekcję referencji. Zamiast tworzyć nową sekcję, zamierzamy zmodyfikować tę sekcję, aby utworzyć referencje galerii. Przewiń w dół, aż natkniesz się na sekcję i usuń drugi wiersz.

Usuń moduł obrazu w kolumnie 1

W tej sekcji pozostał teraz jeden wiersz. Kontynuuj, usuwając moduł obrazu, który możesz znaleźć w pierwszej kolumnie tego wiersza.

Zmień ustawienia wiersza nr 1

Struktura kolumny

Musimy wprowadzić pewne modyfikacje w ustawieniach tego wiersza, aby wyglądał tak, jak chcemy. Zacznij od zmiany struktury kolumny na jedną kolumnę zamiast dwóch.

Kolor tła

Następnie dodaj biały kolor tła do swojego wiersza.

Zdjęcie w tle

Ponownie użyjemy wzoru tła, który możesz znaleźć w swojej Bibliotece multimediów o nazwie „divider.png”. Po wybraniu tego wzoru jako obrazu tła zastosuj do niego następujące ustawienia:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Powtórzenie obrazu tła: powtórz

Wyrównanie wierszy

Utworzymy te referencje z galerii po lewej i prawej stronie Twojej strony. Zaczniemy od lewej strony iw tym celu musimy zastosować do naszego wiersza wyrównanie do lewej strony.

Rozstaw

Otwórz ustawienia odstępów dalej i dodaj niestandardowy margines i dopełnienie do swojego wiersza:

• Górny margines: 50px
• Górna i dolna wyściółka: 0px

Cień Pudełka

Na koniec pobawimy się również cieniem pudełkowym tego wiersza, aby stworzyć ładny efekt:

• Pozycja pozioma cienia pudełka: 60px
• Pozycja pionowa cienia pudełka: 80px
• Siła rozprzestrzeniania się cieni w pudełku: 37px
• Kolor cienia: #ded5d8
• Pozycja cienia pudełka: cień zewnętrzny

Zmień ustawienia modułu tekstowego

Usuń kolor tła

Moduł tekstowy, który znajdziesz w tym wierszu, ma już mnóstwo ustawień, które chcemy zachować. Jednak będziemy również musieli wprowadzić pewne modyfikacje, aby dopasować go do naszego wyniku końcowego. Pierwszą rzeczą, którą musisz zrobić po otwarciu ustawień modułu tekstowego, jest usunięcie koloru tła, który został do niego zastosowany.

Rozstaw

Ten moduł tekstowy ma również zastosowanie do niego niestandardowego marginesu. Śmiało i usuń wszystkie niestandardowe marginesy, ponieważ nie będziemy ich potrzebować.

Klonuj moduł tekstowy i umieść poniżej poprzedniego modułu tekstowego

Znajdź moduł tekstowy na stronie

Następnym elementem, którego będziemy potrzebować w naszym wierszu, jest moduł tekstowy zawierający nazwy testatorów. Zaoszczędzimy sobie trochę czasu i ponownie wykorzystamy jeden z modułów tekstowych, które można już znaleźć na stronie. Śmiało zlokalizuj następujący moduł tekstowy i sklonuj go:

Miejsce w rzędzie

Umieść sklonowany moduł tekstowy tuż pod poprzednim modułem tekstowym w rzędzie referencji.

Zmień zawartość

Zmień treść na nazwiska, które chcesz, aby pojawiły się w Twojej opinii.

Zmień ustawienia tekstu

Następnie otwórz ustawienia tekstu i wprowadź następujące zmiany:

• Nagłówek 6 Wyrównanie tekstu: do prawej
• Rozmiar tekstu nagłówka 6: 77px

Zmień odstępy

Zamierzamy sprawić, że ten moduł tekstowy będzie nakładał się na cień pola wiersza i tło sekcji, stosując następujące ustawienia odstępów:

• Górny margines: -50px
• Prawy margines: -150px
• Dolna wyściółka: 20px

Zmień krycie

Zamierzamy również zwiększyć krycie naszego modułu tekstowego do „17%”, aby był nieco bardziej efektowny.

Dodaj wiersz nr 2

Struktura kolumny

Zakończyliśmy awanturę z referencjami. Kolejnym krokiem jest dodanie towarzyszącej galerii. W tym celu użyjemy nowego wiersza o następującej strukturze kolumn:

Wyrównanie wierszy

Chcemy również przenieść tę galerię na lewą stronę strony, używając wyrównania lewego wiersza.

Rozmiary

Aby stworzyć galerię, użyjemy po prostu modułu obrazu dla każdej kolumny. Aby usunąć przestrzeń między kolumnami i stworzyć spójny wynik, zastosuj następujące ustawienia do rozmiaru wiersza:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Otwórz ustawienia odstępów dalej i zastosuj następujący niestandardowy margines i dopełnienie do swojego wiersza:

• Margines dolny: 80px
• Lewy margines: 50px
• Górna i dolna wyściółka: 0px

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Chociaż będziemy potrzebować w sumie czterech modułów obrazu, zaczniemy od utworzenia jednego i sklonowania go do innych kolumn, aby zaoszczędzić czas i wysiłek. Dodaj moduł obrazu do pierwszej kolumny wiersza i prześlij wybrany obraz.

Otwórz w Lightbox

Daj użytkownikom możliwość obejrzenia obrazu w większym formacie, włączając opcję „Otwórz w Lightbox” w ustawieniach linków modułu obrazu.

Filtr

Zamierzamy również zmniejszyć jasność naszego modułu obrazu do „47%” w ustawieniach filtrów. Zastosowanie tego ustawienia jest częścią subtelnego efektu najechania, który dodamy do obrazów naszej galerii.

Identyfikator CSS

Zamierzamy użyć identyfikatora CSS, aby usunąć filtr po najechaniu myszą w dalszej części tego postu, więc śmiało dodaj „image-hover” do identyfikatora CSS modułu obrazu.

Klonuj moduł obrazu 3 razy i zmieniaj obrazy

Możesz teraz sklonować Image Module trzy razy i umieścić go w pozostałych kolumnach. Zmień obraz dla każdej kolumny zgodnie z własnymi potrzebami.

Utwórz referencje po przeciwnej stronie

Klonuj oba istniejące rzędy

Aby utworzyć dokładnie tę samą opinię w galerii po przeciwnej stronie, musimy wprowadzić pewne zmiany. Zacznij od sklonowania obu rzędów.

Zmień wyrównanie obu rzędów

Następnie zmień wyrównanie obu wierszy na prawo. Zauważysz, że drugi rząd jeszcze nie następuje. Dzieje się tak, ponieważ będziemy musieli zmodyfikować ustawienia odstępów w jednym z następnych kroków.

Zmień pole cienia rzędu nr 1

Zamiast używać „60px” dla powtórzenia poziomego pierwszego wiersza, użyj zamiast tego „-60px”.

Zmień odstępy rzędu nr 2

Usuń lewy margines drugiego wiersza i zamiast tego dodaj „50px” po prawej stronie. Gdy to zrobisz, zauważysz, że twój rząd również został przesunięty na prawą stronę.

Zmień orientację tekstu i odstępy drugiego modułu tekstowego

Moduł tekstowy zawierający nazwiska osób zeznających również należy przesunąć w lewo. Aby to zrobić, zacznij od wyrównania tekstu do lewej w ustawieniach tekstu Nagłówka 6.

Usuń również prawy margines i zamiast tego dodaj „-150px” do lewego marginesu.

Dodaj efekt najechania

Otwórz ustawienia strony

Ostatnią rzeczą do zrobienia w tym samouczku jest dodanie linii kodu CSS, które umożliwią efekt najechania. Aby to zrobić, otwórz ustawienia strony, klikając następującą ikonę u dołu strony:

Usuń filtr po najechaniu kursorem za pomocą kodu CSS

Jedyne, co zamierzamy zrobić, to usunąć filtr, który zastosowaliśmy do naszego modułu obrazu po najechaniu kursorem, za pomocą następujących linii kodu CSS i gotowe:

#image-hover:hover {
filter: none;
}

Zapowiedź

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

Po najechaniu

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadku użycia pokazaliśmy, jak tworzyć oszałamiające referencje galerii za pomocą pakietu Divi's Wedding Planner Layout Pack. Te referencje z galerii pomogą Ci połączyć referencje z Twoim portfolio i zbliżyć się o krok do przekształcenia odwiedzających w potencjalnych klientów, a ostatecznie w klientów. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!