Przejdź do głównej treści

Divi Tutorial: Jak korzystać z modułu obrazu w Divi Builder

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]

Divi ułatwia dodawanie zdjęć w dowolnym miejscu na blogu. Wszystkie obrazy obsługują stopniowe ładowanie i są wyposażone w różne style animacji 4, dzięki którym przeglądanie witryny jest zabawne i wciągające. Moduły obrazu można umieścić w dowolnej tworzonej kolumnie, a ich rozmiar zostanie dopasowany do potrzeb.

image module divi.png

Jak dodać moduł obrazu z Divi

Aby dodać moduł obrazu 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 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 aktywacji programu Visual Builder możesz kliknąć szary przycisk (+), 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.

divi module image.png

Znajdź moduł obrazu 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 „obraz”, a następnie kliknąć Enter, aby wyszukać i automatycznie dodać moduł obrazu! 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: Dodawanie nakładających się obrazów w celu zilustrowania usług na stronie usługi

Istnieje niezliczona ilość sposobów korzystania z modułu obrazu. W tym przykładzie pokażę, jak dodawać obrazy do strony usługi dla witryny małej firmy. Tutaj dodam zdjęcia. Każde czerwone kółko reprezentuje obraz.

dodaj moduł divi builder.jpg

Ponieważ dodawanie obrazu do strony jest dość prostym i prostym procesem, dodam niestandardowy styl, aby ustawić moje obrazy tak, aby się nakładały, tworząc efekt układania.

Zacznijmy.

Użyj konstruktora wizualnego, aby dodać sekcję standardową z układem 1 / 4 1 / 4 1 / 2. Następnie dodaj moduł tekstowy do prawej kolumny 1 / 2 w wierszu. Wprowadź nagłówek i opis usługi.

Następnie dodaj moduł obrazu do kolumny 1 / 4 po lewej stronie.

dodaj obraz divi builder.png

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

Opcje zawartości

Adres URL obrazu: [wprowadź adres URL lub pobierz obraz o wymiarach 500 × 625]

Opcje projektowania

Margines niestandardowy: lewy -60px

Zaawansowane opcje

Animacja: od lewej do prawej

animacja divi image.png

Zapisz ustawienia

Dodaj kolejny moduł obrazu w drugiej kolumnie 1 / 4 (lub środkowej kolumnie) i zaktualizuj ustawienia obrazu w następujący sposób:

Opcje zawartości

Adres URL obrazu: [wprowadź adres URL lub pobierz obraz o wymiarach 500 × 625]

Opcje projektowania

Margines niestandardowy: górny 100px, lewy -60px

Zaawansowane opcje

Animacja: od prawej do lewej

Ł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]

nakładanie się obrazu divi.png

Zapisz ustawienia

Zajmuje się pierwszą częścią. Teraz, w następnej sekcji usługi, możemy powielić sekcję, którą właśnie utworzyliśmy dla pierwszej sekcji usługi. Po skopiowaniu sekcji zmień strukturę kolumny na układ kolumn 1 / 2 1 / 4 1 / 4 (odwrotnie niż poprzedni).

wybierz sekcję divi.jpg

Następnie przeciągnij moduł tekstowy z nagłówkiem i opisem usługi w kolumnie 1 / 2 po lewej stronie. Przeciągnij oba moduły obrazu, aby wypełnić każdą kolumnę 1 / 4 (teraz po prawej).

Ponieważ moduły obrazów są duplikatami, musimy pobrać nowe obrazy dla tej konkretnej sekcji usługi. Ponadto moduły zawsze mają niestandardowe ustawienia marginesów jako pierwsze dwa utworzone moduły obrazu. Zmieńmy to.

Począwszy od modułu obrazu w prawej kolumnie 1 / 4, zaktualizuj następujące ustawienia obrazu:

Opcje zawartości

Adres URL obrazu: [wprowadź adres URL lub pobierz obraz o wymiarach 500 × 625]

Opcje projektowania

Margines niestandardowy: -60px lewy (tylko)

Karta Zaawansowane

Animacja: od prawej do lewej

Na koniec zaktualizuj ustawienia obrazu dla modułu obrazu w centralnej kolumnie 1 / 4, dodając następujące elementy:

Opcje zawartości

Adres URL obrazu: [wprowadź adres URL lub pobierz obraz o wymiarach 500 × 625]

Opcje projektowania

Margines niestandardowy: 100px w górę, -60px w prawo

Karta Zaawansowane

Animacja: od lewej do prawej

Zapisz ustawienia

Teraz sprawdź stronę!

przykład strony usługi divi.jpg

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]

Opcje zawartości modułu obrazu

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.

sekcja image divi area contents.png

Adres URL obrazu

Umieść tutaj prawidłowy adres URL obrazu lub wybierz / prześlij obraz za pośrednictwem Biblioteki multimediów WordPress. Obrazy zawsze będą wyświetlane w wyrównanych do lewej kolumnach i będą obejmować całą szerokość kolumny. Jednak Twój obraz nigdy nie będzie większy niż oryginalny rozmiar. Wysokość obrazu zależy od proporcji oryginalnego obrazu.

Otwórz w przeglądarce

Możesz tutaj wybrać, czy obraz zostanie otwarty w przeglądarce po kliknięciu. Jeśli ta opcja jest włączona, obraz zostanie „powiększony” do maksymalnego rozmiaru po kliknięciu w oknie modalnym. Jest to doskonała funkcja dla portfeli.

Link URL

Umieść prawidłowy internetowy adres URL w tym polu, aby zamienić obraz w link. Pozostawienie tego pola pustego spowoduje po prostu pozostawienie obrazu jako elementu statycznego.

Otwieranie adresu URL

Możesz wybrać tutaj, jeśli link otworzy się w nowym oknie.

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 obrazu

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.

opcja design module image divi.png

Nakładka obrazu

Jeśli ta opcja jest włączona, kolor i ikona nakładki są wyświetlane, gdy użytkownik najedzie na obraz.

Nakładka ikony koloru

Tutaj możesz ustawić niestandardowy kolor ikony nakładki

Kolor nakładki na okładkę

Tutaj możesz zdefiniować niestandardowy kolor nakładki.

Ikona przelotu

Tutaj możesz zdefiniować niestandardową ikonę nakładki.

Usuń przestrzeń pod obrazem

Ta opcja wpływa tylko na obrazy, gdy są ostatnim modułem kolumny. Gdy ta opcja jest włączona, odległość między dolną częścią obrazu a następną sekcją jest usuwana, dzięki czemu obraz może obramować górę następnej sekcji strony.

Wyrównanie obrazu

Tutaj wybierasz kierunek, w którym obraz unosi się w kolumnie. Możesz przesunąć obraz w lewo, w prawo lub zachować środek.

Zawsze skupiaj obraz na telefonie komórkowym

Często małe obrazy są przyjemniejsze do oglądania na urządzeniach mobilnych, gdy są wyśrodkowane. Gdy kolumny ulegną awarii, obrazy wyrównane do lewej lub prawej w mniejszych kolumnach zostaną osierocone, gdy kolumny ulegną awarii i osiągną szerokość 100%. Włączenie tej kolumny z wymuszonymi obrazami do wyrównania do środka kolumny na urządzeniu mobilnym bez wpływu na wyrównanie obrazu na komputerach stacjonarnych.

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.

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.

Maksymalna szerokość obrazu

Domyślnie maksymalna szerokość obrazu jest ustawiona na 100%. Oznacza to, że obraz będzie wyświetlany z naturalną szerokością, chyba że szerokość obrazu przekroczy szerokość kolumny nadrzędnej, w którym to przypadku obraz będzie ograniczony do 100% szerokości kolumny. Jeśli chcesz dodatkowo ograniczyć maksymalną szerokość obrazu, możesz to zrobić, wprowadzając tutaj żądaną wartość maksymalnej szerokości. Na przykład wartość 50% ograniczy szerokość obrazu do 50% szerokości kolumny nadrzędnej.

Wymuś pełną szerokość

Domyślnie obrazy są wyświetlane w natywnej szerokości. Możesz jednak wymusić, aby obraz rozszerzył całą szerokość kolumny nadrzędnej, włączając tę ​​opcję.

Margines niestandardowy

Margines to przestrzeń dodana na zewnątrz modułu, między modułem a następnym elementem powyżej, poniżej lub po jego lewej i prawej stronie. Możesz dodać niestandardowe wartości marginesów do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wprowadzania. Domyślnie te wartości są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.

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 obrazu

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.

section advanced module image.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.

Animacja

To menu rozwijane służy do określania leniwej animacji ładowania obrazu. Możesz wybrać, czy obraz ma pojawiać się z prawej, lewej, dolnej lub górnej krawędzi.

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.

Alternatywny tekst obrazu

Tekst alternatywny zawiera wszystkie niezbędne informacje, jeśli obraz nie ładuje się, nie wyświetla się poprawnie lub w innej sytuacji, w której użytkownik nie widzi obrazu. Pozwala także na odczyt i rozpoznanie obrazu przez wyszukiwarki.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

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
10 akcji
udział4
ćwierkanie1
Enregistrer5