Widget «Forma»

Categorie di widget: Media

Il widget forma è uno strumento di design per mettere in risalto i messaggi importanti: crea pulsanti e banner, segnala premi o evidenzia prezzi in offerta. Puoi aggiungere un'immagine, uno sfondo colorato e del testo, regolare le dimensioni e aggiungere ombre. E dato che lo posizioni dove vuoi, hai totale libertà.

Per sapere come aggiungere i widget, vedi Add Widgets.

Editor dei contenuti

Fai clic sull'elemento per aprire il menu fluttuante, poi fai clic sull'opzione dell'editor dei contenuti.

1. Scegli una forma.

2. Per aggiungere un link alla forma, fai clic su Aggiungi link (per saperne di più sui link, vedi Link Picker).

3. Scrivi un titolo e una descrizione per la forma. Per nasconderli, fai clic sull'icona a forma di occhio.

   Nota: Il campo di testo lungo offre varie opzioni di formattazione, come mettere il testo in corsivo, in grassetto o sottolinearlo.

4. Scrivi l'Alt text e la Descrizione della forma.

Editor di design

Fai clic sull'elemento per aprire il menu fluttuante, poi fai clic sull'opzione per modificare il design.

1. Per passare da uno sfondo colorato a uno sfondo con immagine, fai clic su Layout.

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

   Nota: Se Mantieni le proporzioni è disattivato, le proporzioni dell'immagine vengono adattate al widget.

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

3. Per mettere il widget sopra un'immagine o un altro widget, o farli sovrapporre, fai clic sulla scheda Spacing e imposta i margini con un numero negativo (per esempio, -50px).

4. Per rendere l'icona un widget fluttuante, attiva l'opzione Floating e scegli una posizione per il widget. Per mostrare il widget fluttuante solo nella pagina attuale, attiva l'opzione Mostra solo su questa pagina.

Assicurati che le impostazioni di design siano corrette per ogni dispositivo. Impostazioni come la spaziatura (dell'intero widget e dei singoli elementi), la larghezza e altre si definiscono per dispositivo.

Per informazioni sulle opzioni di design non specifiche di questo widget (per esempio la disposizione, lo stile o la spaziatura), vedi Widget Design.

Esempi

Creare una composizione originale con una forma amorfa

Per creare una composizione originale 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 quanto la colonna.
4. Nell'editor di design, scegli la disposizione con l'immagine di sfondo e sostituisci l'immagine con quella che vuoi.

Usare una forma come pulsante

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

1. Scegli la forma a cerchio e aggiungi un titolo e una descrizione.
2. Scegli i colori per la forma e per i testi.
3. Per mettere la forma nell'angolo di un'immagine, usa un margine negativo sul lato sinistro della forma (spaziatura>margine > -50px di margine sinistro e superiore).

Mettere in risalto un piano o un servizio specifico

Per usare le forme per mettere in risalto un piano o un servizio specifico:

1. Scegli la forma a bandiera e aggiungi un titolo e una breve descrizione.
2. Disattiva Mantieni le proporzioni per poter regolare solo la larghezza.
3. Scegli i colori per la forma e per i testi.
4. Per far sovrapporre la forma alla parte superiore di una colonna, usa un margine superiore negativo (spaziatura>margine > -30px di margine superiore).

Creare un pulsante di scorrimento

Per creare un pulsante di scorrimento con una forma:

1. Scegli la forma a rombo e aggiungi un titolo.
2. Disattiva Mantieni le proporzioni per poter regolare solo la larghezza.
3. Scegli i colori per la forma e per i testi.
4. Per mettere la forma sopra un'immagine, usa un margine superiore negativo (spaziatura>margine > -50px di margine superiore).