Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Galeria obrazów

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Udostępnianie kolekcji obrazów w Divi jest zawsze doskonałym sposobem na wizualne zaangażowanie użytkowników w twoje treści. Moduł Divi Gallery pozwala tworzyć i organizować galerie w dowolnym miejscu na stronie. Moduł galerii w Divi Builder jest dostępny w formacie siatki i suwaka i obsługuje duże galerie z paginacją.

galeria przykład divi.png

Jak dodać moduł galerii do swojej strony

Aby dodać moduł galerii do swojej strony, musisz najpierw wskoczyć do Divi Buildera. Po zainstalowaniu motywu Divi na swojej stronie internetowej zauważysz przycisk Użyj Divi Builder nad wydawcą za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

divi budowniczy

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii. Mamy świetne samouczki na temat korzystania z elementów lignes i działy Divi.

galeria zdjęć divi.png

Znajdź moduł galerii na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​możesz także wpisać słowo „galeria”, a następnie kliknąć Enter, aby wyszukać i automatycznie dodać moduł galerii! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: dodanie galerii obrazów o pełnej szerokości w celu prezentacji zdjęcia.

Dodanie galerii do strony ze zdjęciami to świetny sposób na promocję pracy i zwiększenie wiarygodności wśród klientów. W tym przykładzie pokażę ci, jak możesz użyć modułu galerii, aby dodać galerię obrazów z układem siatki, który działa na całej szerokości strony. W obrazach nie ma między nimi przestrzeni, co daje praktyczną i estetyczną prezentację.

tworzenie galerii obrazów divi.jpg

I nie zapominajmy, że każde zdjęcie otwiera wyskakujące okienko, aby przewijać większe wersje obrazów w galerii.

lightbox divi gallery.gif

Za pomocą programu Visual Builder dodaj nową sekcję pod sekcją nagłówka z linią o pełnej szerokości lub pełnej szerokości (kolumna 1). Następnie dodaj moduł galerii do linii.

Zaktualizuj ustawienia modułu Galerii w następujący sposób:

Opcje zawartości

Obrazy galerii: kliknij zaktualizowaną galerię i wybierz obrazy, które chcesz dołączyć do galerii. Liczba zdjęć: 12 Pokaż tytuł i podpis: NIE Pokaż paginację: NIE

Opcje projektowania

Układ: Siatka Orientacja miniatur: Pozioma Ikona powiększenia Kolor: #ffffff Kolor najazdu najazdu: rgba (0,0,0,0.48) Ikona wskaźnika myszy: domyślny

divi wordpress tutorial content section.png

Zapisz ustawienia

Teraz pozostaje tylko pozbyć się przestrzeni wokół obrazów. Wróć i wybierz parametry linii. Na karcie Projekt zaktualizuj następujące elementy:

Ustaw ten wiersz na pełną szerokość: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1

Ważne jest, aby pamiętać, że wartość liczbowa „1” dla szerokości rynny wynosi naprawdę zero (w ogóle nie ma szerokości).

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

konfiguracja luki w goutière.png

Zapisz ustawienia

To wszystko!

Opcje zawartości modułu Galeria

W zakładce treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

divi module galery content.png

Zdjęcia galerii

Kliknij przycisk Make dzień galeria aby uruchomić bibliotekę multimedialną WordPress, w której możesz wybrać obrazy, które chcesz wyświetlić w swojej galerii.

Liczba zdjęć

Ustaw liczbę obrazów wyświetlanych na stronie. Gdy w galerii znajduje się więcej zdjęć niż dozwolona na każdej stronie, pod nimi pojawi się paginacja.

Pokaż tytuł i podpis:

Jeśli dodano tytuł lub podpis obrazu, pojawią się one pod obrazem w galerii. Jeśli chcesz wyłączyć te elementy tekstowe, możesz to zrobić za pomocą tej opcji.

Wyświetl paginację

Gdy w galerii znajduje się więcej zdjęć niż dozwolona na każdej stronie, pod nimi pojawi się paginacja. Jeśli chcesz usunąć paginację, możesz wyłączyć to ustawienie.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania modułu galerii

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

gallery module zone design.png

Usposobienie

Domyślnie galerie są wyświetlane jako siatka obrazów. Możesz także wybrać wyświetlanie galerii jako suwaka obrazu.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Orientacja miniatury

Możesz wybrać, aby obrazy twojej galerii były w formacie pionowym lub poziomym. Jeśli zmienisz tryby, może być konieczne zregeneruj swoje miniatury .

Ikona Zoom Color

Po najechaniu wskaźnikiem myszy na element w module Galeria pojawia się ikona nakładki. Można dostosować kolor używany z tej ikony za pomocą próbnika kolorów w tym ustawieniu.

Nakładka nakładki kolorów (najedź kursorem)

Po najechaniu wskaźnikiem myszy na element w module galerii kolor nakładki pojawia się u góry obrazu i pod ikoną tekstu i tytułu portfela. Domyślnie używany jest półprzezroczysty biały kolor. Jeśli chcesz użyć innego koloru, możesz dostosować kolor za pomocą próbnika kolorów w tym ustawieniu

Ikona selektora przelotu (najechanie kursorem)

Tutaj możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy użytkownik przeleci nad elementami galerii w module.

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być wyraźny. Jeśli tło jest czyste, tekst musi być ciemny.

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułowego, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Tytułowy rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu tytułu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu tytułowego, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między wierszami tekstu tytułowego Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się na prawo od kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Czcionka legendy

Możesz zmienić czcionkę tekstu podpisu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki legendy

Tutaj możesz dostosować rozmiar tekstu podpisu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu Legendy

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu podpisu, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

odstępy między literami legendy divi.png

Odstępy liter legendy

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstępy między każdą literą w tekście podpisu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii legendy

Wysokość linii wpływa na odstęp między wierszami tekstu legendy Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania na prawo od kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie ramki wokół twojego modułu. Tę granicę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy w próbniku kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie ramki mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Obsługiwane niestandardowe jednostki miary, co oznacza, że ​​możesz zmienić domyślną jednostkę „px” na coś innego, np. Em, vh, vw itp.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Styl graniczny

Obramowania obsługują osiem różnych stylów: bryłowy, kropkowany, kropkowany, podwójny, rowek, grzbiet, wkładka i start. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Zaawansowane opcje modułu galerii

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

opcja zaawansowana modułu galerii divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 4
  1. Witaj, moje artykuły są bardzo interesujące.
    Stworzyłem galerię pod Divi, zgodnie z twoją radą i wszystko działa dobrze, z tym wyjątkiem, że nie wiem, jak usunąć prawy przycisk myszy, aby uniemożliwić nagrywanie pod moimi obrazami. Czy masz rozwiązanie, z góry dziękuję. serdecznie

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
6 akcji
udział2
ćwierkanie
Enregistrer4