Pulsanti e icone

utilizzando Pulsante e collegamenti, puoi aggiungere qualsiasi tipo di vetro (1) alla sezione. È possibile aggiungere un pulsante/collegamento di testo/collegamento immagine/icona/separatore.

Puoi osservare le duplicare (2), Modifica (3), o Elimina (4) il pulsante/collegamento esistente.

In questo articolo:

  1. Aggiungi pulsanti/link
  2. Pulsanti/collegamenti di stile

Aggiungi pulsanti/link

  • Per aggiungere qualsiasi tipo di collegamento alla sezione, fare clic su + Aggiungi pulsante opzione.

Migliori + Aggiungi pulsante L'opzione offre quattro modi per aggiungere un collegamento. Oltre a questo, puoi anche aggiungere Separatori per aggiungere spazio tra pulsanti/link. Ecco le opzioni:


Pulsante

Aggiungi un pulsante alla voce dell'elenco.

Potrai aggiornare:

  1. Etichetta pulsante – Specificare il testo visibile sul tuo pulsante. Questo è ciò che gli utenti vedranno e su cui cliccheranno.
  2. Pulsante Link – Specificare il URL o azione il pulsante dovrebbe attivarsi quando viene cliccato.
  3. Finestra di destinazione – Scegli se il collegamento si apre in stessa scheda nuova scheda.
  4. Stile pulsante – Scegli lo stile del pulsante come predefinito (impostato nel file Pulsanti e collegamenti scheda della sezione Design), Solido, Contorno o un collegamento testuale.
    • Predefinito: Segue le impostazioni del tema del tuo sito.
    • Solido: Un pulsante in grassetto e pieno.
    • Outline: Sfondo trasparente con bordo.
    • Collegamento testuale: Stile semplice e pulito, solo testo (nessun riquadro con pulsanti).
  1. Forma del pulsante – Impostare un forma personalizzata per ogni singolo pulsante all'interno della sezione. Ciò consente di sovrascrivere la forma del pulsante globale definita sotto Impostazioni di progettazione, offrendoti un maggiore controllo sull'aspetto di ciascun pulsante. Le forme disponibili sono Quadrato, Arrotondato e Pillola.
  2. Colore pulsante – Personalizza la combinazione di colori del pulsante:
    • Predefinito: Eredita le impostazioni del tema.
    • Invertire: Inverte i colori del testo/sfondo dei pulsanti.
    • Personalizzato: Consente di scegliere colori specifici per il testo e lo sfondo.
  1. Testo pulsante – Se si utilizza Colore del pulsante personalizzato, puoi impostare il colore del testo (etichetta) da qui.
  2. Sfondo del pulsante – Disponibile anche in Personalizzato, imposta il colore di sfondo del pulsante. Abbinalo al colore del testo per la massima leggibilità e stile.
  3. Icona del pulsante – Aggiungi un'icona accanto all'etichetta del pulsante. Puoi scegliere tra diverse opzioni di icone.
  4. disposizione – Controlla il posizionamento dell'icona rispetto all'etichetta. Le opzioni di layout disponibili sono:
    • Etichetta + Icona: Prima appare il testo, seguito dall'icona.
    • Icona + Etichetta: Prima appare l'icona, poi il testo.
    • Etichetta + Icona (Ampia): Testo e icone disposti con maggiore spaziatura, adatti a pulsanti più larghi.
    • Icona + Etichetta (Larga): Prima l'icona, layout con padding più ampio.
  1. Colore dell'icona – Scegli il colore dell'icona del pulsante. Puoi impostarlo su Testo pulsante colore o il Brand colore.


Impostazioni stile pulsante

Troverai queste impostazioni sotto Scheda Stile di sezioni. Queste impostazioni ti consentono di perfezionare l'aspetto, la spaziatura e il layout dei pulsanti sul tuo sito Pixpa per un migliore controllo del design e una migliore reattività:

  1. Dimensione del pulsante – Scegli la dimensione del pulsante (ad esempio, Piccolo, Medio, Grande). In questo modo, la spaziatura interna e la dimensione del carattere si adatteranno al tuo design.
  2. Spazio tra i pulsanti – Controlla la spaziatura orizzontale tra più pulsanti. È possibile utilizzare le unità vw (larghezza della finestra) per una spaziatura reattiva.
  3. Spazio sopra i pulsanti – Aggiunge una spaziatura verticale sopra i pulsanti. Questo aiuta a separarli dal contenuto soprastante, misurata in %.
  4. Link al testo – Regola la dimensione del carattere per i collegamenti di testo dei pulsanti (particolarmente utile quando si utilizza uno stile "Collegamento di testo" invece di un pulsante tradizionale).
  5. Immagine come pulsante (dimensione) – Se si utilizza un'immagine anziché un pulsante tradizionale, questa impostazione definisce le dimensioni di visualizzazione dell'immagine (in pixel).
  6. Larghezza del pulsante – Scegli quanto largo deve apparire il pulsante:
    • Predefinito: Larghezza standard basata sul contenuto del pulsante
    • Grande / Extra-Grande: Pulsanti più larghi per maggiore enfasi
    • Intera larghezza: Il pulsante si estende su tutta la larghezza del contenitore


Aggiungere un collegamento testuale alla voce dell'elenco.

Potrai aggiornare:

  1. Impostare il etichetta di testo.
  2. specificare la collegamento testuale.
  3. Finestra di destinazione – Scegliere di aprire la pagina nella stessa o in una nuova finestra.


Immagine

Aggiungi un'immagine e collegala a qualsiasi pagina.

  • Dopo aver caricato l'immagine, si presenta in questo modo. Fare clic sul collegamento per modificarlo.

  • Da qui puoi:
    1. Caricare/Cambia l'immagine.
    2. Pulsante Link – Specificare il collegamento.
    3. Finestra di destinazione – Scegliere di aprire la pagina nella stessa o in una nuova finestra.

Note:

Il titolo del sito verrà utilizzato come testo alternativo per l'immagine del pulsante per migliorarne la ricercabilità.


Icona sociale

  • Aggiungi un'icona social alla voce dell'elenco.

Puoi gestire:

  1. L'icona social da collegare.
  2. Specifica il percorso del tuo profilo social pertinente.
  3. Finestra di destinazione – Scegliere di aprire la pagina nella stessa o in una nuova finestra.


Separatore

Migliori Separatore L'opzione consente di inserire spazi tra pulsanti o collegamenti.

Questo è utile per creare una separazione visiva tra pulsanti posizionati in prossimità. È possibile aggiungere un separatore dall' Pulsante e collegamenti pannello proprio come aggiungi altri pulsanti.

  • Lo spazio tra i pulsanti è controllato da Imbottitura – Parte superiore impostazione all'interno del Separatore. Regolando questo valore si aumenta o diminuisce la spaziatura verticale tra i pulsanti posizionati molto vicini.

 

Note:

  • Un separatore non collega nulla, crea semplicemente uno spazio verticale.
  • È possibile spostarlo verso l'alto o verso il basso per regolare la spaziatura tra gli elementi in base alle esigenze.


Opzioni di stile per pulsanti e collegamenti

Migliori opzioni di stile sarà presente sotto la Style scheda durante la gestione della sezione.

Per i pulsanti e i collegamenti avrai a disposizione diverse opzioni di stile, come segue:

  1. specificare la Spazio tra pulsanti/collegamenti che sono stati aggiunti.
  2. specificare la Spazio sopra il pulsante/collegamenti.
  3. Scegliere il effetto hover per il pulsante/link.

  1. Scegliere il dimensione del pulsante Normale che hai aggiunto nel Pulsante/Link. 
  2. specificare la altezza del pulsante Immagine se hai aggiunto un collegamento all'immagine nel Pulsante/Link. 
  3. specificare la dimensione del pulsante icona se hai aggiunto un'icona social nel Pulsante/Link. 

Se hai aggiunto un'icona social nel Pulsante/collegamenti sopra, quindi:

  1. Scegliere il Tipo di icona social/Forma.
  2. Scegliere il Stile colore icona social. Se hai scelto il file Colore del marchio, verrà ereditato il colore del marchio dell'icona.
    Se hai scelto il file Colore selezionato opzione sopra quindi:
    1. specificare la Colore dell'icona social.
    2. specificare la Colore di sfondo dell'icona social.


Esempio

Supponiamo, ad esempio, di aver aggiunto un collegamento social Amazon nel file Pulsante/collegamentie specificato il colore dell'icona come rosso colore di sfondo dell'icona come verde, quindi l'icona apparirà come di seguito:

Non trovi quello che cerchi?

Mettiti in contatto con un esperto Pixpa.

Pixpa Studio è stato appena rinnovato. Stiamo aggiornando tutte le schermate degli articoli di aiuto.