Wybierz style przycisków prowadzące odwiedzających.

Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe

Decydujesz, jak donośny jest każdy przycisk. Lity przycisk oznacza jedną akcję, na której zależy ci najbardziej, a przycisk konturowy obok oferuje alternatywę bez konkurowania. Ta strona pokazuje, jak ostylować taką parę i co zmienia które ustawienie. Aby dodać przycisk i ustawić jego link, zobacz dodawanie przycisku.

Film podąża za poniższymi krokami: czyni Apply now głównym przyciskiem i dodaje konturowy drugi przycisk.

Stylowanie głównego i drugiego przycisku

Zacznij od przycisku na stronie, na przykład Apply now.

  1. Najedź na przycisk i otwórz More > Settings.
  2. Ustaw Type na Primary.
  3. Ustaw Size na Large i kliknij Save.
  4. Ponownie najedź na przycisk i otwórz More > Clone. Kopia pojawia się tuż pod oryginałem.
  5. Otwórz More > Settings na kopii. Zmień jej Title, na przykład na Download brochure, i jej Link.
  6. Włącz Outline style i kliknij Save.
  7. Kliknij Save na pasku narzędzi.

Wybór stylu dla każdej akcji

Akcja Styl Przykład
Jedna akcja, na której zależy ci najbardziej Lity Primary Apply now
Alternatywa Outline style w tym samym Type Download brochure
Drobna akcja Link, który wygląda jak link tekstowy Read the terms
Ostrzeżenie albo ostatni krok Danger albo Warning Cancel my booking

Używaj jednego litego przycisku na sekcję, aby odwiedzający od razu widzieli, gdzie kliknąć. Pisz etykiety mówiące, co się stanie: „Get started” zamiast „Click here”, „Send message” zamiast „Submit”.

Co widzisz

Dwa duże przyciski układają się w stos w kolumnie: lity w głównym kolorze motywu i konturowy z obramowaniem i tekstem w tym samym kolorze. Lity pierwszy przyciąga wzrok. Linki nie otwierają się podczas edycji. Aby je przetestować, zapisz stronę, otwórz menu widoku (ikona oka) i wybierz Preview.

Panel General przycisku z włączonym Outline style, Type Primary i Size Large, obok litego przycisku Apply now i konturowego przycisku Download brochure pod nim

Ustawienia

Ustawienie Do czego służy Domyślnie
Type Styl koloru: Primary, Secondary, Success, Info, Warning, Danger, Link, Light albo Dark. Kolory pochodzą z twojego motywu. Primary
Outline style Kolorowe obramowanie i tekst bez wypełnienia Wyłączone
Size Normal, Large albo Small Normal
Block button Rozciąga przycisk na pełną szerokość kolumny Wyłączone
Link target Same window albo New window. Pokazuje się, gdy Link ma wartość. Same window

Dla twórców motywów: każdy Type dodaje klasę Bootstrapa btn-<type>, na przykład btn-primary. Przy włączonym Outline style staje się btn-outline-<type>, z wyjątkiem Link, który zawsze pozostaje btn-link. Large dodaje btn-lg, Small dodaje btn-sm, a Block button dodaje btn-block.

Jeśli nie widzisz stylu

  • Konturowy przycisk nie pokazuje obramowania. Type to Link, który zawsze wygląda jak link tekstowy, więc Outline style nie działa. Wybierz inny Type dla konturowego przycisku.
  • Przycisk prawie znika. Light jest bliskie bieli, więc wtapia się w białą sekcję. Wybierz ciemniejszy Type albo nadaj sekcji kolor tła.
  • Link otwiera się w tej samej karcie. Link target to Same window i pokazuje się tylko, gdy Link ma wartość. Najpierw wypełnij Link, potem wybierz New window.

Co dalej?