Przejdź do głównej treści

Jak korzystać z modułu Podsumowanie 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]

Aby dodać moduł Podsumowanie do swojej strony, musisz najpierw uzyskać dostęp 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ę. Kliknięcie tego przycisku aktywuje Divi Builder, który daje 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 strony internetowej, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

przycisk divi moduł budowniczy blog divi

Po wprowadzeniu do Visual Builder, możesz kliknąć szary przycisk plus, 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.

moduł wznów divi builder.png

Poszukaj modułu 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 wyszukać i automatycznie dodać opisowy moduł tekstowy! Po dodaniu modułu zostanie wyświetlona lista opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Użyj case, aby wyświetlić listę usług firmy na stronie głównej

Ponieważ moduł Podsumowanie łączy zarówno obrazy, jak i tekst w celu przedstawienia niektórych funkcji, możesz go użyć do dodania listy usług firmy do swojej strony głównej. Moduł Blurb umożliwia także przekształcenie obrazu / ikony i tytułu w link do strony usługi. W tym przykładzie użyję modułu Blurb, aby dodać cztery polecane usługi do strony głównej.

Strona usługi divi.png

Aby dodać cztery napisy do swojej strony, użyj narzędzia do tworzenia wizualnych, aby dodać standardową sekcję z czterokolumnowym rzędem. Następnie dodaj moduł Blurb do pierwszej kolumny linii.

Zaktualizuj ustawienia Blurb w następujący sposób:

Opcje zawartości

Tytuł: [wprowadź tytuł usługi] Treść: [wprowadź krótki opis usługi] URL: [dodaj adres URL do strony usługi] Użyj ikony: TAK
Ikona: [wybierz ikonę ilustrującą twoją usługę]

Opcje projektowania

Ikona koloru: # 42bb99 (określ kolor jako komplement projektu strony)
Użyj ikony rozmiaru czcionki: TAK
Rozmiar czcionki ikony: 68px (dostosowuje rozmiar ikony)
Tekst orientacyjny: centrum -
head Rozmiar czcionki: 24px
Rozmiar czcionki: 18px
Wysokość linii nadwozia: 1.5em

usługi projektowania divi.png

Teraz twój pierwszy tekst wprowadzający jest zakończony.

lista usług divi builder.jpg

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ż parametry projektu zostały zintegrowane z duplikatami modułów, wystarczy zmodyfikować zawartość (nagłówek, treść, ikonę, adres URL itp.) I zmodyfikować kolory, aby pasowały do ​​każdej z usług.

pełna lista usług divi.jpg

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.

parametry podsumowanie modułu wordpress.png

Tytuł

Podaj tytuł tekstu, który pojawi się nad tekstem pogrubioną czcionką. Opcja adresu URL pod polem Tytuł pozwoli ci zamienić tytuł w hiperłącze.

Treść

W tym polu możesz wpisać treść swojego tekstu. Tekst napisu obejmie również całą szerokość kolumny do 550px.

URL

Umieść prawidłowy adres URL w tym polu, aby zmienić tytuł Blurb w link. Pozostawienie tego pola pustego spowoduje pozostawienie tytułu jako elementu statycznego.

Otwarty adres URL

Możesz tutaj wybrać, czy link otworzy się w nowym oknie.

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

Użyj ikony

Podczas używania napisów 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, aby dostosować ikonę. Jeśli nie zdecydujesz się na użycie ikony, pojawi się monit o przesłanie obrazu.

ikona

Jeśli wybierzesz „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja wyświetla listę dostępnych ikon, których można używać z tekstem prezentacji. Po prostu kliknij ikonę, której chcesz użyć, a pojawi się ona w tekście.

użyj ikon divi builder.png

Obraz

Jeśli nie wybrałeś użycia 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 zawsze wydają się wyśrodkowane w swoich kolumnach i pokrywają całą szerokość kolumny do 550px. Jednak twój obraz nigdy nie będzie większy niż oryginalny rozmiar pliku do pobrania. Wysokość obrazu prezentacji zależy od proporcji oryginalnego obrazu. Dlatego wskazane jest umieszczenie wszystkich obrazów prezentacji na tej samej wysokości, jeśli zostaną umieszczone obok siebie.

Kolor tła

Ustaw niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć domyślnego koloru.

Obraz tła

Jeśli jest ustawiony, 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ę powyżej kolorów 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 Visual Builder, te etykiety 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 zmienić wygląd twojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do edycji niemal wszystkiego.

moduł projektowania opcji wznów divi.png

Kolor ikony

Jeśli wybierzesz „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja pozwala dostosować kolor ikony. Domyślnie ikony są ustawione na kolor akcentujący motyw.

Ikona koła

Jeśli wybierzesz „Tak” dla ustawienia „Użyj ikony”, pojawi się ta opcja. Ta opcja pozwala umieścić ikonę w kolorowym kole. Jeśli wybierzesz „tak” dla tego ustawienia, otrzymasz dodatkowe opcje, aby dostosować kolor i obramowanie swojego koła.

Kolor koła

Jeśli wybierzesz „Tak” dla ustawienia „Ikona koła”, pojawi się ta opcja. Tutaj możesz wybrać kolor dla swojego koła. Ten kolor jest niezależny od koloru poprzednio wybranej ikony. Twoja ikona, w swoim kolorze, pojawi się w kole z kolorem wybranym tutaj.

Pokaż granicę koła

Jeśli wybierzesz „Tak” dla ustawienia „Ikona koła”, pojawi się ta opcja. Ta opcja pozwala aktywować ramkę dla twojego kręgu. Jeśli ta opcja jest wybrana, pojawi się dodatkowa opcja, aby wybrać kolor 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ż gdyby był 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 tekstu prezentacji.

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]

Kolor tekstu

Jeśli tekst prezentacji jest umieszczony na ciemnym tle, kolor tekstu powinien być ustawiony na „Ciemny”. I odwrotnie, jeśli tekst prezentacji jest umieszczony na jasnym tle, kolor tekstu powinien być ustawiony na „Jasny”.

Orientacja tekstu

To menu rozwijane pozwala określić orientację tekstu, tak aby był wyjustowany do lewej, wyśrodkowany lub wyjustowany z prawej strony.

Czcionka nagłówka

Możesz zmienić czcionkę nagłówka, wybierając czcionkę z rozwijanego menu. Divi zawiera dziesiątki świetnych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na 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 wpisać żądaną wartość rozmiaru tekstu bezpośrednio 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.

moduł podsumowuje styl sekcji title.png

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 ten kolor w próbniku kolorów za pomocą tej opcji.

Odstępy między papierami firmowymi

Odstępy między literami wpływają na odstęp między literami. 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 odstęp 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 nagłówka

Wysokość linii wpływa na odstęp między wierszami tekstu nagłówka Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka interwału, 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ć czcionkę swojego ciała, wybierając wybraną czcionkę z menu rozwijanego. Divi zawiera dziesiątki świetnych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na 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 tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość rozmiaru tekstu bezpośrednio 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, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy między literami wpływają na odstęp między literami. 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 odstęp 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ęp między każdą linią tekstu podstawowego. Jeśli chcesz zwiększyć odstęp między wierszami, 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.

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 w zakresie lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Dostosowane jednostki środków wsparcia, co oznacza, że ​​możesz zmienić domyślną jednostkę „px” na coś innego, np. Em, vh, vw itp.

konfiguracja modułu sbourdires wznów divi builder.png

Styl graniczny

Obramowania obsługują osiem różnych stylów, w tym: bryłowy, 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 wartości maksymalnej szerokości ograniczy szerokość obrazu prezentacji. Dotyczy to tylko naklejek, 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 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.

Niestandardowe wypełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości wypełnienia 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.

Opcje zaawansowane Moduł podsumowania

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.

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]

sekcja podsumowania modułu zaliczka.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub tworzenia linków do poszczególnych 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 Divi Child lub w niestandardowym CSS dodawanym do 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 niestandardowej sekcji 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 w znacznikach stylu. Musisz tylko wprowadzić reguły CSS oddzielone średnikami.

Animacja obrazu / ikony

Kontroluje kierunek animacji przez leniwe ładowanie.

Tekst ALT obrazu

Jeśli nie wybrałeś użycia ikony, pojawi się to ustawienie. Inny tekst zawiera wszelkie niezbędne informacje, jeśli obraz nie ładuje się, jest wyświetlany poprawnie lub w innej sytuacji, w której użytkownik nie widzi obrazu. Pozwala także na odczyt i rozpoznanie obrazu przez wyszukiwarki.

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 używać różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

To tyle w tym samouczku. Mamy nadzieję, że pokazaliśmy Ci, jak korzystać z modułu podsumowania w 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
13 akcji
udział6
ćwierkanie2
Enregistrer5