Widget Forma

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.

Per aggiungere il widget:

  1. Nel pannello a sinistra, fai clic su Widget.
  2. Tieni premuto e trascina il widget Forma sul tuo sito.

Per maggiori informazioni sull'aggiunta di widget al sito, vedi Aggiungere widget.

Editor di contenuti

Per accedere all'editor dei contenuti:

  1. Fai clic con il tasto destro del mouse sul widget e poi su Modifica contenuto.
  2. Seleziona una forma.
  3. Per aggiungere un link alla forma, fai clic su Aggiungi link.
  4. Inserisci un titolo e una descrizione per la forma. Per nasconderli, fai clic sull'icona a forma di occhio ().
  5. Inserisci il testo alternativo e una descrizione per la forma.

Editor di progettazione

Per accedere all'editor del design:

  1. Fai clic con il tasto destro del mouse sul widget, quindi fai clic su Modifica design.
  2. Fai clic su Layout per selezionare un layout diverso per la forma.
  3. Per posizionare il widget al di sopra o in sovrapposizione a un'immagine o a un altro widget, fai clic sulla scheda Spaziatura e configura i margini in modo da ottenere un valore negativo (es. -50 px).

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. Per ulteriori informazioni, vedi Modifiche in base al dispositivo.

Per maggiori informazioni su opzioni di progettazione che non sono specifiche per questo widget (es. layout, stile o spaziature), vedi Design dei widget.

Esempi

Creare una forma nell'intestazione

Per creare una forma nell'intestazione:

  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.

Usare 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).

Evidenziare un piano o 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).

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