Przejdź do głównej treści

Jak dodać sekcję komentarzy do Divi

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ł komentarzy umożliwia umieszczenie formularza komentarza w dowolnym miejscu na stronie. Jeśli korzystasz ze standardowej strony lub publikacji bez Divi Builder, komentarze zawsze pojawią się pod treścią twojej publikacji.

Po aktywowaniu Divi Builder możesz umieścić moduł komentarza w dowolnym miejscu na swojej stronie, a formularz komentarza pojawi się w jego lokalizacji. Daje to o wiele większą kontrolę nad swoimi komentarzami!

moduł komentarzy divi.png

Jak dodać moduł komentarzy do swojej strony

Zanim dodasz moduł komentarzy do swojej strony, musisz najpierw uzyskać dostęp 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ę.

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 również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją stronę internetową, jeśli jesteś zalogowany do pulpitu WordPress.

przycisk divi moduł budowniczy blog divi

Po wprowadzeniu do 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.

dodaj komentarze divi.png

Znajdź moduł komentarzy 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 "komentarze", a następnie kliknąć enter, aby wyszukać i automatycznie dodać moduł komentarzy! Po dodaniu modułu, zostaniesz powitany z listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Użyj przypadku dodania sekcji komentarzy do swojego posta na blogu

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

Należy zauważyć, że sekcja komentarza jest dodawana pod treścią publikacji i powyżej trzykolumnowej sekcji stopki. Jednak moduł komentarza mógł zostać dodany w dowolnym miejscu.

dodaj sekcję komentarzy divi.jpg

Za pomocą programu Visual Builder dodaj sekcję standardową z linią o pełnej szerokości (kolumna 1) pod modułami zawierającymi treść publikacji. Następnie dodaj moduł Komentarze do linii.

moduł komentarzy divi.png

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 meta informacje o elementach i obrazy awatarów, pojawiają się tylko wtedy, gdy Ty lub ktoś inny dodaje komentarz do wpisu.

opublikuj komentarz do article.jpg

To wszystko. Piękno tego modułu polega na tym, że można dodawać dodatkowe treści za sekcją komentarzy (np. Wezwanie do działania lub formularz kontaktowy), co nie jest łatwe w przypadku domyślnego WordPressa.

Opcje treści modułu komentarzy

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 będzie na tej karcie.

moduł comment divi option content.png

Zobacz autora Avatar

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

Pokaż przycisk odbierz

Gdy przycisk Pokaż odpowiedź jest wyłączony, użytkownicy nie będą mogli odpowiedzieć 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.

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

Kolor tła pól

Moduł komentarzy wyświetla formularz komentarza złożony z różnych pól wprowadzania. Domyślnie te pola wejściowe mają szary kolor tła. Możesz zmienić ten kolor, wybierając własny kolor w selektorze kolorów.

Etykieta administratora

Spowoduje to zmianę tagu modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, etykiety te pojawią się w bloku modułów interfejsu Divi Builder.

Opcje projektowania komentarzy

Na karcie Projektowanie 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 modyfikacji prawie wszystkiego.

opcja komentarz divi builder.png

Kolor tekstu

Tutaj możesz wybrać wartość swojego tekstu. Jeśli pracujesz z ciemnym tłem, twój tekst musi być podświetlony. Jeśli pracujesz z jasnym tłem, twój tekst powinien być ciemny.

Czcionka komentarza

Możesz zmienić czcionkę komentarza, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz również dostosować styl tekstu, używając pogrubienia, kursywy, wszystkich wielkich liter i opcji podkreślenia.

Skomentuj rozmiar czcionki

Tutaj możesz zmienić rozmiar czcionki komentarza. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz wprowadzić żądaną wartość wielkości tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "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 jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu swojego pola, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między komentarzami

Odstępy liter wpływają na przestrzeń 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ć spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Wysokość linii komentarza

Wysokość linii wpływa na przestrzeń między wierszami tekstu komentarza. Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka interwału, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Policja

Możesz zmienić czcionkę tekstu, wybierając z menu rozwijanego wybraną czcionkę. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz również dostosować styl tekstu, używając pogrubienia, kursywy, wszystkich wielkich liter i opcji podkreślenia.

Rozmiar czcionki w polu

Tutaj możesz dostosować rozmiar tekstu pola. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz wprowadzić żądaną wartość wielkości tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "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 jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu swojego pola, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy od liter terenowych

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

text camp module comment divi.png

Wysokość linii pola

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

Meta czcionki

Możesz zmienić czcionkę meta-tekstu, wybierając z menu rozwijanego wybraną czcionkę. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz również dostosować styl tekstu, używając pogrubienia, kursywy, wszystkich wielkich liter i opcji podkreślenia.

Meta rozmiar czcionki

Tutaj możesz dostosować rozmiar swojego meta tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz wprowadzić żądaną wartość wielkości tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "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 jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor meta-tekstu, wybierz wybrany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter meta

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

Wysokość meta-linii

Wysokość linii wpływa na przestrzeń między liniami meta-tekstu. Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka interwału, aby dostosować odstęp lub wprowadź rozmiar pożądanego odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

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]

Promień pola

Promień obramowania wpływa na sposób zaokrąglania rogów każdego pola wejściowego. Im wyższa wartość, tym więcej czterech rogów każdego pola wejściowego jest zaokrąglonych. Możesz zredukować wartość do 0, aby utworzyć prostokątne pola wejściowe lub znacznie zwiększyć wartość, aby utworzyć pola wejściowe z okrągłymi krawędziami.

border divi builder.png

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

Styl graniczny

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

Custom Margin

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.

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.

Użyj niestandardowych stylów dla przycisków

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

Rozmiar tekstu przycisku

To ustawienie może być użyte do zwiększenia lub zmniejszenia rozmiaru tekstu na przycisku. Przycisk zostanie przeskalowany wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentu kompozycji, zgodnie z definicją w Dostosowaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku w tym module. 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 w selektorze kolorów.

Szerokość obramowania przycisku

Wszystkie przyciski posiadają obramowanie Divi 2px domyślnie. Ta granica może zostać zwiększona lub zmniejszona za pomocą tego parametru. Granice można usunąć, wprowadzając wartość 0.

box shadow divi builder module comment.png

Kolor obramowania przycisku

Domyślnie krawędzie przycisków przyjmują kolor akcentu kompozycji, zgodnie z definicją w dostosowywaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku w tym module. 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ąglania rogów przycisków. Domyślnie przyciski Divi mają mały promień, który zaokrągla rogi pikseli 3. Możesz zmniejszyć go do 0, aby utworzyć kwadratowy przycisk lub znacznie go zwiększyć, aby utworzyć okrągłe przyciski.

Rozstawianie liter przycisków

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

Przycisk policji

Możesz zmienić czcionkę tekstu, wybierając z menu rozwijanego wybraną czcionkę. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz również dostosować styl tekstu, używając pogrubienia, kursywy, wszystkich wielkich liter i opcji 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 myszą.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę, której chcesz użyć w swoim 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 przycisków, ale to ustawienie umożliwia niezależną regulację koloru.

Lokalizacja ikony przycisku

Możesz wyświetlić ikonę przycisku po lewej lub prawej stronie przycisku.

Pokaż tylko ikonę hover dla przycisku

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

Kolor tekstu przelotu w guziku

Gdy kursor myszy znajdzie się nad przyciskiem, ten kolor zostanie użyty. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Kolor tła myszy

Gdy kursor myszy znajdzie się nad przyciskiem, ten kolor zostanie użyty. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Ustaw kolor obramowania

Gdy kursor myszy znajdzie się nad przyciskiem, ten kolor zostanie użyty. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

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

Unosząc promień przycisku

Kiedy przycisk jest pilotowany przez mysz odwiedzającego, ta wartość jest używana. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Odstępy na przyciskach najazdu

Kiedy przycisk jest pilotowany przez mysz odwiedzającego, ta wartość jest używana. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Komentarze Zaawansowane opcje

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą uznać za użyteczne, 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.

zaawansowana sekcja divi builder module comments.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 kompozycji Divi Child lub niestandardowym CSS dodawanym do strony lub witryny internetowej przy użyciu opcji kompozycji 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. Pozycje CSS w tych ustawieniach są już osadzone w znacznikach stylu. Musisz tylko wprowadzić 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.

to wszystko w tym samouczku.

Ten artykuł zawiera komentarze 2

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
5 akcji
udział1
ćwierkanie1
Enregistrer3