Elementi - Pulsanti

Utilizza il tipo di contenuto Pulsanti per aggiungere un singolo pulsante o un set di pulsanti nella Page Builder fase. È possibile disporre i pulsanti orizzontalmente o verticalmente e aggiungerli direttamente a righe, colonne, schede e banner sullo stage.

Banner con un pulsante sulla vetrina

NOTE
Se si apportano modifiche significative al contenuto di Page Builder, è consigliabile aumentare la durata della sessione di amministrazione per evitare il timeout della sessione mentre si lavora.

Caselle degli strumenti

Quando si utilizza il tipo di contenuto Pulsanti, è possibile aggiungere e modificare singoli pulsanti e il relativo contenitore che contiene uno o più pulsanti. Ciascuno di essi dispone di una propria casella degli strumenti che è possibile utilizzare per progettare i pulsanti nella fase Page Builder.

Casella degli strumenti pulsante singolo

Casella degli strumenti pulsante

Strumento
Icona
Descrizione
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica pulsante, in cui è possibile modificare le proprietà del pulsante.
Duplica
Icona duplicata {width="25"}
Crea una copia del pulsante.
Rimuovi
Icona Rimuovi {width="25"}
Elimina il pulsante dall'area di visualizzazione.

Casella degli strumenti contenitore pulsanti

Casella degli strumenti contenitore pulsanti

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta il contenitore del pulsante in un'altra posizione valida nella pagina.
Aggiungi
Icona Aggiungi {width="25"}
Aggiunge un pulsante al contenitore.
(etichetta)
Pulsante
Identifica il contenitore corrente come elemento pulsante.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica pulsanti, in cui è possibile modificare le proprietà del contenitore.
Nascondi
Icona Nascondi {width="25"}
Nasconde il contenitore del pulsante.
Spettacolo
Mostra icona {width="25"}
Mostra il contenitore del pulsante nascosto.
Duplica
Icona duplicata {width="25"}
Crea una copia del contenitore del pulsante.
Rimuovi
Icona Rimuovi {width="25"}
Elimina dall’area di visualizzazione il contenitore del pulsante e il relativo contenuto.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.

Aggiungi un singolo pulsante

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

    Trascinamento di un pulsante nell'area di visualizzazione {width="500" modal="regular"}

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

  3. Immettere Button Text da visualizzare sul pulsante.

    Impostazioni di base del pulsante {width="600" modal="regular"}

  4. Imposta Button Type su uno dei seguenti:

    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.

    Esempio di pulsante primario e secondario {width="500" modal="regular"}

  5. 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.

      Scelta di un prodotto per il collegamento del pulsante {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.

      Scelta di una categoria per il collegamento del pulsante {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.

      Scegli la pagina CMS per il collegamento del pulsante {width="600" modal="regular"}

  6. Completa le impostazioni avanzate in base alle esigenze.

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

Aggiungi un set di pulsanti

Nelle sezioni seguenti viene descritta una serie di passaggi per iniziare con un singolo pulsante e creare un set di tre pulsanti all'interno di un contenitore. Se non si dispone già di un singolo pulsante, seguire le istruzioni precedenti per aggiungere un singolo pulsante all'area di visualizzazione.

Passaggio 1: creare il secondo pulsante

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

    Aggiunta di un altro pulsante {width="500" modal="regular"}

  2. Immettere il testo da visualizzare sul secondo pulsante.

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

    Modifica del pulsante {width="500" modal="regular"}

  4. Imposta Button Type su Secondary.

  5. Configura Button Link come necessario.

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

    Impostazioni pulsante Contattaci {width="600" modal="regular"}

  6. Completa le impostazioni avanzate in base alle esigenze.

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

Passaggio 2: creare il terzo pulsante

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

    Duplicazione di un pulsante {width="500" modal="regular"}

  2. Immettere il testo da visualizzare sul terzo pulsante.

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

    Casella degli strumenti per il terzo pulsante {width="500" modal="regular"}

  4. Aggiorna Button Link in base alle esigenze.

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

Passaggio 3: aggiornare il contenitore del pulsante

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

    Casella degli strumenti contenitore pulsanti {width="500" modal="regular"}

  2. In Appearance ​scegliere Stacked.

  3. Imposta All Buttons are same size su Yes.

    Pulsanti in pila della stessa dimensione {width="300"}

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

  5. 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.

    Pulsanti in pila sullo stage {width="500" modal="regular"}

Spostare un pulsante

  1. Fare clic sul pulsante da spostare.

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

    Spostamento di un pulsante {width="500" modal="regular"}

Modificare le impostazioni di un pulsante

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

    Caselle degli strumenti dei pulsanti {width="500" modal="regular"}

  2. 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.
  3. Completa le impostazioni avanzate in base alle esigenze.

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

Modificare le impostazioni per un contenitore di pulsanti

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

  2. 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.

  3. Completa le Impostazioni avanzate in base alle esigenze.

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

Modificare le impostazioni avanzate

È possibile modificare le impostazioni di Advanced ​per i singoli pulsanti e per il contenitore di pulsanti.

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opzione Descrizione
    Default Applica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente.
    Left Allinea il contenuto lungo il bordo sinistro del contenitore principale, tenendo conto della spaziatura specificata.
    Center Allinea il contenuto al centro del contenitore principale, tenendo conto di eventuali spaziature specificate.
    Right Allinea il contenuto lungo il bordo destro del contenitore principale, tenendo conto della spaziatura specificata.
  2. Impostare lo stile Border applicato a tutti e quattro i lati del pulsante o del contenitore pulsanti:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opzione Descrizione
    Default Applica lo stile di bordo predefinito specificato dal foglio di stile associato.
    None Non fornisce alcuna indicazione visibile dei bordi del contenitore.
    Dotted Il bordo del contenitore viene visualizzato come una linea tratteggiata.
    Dashed Il bordo del contenitore viene visualizzato come una linea tratteggiata.
    Solid Il bordo del contenitore viene visualizzato come linea continua.
    Double Il bordo del contenitore viene visualizzato come una doppia riga.
    Groove Il bordo del contenitore viene visualizzato come una linea scanalata.
    Ridge Il bordo del contenitore viene visualizzato come una linea scanalata.
    Inset Il bordo del contenitore viene visualizzato come una linea interna.
    Outset Il bordo del contenitore viene visualizzato come una linea di contorno.
  3. Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opzione Descrizione
    Border Color Specificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente.
    Border Width Immettere il numero di pixel per lo spessore della linea del bordo.
    Border Radius Immettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo.
  4. (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.

  5. 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.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Area contenitore Descrizione
    Margins Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left
    Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d