widget: Forma

Categorie di widget: Media

Il widget Forma è un pratico strumento di progettazione che può essere usato per mettere in evidenza messaggi importanti, per esempio per creare pulsanti e banner, bandire premi o evidenziare i prezzi di vendita. È possibile aggiungere un'immagine, sfondo e testo a colori, regolare le dimensioni e perfino aggiungere ombre. Il widget può essere collocato in qualsiasi posizione, per una flessibilità completa.

Editor di contenuti

  1. Seleziona una forma.

  2. Per aggiungere un collegamento alla forma, fare clic su Aggiungi collegamento (per ulteriori informazioni sui collegamenti, vedere Selezione collegamenti.

  3. Digitare un titolo e una descrizione per la forma. Per nascondere il titolo e la descrizione, fare clic sull'icona a forma di occhio (24517315481495-eye_icon.png).

    Nota

    Il campo di testo lungo offre varie opzioni di formattazione del testo, come il corsivo, il grassetto o la sottolineatura del testo.

  4. Inserisci il testo alternativo e una descrizione per la forma.

Editor di progettazione

  1. Per passare da un colore a uno sfondo immagine, fare clic su Layout .

    • Per modificare l'immagine predefinita, vai alla scheda Stile e seleziona la scheda Immagine .

      Nota

      Se l'opzione Mantieni proporzioni è disattivata, le proporzioni dell'immagine verranno regolate in base alle widget.

  2. Regolate la larghezza, l'altezza e l'effetto hover (ad desktop) nella scheda Stile .

  3. Per posizionare il widget sopra o sopra un'immagine o un altro widget, fai clic sulla scheda Spaziatura e configura i margini in modo che siano un numero negativo (ad esempio, -50px).

  4. Per rendere l'icona un widget mobile, abilita l'interruttore Mobile e seleziona una posizione per il widget. Per visualizzare il widget mobile solo sulla pagina corrente, abilitare l'interruttore Mostra solo su questa pagina .

Verifica che le impostazioni di design definite siano adatte al dispositivo. Impostazioni come spaziatura (dell'intero widget e dei singoli elementi), ampiezza e altre caratteristiche sono definite in base al dispositivo.

Esempi

Crea un layout interessante con una forma amorfa

Per creare un layout interessante con una forma amorfa:

  1. Crea una riga con due colonne.

  2. Scegli una forma amorfa e aggiungila alla colonna di destra.

  3. Rendi la forma grande come la colonna.

  4. Nell'editor di progettazione, seleziona il layout con l'immagine di sfondo e sostituisci l'immagine con quella desiderata.

22384747496983-shapewidget2_en-us.jpg
Utilizzare una forma come pulsante

Per usare una forma come pulsante aggiungendo un link e l'effetto hover:

  1. Seleziona la forma del cerchio e aggiungi un titolo e una descrizione.

  2. Seleziona i colori della forma e dei testi.

  3. Per posizionare la forma sull'angolo di un'immagine, usa un margine negativo sul lato sinistro della forma (spaziatura > margine > -50 px sui margini sinistro e superiore).

22384799701783-shapewidget3_en-us.jpg
Evidenzia un piano o un servizio specifico

Per usare le forme per evidenziare un piano o un servizio specifico:

  1. Scegli la forma della bandiera e aggiungi un titolo e una breve descrizione.

  2. Disattiva Mantieni proporzioni in modo da poter regolare solo la larghezza.

  3. Seleziona i colori della forma e dei testi.

  4. Per posizionare la forma in modo che si sovrapponga alla sommità di una colonna, imposta il margine superiore in negativo (spaziatura > margine > -30 px margine superiore).

22384747643031-shapewidget4_en-us.jpg
Creare un pulsante di scorrimento

Per usare una forma per creare un pulsante di scorrimento:

  1. Scegli la forma del rombo e aggiungi un titolo.

  2. Disattiva Mantieni proporzioni in modo da poter regolare solo la larghezza.

  3. Seleziona i colori della forma e dei testi.

  4. Per posizionare la forma sopra un'immagine, usa un margine superiore negativo (spaziatura > margine > -50 px di margine superiore).

22384816667031-shapewidget5_en-us.jpg