Media - Immagine

Utilizza il Immagine tipo di contenuto per aggiungere un'immagine JPG, GIF o PNG al Page Builder fase. Oltre all'immagine desktop predefinita, è possibile specificare un'immagine secondaria per i dispositivi mobili. Puoi anche aggiungere una didascalia che appare sotto l'immagine e collegarla a qualsiasi URL, prodotto, categoria o pagina.

TIP
È possibile utilizzare Integrazione di Adobe Stock per trovare e salvare una risorsa appropriata tra i milioni forniti da Adobe Stock. Consulta Utilizzo delle immagini di Adobe Stock per informazioni dettagliate su come cercare, perfezionare e salvare le risorse Adobe Stock nella galleria.
NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Casella degli strumenti Immagine

La casella degli strumenti Immagine viene visualizzata quando passi il cursore del mouse sul contenitore immagine.

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

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta l'immagine in un'altra posizione sullo stage.
(etichetta)
Immagine
Identifica il contenitore di contenuto corrente come immagine. Passa il cursore del mouse sul contenitore di immagini per visualizzare la casella degli strumenti.
Impostazioni
Icona Impostazioni {width="25"}
Apre il Modifica immagine , in cui è possibile modificare le proprietà dell’immagine e del contenitore.
Nascondi
Nascondi icona {width="25"}
Nasconde l'immagine corrente.
Spettacolo
Mostra icona {width="25"}
Mostra l'immagine nascosta.
Duplica
Icona Duplica {width="25"}
Crea una copia dell'immagine.
Rimuovi
Icona Rimuovi {width="25"}
Elimina l'immagine dalla fase.
Carica nuova immagine
Carica un'immagine dal file system locale alla raccolta.
Seleziona dalla raccolta
Consente di scegliere un'immagine esistente dalla raccolta.
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'immagine

  1. In Page Builder pannello, espandere Media e trascina un Image segnaposto al contenitore di destinazione.

    È possibile aggiungere un'immagine a una riga, colonna o scheda. Nell’esempio seguente, l’immagine viene trascinata in una colonna vuota.

    Trascinamento di un tipo di contenuto immagine nell’area di visualizzazione {width="600" modal="regular"}

  2. Per aggiungere la risorsa immagine, utilizza uno dei seguenti metodi:

    Carica immagine o seleziona dagli strumenti della Galleria sull'area di visualizzazione {width="500" modal="regular"}

    note note
    NOTE
    La dimensione massima del file è di 4 MB. I tipi di file supportati sono JPG, GIF e PNG.
    • Carica una nuova immagine: utilizza questo metodo per caricare un nuovo file di immagine dal sistema.

      • Clic Upload Image.

      • Individua e scegli l’immagine da aggiungere alla galleria e al contenitore di destinazione.

      In alternativa, è possibile trascinare un file di immagine dal sistema e rilasciarlo sulla Fotocamera ( Icona fotocamera {width="20"} ).

    • Seleziona una risorsa esistente: utilizza questo metodo per selezionare una risorsa immagine esistente dall’archivio multimediale o dalla galleria.

      • Clic Select from Gallery.

      • Utilizza la struttura ad albero per passare all’immagine.

      • Fai clic sulla miniatura e fai clic su Add Selected.

        Aggiunta di un'immagine selezionata {width="600" modal="regular"}

    • Cerca e seleziona un’immagine Adobe Stock: utilizza questo metodo per trovare un’immagine da Adobe Stock.

      note note
      NOTE
      Questo metodo richiede un Integrazione con Adobe Stock configurato per l’Amministratore.
      • Clic Search Adobe Stock e cercare un'immagine.

      • Salvare l'anteprima o l'immagine con licenza nella raccolta.

        Consulta Utilizzo delle immagini di Adobe Stock per ulteriori informazioni sull’utilizzo delle risorse di Adobe Stock.

      • Seleziona la miniatura della risorsa nella galleria e fai clic su Add Selected.

    L’immagine viene visualizzata nel contenitore di destinazione nella posizione del segnaposto. A differenza di un’immagine di sfondo, puoi spostare l’immagine in una posizione diversa all’interno del contenitore corrente o in un contenitore diverso.

    note note
    NOTE
    Il Banner e Cursore i tipi di contenuto includono Carica immagine e Seleziona dalla raccolta opzioni per l'aggiunta di immagini.

    Immagine in una colonna {width="500" modal="regular"}

Modifica impostazioni immagine

  1. Passa il cursore del mouse sul contenitore delle immagini per visualizzare la casella degli strumenti e scegli Impostazioni ( Icona Impostazioni {width="20"} ).
    Il nome del file, le dimensioni e le dimensioni vengono visualizzati sotto l'immagine corrente.

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

  2. Per modificare la Image, eseguire una delle operazioni seguenti:

    • Carica una nuova immagine: utilizza questo metodo per caricare un nuovo file di immagine dal sistema.

      • Clic Upload Image.

      • Individua e scegli l’immagine da aggiungere alla galleria e al contenitore di destinazione.

    • Seleziona una risorsa esistente: utilizza questo metodo per selezionare una risorsa immagine esistente dall’archivio multimediale o dalla galleria.

      • Clic Select from Gallery.

      • Utilizza la struttura ad albero per passare all’immagine.

      • Fai clic sulla miniatura e fai clic su Add Selected.

        Aggiunta di un'immagine selezionata {width="600" modal="regular"}

    • Cerca e seleziona un’immagine Adobe Stock: utilizza questo metodo per trovare un’immagine da Adobe Stock.

      note note
      NOTE
      Questo metodo richiede un Integrazione con Adobe Stock configurato per l’Amministratore.
      • Clic Search Adobe Stock e cercare un'immagine.

      • Salvare l'anteprima o l'immagine con licenza nella raccolta.

        Consulta Utilizzo delle immagini di Adobe Stock per ulteriori informazioni sull’utilizzo delle risorse di Adobe Stock.

      • Seleziona la miniatura della risorsa nella galleria e fai clic su Add Selected.

  3. Per aggiungere una Mobile Image, utilizza gli stessi metodi descritti nel passaggio precedente per selezionare un’immagine da utilizzare per la visualizzazione su dispositivi mobili.

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

  4. Se necessario, specifica un Link per l'immagine.

    Il collegamento è la pagina di destinazione che viene visualizzata quando il cliente fa clic sull'immagine. Puoi utilizzare uno dei tre tipi di collegamento seguenti:

    • URL : collegamenti a un URL relativo o completo.

    • Product : identifica la pagina di destinazione in base al nome del prodotto o allo SKU. Cerca il prodotto per nome in base a un nome parziale o completo. Scegli il prodotto dall’elenco dei risultati della ricerca.

      Scelta di un prodotto da collegare {width="600" modal="regular"}

    • Category - Identifica la pagina di destinazione come una categoria o sottocategoria specifica nella struttura delle categorie. Cerca la categoria in base a un nome parziale o completo. Scegliete la categoria dalla sezione espansa della struttura visualizzata.

      Scelta di una categoria da collegare {width="600" modal="regular"}

    • Page : identifica la pagina di destinazione come pagina di contenuto specifica. Cerca la pagina in base a un nome parziale o completo. Scegliere la pagina dall'elenco dei risultati di ricerca.

      Scelta della pagina da collegare {width="600" modal="regular"}

    Per evitare che il visitatore si allontani dal tuo negozio, seleziona la Open in new tab casella di controllo. Quando la casella di controllo è deselezionata, la destinazione collegata si apre nella stessa scheda del browser, in modo da allontanare il visitatore dal tuo archivio.

  5. Per aggiungere una Image Caption, immetti il testo da visualizzare sotto l'immagine.

    Il formato della didascalia è determinato dal foglio di stile associato al tema corrente.

    La didascalia viene in genere visualizzata sotto l’immagine e fornisce informazioni sull’immagine ai visitatori e ai motori di ricerca. Se il sito è disponibile in più lingue, è possibile utilizzare la stessa immagine, ma tradurre la didascalia. In HTML, il <figcaption> è un sottoinsieme del <figure> tag. <figcaption>This is the image caption</figcaption>

  6. Aggiorna le altre impostazioni in base alle esigenze:

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

Spostare un’immagine

  1. Passa il puntatore del mouse sul contenitore di immagini per visualizzare la casella degli strumenti e scegli Sposta ( Icona Sposta {width="20"} ).

    Spostamento di un'immagine {width="500" modal="regular"}

  2. Seleziona e trascina l’immagine nella nuova posizione, appena sotto la linea guida rossa.

    Utilizzo della linea guida rossa per posizionare l'immagine {width="500" modal="regular"}

Rimuovere un'immagine

  1. Passa il puntatore del mouse sul contenitore di immagini per visualizzare la casella degli strumenti e scegli Rimuovi ( Icona Rimuovi {width="20"} ).

  2. Quando viene richiesto di confermare, fai clic su OK.

Ottimizzazione motore di ricerca

Il testo di queste impostazioni è visibile ai motori di ricerca e migliora l’indicizzazione della pagina.

  • Per Alternative Text, immetti un Alt descrizione testuale degli strumenti di accesso facilitato digitale da visualizzare.

    L’utilizzo di testo alternativo è una best practice in materia di accessibilità ed è richiesto per legge in alcune lingue. In HTML, il alt è un sottoinsieme del image tag: <image title="tooltip" alt="description" src="image.jpg">.

  • Per Title Attribute, immetti il testo da visualizzare come descrizione comando al passaggio del mouse.

    Come best practice, scegli un titolo descrittivo ricco di parole chiave per migliorare il modo in cui l’immagine viene indicizzata dai motori di ricerca. In HTML, il title è un sottoinsieme del image tag: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • Per controllare il posizionamento orizzontale delle immagini aggiunte al contenitore, scegliete un 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 dell’immagine lungo il bordo sinistro del contenitore di immagini, tenendo conto di eventuali spaziature specificate.
    Center Allinea il contenuto dell’immagine al centro del contenitore immagini, tenendo conto di eventuali spaziature specificate.
    Right Allinea il contenuto dell’immagine al bordo destro del contenitore immagini, tenendo conto di eventuali spaziature specificate.
  • Imposta il Border stile applicato a tutti e quattro i lati del contenitore di immagini:

    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.
  • Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

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

    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.
  • (Facoltativo) Specifica i nomi di CSS classes dal foglio di stile corrente per applicarlo al contenitore di immagini.

    Separare più nomi di classe con uno spazio.

  • Immetti i valori, in pixel, per il Margins and Padding per specificare i margini esterni e la spaziatura interna del contenitore di immagini.

    Immetti ogni valore corrispondente nel diagramma del contenitore di immagini.

    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.
    Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d