Przycisk i ikony

Korzystanie z Przycisk i linki, możesz dodać dowolny typ Połączyć (1) do sekcji. Możesz dodać Przycisk/Link Tekstowy/Link Obrazkowy/Ikonę/Separator.

Możesz Duplikat (2) Edytuj (3) lub Usunięcia (4) istniejący przycisk/link.

W tym artykule:

  1. Dodaj przyciski/linki
  2. Przyciski/Linki stylu

Dodaj przyciski/linki

  • Aby dodać dowolny rodzaj linku do sekcji, kliknij na + Dodaj przycisk opcja.

 + Dodaj przycisk opcja zapewnia cztery sposoby dodania linku. Oprócz tego możesz również dodać Separatory aby dodać odstęp między przyciskami/linkami. Oto opcje:


Przycisk

Dodaj przycisk do elementu listy.

Będziesz mógł aktualizować:

  1. Etykieta przycisku – Określ widoczny tekst na Twoim przycisku. To właśnie zobaczą i klikną użytkownicy.
  2. Przycisk Link – Określ Adres URL lub akcja przycisk powinien zostać uruchomiony po kliknięciu.
  3. Okno docelowe – Wybierz, czy link ma się otwierać w ta sama zakładka lub nowa karta.
  4. Styl przycisku – Wybierz styl przycisku, który ma być domyślny (ustawiony w pliku Przyciski i linki w sekcji Projekt), Bryła, Kontur lub Łącze tekstowe.
    • Zaniedbanie: Dostosowuje się do ustawień motywu Twojej witryny.
    • Solidny: Pogrubiony, wypełniony przycisk.
    • Outline: Przezroczyste tło z obramowaniem.
    • Link tekstowy: Prosty, przejrzysty styl, wyłącznie tekstowy (bez pola przycisków).
  1. Kształt przycisku – Ustaw niestandardowy kształt dla każdego pojedynczego przycisku w sekcji. Pozwala to zastąpić globalny kształt przycisku zdefiniowany w sekcji Ustawienia projektowe, co daje Ci większą kontrolę nad wyglądem każdego przycisku. Dostępne kształty to: kwadratowy, zaokrąglony i pigułkowy.
  2. Kolor przycisku – Dostosuj schemat kolorów przycisku:
    • Zaniedbanie: Dziedziczy ustawienia motywu.
    • Odwracać: Odwraca kolory tekstu/tła przycisku.
    • Nietypowe: Umożliwia wybór konkretnego koloru tekstu i tła.
  1. Tekst Przycisk – Jeśli używasz Niestandardowy kolor przycisku, możesz ustawić kolor tekstu (etykiety) stąd.
  2. Tło przycisku – Opcja ta jest również dostępna w sekcji Niestandardowe i pozwala ustawić kolor tła przycisku. Połącz ją z kolorem tekstu, aby zapewnić maksymalną czytelność i styl.
  3. Ikona przycisku – Dodaj ikonę obok etykiety przycisku. Możesz wybierać spośród różnych opcji ikon.
  4. układ – Kontroluj położenie ikony względem etykiety. Dostępne opcje układu to:
    • Etykieta + Ikona: Najpierw pojawia się tekst, a następnie ikona.
    • Ikona + etykieta: Najpierw pojawia się ikona, potem tekst.
    • Etykieta + Ikona (szeroka): Tekst i ikona rozmieszczone z większym wyścieleniem, odpowiednim do szerszych przycisków.
    • Ikona + etykieta (szeroka): Najpierw ikona, szersze wypełnienie.
  1. Kolor ikony – Wybierz kolor ikony przycisku. Możesz ustawić go na Tekst Przycisk kolor lub Marka kolor.


Ustawienia stylu przycisków

Ustawienia te znajdziesz pod Karta Styl sekcji. Te ustawienia pozwalają precyzyjnie dostosować wygląd, odstępy i układ przycisków w witrynie Pixpa, co zapewnia lepszą kontrolę nad projektem i responsywność:

  1. Rozmiar guzika – Wybierz rozmiar przycisku (np. Mały, Średni, Duży). To dopasuje odstęp i rozmiar czcionki do Twojego projektu.
  2. Odstęp między przyciskami – Kontroluje odstępy poziome między przyciskami. Możesz użyć jednostek vw (szerokość obszaru widoku) do określenia odstępów responsywnych.
  3. Miejsce nad przyciskami – Dodaje odstęp pionowy nad przyciskiem/przyciskami. Pomaga to oddzielić je od zawartości powyżej, mierzony w %.
  4. Link tekstowy – Dostosowuje rozmiar czcionki dla linków tekstowych przycisków (przydatne zwłaszcza w przypadku używania stylu „Link tekstowy” zamiast tradycyjnego przycisku).
  5. Obraz jako przycisk (rozmiar) – Jeśli używasz obrazu zamiast tradycyjnego przycisku, to ustawienie definiuje rozmiar wyświetlania obrazu (w pikselach).
  6. Szerokość przycisku – Wybierz, jak szeroki ma być przycisk:
    • Zaniedbanie: Standardowa szerokość oparta na zawartości przycisku
    • Duży / Bardzo duży: Szersze przyciski dla większego nacisku
    • Pełna szerokość: Przycisk rozciąga się na całą szerokość kontenera


dodaj link tekstowy do elementu listy.

Będziesz mógł aktualizować:

  1. Ustaw etykieta tekstowa.
  2. Określ link tekstowy.
  3. Okno docelowe – Wybierz, aby otworzyć stronę w tym samym lub nowym oknie.


Obraz

Dodaj obraz i połącz go z dowolną stroną.

  • Po przesłaniu obrazu wyświetla się on w ten sposób. Kliknij link, aby go edytować.

  • Stąd możesz:
    1. Prześlij/Zmień obraz.
    2. Przycisk Link – Określ łącze.
    3. Okno docelowe – Wybierz, aby otworzyć stronę w tym samym lub nowym oknie.

Note

Tytuł witryny zostanie użyty jako tekst alternatywny obrazu przycisku, aby ułatwić wyszukiwanie.


Ikona społecznościowa

  • Dodaj ikonę społecznościową do elementu listy.

Możesz zarządzać:

  1. Ikona społecznościowa do połączenia.
  2. Określ odpowiednią ścieżkę profilu społecznościowego.
  3. Okno docelowe – Wybierz, aby otworzyć stronę w tym samym lub nowym oknie.


Separator

Separator opcja pozwala na wstawienie odstępu między przyciskami i linkami.

Jest to przydatne do tworzenia wizualnego podziału między przyciskami umieszczonymi blisko siebie. Możesz dodać separator z Przycisk i linki tak jak dodajesz inne przyciski.

  • Odstęp między przyciskami jest kontrolowany przez Wyściółka – góra ustawienie w Separatorze. Dostosowanie tej wartości zwiększa lub zmniejsza odstęp pionowy między przyciskami umieszczonymi blisko siebie.

 

Note

  • Separator nie łączy nigdzie – po prostu tworzy przestrzeń pionową.
  • Możesz przesuwać go w górę lub w dół, aby w razie potrzeby dostosować odstępy między elementami.


Opcje stylu dla przycisków i linków

opcje stylu będzie obecny pod Styl kartę podczas zarządzania sekcją.

Będziesz mieć wiele opcji stylu dla przycisku i linków w następujący sposób:

  1. Określ Przestrzeń między przyciskiem/linkami które zostały dodane.
  2. Określ Spacja nad przyciskiem/linkami.
  3. Wybierz Efekt aktywowania dla przycisku/łączy.

  1. Wybierz rozmiar normalnego przycisku które dodałeś w Przycisk/Linki. 
  2. Określ wysokość przycisku obrazu jeśli dodałeś link do obrazu w pliku Przycisk/Linki. 
  3. Określ rozmiar ikony przycisku jeśli dodałeś ikonę społecznościową w pliku Przycisk/Linki. 

Jeśli dodałeś ikonę społecznościową w pliku Przycisk/Linki powyżej, to:

  1. Wybierz Typ ikony społecznościowej/Kształt.
  2. Wybierz Styl kolorów ikon społecznościowych. Jeśli wybrałeś Kolor marki, wówczas kolor marki ikony zostanie odziedziczony.
    Jeśli wybrałeś Wybrany kolor opcja powyżej to:
    1. Określ Kolor ikony społecznościowej.
    2. Określ Kolor tła ikony społecznej.


Przykład

Załóżmy, że dodałeś link społecznościowy Amazon w pliku Przycisk/Linkii określił kolor ikony jako czerwony kolor tła ikony jako zielony, następnie ikona pojawi się jak poniżej:

Nie możesz znaleźć tego, czego szukasz?

Skontaktuj się z Ekspertem Pixpa.