Oznaczanie narożników obrazu w oszałamiającej siatce galerii za pomocą Divi

Szukasz wyjątkowego i pięknego sposobu na wyświetlanie obrazów w galerii na swojej stronie internetowej? Jeśli tak, jesteśmy pewni, że spodoba Ci się ten post. Pokażemy Ci, jak wyciąć rogi obrazu za pomocą modułów tekstowych w ramach pięknego projektu, który pozostaje w 100% responsywny na wszystkich rozmiarach ekranu. To świetny sposób na dodawanie numerowanych etykiet do obrazów przy jednoczesnym zachowaniu niesamowitego projektu. Będziesz mógł również bezpłatnie pobrać plik JSON przykładu projektu.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pobierz układ sekcji galerii ZA DARMO

Aby położyć swoje ręce na układzie sekcji bezpłatnej galerii, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać

Dodaj nową sekcję

Rozstaw

Pierwszą rzeczą, którą musisz zrobić, to dodać nową sekcję do strony, nad którą pracujesz. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Kolor tła

Następnie dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozmiary

Przejdź do ustawień rozmiaru i usuń wszelkie odstępy między kolumnami, wierszami i sekcją, stosując następujące ustawienia:

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

Rozstaw

Kontynuuj, usuwając wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Kolumna 1, 2, 3 i 4 główny element

Teraz, aby upewnić się, że 4-kolumnowa struktura jest zachowana na wszystkich rozmiarach ekranu, upewnimy się, że każda z kolumn zachowuje 25% szerokości, dodając następujący wiersz kodu CSS do każdego głównego elementu kolumny z osobna:

width: 25% !important;

Dodaj moduł obrazu do kolumny 1

Prześlij obraz 1:1

Czas zacząć dodawać moduły! Dodaj nowy moduł obrazu do pierwszej kolumny i prześlij wybrany kwadratowy obraz (lub użyj takiego, który znajdziesz w spakowanym folderze, który udało Ci się pobrać na początku tego postu).

Lightbox

Włącz opcję lightbox w ustawieniach linków dalej.

• Otwórz w Lightbox: Tak

Rozmiary

Aby upewnić się, że obraz pozostaje responsywny na wszystkich rozmiarach ekranu, włączymy również opcję „Wymuś pełną szerokość”.

• Wymuś pełną szerokość: tak

Filtry domyślne

Zmieniamy też jasność.

• Jasność: 50%

Po najechaniu na filtry

A my przywrócimy go do „100%” po najechaniu.

• Jasność: 100%

Domyślny indeks Z

Przejdź do ustawień widoczności i upewnij się, że indeks Z pozostaje „0” w stanie domyślnym.

• Indeks Z: 0

Unosić indeks Z

Ale po najechaniu myszą chcemy, aby nakładał się na numerowaną etykietę Moduł tekstowy, który dodamy w kolejnych krokach. Aby to zrobić, zwiększymy wartość Hover Z Index.

• Indeks Z: 100

Clone Image Module 3 razy i miejsce w pozostałych kolumnach

Po ukończeniu modułu obrazu w kolumnie 1 możesz go sklonować trzy razy. Umieść duplikaty w trzech pozostałych kolumnach wiersza.

Zmień obrazy

Zmienia obrazy w duplikatach.

Dodaj górny margines do modułu obrazu w kolumnie 2

I dodaj górny margines do modułu obrazu w drugiej kolumnie.

• Górny margines: 24,7vw

Dodaj moduł tekstowy poniżej modułu obrazu nr 1

Dodaj zawartość

Następnym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy. Dodaj numer do pola treści.

Kolor tła

Następnie zmień kolor tła. Ten kolor musi pasować do dowolnego koloru tła przypisanego do wiersza.

• Kolor tła: #ffffff

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu.

• Czcionka tekstu: Lora
• Wyrównanie tekstu: do prawej
• Kolor tekstu: #000000
• Rozmiar tekstu: 3vw
• Wysokość linii tekstu: 3vw

Rozmiary

Zmniejszamy również szerokość modułu.

• Szerokość: 7vw

Rozstaw

Stwórz trochę miejsca na moduł w ustawieniach odstępów.

• Górna wyściółka: 0,5vw
• Dolna wyściółka: 2,5vw
• Prawa wyściółka: 0,9vw

Indeks Z

I zwiększ wskaźnik Z.

• Indeks Z: 99

Klonuj moduł tekstowy 3 razy

Po wykonaniu ogólnych kroków modułu tekstowego możesz go sklonować trzy razy.

Pozycjonowanie

Odpowiednio umieść duplikaty:

Dostosuj moduły tekstowe

Moduł tekstowy nr 1

Ujemny górny margines

Czas zacząć dostosowywać różne moduły tekstowe do ich pozycji! Otwórz moduł tekstowy w kolumnie 1 i dodaj trochę ujemnego górnego marginesu.

• Górny margines: -5,9vw

Cień Pudełka

Dodajemy również cień pudełka, korzystając z następujących ustawień:

• Pozycja pozioma cienia pudełka: 7vw
• Pozycja pionowa cienia pudełka: 5.9vw
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: rgba (35,50,255,0.94)

Moduł tekstowy nr 2

Zmień numerację

Kontynuuj, otwierając moduł tekstowy w drugiej kolumnie i zmieniając numer.

Wyrównanie tekstu

Zmodyfikuj również wyrównanie tekstu.

• Wyrównanie tekstu: do lewej

Wyrównanie modułu

I zmień wyrównanie modułu w ustawieniach rozmiaru.

• Wyrównanie modułu: w prawo

Rozstaw

Przejdź do ustawień odstępów i dodaj trochę ujemnego marginesu górnego. Dodaj wyściółkę po lewej zamiast po prawej stronie.

• Górny margines: -6vw
• Lewa wyściółka: 0,9vw

Cień Pudełka

Uzupełnij projekt modułu tekstowego, dodając cień pudełka.

• Pozycja pozioma cienia pudełka: 7vw
• Pozycja pionowa cienia pudełka: -6vw
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: #ededed

Moduł tekstowy nr 3

Zmień numerację

Przejdź do modułu tekstowego w kolumnie 3! Zmień numer w polu treści.

Ujemny górny margines

Przejdź do karty projektu i dodaj trochę ujemnego marginesu górnego.

• Górny margines: -6vw

Cień Pudełka

Użyj również cienia pudełkowego.

• Pozycja pozioma cienia pudełka: -7vw
• Pozycja pionowa cienia pudełka: -6vw
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: #ff2323

Moduł tekstowy #4

Zmień numerację

Przejdź do następnego i ostatniego modułu tekstowego. Tutaj również zmień numer.

Wyrównanie tekstu

Następnie zmień wyrównanie tekstu.

• Wyrównanie tekstu: do lewej

Wyrównanie modułu

Zmodyfikuj również wyrównanie modułu w ustawieniach rozmiaru.

• Wyrównanie modułu: w prawo

Zmień odstępy

Następnie zmodyfikuj ustawienia odstępów.

• Górny margines: 24,7vw
• Dolny margines: -6vw
• Lewa wyściółka: 0,9vw

Cień Pudełka

I uzupełnij projekt modułu tekstowego, dodając cień pudełka z następującymi ustawieniami:

• Pozycja pozioma cienia pudełka: -7vw
• Pozycja pionowa cienia pudełka: -5,9vw
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: #000000

Klonuj cały rząd

Po ukończeniu wiersza możesz go sklonować dowolną liczbę razy, w zależności od tego, ile obrazów chcesz wyświetlić.

Zmień numerację i obrazy

Upewnij się, że zmieniłeś wszystkie obrazy i liczby i gotowe!

Zapowiedź

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

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć ładnie wyglądającą galerię z oznaczonymi narożnikami obrazu. To wyjątkowy sposób na estetyczną prezentację Twoich zdjęć. Udało Ci się również pobrać plik JSON na początku samouczka. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.