6 unikalnych projektów obramowań dla obrazów modułu Divi Gallery

Moduł Divi Gallery to świetne miejsce do zaprezentowania galerii obrazów na swojej stronie internetowej. Domyślnie moduł galerii wyświetla twoje obrazy w układzie siatki bez żadnego stylu, co jest świetne, jeśli chodzi o zachowanie obrazów jako głównego elementu projektu. Jeśli jednak chcesz wykazać się kreatywnością, możesz obramować swoje obrazy różnymi projektami obramowań, aby wyróżnić swoją galerię obrazów. Moduł Galeria ułatwia ten proces, a wyniki mogą Cię zaskoczyć.

W tym samouczku pokażę, jak tworzyć unikalne projekty obramowań dla swoich galerii obrazów za pomocą modułu Divi Gallery.

Zacznijmy!

zapowiedź

#1 Galeria zdjęć polaroidowych

Rozpocznij projekt budowlany #1

#2 Czysty projekt siatki

Rozpocznij projekt budowlany #2

#3 Niestandardowy obraz tła za całą galerią

Rozpocznij projekt budowlany #3

#4 Niestandardowy obraz tła za każdym elementem galerii

Rozpocznij projekt budowlany #4

#5 Kombinacja Cienia Pudełka i Obramowania

Rozpocznij projekt budowlany #5

#6 Projekt obramowania taśmy filmowej

Rozpocznij projekt budowlany #6

Czego potrzebujesz, aby zacząć

Subskrybuj nasz kanał YouTube

W tym samouczku będziesz potrzebować zainstalowanego i aktywnego motywu Divi. Będziesz także potrzebować 12 obrazów dodanych do biblioteki multimediów, które zostaną użyte do zbudowania galerii obrazów. W przypadku modułu galerii Divi korzystającego z układu siatki rozmiar obrazów powinien wynosić około 1500 na 800 pikseli, jeśli planujesz otwierać obrazy w widoku lightbox, aby ładnie wypełniały ekran na większości komputerów stacjonarnych.

Konfigurowanie nowej strony

Na początek musisz utworzyć nową stronę, nadać jej tytuł i wdrożyć Divi Builder. Wybierz opcję „Buduj od podstaw”, a następnie opublikuj swoją stronę. Następnie kliknij, aby zbudować z przodu.

Zapisywanie szablonu modułu Divi Gallery

Ponieważ zamierzamy zaprojektować 5 różnych stylów obramowania dla modułu Divi Gallery, pomocne byłoby zapisanie podstawowego szablonu modułu galerii w naszej bibliotece, abyśmy nie musieli zaczynać od zera za każdym razem, gdy projektujemy nową galerię .

Utwórz nową sekcję z jednym wierszem kolumny, a następnie dodaj moduł galerii do wiersza.

Divi zapełni moduł galerii kilkoma obrazami z galerii multimediów w formie siatki, jak poniżej:

W ustawieniach modułu galerii kliknij szarą ikonę plusa, aby dodać 12 zdjęć do galerii. Używam obrazów z układu strony galerii restauracji.

Następnie zaktualizuj ustawienia modułu Divi Gallery w następujący sposób:

Liczba obrazów: 12
Pokaż tytuł i podpis: NIE
Pokaż paginację: NIE

Będzie to działać jako dobry szablon w przyszłości. Aby zapisać moduł galerii w bibliotece Divi, kliknij ikonę Zapisz w bibliotece w szarym menu modułu po najechaniu kursorem na moduł. Następnie nazwij szablon „Szablon modułu galerii” i zapisz go w bibliotece.

Gdy chcesz dodać zapisany moduł galerii do swojej strony, wystarczy kliknąć, aby dodać nowy moduł, tak jak zwykle. Następnie wybierz w wyskakującym okienku zakładkę Dodaj z biblioteki i kliknij moduł galerii o nazwie „Szablon modułu galerii”.

Otóż ​​to. Przejdźmy teraz do projektów granicznych!

#1 Galeria zdjęć polaroidowych

Ten następny projekt jest popularnym obramowaniem obrazów, które wyglądają jak zdjęcie polaroidowe. Jest to układ szczególnie przydatny, jeśli chcesz wyświetlać tytuły obrazów.

Oto jak to zrobić.

Ustawienia sekcji

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej). Przed edycją modułu Galeria otwórz ustawienia sekcji i dodaj szary kolor tła, aby nasze białe obramowania trochę się wyskoczyły.

Tło: #dddddd

Ustawienia wiersza

Następnie zaktualizuj ustawienia wiersza za pomocą następujących elementów:

Szerokość rynny: 1

Pozwoli to pozbyć się domyślnych odstępów między obrazami. Później dodamy własne niestandardowe odstępy.

Ustawienia modułu galerii

Otwórz ustawienia modułu Galeria i zaktualizuj następujące elementy:

Pokaż tytuł i podpis: TAK

Grubość czcionki tytułu: pogrubiona
Styl czcionki tytułu: TT
Wyrównanie tekstu tytułu: do środka
Wysokość wiersza tytułu: 2em

Szerokość górnej krawędzi obrazu: 10px
Kolor górnego obramowania obrazu: #ffffff
Szerokość lewej krawędzi obrazu: 10px
Kolor lewej krawędzi obrazu: #ffffff
Szerokość prawego obramowania obrazu: 10px
Kolor prawego obramowania obrazu: #ffffff

Aby stworzyć odstępy między naszymi obrazami, dodaj następujące obramowanie do elementów galerii:

Szerokość obramowania: 10px
Kolor obramowania: #dddddd (dopasowuje kolor tła sekcji)

Aby pokolorować dolną część naszego projektu ramki polaroid, musimy dodać białe tło do modułu.

Kolor tła: #ffffff

Ostateczny wynik

Oto ostateczny wynik projektu granicy polaroidu.

#2 Czysty projekt siatki

Jeśli szukasz prostego i czystego stylu siatki dla swoich obrazów, ten projekt obramowania jest fajną opcją. Jest dobrze wyważony i nie męczy oczu.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej).

Ustawienia wiersza

Przed edycją modułu Galeria otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Szerokość rynny: 1
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Szerokość obramowania: 10px
Kolor obramowania: #dddddd

Ta granica wiersza jest niezbędna, aby dopasować zewnętrzne odstępy naszej galerii do odstępów między obrazami.

Ustawienia modułu galerii

Teraz otwórz ustawienia modułu galerii i dodaj obramowanie do elementów galerii i obrazów galerii, aktualizując następujące elementy:

Szerokość obramowania obrazu: 20px
Kolor obramowania obrazu: #ffffff

Szerokość obramowania: 10px
Kolor obramowania: przezroczysty (jest to ważne, aby pokazać kolor tła)

Teraz dodaj kolor tła do modułu galerii, aby ukończyć projekt.

Kolor tła: #dddddd (dopasowuje kolor obramowania wiersza)

Ponieważ obramowanie elementu galerii jest przezroczyste, dziedziczy kolor tła.

Ostateczny projekt

Zmiana kolorów obramowania poprzez zmianę koloru tła

Jeśli chcesz bawić się różnymi kolorami obramowania, możesz zmienić kolor tła na dowolny. Ale będziesz musiał usunąć obramowanie wiersza, dodać do modułu następujące odstępy:

Niestandardowe dopełnienie: 10 pikseli na górze, 10 pikseli na dole, 10 pikseli w lewo, 10 pikseli w prawo

Teraz możesz dostosować kolor tła do swoich potrzeb:

#3 Niestandardowy obraz tła za całą galerią

Ten projekt umożliwia użycie obrazu tła, który będzie służył jako rodzaj tekstury tła dla obramowań obrazów. Jest to dobry sposób, aby każde obramowanie obrazu było unikatowe, ponieważ pokazuje określony obszar obrazu tła modułu. Konfiguracja jest bardzo podobna do powyższego projektu czystej siatki.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej).

Ustawienia wiersza

Przed edycją modułu Galeria otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Szerokość rynny: 1
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Ustawienia modułu galerii

Teraz zaktualizuj ustawienia modułu galerii w następujący sposób:

Obraz w tle: [dodaj obraz] (jeszcze nie będzie można go zobaczyć)
Kolor tła: #dddddd (pokazuje się tylko wtedy, gdy używasz obrazu tła png z przezroczystością)
Szerokość obramowania obrazu: 10px
Kolor obramowania obrazu: #ffffff

Szerokość obramowania (dla modułu): 10px
Kolor obramowania: #ffffff

Następnie dodaj następujący niestandardowy kod CSS do elementu galerii:

padding: 3%;

Tworzy to separację między elementami galerii, aby ukończyć projekt.

Ostateczny wynik

#4 Niestandardowy obraz tła za każdym elementem galerii

Ten projekt pozwala na użycie obrazu tła jako obramowania dla każdego elementu galerii z osobna. Możesz utworzyć dowolny niestandardowy obraz lub użyć jednego z obrazów tła zawartych w naszych gotowych układach. Używam jednego z układu strony docelowej Meetup.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej).

Ustawienia wiersza

Przed edycją modułu Galeria otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Szerokość rynny: 2

Ustawienia modułu galerii

Teraz zaktualizuj ustawienia modułu galerii w następujący sposób:

Szerokość obramowania obrazu: 10px
Kolor obramowania obrazu: #ffffff

Następnie dodaj następujący niestandardowy kod CSS do elementu galerii:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

Następnie musisz przesłać niestandardowy obraz tła, który chcesz umieścić za każdym elementem galerii. W tym przykładzie używam obrazu z jednego z naszych gotowych pakietów układu. Po przesłaniu obrazu do galerii multimediów WordPress skopiuj adres URL obrazu do schowka.

Teraz wróć i otwórz ustawienia modułu galerii i wklej adres URL w niestandardowym CSS, gdzie jest napisane „wstaw adres URL obrazu tutaj”. Upewnij się, że trzymasz adres URL wewnątrz cytatów.

Ostateczny wynik

Oto ostateczny wynik.

#5 Kombinacja Cienia Pudełka i Obramowania

Cienie pudełkowe świetnie nadają się do nadania galerii niestandardowego charakteru. Możesz użyć cieni pudełkowych na obrazach modułu galerii Divi, aby stworzyć projekt uszkodzonej siatki, który obramowuje obrazy w unikalny sposób. Możesz również łączyć cień pudełkowy z projektami obramowań dla wszelkiego rodzaju możliwości.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej).

Dodaj obramowanie obrazu i cień pudełka

Otwórz ustawienia Galerii i zaktualizuj następujące elementy:

Szerokość obramowania obrazu: 10px
Kolor obramowania obrazu: #ffffff

Cień pola obrazu: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -30px
Pozycja pionowa cienia pudełka: -30px
Siła rozprzestrzeniania się cieni w pudełku: -10px
Kolor cienia: #e08474

Dodaj ramkę elementu galerii

Konstrukcja cienia pudełkowego wygląda dobrze tak, jak jest teraz. Możesz jednak dodać dodatkowe obramowanie do elementu galerii, aktualizując następujące elementy:

Szerokość prawego obramowania: 7px
Kolor prawego obramowania: #dddddd
Styl prawego obramowania: kropkowany
Szerokość dolnego obramowania: 7px
Kolor dolnej krawędzi: #dddddd
Styl dolnej granicy: kropkowany

Dodałem kropkowany styl obramowania, aby przypomnieć o różnych dostępnych stylach. Zapraszam do korzystania z innych stylów (takich jak jednolity lub przerywany).

Ustawienia wiersza

Aby nadać projektowi więcej miejsca, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Ustaw pełną szerokość wiersza: TAK

Ostateczny projekt

Oto ostateczny projekt.

#6: Projekt obramowania taśmy filmowej

W przypadku tego ostatniego projektu pomyślałem, że pokażę ci coś bardziej wyjątkowego. Ten projekt wykorzystuje przerywaną ramkę tylko po prawej i lewej stronie elementów galerii, która dzieli każdą kolumnę obrazów w sposób przypominający paski filmowe.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj zapisany szablon modułu Divi Gallery z biblioteki (wyjaśniono powyżej).

Ustawienia wiersza

Przed edycją modułu Galeria otwórz ustawienia wierszy i zmień szerokość rynny na 1.

Szerokość rynny: 1

Pozwoli to pozbyć się domyślnych odstępów między obrazami.

Ustawienia modułu galerii

Następnie otwórz ustawienia Galerii i zaktualizuj następujące elementy:

Dodaj przerywane obramowania obrazu

Szerokość prawego obramowania obrazu: 8px
Kolor prawego obramowania obrazu: #dddddd
Styl prawej krawędzi obrazu: przerywany
Szerokość lewej krawędzi obrazu: 8px
Kolor lewej krawędzi obrazu: #dddddd
Styl lewej krawędzi obrazu: przerywany

Dodaj ramkę elementu galerii dla odstępów

Szerokość lewej krawędzi: 20px
Kolor lewej krawędzi: #ffffff
Szerokość prawego obramowania: 20px
Kolor prawego obramowania: #ffffff

Dodaj cień pola obrazu

Cień pola obrazu: patrz zrzut ekranu
Siła rozmycia cieni w pudełku: 0px
Siła rozprzestrzeniania się cieni w pudełku: -10px
Kolor cienia: #222222

Dodaj kolor tła

Kolor tła: #222222

Następnie dodaj następujący niestandardowy kod CSS do elementu galerii:

padding: 5px 10px;

Wynik końcowy

Teraz sprawdź wynik.

Końcowe przemyślenia

Mam nadzieję, że te sześć przykładów projektów obramowań dostarczy inspiracji do tworzenia niestandardowych projektów obramowań dla twoich obrazów podczas korzystania z modułu Divi Gallery. Po uzyskaniu obsługi ustawień dostępnych w module Divi Gallery wystarczy trochę kreatywności. Baw się więc dobrze, odkrywając nowe opcje projektowania z różnymi obrazami, kolorami i odstępami.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!