Przyciski i wezwania do działania wypełniają stosunkowo mało nieruchomości, ale są jednymi z najważniejszych elementów projektowych każdej strony internetowej. Biorąc pod uwagę ich znaczenie, uzyskanie przycisków i wezwań do działania jest czymś w rodzaju wielkiej sprawy.

Jednak projektowanie przycisków może być trudne. Przy projektowaniu przycisków należy wziąć pod uwagę wiele czynników – rozmiar, kolor, ikony, kształt, rozmieszczenie i tekst — a przyciski wezwania do działania są jeszcze bardziej krytyczne, aby uzyskać poprawność.

W tym poście omówimy podstawy projektowania przycisków dla Twojej witryny WordPress. Rozważymy również czynniki, które należy wziąć pod uwagę, gdy przyciski będą używane jako część wezwania do działania. Na koniec zostawimy Ci kod, którego możesz użyć do tworzenia przycisków i pokażemy, jak używać tego kodu w WordPress.

Trzy zasady projektowania skutecznych przycisków strony internetowej

Zacznijmy od podstaw. Jeśli chcesz tworzyć skuteczne przyciski, musisz przestrzegać kilku najlepszych praktyk.

Te najlepsze praktyki mogą wydawać się zdrowym rozsądkiem, a to dlatego, że tak naprawdę są. Jeśli jednak nigdy nie myślałeś o projektowaniu przycisków, może się okazać, że naruszasz niektóre z tych zasad.

Zasada # 1: Przyciski Powinny Wyglądać Jak, Dobrze, Przyciski!

Aby projekt strony internetowej działał zgodnie z przeznaczeniem, przyciski muszą być łatwe do wybrania. Rzućmy okiem na to, jak Google robi to na swojej stronie docelowej dla swojego produktu analitycznego.

Screenshot of buttons a Google analytics website

Chociaż nie wszyscy kochają projektowanie materiałów Google, przyciski na powyższym obrazku są niewątpliwe. Przyciski powinny się wyróżniać. Przyciski, które nie są wyraźnie przyciskami, mogą odczuwać znacznie niższy współczynnik klikalności.

Zasada # 2: działania przycisków powinny być jasne

Podczas projektowania przycisków, działanie związane z każdym przyciskiem musi być jasne. Spójrz na obrazek powyżej. Działanie związane z każdym przyciskiem jest jasne. Użyj tekstu lub ikon na przyciskach, aby jasno i zwięźle opisać działania, które każdy przycisk ma wykonać.

Nie musisz tego robić z SMS-em. Czasami ikony mogą być równie skuteczne. Na przykład, patrząc na ten sam przykład, widzimy ten przycisk stylu ikony po prawej stronie:

A screenshot of the small round Google analytics icon buttons

Ikona na tym przycisku komunikuje się w następujący sposób: “Hej! Tu jest więcej rzeczy!”Informuje nas, że dostępne są dodatkowe opcje, które można zobaczyć, klikając przycisk.

Zasada # 3: Projekt przycisku powinien być spójny

Po trzecie, podczas projektowania przycisków upewnij się, że wszystkie przyciski, które wykonują podobną akcję, mają podobny wygląd. Spójrzmy jeszcze raz na Google.

A screenshot showing the three different types of buttons used throughout Google Analytics

Na obrazie znajdują się trzy różne wzory przycisków. Każdy projekt przycisku robi coś innego. Zielone przyciski są wezwaniem do działania-pozwalają zarejestrować się w usłudze i są najbardziej widoczne. Niebieskie strzałki pozwalają dowiedzieć się więcej o każdej usłudze. Przycisk ikona wyświetla więcej opcji dostępnych na tej samej stronie internetowej.

Na całej tej stronie wzór ten jest spójny:

  • Okrągłe przyciski ikon wykonują czynności na stronie.
  • Przyciski” dowiedz się więcej ” są niebieskie i zawierają strzałkę (a czasem jakiś tekst).
  • Przyciski Call-to-action są kwadratowe i zielone.

Podczas projektowania przycisków dla witryny opracuj system, w którym różne projekty przycisków mają różne cele i są spójne w stosowaniu tych projektów.

Jak wyróżnić przyciski Call-To-Action

Przyciski zawarte w elementach call-to-action (CTA) różnią się nieco od pozostałych przycisków na twojej stronie internetowej. To dlatego, że przyciski CTA powinny być zaprojektowane tak, aby zachęcać do określonej akcji, a nie po prostu służyć jako funkcjonalny element interfejsu użytkownika. Aby przyciski CTA były jak najbardziej skuteczne, należy pamiętać o tych wytycznych:

Użyj kolorów, które są w wysokim kontraście do koloru tła i wyróżniają się na tle innych przycisków typu UI w witrynie.

Screenshot of inbound.org CTA.
Pogrubiony kolor jest używany dla przycisku CTA w Inbound.org

Spraw, aby przyciski CTA były łatwe do zobaczenia i znalezienia, rozmiarując je obficie i pozostawiając mnóstwo białych spacji wokół przycisków CTA.

Screenshot of Kissmetrics CTA
Kissmetrics pozwala przyciskom CTA wyróżniać się wielkimi rozmiarami.

Używaj pilnego języka podczas pisania kopii przycisków CTA, zwłaszcza jeśli składasz ograniczoną ofertę czasową.

Example of CTA button from Baron Fig website
Witryny e-commerce, takie jak Baron Fig, często używają słowa “Teraz”, Aby przekazać pilność.

Tworzenie przycisków z kodem

Zawsze możesz użyć wtyczki do tworzenia przycisków, ale kodując je samodzielnie, masz pełną kontrolę nad wyglądem i zachowaniem przycisków. Tak więc, mając na uwadze podstawowe zasady projektowania przycisków, przyjrzyjmy się, w jaki sposób można utworzyć trzy wspólne projekty przycisków za pomocą kodu: prostokątne przyciski tekstowe, przyciski ikon kół oraz przyciski łączące tekst i ikony.

Jak utworzyć prostokątne przyciski tekstowe z kodem

Screenshot of simple text button with two rows of text

Przyciski tekstowe są bardzo łatwe do utworzenia, a jeśli sam napiszesz Kod, możesz je dostroić, aby wyglądały tak, jak lubisz.

Zacznijmy od znaczników HTML dla prostego przycisku tekstowego.

Wczytywanie gist jpen365/f06addde126759535c813ba5aef29bc2 # plik-tekst-przycisk-html

Aby połączyć ten przycisk ze stroną, Dodaj adres URL do elementu kotwicy, usuwając znak funta i zastępując go adresem URL, w ten sposób: href="http://example.com/page-to-link-to".

Tekst przycisku można zmienić, zastępując Kup Teraz w znacznikach przycisku z preferowaną kopią. Poniżej rozpiętość zawiera mniejszy tekst szczegółowy. Po prostu usuń cały tekst poza zakresem, jeśli nie chcesz wyświetlać tekstu szczegółowego.

Następnie musimy dodać trochę CSS do stylu przycisku:

Wczytywanie gist jpen365/f06addde126759535c813ba5aef29bc2 # file-text-button-css

Aby zmienić wygląd każdego przycisku, po prostu edytuj CSS w punktach wskazanych w komentarzach. Powyższy kod CSS utworzy zielony przycisk z szarą ramką i zaokrąglonymi rogami, jak pokazano na powyższym obrazku.

Jak utworzyć przyciski ikon kół z kodem

Screenshot of four icon buttons

Przyciski te są inspirowane przyciskami ikon w Google Analytics. Na szczęście są dość łatwe do stworzenia.

Po pierwsze, musimy dodać ikonę czcionki na naszej stronie internetowej. Możemy to zrobić na kilka różnych sposobów. Jeśli tworzysz przyciski w zwykłym dokumencie HTML, po prostu upuść ten link w dokumencie Głowa aby zaimportować czcionkę Awesome.

Wczytywanie pliku gist jpen365/f06addde126759535c813ba5aef29bc2 # Font-awesome-cdn-html

Z drugiej strony, jeśli dodajesz przyciski bezpośrednio do WordPress, a Twój motyw nie zawiera ikon Font Awesome, możesz je zapytać, instalując Enqueue Font Awesome CDN, darmową wtyczkę do WordPressa.

Teraz możemy napisać znaczniki, których użyjemy dla naszych przycisków ikon. Aby utworzyć cztery ikony na powyższym obrazku, użyjemy tego kodu:

Wczytywanie gist jpen365/f06addde126759535c813ba5aef29bc2 # file-icon-buttons-html

Klasa fa fa-kąt-lewy zastosowany do pierwszego i element jest tym, co ładuje ikonę. W ten sposób ikony są ładowane za pomocą Font Awesome i możesz zobaczyć pełną listę ikon na stronie Font Awesome.

Ten kod może być używany do generowania przycisków zawierających dowolną ikonę Font Awesome. Na przykład, aby utworzyć ikonę Facebooka, użyjesz następującego kodu:

Wczytywanie pliku gist jpen365/f06addde126759535c813ba5aef29bc2 # plik-facebook-icon-html

Na koniec stosujemy CSS, aby zmienić nasze znaczniki w przyciski:

Wczytywanie gist jpen365/f06addde126759535c813ba5aef29bc2 # file-icon-button-css

Jeśli chcesz użyć tego kodu na własnej stronie, komentarze w powyższym CSS pomogą Ci dostroić wygląd przycisków. Zauważ, że możesz zmienić wyrównanie ikon z jednej ikony do drugiej. Aby to zrobić, musisz dodać odpowiednią klasę do ikony, jak pokazano w znacznikach HTML i dostosować wypełnienie zastosowane do ikony za pomocą ostatniej sekcji CSS.

Aby wyśrodkować ikonę, nie dodawaj żadnej z klas poprzedzonych prefiksem rusz się.-.

Jak tworzyć kwadratowe przyciski z tekstem i ikonami

Screenshot of a button with two rows of text and an icon

Z CSS już na miejscu z przycisków ikona i tekst, tworzenie przycisków, które łączą zarówno tekst i ikony jest proste. Wszystko, co musimy zrobić, to dodać ikonę znacznika naszego przycisku tekstowego, w ten sposób:

Wczytywanie gist jpen365/f06addde126759535c813ba5aef29bc2 # file-text-icon-button-html

Jak widać, użyliśmy nowej ikony i ponownie użyliśmy klasy ze stylizacji przycisku ikony, przesuń-w lewo, aby utworzyć odstęp między ikoną a pobliskim tekstem.

Dodawanie przycisków do WordPressa

Istnieją dwa kroki, aby dodać przyciski do witryny WordPress. Najpierw musisz załadować CSS. Po drugie, dodajesz znaczniki na poście lub stronie, na której ma się pojawić przycisk.

Masz kilka opcji dodawania CSS do swojej witryny.

  • Możesz użyć motywu podrzędnego i dodać CSS do motywu podrzędnego styl.css plik.
  • Teraz, gdy WordPress 4.7 się rozwinął, możesz dodać CSS do Dodatkowe CSS sekcja WordPress customizer.
  • Możesz użyć niestandardowej wtyczki CSS.

Wniosek

Kodowanie przycisków dla witryny WordPress jest dość proste i daje możliwość wypróbowania różnych kolorów, kopiowania przycisków, ikon i wzorów, aby zmaksymalizować skuteczność elementów interfejsu użytkownika i wezwań do działania.

Jakie masz wskazówki dotyczące tworzenia skutecznych przycisków i wezwań do działania? Podziel się swoją mądrością i doświadczeniem w komentarzach poniżej!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…