Elementi - Pulsanti

Utilizza il Pulsanti tipo di contenuto per aggiungere un singolo pulsante o un set di pulsanti nel 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 {width="600" modal="regular"}

NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore 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 da utilizzare per progettare i pulsanti Page Builder fase.

Casella degli strumenti pulsante singolo

Casella degli strumenti Pulsante {width="500" modal="regular"}

Strumento
Icona
Descrizione
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica pulsante, in cui è possibile modificare le proprietà del pulsante.
Duplica
Icona Duplica {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 {width="500" modal="regular"}

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
Nascondi icona {width="25"}
Nasconde il contenitore del pulsante.
Spettacolo
Mostra icona {width="25"}
Mostra il contenitore del pulsante nascosto.
Duplica
Icona Duplica {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. In Page Builder pannello, espandere Elements e trascina un Buttons segnaposto per una riga, colonna o gruppo di schede sullo stage.

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

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

  3. Inserisci il Button Text sul pulsante.

    Impostazioni di base dei pulsanti {width="600" modal="regular"}

  4. Imposta Button Type a uno dei seguenti elementi:

    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. Imposta il 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 evitare che il visitatore si allontani dal tuo negozio, seleziona la Open in new tab casella di controllo.

    • 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 al Mostra prodotti esauriti impostazioni. Per i commercianti multi-sorgente che utilizzano Inventory management, l’elenco dei prodotti è limitato dall’origine assegnata solo al sito web predefinito.

      Scelta di un prodotto per il collegamento 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 - Inserisci il nome di una pagina CMS (parziale o completa) o fai 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 il impostazioni avanzate secondo necessità.

  7. Al termine, fai clic su Save nell’angolo in alto a destra per applicare le impostazioni e tornare al Page Builder Workspace.

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 Aggiungi ( Icona Aggiungi {width="20"} ).

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

  2. Immettere il testo da visualizzare sul secondo pulsante.

  3. Fare clic sul nuovo pulsante per visualizzare la casella degli strumenti e scegliere Impostazioni ( Icona Impostazioni {width="20"} ).

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

  4. Imposta Button Type a Secondary.

  5. Configurare Button Link secondo necessità.

    Nell’esempio seguente, il collegamento è un URL relativo che passa al Contattaci pagina.

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

  6. Completa il impostazioni avanzate secondo necessità.

  7. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

Passaggio 2: creare il terzo pulsante

  1. Fare di nuovo clic sul secondo pulsante sullo stage e scegliere Duplica ( Icona Duplica {width="20"} ).

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

  2. Immettere il testo da visualizzare sul terzo pulsante.

  3. Fare clic sul terzo pulsante per visualizzare la casella degli strumenti e scegliere Impostazioni ( Icona Impostazioni {width="20"} ).

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

  4. Aggiornare il Button Link secondo necessità.

  5. Nell’angolo superiore destro, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

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 Impostazioni ( Icona Impostazioni {width="20"} ).

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

  2. Sotto Appearance, scegli Stacked.

  3. Imposta All Buttons are same size a Yes.

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

  4. Se necessario, aggiorna le impostazioni rimanenti utilizzando le descrizioni di Modificare le impostazioni per un contenitore di pulsanti.

  5. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

    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. Seleziona e trascina 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. Fare clic sul pulsante sullo stage per visualizzare la casella degli strumenti e scegliere Impostazioni ( Icona Impostazioni {width="20"} ).

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

  2. Se necessario, aggiorna le impostazioni standard.

    • Button Text - Inserisci il testo da visualizzare sul pulsante (può anche essere aggiornato direttamente dall'area di visualizzazione).

    • 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 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 il impostazioni avanzate secondo necessità.

  4. Per salvare le impostazioni e tornare al Page Builder Workspace, fai 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 Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Aggiornare il 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.
    • Imposta il All buttons are same size in base alle proprie preferenze.

      Se impostato su Yes, tutti i pulsanti nel contenitore hanno una dimensione coerente, in base alla lunghezza del testo del pulsante più lungo.

  3. Completa il Impostazioni avanzate secondo necessità.

  4. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

Modificare le impostazioni avanzate

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

  1. Per controllare il posizionamento all'interno del contenitore principale, 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. Imposta il Border stile 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) Specifica i nomi di CSS classes dal foglio di stile corrente per applicare al contenitore pulsante o pulsanti.

    Separare più nomi di classe con uno spazio.

  5. Immetti i valori, in pixel, per il 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