Zanim będziesz mógł dodać moduł Podsumowanie do swojej strony, musisz najpierw uzyskać dostęp do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Klikając ten przycisk, aktywujesz Divi Builder, który zapewnia 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 kiedy przeglądasz swoje Witryna internetowa upstream, jeśli jesteś zalogowany do pulpitu 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.
Znajdź moduł Podsumowanie 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 „Podsumowanie”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać opisowy moduł tekstowy! Po dodaniu modułu zostaniesz powitany listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .
przypadek użycia, aby wyświetlić listę usług firmy na stronie głównej
Ponieważ moduł Podsumowanie łączy zarówno obrazy, jak i tekst, aby zaprezentować określone funkcje, możesz go użyć do dodania listy usług Twojej firmy do strony głównej. Moduł Blurb pozwala również zamienić obraz / ikonę i tytuł w łącze do strony usługi. W tym przykładzie zamierzam użyć modułu Blurb, aby dodać cztery polecane usługi do strony głównej.
Aby dodać wszystkie cztery Blurbs do swojej strony, użyj kreatora wizualnego, aby dodać standardową sekcję z wierszem czterech kolumn. Następnie dodaj moduł Blurb do pierwszej kolumny w swoim wierszu.
Zaktualizuj ustawienia Blurb w następujący sposób:
Opcje zawartości
Tytuł: [wpisz tytuł usługi]
Treść: [wprowadź krótki opis usługi]
URL: [dodaj adres URL do strony serwisu]
Użyj ikony: TAK
Ikona: [wybierz ikonę ilustrującą twoją usługę]
Opcje projektowania
Kolor ikony: # 42bb99 (wybierz kolor pasujący do projektu witryny)
Użyj ikony Rozmiar czcionki: TAK
Rozmiar czcionki ikony: 68 pikseli (dostosowuje rozmiar ikony)
Orientacja tekstu: Środek -
Rozmiar czcionki głowy: 24 piksele
Rozmiar czcionki: 18 pikseli
Wysokość linii nadwozia: 1.5em
Teraz twój pierwszy tekst wprowadzający jest zakończony.
Teraz zduplikuj moduł Podsumowanie, który właśnie utworzyłeś, trzy razy i przeciągnij każde ze zduplikowanych podsumowań do pozostałych trzech kolumn. Ponieważ ustawienia projektu zostały zintegrowane ze zduplikowanymi modułami, wystarczy zmodyfikować plik treść (nagłówek, treść, ikona, adres URL itp.) i zmodyfikuj kolory, aby dostosować je do każdej z Twoich usług.
Opcje treści podsumowania
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 na tej karcie.
Tytuł
Nadaj tekstowi tytuł, który pojawi się nad tekstem w pogrubionym stylu. Opcja adresu URL znajdująca się pod polem Tytuł pozwoli Ci uczynić tytuł hiperłączem.
Treść
W tym polu możesz wprowadzić treść swojego tekstu. Blurb Text zajmie również całą szerokość kolumny do 550 pikseli.
URL
Umieść prawidłowy adres URL w tym polu, aby zamienić tytuł z Blurb w łącze. Pozostawienie tego pola pustego spowoduje po prostu pozostawienie tytułu jako elementu statycznego.
Otwarty adres URL
Tutaj możesz wybrać, czy Twój link otworzy się w nowym oknie.
Użyj ikony
Korzystając z Notatek, możesz użyć ikony lub obrazu z tekstem. Jeśli wybierzesz „Tak” dla opcji „Użyj ikony”, dostępne będą następujące opcje dostosowania ikony. Jeśli nie zdecydujesz się na użycie ikony, pojawi się monit o przesłanie obrazu.
ikona
Jeśli wybrałeś „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja przedstawia listę dostępnych ikon, których możesz używać w swojej notatce. Po prostu kliknij ikonę, której chcesz użyć, a pojawi się ona w Twoim tekście.
Obraz
Jeśli nie zdecydowałeś się na użycie ikony, pojawi się to ustawienie. Umieść tutaj prawidłowy adres URL obrazu lub wybierz / prześlij obraz za pośrednictwem biblioteki multimediów WordPress. Obrazy w module Podsumowanie są zawsze wyśrodkowane w swoich kolumnach i obejmują całą szerokość kolumny do 550 pikseli. Jednak obraz nigdy nie będzie większy niż pierwotnie przesyłany rozmiar. Wysokość obrazu prezentacji zależy od współczynnika proporcji oryginalnego obrazu. Dlatego zaleca się umieszczenie wszystkich obrazów prezentacji na tej samej wysokości, jeśli są one umieszczane obok siebie.
Kolor tła
Zdefiniuj niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć koloru domyślnego.
Obraz tła
Jeśli jest ustawiona, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, po prostu usuń adres URL z pola Ustawienia. Obrazy tła pojawią się nad kolorami tła, co oznacza, że kolor tła nie będzie widoczny po zastosowaniu obrazu tła.
Etykieta administratora
Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawią się w bloku modułu interfejsu Divi Builder.
Opcje projektowania modułu podsumowania
Na karcie Projekt znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala na modyfikację wyglądu Twojego modułu. Każdy moduł Divi ma długą listę ustawień projektowych, których można użyć do dostosowania prawie wszystkiego.
Kolor ikony
Jeśli wybrałeś „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja umożliwia dostosowanie koloru ikony. Domyślnie ikony są ustawione na kolor akcentu motywu.
Ikona koła
Jeśli wybrałeś „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja umożliwia umieszczenie ikony w kolorowym kółku. Jeśli wybierzesz opcję „tak” dla tego ustawienia, będą dostępne dodatkowe opcje dostosowania koloru i obramowania okręgu.
Kolor koła
Jeśli wybierzesz „Tak” dla ustawienia „Ikona koła”, pojawi się ta opcja. Tutaj możesz wybrać kolor swojego koła. Ten kolor jest niezależny od koloru poprzednio wybranej ikony. Twoja ikona w swoim kolorze pojawi się wewnątrz okręgu o kolorze, który tutaj wybierzesz.
Pokaż granicę koła
Jeśli wybierzesz „Tak” dla ustawienia „Ikona koła”, pojawi się ta opcja. Ta opcja umożliwia aktywowanie obramowania dla Twojego kręgu. Jeśli ta opcja jest zaznaczona, pojawi się dodatkowa opcja wyboru koloru obramowania.
Kolor obramowania koła
Jeśli wybierzesz „Tak” dla ustawienia „Pokaż obramowanie okręgu”, pojawi się ta opcja. Tutaj możesz dostosować kolor obramowania koła.
Umieszczenie obrazu / ikony
Tutaj możesz wybrać lokalizację swojego obrazu/ikony. Może pojawić się nad tekstem lub po lewej stronie tekstu. Umieszczając obraz/ikonę po lewej stronie tekstu, obraz będzie mniejszy niż umieszczony na górze.
Użyj rozmiaru czcionki ikony
Jeśli ta opcja jest włączona, możesz wprowadzić niestandardowy rozmiar ikony wyświetlanej powyżej lub dwóch po lewej stronie Twojej notatki.
Kolor tekstu
Jeśli Twoja notatka jest umieszczona na ciemnym tle, kolor tekstu powinien być ustawiony na „Ciemny”. I odwrotnie, jeśli Twoja notatka jest umieszczona na jasnym tle, kolor tekstu powinien być ustawiony na „Jasny”.
Orientacja tekstu
To menu rozwijane umożliwia określenie orientacji tekstu jako wyrównanego do lewej, wyśrodkowanego lub wyrównanego do prawej.
Czcionka nagłówka
Możesz zmienić czcionkę nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych 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 opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Rozmiar czcionki nagłówka
Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz 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 rozmiaru, aby zmienić typ jednostki.
Kolor tekstu nagłówka
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy między literami w nagłówku
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 nagłówka, użyj suwaka interwału, 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 rozmiaru, aby zmienić typ jednostki.
Wysokość wiersza nagłówka
Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu nagłówka.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 pole wprowadzania 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 rozmiaru, aby zmienić typ jednostki.
Czcionka ciała
Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych 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 opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Rozmiar czcionki ciała
Tutaj możesz dostosować rozmiar swojego tekstu podstawowego. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz 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 rozmiaru, aby zmienić typ jednostki.
Kolor tekstu w kolorze
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu podstawowego, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Rozstawianie liter ciała
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ą tekstu podstawowego, użyj suwaka interwału, 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 rozmiaru, aby zmienić typ jednostki.
Wysokość linii ciała
Wysokość linii wpływa na odstępy między poszczególnymi wierszami tekstu podstawowego. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka odstępu, 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 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ługa niestandardowych jednostek 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, w tym: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, wstawka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.
Maksymalna szerokość obrazu
Zastosowanie tutaj maksymalnej wartości szerokości ograniczy szerokość obrazu prezentacji. Dotyczy to tylko notatek, które nie są w trybie ikon.
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.
Niestandardowe wypełnienie
Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego wewnętrznymi elementami. Możesz dodać niestandardowe wartości dopełnienia 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.
Opcje zaawansowane Moduł podsumowania
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, które będą używane w tym module. Klasa CSS może służyć do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas oddzielonych spacją. Te zajęcia mogą być używane w twoim Motyw Divi Child lub w niestandardowym CSS, który dodajesz do swojej strony lub pliku Witryna internetowa korzystając z opcji motywu Divi lub ustawień strony Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już osadzone ze znacznikami stylu. Musisz więc tylko wprowadzić reguły CSS oddzielone średnikami.
Animacja obrazu / ikony
Kontroluje kierunek leniwej animacji ładowania.
ALT tekst z obrazu
Jeśli nie zdecydowałeś się na użycie ikony, pojawi się to ustawienie. Inny tekst zawiera wszelkie potrzebne informacje, jeśli obraz nie ładuje się, nie wyświetla poprawnie lub w jakiejkolwiek innej sytuacji, w której użytkownik nie widzi obrazu. Umożliwia także odczytanie i rozpoznanie obrazu przez wyszukiwarki.
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, eliminując pewne elementy ze strony.
To wszystko w tym samouczku. Mamy nadzieję, że pokazaliśmy Ci, jak korzystać z modułu podsumowania w Divi.
Witam,
Chcę użyć modułu podsumowania, aby wstawić około 200 miniatur na stronie.
Każda miniatura przedstawia tytuł produktu na sprzedaż, ale nie chcę korzystać z woocommerce, tylko link do kontaktu ...
Ta strona będzie regularnie aktualizowana o nowe miniatury.
Te miniatury (czyli 200 modułów podsumowujących) powinny być wymienione w kolejności alfabetycznej (na podstawie tytułu), także wtedy, gdy dodaję nowe moduły na końcu strony ...
Czy wiesz, jak mogłem to zrobić?
merci beaucoup