Przejdź do głównej treści

Divi Tutorial: Jak korzystać z modułu Job Title

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. [Zalecana]

Moduł Tytuł pozycji Divi wyświetla tytuł bieżącej publikacji oraz, w stosownych przypadkach, obraz publikacji i metadane w elegancki sposób. Pozwala to tworzyć bardziej unikalne publikacje podczas tworzenia publikacji za pomocą Divi Builder.

Jak dodać moduł Post Title do swojej strony

Zanim dodasz moduł tytułowy do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi w witrynie 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 również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

divi budowniczy

Po wprowadzeniu programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

divi module title of article.png

Znajdź moduł tytuł artykułu na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "tytuł posste", a następnie kliknąć enter, aby znaleźć automatyczne i dodać moduł title post! 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 użycia: formatowanie modułu tytułu publikacji dla posta w blogu

W tym przykładzie pokażę, jak łatwo można dostosować tytuł publikacji do posta na blogu.

przykład użycia modułu tytuł publikacji.jpg

Pierwszą rzeczą, którą musisz zrobić, to przejść do strony "Edytuj artykuł" na pulpicie WordPress. W polu Ustawienia Divi Post w prawym górnym rogu ustaw układ na pełną szerokość i ukryj tytuł artykułu.

ukryj tytuł artykułu.png

Za pomocą programu Visual Builder dodaj regularną sekcję z wierszem o pełnej szerokości (kolumna 1). Następnie dodaj moduł Post Title do wiersza.

wybierz tytuł divi.png

Zaktualizuj ustawienia tytułu wiadomości w następujący sposób:

Opcje zawartości

Wyświetl posty Kategorie: NIE Wyświetl komentarze Liczba: NIE Wyświetl obrazek: Tak Prezentowana lokalizacja obrazu: Obraz tytułowy / Meta

Opcje projektowania

Orientacja tekstu: środkowy Kolor tekstu: Jasny kolor tła Tekst: TAK Tekst Kolor tła: rgba (0,0,0,0.35) Tytuł Czcionka: Roboto (pogrubiony) Tytuł Rozmiar czcionki: 50px Tytuł Odstęp litery: 2px title Wysokość linii: 1em Meta Czcionka: Raleway Light Meta Rozmiar czcionki: 24px Meta Kolor czcionki: # e0ba67

przykład artykułu.jpg

Zapisz ustawienia

To wszystko. Teraz już nigdy nie musisz zadowalać się kolejnym nudnym tytułem!

Opcje zawartości tytułu publikacji

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

moduł pocztowy option.png

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

Pokaż tytuł

Tutaj możesz wybrać, czy wyświetlać tytuł artykułu.

Pokaż Meta

Tutaj możesz zdecydować, czy wyświetlić post Meta czy nie.

Zobacz autora

Tutaj możesz wybrać, czy wyświetlać nazwisko autora w Post Meta.

Pokaż datę

Tutaj możesz wybrać, czy wyświetlać datę czy nie.

Format daty

Tutaj możesz ustawić format daty w Post Meta. Domyślna wartość to "Mj, Y"

Pokaż kategorie artykułów

Tutaj możesz wybrać, czy wyświetlać kategorie w Post Meta. Uwaga: ta opcja nie działa z niestandardowymi typami publikacji.

Wyświetl komentarze

Tutaj możesz wybrać, czy wyświetlać liczbę komentarzy w Post Meta.

Pokaż obraz w świetle reflektorów

Tutaj możesz wybrać, czy chcesz wyświetlić wybrany obraz.

Wyróżnione położenie obrazu

Tutaj możesz wybrać miejsce, w którym chcesz umieścić wybrany obraz.

Kolor tła

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

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu ułatwienia identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułów interfejsu Divi Builder.

Opcje projektowania tytułów

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

set design post title module.png

Użyj efektu Parallax

Jeśli pozycjonowanie wybranego obrazu jest ustawione na "tytuł / Meta obraz tła", możesz wybrać, czy chcesz użyć efektu paralaksy dla wybranego obrazu.

Metoda paralaksy

Tutaj możesz wybrać metodę paralaksy do użycia dla wybranego obrazu - CSS lub True Parallax.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Orientacja tekstu

Tutaj możesz wybrać orientację dla tekstu Tytuł / Meta.

Kolor tekstu

Tutaj możesz wybrać kolor tekstu Tytuł / Meta.

Użyj koloru tła tekstu

Tutaj możesz wybrać, czy chcesz użyć koloru tła dla tytułu / meta-tex.

Kolor tła tekstu

Jeśli kolor tła jest włączony, wybierz tutaj żądany kolor tła.

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułu, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Tytułowy rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu tytułu, wybierz odpowiedni kolor z próbnika kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na przestrzeń między każdą linią tekstu tytułu Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Czcionka Metas

Możesz zmienić czcionkę swojego meta tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki Metas

Tutaj możesz dostosować rozmiar meta-tekstu. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu danych metas

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor meta-tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozmieszczenie liter danych metas

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą meta-tekstu, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii metas

Wysokość linii wpływa na przestrzeń między każdą linią meta-tekstu. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie granicy wokół twojego modułu. Granicę tę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor twojej granicy. Wybierz niestandardowy kolor w selektorze kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie granice mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zasięgu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Niestandardowe jednostki miary obsługiwane, co oznacza, że ​​możesz zmienić domyślną jednostkę "px" na inną, np. Em, vh, vw itp.

Styl graniczny

Granice obsługują osiem różnych stylów: pełny, kropkowany, kropkowany, podwójny, groove, grzebień, intarsja i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Margines niestandardowy

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

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Niestandardowe dopeł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 wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

Pokaż zaawansowane opcje tytułu

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

sekcja zaliczka moduł post tytuł divi.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 poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu 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 Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
13 akcji
udział8
ćwierkanie1
Enregistrer4