Webflow: Jak zrobić przycisk CTA poza menu?

Stworzenie skutecznego przycisku wezwania do działania (CTA) to jeden z najważniejszych elementów projektowania stron internetowych. Przycisk CTA zachęca odwiedzających do podjęcia określonych działań, takich jak zapisanie się do newslettera, dokonanie zakupu czy skontaktowanie się z Twoją firmą. Chociaż wiele witryn internetowych zawiera przyciski CTA w menu nawigacyjnym, umieszczenie przycisku CTA poza menu może pomóc mu się bardziej wyróżnić i zwiększyć liczbę konwersji. W tym artykule przeprowadzimy Cię przez kolejne etapy projektowania i umieszczania przycisku CTA poza menu w Webflow.

Po co umieszczać przycisk CTA poza menu?

Umieszczenie przycisku CTA poza głównym menu nawigacyjnym może sprawić, że będzie on bardziej widoczny dla odwiedzających. Strategicznie umieszczony w obszarach o dużym natężeniu ruchu, takich jak nagłówek lub na górze strony, przycisk ten może szybko przyciągnąć uwagę użytkowników. Celem jest zwiększenie dostępności CTA i zapewnienie jego natychmiastowego zauważenia, bez konieczności poruszania się po witrynie.

Zalety umieszczenia przycisku CTA poza menu to:

• Większa widoczność : umieszczając go w widocznym miejscu, np. w nagłówku lub unosząc się na boku, użytkownicy mogą go łatwo zauważyć.
• Zwiększone współczynniki konwersji : wyróżniające się CTA jest bardziej prawdopodobne, że zostanie kliknięte, co zwiększy liczbę konwersji.
• Lepsze doświadczenie użytkownika : zapewnia użytkownikom intuicyjny sposób szybkiego podejmowania działań, bez konieczności nawigowania po różnych sekcjach.

Kroki, aby umieścić przycisk CTA poza menu w Webflow

Webflow oferuje przyjazny dla użytkownika interfejs do tworzenia stron internetowych bez konieczności pisania kodu. Wykonaj poniższe kroki, aby dodać przycisk CTA poza menu w projekcie Webflow:

1. Skonfiguruj swój projekt Webflow

Zanim zaczniesz, upewnij się, że masz skonfigurowany projekt Webflow i że znajdujesz się w widoku Projektanta.

• Krok 1.1 : Otwórz swój projekt Webflow i przejdź do strony, na której chcesz dodać przycisk CTA.
• Krok 1.2 : W trybie Projektanta upewnij się, że układ strony jest gotowy i menu nawigacyjne jest na swoim miejscu (lub w miejscu, w którym chcesz dodać przycisk).

2. Utwórz nowy przycisk CTA

Aby utworzyć nowy przycisk CTA poza menu, musisz ustawić go strategicznie na stronie.

• Krok 2.1 : Z lewego panelu przeciągnij i upuść element Button z panelu Dodaj na płótno.
• Krok 2.2 : Dostosuj tekst przycisku, aby pasował do akcji, którą chcesz wykonać użytkownik (np. „Rozpocznij”, „Zarejestruj się”, „Dowiedz się więcej”).
• Krok 2.3 : Stylizuj przycisk zgodnie ze swoimi preferencjami projektowymi. Możesz dostosować czcionkę, rozmiar, kolor, tło i promień obramowania, aby dopasować je do estetyki swojej marki.

3. Umieść przycisk CTA poza menu

Teraz, gdy masz już przycisk, czas umieścić go poza menu. Można to zrobić na kilka sposobów, w zależności od tego, gdzie chcesz, aby przycisk się pojawił.

Opcja 1: Pływający przycisk CTA

Pływający przycisk CTA jest popularnym wyborem ze względu na widoczność. Przykleja się do boku lub dołu strony, nawet gdy użytkownik przewija.

• Krok 3.1 : Wybierz utworzony przycisk i przejdź do ustawień Position w prawym panelu Styl.
• Krok 3.2 : Ustaw pozycję na Fixed . Dzięki temu przycisk pozostanie na miejscu na ekranie podczas przewijania przez użytkownika.
• Krok 3.3 : Dostosuj położenie, ustawiając wartości Top , Right , Bottom i Left , aby umieścić przycisk w żądanym miejscu na ekranie (np. w prawym dolnym rogu lub lewym górnym rogu).
• Krok 3.4 : Dodaj wartość indeksu Z, aby mieć pewność, że przycisk pojawi się nad innymi elementami, takimi jak menu. Możesz ustawić indeks Z na wyższą wartość, na przykład 10 lub 100 , aby mieć pewność, że będzie na górze.

Opcja 2: Umieszczona w sekcji nagłówka

Jeśli wolisz, aby przycisk CTA znajdował się w bardziej tradycyjnym, stałym miejscu poza menu, możesz umieścić go w sekcji nagłówka.

• Krok 3.1 : Przejdź do panelu Navigator i znajdź sekcję nagłówka.
• Krok 3.2 : Utwórz nowy Div Block , który będzie służył jako pojemnik na przycisk CTA. Pomoże to w umiejscowieniu przycisku względem innych elementów.
• Krok 3.3 : Przeciągnij przycisk do kontenera Div Block .
• Krok 3.4 : Użyj ustawień Margin lub Padding w panelu Styl, aby przenieść przycisk w żądane miejsce w nagłówku (na przykład poza menu głównym, ale nadal wyrównany z nagłówkiem).

Opcja 3: Przycisk CTA na przyklejonym pasku nawigacyjnym

Inną opcją jest umieszczenie przycisku CTA na naklejonym pasku nawigacyjnym. Oznacza to, że przycisk będzie podążał za użytkownikiem podczas przewijania strony, ale pozostanie poza menu głównym.

• Krok 3.1 : Wybierz element paska nawigacji i w panelu Styl ustaw jego Position na Sticky .
• Krok 3.2 : Dodaj nowy Div Block ​​obok pozycji menu, w których chcesz, aby przycisk się pojawił.
• Krok 3.3 : Umieść przycisk wewnątrz tego Div Block i dostosuj jego położenie za pomocą marginesu lub dopełnienia.

4. Ustaw przycisk jako interaktywny

Po umieszczeniu przycisku możesz dodać interakcję, aby uczynić go bardziej wciągającym.

• Krok 4.1 : Wybierz przycisk i przejdź do panelu Interactions w Webflow.
• Krok 4.2 : Dodaj interakcję po najechaniu myszką, taką jak zmiana koloru tła lub lekkie skalowanie przycisku, gdy użytkownik najedzie na niego myszką.
• Krok 4.3 : Skonfiguruj link do przycisku. Możesz połączyć go z inną stroną lub zewnętrznym adresem URL lub skonfigurować akcję, taką jak otwarcie modalu lub formularza.

5. Wyświetl podgląd i opublikuj

Po skonfigurowaniu przycisku CTA ważne jest, aby podejrzeć, jak zachowuje się na stronie.

• Krok 5.1 : Kliknij przycisk Preview w prawym górnym rogu, aby zobaczyć, jak przycisk wygląda i zachowuje się na stronie.
• Krok 5.2 : Przetestuj jego responsywność na ekranach o różnych rozmiarach, aby upewnić się, że jest prawidłowo ustawiony.
• Krok 5.3 : Gdy będziesz zadowolony z wyniku, kliknij Publish , aby przycisk pojawił się w Twojej witrynie.

Najlepsze praktyki dotyczące przycisków CTA poza menu

Chociaż umieszczenie przycisku CTA poza menu może być bardzo skuteczne, konieczne jest przestrzeganie kilku najlepszych praktyk, aby mieć pewność, że działa dobrze:

1. Zachowaj prostotę : nie przepełniaj strony zbyt dużą liczbą przycisków CTA. Aby uzyskać najlepsze rezultaty, skoncentruj się na jednym głównym działaniu.
2. Zapewnij dobrą widoczność : upewnij się, że przycisk dobrze kontrastuje z tłem, aby przyciągnąć wzrok użytkownika.
3. Umieść go strategicznie : umieść przycisk w miejscu, w którym użytkownicy mogą go zauważyć, np. w prawym górnym rogu lub unoszącym się z boku.
4. Testuj na różnych urządzeniach : upewnij się, że przycisk CTA wygląda świetnie na urządzeniach mobilnych, tabletach i komputerach stacjonarnych.

Wniosek

Dodanie przycisku CTA poza menu w Webflow może być skuteczną strategią poprawy widoczności i zwiększenia konwersji. Wykonując kroki opisane powyżej, możesz łatwo utworzyć i umieścić przycisk CTA, który wyróżnia się na tle reszty treści strony. Niezależnie od tego, czy wybierzesz pływający przycisk, lepki pasek nawigacyjny, czy tradycyjną pozycję nagłówka, najważniejsze jest, aby upewnić się, że Twoje wezwanie do działania jest umieszczone w miejscu, w którym użytkownicy je zauważą i będą zachęcani do podjęcia działania. Dzięki intuicyjnym narzędziom do projektowania Webflow osiągnięcie tego jest prostsze niż kiedykolwiek!