Samouczek Divi: Jak korzystać z modułu Post Title

Moduł Tytuł pracy Divi wyświetla w elegancki sposób tytuł aktualnego postu oraz, jeśli dotyczy, obraz postu i metadane. Pozwala to na tworzenie bardziej unikalnych postów podczas tworzenia postów za pomocą Divi Builder.

Jak dodać moduł Tytuł postu do swojej strony

Zanim będziesz mógł dodać moduł tytułu do swojej strony, musisz najpierw przejść 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ę. 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 kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, 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ł tytułu artykułu 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 „tytuł posta”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł tytułu posta! 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: formatowanie modułu tytułu posta dla posta na blogu

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

Pierwszą rzeczą, którą musisz zrobić, jest przejście do strony „Edytuj artykuł” na pulpicie WordPress. W obszarze Ustawienia Divi Post w prawym górnym rogu ustaw układ na Pełna szerokość i ukryj tytuł artykułu.

Korzystając z programu Visual Builder, dodaj sekcję zwykłą z wierszem o pełnej szerokości (1 kolumna). Następnie dodaj moduł Tytuł posta do wiersza.

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

Opcje zawartości

Wyświetl kategorie postów: NIE Pokaż komentarze Numer: NIE Wyświetl wybrane zdjęcie: TAK Polecane zdjęcie Lokalizacja: tytuł / meta Obraz tła

Opcje projektowania

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

Zapisz ustawienia

To wszystko. Teraz już nigdy nie będziesz musiał zadowolić się kolejną nudną pracą!

Opcje zawartości tytułu publikacji

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.

Pokaż tytuł

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

Pokaż Meta

Tutaj możesz wybrać, czy wyświetlać Meta Postu.

Pokaż autora

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

Pokaż datę

Tutaj możesz wybrać, czy ma być wyświetlana data.

Format daty

Tutaj możesz ustawić format daty w Post Meta. Wartość domyślna to „M j, Y”

Pokaż kategorie artykułów

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

Wyświetl komentarze

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

Pokaż wyróżniony obraz

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

Wyróżnione umieszczenie obrazu

Tutaj możesz wybrać, gdzie umieścić wybrany obraz.

Kolor tła

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

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 tytułów

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.

Użyj efektu Parallax

Jeśli pozycja wybranego obrazu jest ustawiona na „tytuł / Meta obraz tła”, możesz zdecydować, 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.

Orientacja tekstu

Tutaj możesz wybrać orientację tekstu tytułu / 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 / metatekstu.

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 menu rozwijanego. Divi zawiera dziesiątki wspaniałych 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 pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Tytułowy rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego 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 wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu w tytule, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy liter tytułu

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 tytułu, użyj suwaka zakresu, 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 wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu tytułu.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 polu wprowadzania znajdujący się 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 wartości rozmiaru, aby zmienić typ jednostki.

Czcionka Metas

Możesz zmienić czcionkę swojego metatekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych 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 pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki Metas

Tutaj możesz dostosować rozmiar swojego meta-tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub 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 wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu danych metas

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor swojego metatekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami danych metas

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ą swojego meta-tekstu, użyj suwaka zakresu, 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 wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii metas

Wysokość wiersza wpływa na odstęp między wierszami w meta-tekście 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 polu wprowadzania znajdujący się 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 wartości 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ł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.

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, pomiędzy krawędzią modułu a jego elementami wewnętrznymi. 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.

Pokaż zaawansowane opcje tytułu

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órych chcesz użyć w tym module. Klasy CSS można używać do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas, oddzielonych spacją. Klasy te mogą być używane w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny. 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 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.

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

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