Moduł komentarzy umożliwia umieszczenie pliku forma komentarze w dowolnym miejscu na Twojej stronie. Jeśli używasz standardowej strony lub posta bez Divi Builder, komentarze nadal będą pojawiać się pod treścią posta.

Po aktywacji Divi Builder możesz umieścić moduł komentarzy w dowolnym miejscu na swojej stronie i forma komentarze pojawią się w lokalizacji modułu. Dzięki temu masz znacznie większą kontrolę nad swoimi komentarzami!

Jak dodać moduł komentarza do swojej strony

Zanim będziesz mógł dodać moduł komentarzy do swojej strony, musisz najpierw uzyskać dostęp do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad wydawcą 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 podczas przeglądania strony internetowej, jeśli jesteś zalogowany do pulpitu nawigacyjnego 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ł komentarzy 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 „komentarze”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł komentarzy! Po dodaniu modułu zostaniesz powitany listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Użyj przypadku, aby dodać sekcję komentarzy do swojego posta na blogu

W tym przykładzie pokażę, jak łatwo jest wstawić i sformatować moduł komentarzy w swoim poście za pomocą programu Visual Builder.

Zwróć uwagę, że sekcja komentarzy jest dodawana pod treścią posta i nad sekcją stopki z trzema kolumnami. Jednak moduł komentarza mógł zostać dodany w dowolnym miejscu.

Korzystając z programu Visual Builder, dodaj standardową sekcję z wierszem o pełnej szerokości (1 kolumna) poniżej modułów, które zawierają treść posta. Następnie dodaj moduł Komentarze do wiersza.

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

Opcje zawartości

Kolor tła pól: #ffffff

Opcje projektowania

Kolor tekstu: ciemny
Komentarz Policja: PT Sans
Comment Rozmiar czcionki: 20px
Kolor tekstu komentarza:
Policja: PT Sans
Rozmiar czcionki pola: 20px
Meta Czcionka: PT Sans, Kursywa, Wielkie litery
Meta rozmiar czcionki: 16px
Promień granicy pola: 0px
Użyj granicy: TAK
Kolor obramowania: #aaaaaa
Szerokość obramowania: 1px
Użyj niestandardowych stylów dla przycisku: TAK
Przycisk Rozmiar tekstu: 20
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: # 02b875
Szerokość granicy
przycisk: 3px

Niektóre elementy, takie jak metainformacje posta i obrazy awatarów, pojawiają się tylko wtedy, gdy Ty lub ktoś inny doda komentarz do posta.

To wszystko. Piękno tego modułu polega na tym, że możesz dodawać dodatkowe treści po sekcji komentarzy (takie jak wezwanie do działania lub formularz kontaktowy), co nie jest łatwe w przypadku domyślnego WordPressa.

Opcje treści modułu komentarzy

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.

Pokaż awatar autora

Wyłączenie tej opcji spowoduje usunięcie awatara autora komentarza z listy komentarzy.

Pokaż przycisk odpowiedzi

Gdy przycisk Pokaż odpowiedź jest wyłączony, użytkownicy nie będą mogli odpowiadać na komentarze na liście komentarzy.

Wyświetl komentarze

Po wyłączeniu całkowita liczba komentarzy nie będzie już wyświetlana nad listą komentarzy.

Kolor tła pól

Moduł komentarzy wyświetla a forma komentarz złożony z różnych pól wejściowych. Domyślnie te pola wejściowe mają szary kolor tła. Możesz zmienić ten kolor, wybierając kolor niestandardowy z próbnika kolorów.

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 komentarzy

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 tekstu

Tutaj możesz wybrać wartość swojego tekstu. Jeśli pracujesz na ciemnym tle, tekst powinien być podświetlony. Jeśli pracujesz na jasnym tle, tekst powinien być ciemny.

Czcionka komentarza

Możesz zmienić czcionkę komentarza, 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 pogrubienia, kursywy, wielkich liter i podkreślenia.

Skomentuj rozmiar czcionki

Tutaj możesz dostosować rozmiar czcionki komentarza. 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 komentarzy

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

Odstępy między komentarzami

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 komentarza, 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 komentarza

Wysokość wiersza wpływa na odstępy między wierszami tekstu komentarza. 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.

Policja

Możesz zmienić czcionkę tekstu, 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 pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki w polu

Tutaj możesz dostosować rozmiar tekstu w polu. 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 pola

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

Odstępy od liter terenowych

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 w polu, 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 pola

Wysokość wiersza wpływa na odstęp między wierszami tekstu w polu. 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.

Meta czcionki

Możesz zmienić czcionkę swojego metatekstu, 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 pogrubienia, kursywy, wielkich liter i podkreślenia.

Meta rozmiar czcionki

Tutaj możesz dostosować rozmiar swojego metatekstu. 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 meta-tekstu

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 meta literami

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 metatekstu, 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ść meta-linii

Wysokość linii wpływa na odstęp między każdą linią tekstu meta. 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.

Promień pola

Promień obramowania wpływa na sposób zaokrąglania rogów każdego pola wejściowego. Im wyższa wartość, tym bardziej zaokrąglone cztery rogi każdego pola wprowadzania. Możesz zmniejszyć tę wartość do 0, aby utworzyć prostokątne pola wejściowe, lub znacznie ją zwiększyć, aby utworzyć pola wejściowe z okrągłymi krawędziami.

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.

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.

Użyj niestandardowych stylów przycisków

Włączenie tej opcji ujawnia różne ustawienia dostosowywania przycisków, których możesz użyć do zmiany wyglądu przycisku modułu.

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk będzie skalowany w miarę zwiększania i zmniejszania rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentu motywu, zgodnie z definicją w Dostosowaniu motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz własny kolor za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła z próbnika kolorów.

Szerokość obramowania przycisku

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz własny kolor za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Przycisk Promień obramowania

Promień obramowania wpływa na sposób zaokrąglenia rogów przycisków. Domyślnie przyciski w Divi mają mały promień, który zaokrągla rogi o 3 piksele. Możesz zmniejszyć go do 0, aby utworzyć kwadratowy przycisk, lub znacznie go zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisków

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 przycisku, 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 rozmiaru, aby zmienić typ jednostki.

Przycisk policji

Możesz zmienić czcionkę tekstu, 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 pogrubienia, kursywy, wielkich liter i podkreślenia.

Dodaj ikonę przycisku

Wyłączone to ustawienie spowoduje usunięcie ikon z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki po najechaniu.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę, która ma być używana na przycisku. Divi ma kilka ikon do wyboru.

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Lokalizacja ikony przycisku

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż tylko ikonę najechania na przycisk

Domyślnie ikony przycisków są wyświetlane tylko po najechaniu kursorem. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Kolor tekstu przelotu w guziku

Ten kolor zostanie użyty, gdy mysz gościa najedzie na przycisk. Kolor zmieni się w stosunku do koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Kolor tła myszy

Ten kolor zostanie użyty, gdy mysz gościa najedzie na przycisk. Kolor zmieni się w stosunku do koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Ustaw kolor obramowania

Ten kolor zostanie użyty, gdy mysz gościa najedzie na przycisk. Kolor zmieni się w stosunku do koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Unosząc promień przycisku

Wartość ta jest używana, gdy przycisk jest najechany kursorem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Odstępy na przyciskach najazdu

Wartość ta jest używana, gdy przycisk jest najechany kursorem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Komentarze Opcje zaawansowane

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 Dziecko lub w niestandardowym CSS, który dodajesz do swojej 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 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.

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.