Personalizzazione branding Widget

In questa sezione del widget imposti lo stile del font, dei colori e degli elementi che lo compongono al suo interno.

Tutte le modifiche che fai si rifletteranno istantaneamente sul widget d'esempio che vedi sulla sinistra.

Ecco di seguito i campi che sono modificabili.

Stile del Widget

Tema del widget: in base a quelli che sono i colori del tuo brand, questa impostazione applicherà delle minime variazioni di contrasto in elementi secondari come linee, icone e frecce. Puoi scegliere tra light ( meno marcate) e dark ( più marcate).

Font Family: scegli il font per i testi del widget.

Sfondo del widget: imposta la tipologia di sfondo ( colore o immagine)

Stile del bordo: stabilisci in base allo stile del tuo brand i bordi del Widget. Puoi scegliere tra arrotondato e squadrato.

Esempio di widget arrotondato

Esempio di widget squadrato

Ombra del bordo: abilita o disabilita l'ombreggiatura del widget. Se abilitato puoi scegliere il colore dell'ombra.

Ecco un esempio:

Stile delle pagine interne: puoi scegliere il contorno delle pagine interne se lasciare boxato o pieno.

Le pagine interne sono quelle pagine che espongono le diverse tipologie di campagne e delle ricompense, che spiegano i dettagli delle campagne, delle ricompense, ma anche i moduli di iscrizione referral, le FAQ e il form della campagna compleanno.

Stile pieno

I testi si appoggiano sullo sfondo del widget.

Stile Boxato

I testi si appoggiano dentro un box.

Qualora si sia scelto come sfondo del widget un'immagine consigliamo di impostare lo stile "Boxato".

Se scegli lo stile boxato puoi impostare i seguenti dettagli:

Colore di sfondo: imposta il colore di sfondo del box

Bordo: puoi decidere se il box ha gli angoli arrotondati, smussati o squadrati e il colore dei bordi.

Ombra: se desideri puoi abilitare l'ombra ed impostare il colore dell'ombreggiatura delle pagine interne.

Colori

Colore principale: Per i campi di input, gli alert e gli pseudo element.

Colori del testo: qui puoi impostare i colori dei testi del widget.

Principale ( titoli e sottotitoli)
Secondario ( i paragrafi)
Colore dei link
Colore dei link in hover

Pulsanti

Tipologia di pulsante: puoi decidere tra due tipi di pulsanti: Solid e Outline

Esempio Solid: Questo tipo di bottone ha uno sfondo pieno che riempie l'intera area del bottone.

Esempio Outline: Al contrario, un bottone outline non ha uno sfondo pieno. Invece, ha solo un bordo visibile, mentre l'area all'interno del bordo è trasparente o ha uno sfondo neutro.

Stile dei bordi: imposta uno stile del bordo. Scegli tra smussato o squadrato.

Colori: qui puoi impostare i colori dei pulsanti del widget.

Colore principale
Colore in hover
Testo
Testo in hover

Stile delle card

Stile del bordo: imposta uno stile del bordo. Scegli tra smussato o squadrato.

Colore di sfondo

Ombra: Abilita ed imposta l'ombreggiatura delle card

Input ed elementi del form

Prima di iniziare a fare le modifiche clicca sul pulsante "Cambia vista del widget" per vederle in tempo reale.

Stile degli input: Imposta uno stile per tutti i campi di input usati nei form. Puoi scegliere tra arrotondato, smussato e quadrato.

Colore: Scegli il colore dello sfondo, dei bordi e dei testi di placeholder dei campi di input dei form.

Una volta impostati gli input ed elementi del form, la personalizzazione dello stile del widget è terminata.

Il prossimo step è la personalizzazione dei testi all'interno del widget. Scopri come fare in questo articolo.