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 901.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 swoim blogu. Wszystkie obrazy obsługują ładowanie progresywne i mają 4 różne style animacji, które sprawiają, że przeglądanie witryny jest przyjemne i wciągające. Moduły obrazu można umieścić w dowolnej utworzonej kolumnie, a ich rozmiar zostanie dopasowany.

image module divi.png

Jak dodać moduł obrazu z Divi

Zanim dodasz 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 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 aktywowaniu programu Visual Builder możesz kliknąć szary przycisk (+), 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.

divi module image.png

Znajdź moduł obrazu na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modów można przeszukiwać, co oznacza, że ​​możesz także wpisać słowo „obraz”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać mod do 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: dodanie nakładających się obrazów w celu zilustrowania usług na stronie usług

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

dodaj moduł divi builder.jpg

Ponieważ dodanie obrazu do strony jest dość prostym i prostym procesem, dodam niestandardowe style, aby ustawić moje obrazy tak, aby zachodziły na siebie, tworząc efekt układania.

Zacznijmy.

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

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

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 1/4 kolumny (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

To zajmuje się pierwszą sekcją. Teraz dla następnej sekcji usługi możemy powielić sekcję, którą właśnie utworzyliśmy dla pierwszej sekcji usługi. Gdy sekcja zostanie zduplikowana, zmień strukturę kolumny na układ 1/2 1/4 1/4 kolumny (odwrotny do poprzedniego).

wybierz sekcję divi.jpg

Następnie przeciągnij moduł tekstowy z nagłówkiem i opisem usługi do kolumny 1/2 po lewej stronie. Upewnij się, że przesuniesz dwa moduły obrazu, aby wypełnić każdą 1/4 kolumny (teraz po prawej).

Ponieważ moduły obrazów są duplikatami, musimy przesłać nowe obrazy dla tej konkretnej sekcji usługi. Ponadto moduły zawsze mają niestandardowe ustawienia marginesów, takie jak 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 1/4 środkowej kolumny o następujące:

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

Opcje zawartości modułu obrazu

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.

sekcja image divi area contents.png

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]

Adres URL obrazu

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

Otwórz w przeglądarce

Tutaj możesz wybrać, czy Twój obraz otworzy się w przeglądarce po kliknięciu. Jeśli ta opcja jest włączona, obraz zostanie „powiększony” do swojego maksymalnego rozmiaru po kliknięciu w oknie modalnym. To świetna funkcja dla portfeli.

Link URL

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

Otwieranie adresu URL

Tutaj możesz wybrać, czy Twój link otworzy się w nowym oknie.

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 obrazu

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.

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 umieści wskaźnik myszy nad obrazem.

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ń miejsce pod obrazem

Ta opcja ma wpływ tylko na obrazy, które są ostatnim modułem w kolumnie. 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 twój obraz unosi się w kolumnie. Możesz przesunąć obraz w lewo, w prawo lub utrzymać go w środku.

Zawsze wyśrodkuj obraz na telefonie komórkowym

Często małe obrazy są bardziej przyjemne dla oka na urządzeniach mobilnych, gdy są wyśrodkowane. W przypadku niepowodzenia kolumn obrazy wyrównane do lewej lub prawej w mniejszych kolumnach zostają osierocone, gdy kolumny ulegną awarii i osiągną 100% szerokości. Włączenie tej kolumny z wymuszonymi obrazami do wyrównania do środka kolumny na urządzeniach mobilnych bez wpływu na wyrównanie obrazu na komputerach stacjonarnych.

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.

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 przekracza 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ą maksymalną wartość 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 z natywną szerokością. Możesz jednak wymusić, aby obraz obejmował 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 lewej i prawej stronie. Możesz dodać niestandardowe wartości marginesów do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.

Zaawansowane opcje modułu obrazu

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.

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]

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

Animacja

Użyj tego menu rozwijanego, aby określić leniwą animację ładowania obrazu. Możesz wybrać, aby obraz był wyświetlany z prawej, lewej strony, z dołu lub z góry.

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.

Tekst alternatywnego obrazu

Tekst alternatywny zawiera wszystkie niezbędne informacje, jeśli obraz nie ładuje się, nie wyświetla poprawnie lub w jakiejkolwiek innej sytuacji, w której użytkownik nie może wyświetlić obrazu. Umożliwia także odczytanie i rozpoznanie obrazu przez wyszukiwarki.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

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
8 akcji
udział
ćwierkanie1
Enregistrer7