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ą.
Jak dodać moduł galerii do swojej strony
Zanim będziesz mógł dodać moduł galerii do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, 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.
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.
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.
Świetnym sposobem jest dodanie galerii do strony ze zdjęciami promować swoją pracę i zwiększ swoją wiarygodność w oczach klientów. W tym przykładzie pokażę, jak za pomocą modułu galerii dodać galerię obrazów z układem siatki rozciągającym się na całą szerokość strony. Obrazy nie mają między sobą odstępów, co zapewnia praktyczną i estetyczną prezentację.
I nie zapominajmy, że każdy obraz otwiera wyskakujące okienko, aby przeglądać większe wersje obrazów w galerii.
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
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).
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.
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.
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.
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 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.
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.
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.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam, opcja galerii, wygląda interesująco. To powiedziawszy, jak mogę losowo wybrać moje zdjęcia z danej grupy? Chcę zastąpić stronę html/php w mojej witrynie, aby mieć tylko wp/divi. Pomysł ? wtrysk php… inne… Z góry dziękuję. Adres mojej strony poniżej, kliknięcie miniatury powoduje powrót do tej strony html/php, o której mówię. Kliknięcie obrazu pokazu slajdów html/php, aby powrócić do miniatur (strona wordpress). I tak dalej, obrazy pokazu slajdów są przechowywane w bazie danych z kodem, który ogranicza losowe pole wyboru do 5, odnawiane za każdym razem.
Aby mieć na innej stronie WP wstrzyknięty kod do wybierania informacji bezpośrednio w bazie danych WP, pamiętam, że nie było to łatwe, zanim zadziałało… Dziękuję za twoją stronę!
Dobry wieczór,
Chcę wyśrodkować w pionie obrazy o różnych rozmiarach w galerii DIVI.
Nieważne, jak bardzo wyglądam, nie mogę tego znaleźć. Masz wskazówkę ??
Merci d'avance.
CDT
Cześć, ale jak mogę mieć 5 obrazów w tej samej linii?
Nie mogę mieć więcej niż 4!
Dziękuję.
Witam,
Musisz użyć wtyczki takiej jak Visual Composer lub Elementor. Dają więcej możliwości.
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
Dobry wieczór Bernard,
Aby zablokować prawe kliknięcie, musisz zainstalować wtyczkę. Zapraszam do wyszukiwania w katalogu WordPress.