Progettista di temi
Introduzione
Il Theme Designer è una funzionalità che ti consente di progettare il tuo modulo in pochi minuti, eliminando gli attriti legati alla creazione di un nuovo design, come scrivere e riscrivere CSS personalizzati.
Per personalizzare l'aspetto del tuo modulo, vai al Generatore di moduli , sul lato destro vedrai il pannello "Design". Da lì, imposta le diverse proprietà che desideri per la progettazione del modulo, l'area di anteprima del modulo verrà aggiornata in tempo reale.
Sezioni di progettazione
Il pannello "Design" è composto dalle seguenti sezioni. Ogni sezione si concentra su una classe di modulo che può essere applicata a più elementi.
- Globale: è il contenitore del modulo.
- Forma: la forma stessa. Per impostazione predefinita non ha un riempimento, per mantenere la compatibilità quando un widget del modulo viene visualizzato in un sito Web esterno.
- Gruppo modulo: gruppo di etichetta, input, testo di aiuto e messaggio di convalida.
- Controllo modulo: campo di input.
- Pulsante: pulsante di invio (pulsante principale di Bootstrap).
- Etichetta: campo etichetta (etichetta di controllo bootstrap)
- Segnaposto
- Intestazione
- Paragrafo
- Testo di aiuto
- Collegamento
- Passaggi del modulo: viene visualizzato quando un campo Interruzione di pagina è stato aggiunto al modulo.
- Avvisi modulo: messaggio di riuscita o errore visualizzato quando un modulo è stato inviato.
- Convalida campo: per personalizzare lo stato di errore dei campi.
- Altri componenti: sono disponibili anche opzioni per caselle di controllo personalizzate, pulsanti di opzione personalizzati, reCAPTCHA, pad firma e barra di avanzamento.
Copia, incolla e ripristina il design ¶
Se hai già creato un modulo, sai che il processo include intrinsecamente una notevole quantità di lavoro ripetitivo. Con le funzionalità Copia design e Incolla design, puoi copiare e incollare stili CSS da un modulo all'altro con un paio di clic. Inoltre, puoi ripristinare il design sugli stili predefiniti con un clic.
Principali strumenti e funzionalità
Il Theme Designer è dotato di strumenti utili per rendere più semplici i progetti complessi.
- Selettore caratteri Google
Seleziona i caratteri Google con anteprima dal vivo da un elenco a discesa.
- Immagini d'archivio
Migliaia di immagini stock sono ora nel Generatore di moduli. Con la nostra integrazione Unsplash puoi cercare e aggiungere immagini stock al tuo modulo con un paio di clic.
Non è necessario avere la licenza per le immagini Unsplash. Sotto la licenza di Unsplash, puoi copiare, modificare, scaricare e distribuire qualsiasi delle loro immagini gratuitamente, anche per scopi commerciali. Non è necessario chiedere il permesso o fornire l'attribuzione all'artista, ma consigliamo comunque di accreditarlo.
- Selettore gradiente Web ¶
Puoi trovare il selettore del gradiente per creare il tuo gradiente (lineare, radiale, scegliere i colori, le interruzioni e altro) o scegliere tra oltre 100 bellissimi gradienti web pronti all'uso.
- Modelli sottili
Scegli tra centinaia di modelli sottili selezionati da Toptal, bellissime trame per le tue forme.
Casi di utilizzo comune
Il Theme Designer è uno strumento flessibile che ti consente di personalizzare diverse parti del modulo per generare un foglio di stile. Alcuni casi d'uso comuni sono:
- Nascondi etichette di campo
Se desideri nascondere l'etichetta di un campo, fai semplicemente clic sul campo e inserisci la seguente classe CSS etichetta:sr-only
Ma, se desideri rimuovere tutte le etichette del modulo contemporaneamente, segui semplicemente i passaggi successivi:
- Nel Design -> Apri la sezione Etichetta
- Scorri verso il basso fino alla sottosezione Extra
- Su Display scegli Nessuno .
Questo è tutto!
Nota: non lasciare mai un campo senza etichetta, poiché ciò ti aiuterà a identificare il tuo campo all'interno dell'intero sistema.
- Allinea il tuo modulo al centro
Se vuoi mostrare il tuo modulo su una pagina intera (Condividi modulo -> Link senza riquadro) questo suggerimento ti sarà molto utile.
Esistono diversi modi per centrare un modulo, di seguito descriveremo l'opzione più comune:
- Nella globale , seleziona Allinea testo: al centro
- E nel Modulo Sezione, Seleziona:
- Allineamento testo: Sinistra     - Margine: Automatico     - Larghezza: 80%
Questo è tutto. Puoi espandere o ridurre la larghezza del modulo in base alle tue esigenze.
- Progetta pulsanti a larghezza intera
Se vuoi mostrare un pulsante specifico a larghezza intera, fai semplicemente clic sul campo e inserisci la seguente classe CSS:btn-block
Ma, se desideri progettare tutti i pulsanti del modulo in una volta, segui semplicemente i passaggi successivi:
- Nel Design -> Apri la sezione Pulsante
- Scorri verso il basso fino alla sottosezione Dimensioni
- In Larghezza scegli 100% .
Questo è tutto!
