Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Image Gallery

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.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 świetnym sposobem na wizualne zaangażowanie użytkowników swoimi treściami. Moduł Divi's Gallery pozwala tworzyć i organizować galerie w dowolnym miejscu na Twojej stronie internetowej. 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

Zanim dodasz moduł galerii do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej zauważysz przycisk Użyj Divi Builder nad edytorem postów 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 w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony. Mamy świetne samouczki na temat korzystania z elementów lignes i działy przez 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 automatycznie znaleźć i 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 zaprezentowania zdjęcia.

Dodanie galerii do strony ze zdjęciami to świetny sposób na promowanie swojej pracy i zwiększenie wiarygodności wśród klientów. W tym przykładzie pokażę, jak można użyć modułu galerii, aby dodać galerię obrazów z układem siatki obejmującym całą szerokość strony. Obrazy nie mają między sobą przestrzeni, co daje praktyczną i estetyczną prezentację.

tworzenie galerii obrazów divi.jpg

I nie zapominajmy, że każdy obraz otwiera wyskakujące okienko, aby przeglądać większe wersje obrazów w galerii.

lightbox divi gallery.gif

Korzystając z programu Visual Builder, dodaj nową sekcję pod sekcją nagłówka z wierszem o pełnej lub pełnej szerokości (1 kolumna). Następnie dodaj moduł Galeria do wiersza.

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 umieścić w galerii. Liczba zdjęć: 12 Tytuł wyświetlacza i podpis: NIE Wyświetl paginację: NIE

Opcje projektowania

Układ: Siatka Orientacja miniatur: Pozioma ikona Zoom Kolor: #ffffff Kolor po najechaniu najechaniem: rgba (0,0,0,0.48) Wybór ikony najechania: domyślny

divi wordpress tutorial content section.png

Zapisz ustawienia

Teraz pozostaje tylko pozbyć się całej przestrzeni wokół obrazów. Wróć i wybierz ustawienia wiersza. 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

Należy pamiętać, że wartość liczbowa „1” dla szerokości rynny to naprawdę zero (brak 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ść 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 Aktualizuj 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. Jeśli w galerii znajduje się więcej obrazów niż jest to dozwolone na każdej stronie, pod obrazami pojawi się paginacja.

Pokaż tytuł i podpis:

Jeśli tytuł lub podpis obrazu został dodany, 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 obrazów niż jest to dozwolone na każdej stronie, pod obrazami pojawi się paginacja. Jeśli chcesz usunąć stronicowanie, możesz wyłączyć to ustawienie.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania modułu galerii

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.

gallery module zone design.png

Usposobienie

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

Orientacja miniatury

Możesz wybrać, czy obrazy z galerii mają być w formacie pionowym czy poziomym. Jeśli zmienisz tryb, może być konieczne zregeneruj swoje miniatury .

Ikona Zoom Color

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

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]

Najedź na kolor nakładki

Gdy najedziesz kursorem na element w panelu Galeria, kolor nakładki pojawi się u góry obrazu oraz poniżej tekstu i ikony tytułu portfolio. 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 najedzie kursorem na elementy 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ć jasny. Jeśli tło jest jasne, tekst powinien być ciemny.

Czcionka tytułu

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

Rozmiar czcionki tytułu

Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu 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 rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

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

Odstępy liter tytułu

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułu, 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 rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu tytułu.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 znajdujący się po prawej stronie 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 rozmiaru, aby zmienić typ jednostki.

Czcionka legendy

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

Rozmiar czcionki legendy

Tutaj możesz dostosować rozmiar tekstu napisów. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu 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 rozmiaru, aby zmienić typ jednostki.

Kolor tekstu legendy

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu napisów, wybierz żądany kolor z próbnika 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ępy między każdą literą. Jeśli chcesz zwiększyć odstęp 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 rozmiaru, aby zmienić typ jednostki.

Wysokość linii legendy

Wysokość wiersza wpływa na odstęp między poszczególnymi wierszami tekstu podpisu.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 znajdującym się po prawej stronie 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 rozmiaru, aby zmienić typ jednostki.

Użyj granicy

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

Kolor obramowania

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

Szerokość granicy

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

Styl graniczny

Krawędzie obsługują osiem różnych stylów: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, nakładka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

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]

Zaawansowane opcje modułu galerii

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

opcja zaawansowana modułu galerii divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze 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 wyjątkiem tego, że nie wiem, jak usunąć prawy przycisk myszy, aby zapobiec zapisywaniu pod moimi obrazami. Czy masz rozwiązanie, z góry dziękuję. serdecznie

    1. Dobry wieczór Bernard,

      Aby zablokować prawe kliknięcie, musisz zainstalować wtyczkę. Zapraszam do wyszukiwania w katalogu WordPress.

Zostaw komentarz

Twoj adres e-mail nie bedzie 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