Jak usunąć pola nazw modułu Divi Email Optin?

W dzisiejszym samouczku pokażemy, jak usunąć pola nazw z modułu Divi Email Optin. Usunięcie pól nazwiska to nie tylko upewnienie się, że pola imienia i nazwiska, które są standardem w module optin e-mail, nie pojawiają się wizualnie. Chodzi też o funkcjonalność. Domyślnie do subskrypcji wymagane jest imię i adres e-mail. Dlatego samo uczynienie pól nazw niewidocznymi nie pomoże w tym procesie.

Aby pomóc Ci to zrobić, pokażemy Ci jednak, jak pozbyć się wizualnie pól nazw i sprawić, by działały również funkcjonalnie

Wynik

Jeśli będziesz śledzić ten post krok po kroku, otrzymasz następujący wynik:

Dlaczego chcesz usunąć pola nazw modułu e-mail Optin

Istnieje prawdopodobnie kilka powodów, dla których warto usunąć pola nazw. Jeśli nie masz pojęcia dlaczego; spójrz na dwa powody wymienione poniżej.

Aby zaoszczędzić czas odwiedzającego

Pierwszy powód ma na uwadze wrażenia użytkownika. Prosząc tylko o pole e-mail, odwiedzający będą mieli możliwość szybkiej interakcji z Tobą. Jedyne, co będzie musiał zrobić, to wpisać swój adres e-mail, a Ty dostarczysz mu treść, która go interesuje.

Aby zmniejszyć barierę / polegać na szybkim zachowaniu

Gdyby ludzie mieli wypełnić wszystkie moduły optin, które napotkają w sieci, prawdopodobnie zabrakłoby im czasu. Formularze Optin są obecnie częścią wszelkiego rodzaju stron internetowych. Minęły czasy, kiedy ludzie byli nimi zafascynowani. Jeśli zobaczą, że muszą włożyć zbyt dużo wysiłku (czytaj: muszą wypełnić zbyt wiele wymaganych pól), aby uzyskać subskrypcję, prawdopodobnie po prostu to zignorują. Jeśli jednak poprosisz tylko o adres e-mail, jest bardziej prawdopodobne, że będzie to w porządku. Po prostu wpisanie adresu e-mail zajmuje maksymalnie 5 sekund (co jest krótsze niż 7-sekundowy średni czas uwagi, jaki mają ludzie).

Jak usunąć pola nazw modułu Divi Email Optin?

Subskrybuj nasz kanał YouTube

Bez dalszej zwłoki sprawmy, aby to zadziałało.

Dodaj nową stronę

Pierwszą rzeczą, którą musisz zrobić, to dodać nową stronę lub otworzyć stronę, na której chcesz umieścić moduł Email Optin tylko z polem e-mail.

Dodaj moduł e-mail Optin

Gdy już znajdziesz się na tej stronie, dodaj moduł Email Optin w dowolnym miejscu. Po wyświetleniu podglądu strony z modułem Email Optin zobaczysz, że będzie ona wyglądać tak:

Jeśli pójdziesz dalej i klikniesz przycisk subskrypcji, nie wypełniając żadnego pola, zobaczysz, że to nie zadziała. Domyślnie moduł Email Optin wymaga podania imienia i adresu e-mail, aby działał. Dlatego samo sprawienie, że pola znikną (ale nadal istnieją) nie zadziała. Ich usunięcie również nie zadziała.

Możesz jednak dodać wartość domyślną do pola imienia. Możesz użyć czegoś takiego jak „*”, co po prostu upewni się, że pole ma wartość. Kolejną rzeczą, którą musimy zrobić, to usunąć etykiety, które są połączone z polami wejściowymi. Aby to wszystko osiągnąć, użyjemy kodu jQuery i kodu CSS.

Dodaj kod CSS

Zaczniemy od dodania kodu CSS. Kod CSS zapewni jedynie, że te dwa pola nie będą wyświetlane na stronie. W części funkcjonalnej będziemy musieli użyć kilku linii kodu jQuery.

Możesz zastosować kod CSS do jednej strony w szczególności lub do całej witryny. Metoda, której użyjesz, najprawdopodobniej będzie zależeć od tego, jak często chcesz używać modułu kodu tylko z polem e-mail. Jeśli chcesz użyć modułu Email Optin kilka razy i na różnych stronach, użyj drugiej metody. Jeśli chcesz, aby liczyła się tylko jedna strona, użyj pierwszej metody.

Dodaj kod CSS do jednej strony w szczególności

Aby dodać kod CSS w szczególności do jednej strony, kliknij następującą ikonę na stronie, nad którą pracujesz:

Na wyświetlonym ekranie skopiuj i wklej następujące wiersze kodu CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Dodaj kod CSS do opcji motywu

Aby dodać kod CSS do całej witryny, przejdź do pulpitu WordPress> Divi> Opcje motywu> Przewiń w dół kartę Ogólne i dodaj następujące wiersze kodu CSS do pola Niestandardowy CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Dodaj kod jQuery

Idąc dalej, dodamy potrzebny kod jQuery. Aby dodać kod jQuery, masz również dwie możliwości: dodaj kod, aby miał zastosowanie do jednej strony w szczególności lub dodaj kod do całej witryny.

Dodaj kod jQuery do jednej strony w szczególności (moduł kodu)

Aby dodać kod jQuery w szczególności do jednej strony, dodaj moduł kodu tuż pod modułem Email Optin. Otwórz moduł Code i umieść w nim następujące wiersze kodu jQuery:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Ponieważ usunęliśmy etykietę, upewniamy się, że wartość pola adresu e-mail nie zawiera niczego. Aby zrekompensować etykietę i upewnić się, że ludzie wiedzą, co należy wpisać, zamiast tego używamy symbolu zastępczego. W tym przypadku symbolem zastępczym jest „adres e-mail”, ale możesz zmienić to na cokolwiek innego.

Dodaj kod jQuery do opcji motywu

Aby kod jQuery miał zastosowanie do całej witryny, możesz umieścić go w Opcjach motywu. Aby to zrobić, przejdź do pulpitu WordPress > Divi > Opcje motywu > Integracja i umieść następujące wiersze kodu jQuery w nagłówku swojej witryny:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Wynik

Jeśli prześledzisz każdy krok w tym poście i zastosujesz kod CSS i jQuery do jednej strony w szczególności lub do wszystkich stron Twojej witryny, powinieneś osiągnąć następujący wynik:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak uzyskać moduł Email Optin, który ma tylko pole adresu e-mail. Powodem, dla którego możesz chcieć osiągnąć taki wynik, jest skuteczność. Prosząc tylko o adres e-mail, Twoi odbiorcy będą musieli włożyć mniej wysiłku, aby uzyskać subskrypcję, a Ty będziesz mógł szybciej zbudować swoją listę e-mailową. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecany obraz autorstwa adichrisworo / shutterstock.com