Elementi - Pulsanti

Nel pannello Page Builder, espandi Elements e trascina un segnaposto Buttons in una riga, colonna o set di schede sull'area di visualizzazione.

{width="500" modal="regular"}

Passa il puntatore del mouse sul pulsante per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).

Immettere Button Text da visualizzare sul pulsante.

{width="600" modal="regular"}

Imposta Button Type su uno dei seguenti:

{width="500" modal="regular"}

Impostare Button Link utilizzando uno dei tipi seguenti:

• URL - Immettere l'URL di destinazione del collegamento.

  L’URL può essere un collegamento relativo a un prodotto o a una pagina del tuo store, oppure un URL completo.

  Esempio di URL relativo - ../luma-analog-watch.html

  Esempio di URL completo - http://mystore.com/luma-analog-watch.html

  Se il collegamento consente di accedere a un sito Web diverso, è possibile mantenere aperta la pagina corrente del negozio aprendo il collegamento in una nuova scheda del browser.

  Per impedire al visitatore di uscire dal tuo archivio, seleziona la casella di controllo Open in new tab.

• Product - Immettere un nome di prodotto (parziale o completo) o uno SKU, quindi scegliere il nome del prodotto nell'elenco.

  note note
  NOTE
  I prodotti vengono visualizzati nell'elenco in base alle impostazioni di Mostra prodotti esauriti. Per gli esercenti Multi Source che utilizzano Inventory management, l'elenco dei prodotti è limitato dall'origine assegnata solo al sito Web predefinito.

  {width="600" modal="regular"}

• Category - Immettere un nome di categoria (parziale o completo) oppure fare clic nel campo vuoto per visualizzare la struttura delle categorie. Quindi, scegli il nome della categoria nella struttura.

  {width="600" modal="regular"}

• Page - Immettere il nome di una pagina CMS (parziale o completa) o fare clic nel campo vuoto per visualizzare l'elenco completo. Scegliere quindi il nome della pagina nell'elenco dei risultati della ricerca.

  {width="600" modal="regular"}

Completa le impostazioni avanzate in base alle esigenze.

Al termine, fare clic su Save nell'angolo superiore destro per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Passa il puntatore del mouse sul contenitore del pulsante per visualizzare la casella degli strumenti e scegli l'icona Aggiungi ( {width="20"} ).

{width="500" modal="regular"}

Immettere il testo da visualizzare sul secondo pulsante.

Fai clic sul nuovo pulsante per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="500" modal="regular"}

Imposta Button Type su Secondary.

Configura Button Link come necessario.

Nell'esempio seguente, il collegamento è un URL relativo che va alla pagina Contattaci.

{width="600" modal="regular"}

Completa le impostazioni avanzate in base alle esigenze.

Al termine, fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Fai nuovamente clic sul secondo pulsante sullo stage e scegli l'icona Duplica ( {width="20"} ).

{width="500" modal="regular"}

Immettere il testo da visualizzare sul terzo pulsante.

Fai clic sul terzo pulsante per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="500" modal="regular"}

Aggiorna Button Link in base alle esigenze.

Nell'angolo superiore destro fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Passa il puntatore del mouse sul contenitore del pulsante per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="500" modal="regular"}

In Appearance ​scegliere Stacked.

Imposta All Buttons are same size su Yes.

{width="300"}

Aggiornare le impostazioni rimanenti in base alle esigenze, utilizzando le descrizioni di Modificare le impostazioni per un contenitore di pulsanti.

Al termine, fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Il set completo di pulsanti in pila viene visualizzato sullo stage, con un pulsante principale e due pulsanti secondari.

{width="500" modal="regular"}

Fare clic sul pulsante da spostare.

Selezionare e trascinare l'icona Sposta ( {width="20"} ), visualizzata immediatamente prima del testo del pulsante, in una nuova posizione per il pulsante all'interno del relativo contenitore.

{width="500" modal="regular"}

Fai clic sul pulsante sull'area di visualizzazione per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="500" modal="regular"}

Se necessario, aggiorna le impostazioni standard.

• Button Text - Immettere il testo da visualizzare sul pulsante (può anche essere aggiornato direttamente dalla fase).

• Button Type - Determina il formato del pulsante.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Tipo	Descrizione
  Primary	Applica lo stile del pulsante principale dal foglio di stile corrente.
  Secondary	Applica lo stile del pulsante secondario dal foglio di stile corrente, se applicabile.
  Link	Crea un collegamento ipertestuale anziché un pulsante.

• Button Link - Determina la pagina di destinazione che viene visualizzata quando si fa clic sul pulsante.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opzione	Descrizione
  URL	Utilizza un URL relativo o completo per identificare la pagina di destinazione.
  Product	Identifica la pagina di destinazione in base al nome del prodotto o allo SKU. È possibile cercare il nome del prodotto in base a un nome completo o parziale. Il prodotto viene quindi scelto dall’elenco dei risultati della ricerca.
  Category	Identifica la pagina di destinazione come una categoria o sottocategoria specifica nella struttura delle categorie.
  Page	Identifica la pagina di destinazione come una pagina CMS specifica.

Completa le impostazioni avanzate in base alle esigenze.

Per salvare le impostazioni e tornare all'area di lavoro Page Builder, fare clic su Save nell'angolo superiore destro.

Passa il puntatore del mouse sul contenitore del pulsante per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

Aggiornare le impostazioni di Appearance in base alle esigenze.

• Utilizza le opzioni di disposizione per visualizzare i pulsanti orizzontalmente o verticalmente nel contenitore:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Opzione	Descrizione
  Inline	Dispone i pulsanti orizzontalmente.
  Stacked	Dispone i pulsanti verticalmente.

• Impostare l'opzione All buttons are same size in base alle proprie preferenze.

  Se è impostato su Yes, tutti i pulsanti del contenitore hanno dimensioni coerenti, in base alla lunghezza del testo del pulsante più lungo.

Completa le Impostazioni avanzate in base alle esigenze.

Al termine, fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Per controllare il posizionamento all'interno del contenitore padre, scegliere Alignment:

Impostare lo stile Border applicato a tutti e quattro i lati del pulsante o del contenitore pulsanti:

Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

(Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore di pulsanti.

Separare più nomi di classe con uno spazio.

Immettere i valori, in pixel, per Margins and Padding per determinare i margini esterni e la spaziatura interna del pulsante o del contenitore pulsanti.

Immettere i valori corrispondenti nel diagramma.