Un layout riutilizzabile per creare design di cornici unici con Divi
Pubblicato: 2018-09-27Costruire design di cornici unici per le tue righe con Divi può essere un modo utile (e divertente) per mettere in scena in modo creativo il contenuto della tua pagina. Combinando i divisori di sezioni di Divi con una struttura a righe compatta, puoi esplorare innumerevoli possibilità di design per inquadrare i tuoi contenuti. Potresti aver già visto questa tecnica descritta nei tutorial precedenti o in alcuni dei nostri layout predefiniti. Ma oggi ho pensato di mostrarti un modo semplice per esplorare da solo questa tecnica di progettazione. In questo tutorial, ti mostrerò come creare rapidamente un layout di sezione riutilizzabile che può essere salvato nella tua libreria. Quindi puoi utilizzare quel layout per esplorare nuovi design di cornici e combinazioni di colori. Il layout funziona inquadrando la tua riga con un design unico, quindi tutte le strutture e i moduli delle colonne possono essere utilizzati all'interno della riga.
Iniziamo.
Creazione del layout del design del telaio riutilizzabile
Per iniziare, creiamo una nuova sezione con un layout a una colonna. Non è necessario aggiungere alcun modulo a questo punto. Invece, progetteremo prima la nostra riga e sezione, in modo da poter riempire la nostra riga con qualsiasi contenuto che desideriamo in seguito.
Disegna la riga
Aggiorna le impostazioni della riga come segue:
Colore di sfondo: #333333
Allineamento righe: Centro
Larghezza personalizzata: 775 px
Larghezza grondaia: 2
Imbottitura personalizzata: 130 px in alto, 130 px in basso, 50 px a sinistra, 50 px a destra
Margine personalizzato: 0 px in alto, 0 px in basso
Progetta la sezione
Aggiorna le impostazioni della sezione come segue:
Colore di sfondo: #ffffff
Stile divisore superiore: vedi screenshot
Colore divisorio superiore: #ffffff
Stile divisore inferiore: vedi screenshot
Colore divisore inferiore: #ffffff
Successivamente, imposterai il padding superiore e inferiore su 0px e creerai uno spazio superiore e inferiore utilizzando un bordo come segue:
Imbottitura personalizzata: 0px in alto, 0px in basso
Larghezza bordo superiore: 5vw
Colore bordo superiore: #ffffff
Larghezza bordo inferiore: 5vw
Colore bordo inferiore: #ffffff
La creazione della spaziatura per la sezione utilizzando un bordo superiore e inferiore massimizzerà lo spazio disponibile per il divisore di sezione che si sovrapporrà alla riga. In questo modo puoi scegliere qualsiasi altezza del divisore per il tuo design.
Salva il layout nella tua libreria
Questo è tutto per la struttura del layout di base del tuo design di righe incorniciate. A questo punto vogliamo salvare questa sezione nella libreria Divi per utilizzare il layout della sezione per progetti futuri.
Fare clic sull'icona Salva nella libreria nel menu della sezione.
Quindi inserisci un nome per il layout (qualcosa come "Layout frame di riga") e fai clic sul pulsante Salva nella libreria.
Completamento del design del telaio n. 1
Ora che abbiamo salvato il layout della nostra sezione per tentativi futuri, aggiungiamo del contenuto alla nostra riga per completare il primo esempio di progettazione.
Modifica della struttura della colonna
Per questo design, penso che l'aggiunta di una galleria di immagini a sei colonne sarà piacevole. La piccola struttura a colonne ci consentirà di creare un piccolo gruppo di immagini che sono ben incorniciate all'interno della riga stretta.
Per fare ciò, cambia prima la struttura delle righe in un layout a sei colonne.
Aggiunta di contenuto alla riga
Quindi aggiungi tre moduli immagine (con immagini) a ciascuna colonna. Sto usando immagini con più di un orientamento verticale (piuttosto che orizzontale) con diverse dimensioni/dimensioni.
Ecco il disegno definitivo.
Suggerimento di progettazione bonus
Prima di continuare a esplorare ulteriori possibilità di progettazione delle cornici, volevo sottolineare un semplice trucco per estendere la cornice su un lato della pagina. Per fare ciò, vai alle impostazioni della sezione e aggiungi un gradiente di sfondo come segue:
Colore sfondo sfumato sinistro: #333333
Colore di sfondo sfumato a destra: #ffffff
Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 0%
Dai un'occhiata a questo disegno.
Personalizzazione del layout per diversi design e contenuto della cornice
Le eccitanti possibilità di questo semplice layout sono numerose per non dire altro. Personalizzando la combinazione di colori, lo stile del divisore, il layout delle colonne e il contenuto del modulo, puoi creare tutti i tipi di design di layout diversi. Inoltre, puoi utilizzare quelle fantastiche funzionalità Divi come "Trova e sostituisci" per apportare modifiche diffuse alla combinazione di colori in pochi clic.
Ecco il processo di base per aggiornare il layout:
- Carica il layout della sezione salvato nella pagina
- Aggiorna la combinazione di colori della sezione utilizzando "Trova e sostituisci".
- Cambia lo stile del divisore
- Personalizza la riga con un nuovo sfondo e una nuova struttura a colonne.
- Aggiungi moduli alle tue colonne
Con questo processo, esplorare nuovi design dovrebbe essere piuttosto divertente! Continuiamo.
Design del telaio #2
Per questo prossimo progetto, utilizzeremo il layout di sezione salvato che abbiamo creato in precedenza. Per fare ciò, fare clic per aggiungere una nuova sezione nel generatore visivo. Quindi selezionare la scheda Aggiungi da libreria e fare clic sul layout della sezione dall'elenco.
Ora siamo pronti per personalizzare la sezione per un nuovo design.
Per cambiare la combinazione di colori utilizzata per questo layout, possiamo evocare alcuni poteri di progettazione Divi utilizzando la funzione Trova e sostituisci. Vai alle impostazioni della sezione della sezione duplicata e fai clic con il pulsante destro del mouse sul colore di sfondo e seleziona "Trova e sostituisci".
Nella modale Trova e sostituisci, aggiorna quanto segue:
All'interno: questa sezione
Sostituisci con: #443850
Seleziona Sostituisci tutto
Questo sostituirà il colore bianco utilizzato per lo sfondo, il bordo e i divisori della sezione con un nuovo colore.
Ora aggiorna le impostazioni della sezione con un nuovo stile di divisore:
Quindi aggiorna le impostazioni della riga con un colore di sfondo bianco e un'ombra di riquadro per completare il nuovo design della cornice per la riga.
Per il contenuto, proviamo un layout a cinque colonne con alcuni blurb. Vai avanti e aggiorna il layout delle colonne per la tua riga in un layout a cinque colonne.
Quindi aggiungi un blurb alla prima colonna. Elimina il testo del contenuto predefinito e lascia solo il testo del titolo. Quindi sostituisci l'immagine blurb con un'icona a forma di stella. Aggiorna le impostazioni di progettazione come segue:
Colore icona: #7d8491
Dimensione carattere icona: 80px
Orientamento del testo: al centro
Duplica il modulo blurb e aggiorna le impostazioni come segue:
Colore icona: #8cd845
Dimensione carattere icona: 50 px
Ora duplica o copia e incolla questi due moduli in uno schema nelle cinque colonne con tre moduli in ciascuna colonna.
Ecco il disegno definitivo.
Design del telaio n. 3
Per il terzo design del telaio, dobbiamo prima caricare il nostro layout di sezione salvato come abbiamo fatto in precedenza per il secondo design.
Successivamente, possiamo usare trova e sostituisci sul colore di sfondo della sezione (come abbiamo fatto nel design precedente) per sostituire il colore bianco utilizzato per lo sfondo, il divisore e il bordo della sezione con un bel colore blu. Per fare ciò, vai alle impostazioni della sezione, fai clic con il pulsante destro del mouse sul colore di sfondo e seleziona trova e sostituisci. Quindi aggiorna quanto segue:
All'interno: questa sezione
Sostituisci con: #1e3888
Seleziona Sostituisci tutto
Quindi aggiorna il divisore di sezione con un nuovo stile di divisore superiore e inferiore (le nuvole):
Quindi, vai alle impostazioni della riga. Assegna alla riga uno sfondo sfumato come segue:
Colore sfondo sfumato sinistro: predefinito (#2b87da)
Colore sfondo sfumato destro: #1E3888 (stesso colore dello sfondo della sezione)
Tipo di gradiente: radiale (per dare alla riga un aspetto arrotondato simile a una nuvola)
Posizione finale: 83% (per nascondere un po' i bordi della riga)
Ora, tutto ciò che dobbiamo fare è aggiungere del contenuto alla nostra riga incorniciata. Aggiungiamo un modulo di invito all'azione alla riga e aggiorniamo le impostazioni come segue:
Aggiungi "#" alla casella di input del collegamento per mostrare il pulsante
Usa il colore di sfondo: NO
Colore del testo del titolo: #ffc338
Colore del testo del pulsante: #ffc338
Ecco il disegno definitivo.
E il cellulare?
Nel caso te lo stessi chiedendo. Ecco come appariranno i design sui dispositivi mobili.
Pensieri finali
I design del telaio creati in questo tutorial hanno lo scopo di evidenziare le possibilità di design piuttosto che mostrare pezzi di design completamente lucidi. Per questo motivo, mi sono concentrato sui design delle cornici e ho utilizzato esempi di contenuto di base. Si spera che almeno ti ispirino a esplorare nuovi design giocando con diversi divisori di sezioni, combinazioni di colori e contenuti.
non vedo l'ora di sentire da voi nei commenti.
Saluti!