Come creare design di angoli mobili per il contenuto in Divi

La creazione di design di angoli mobili è un modo semplice e facile per aggiungere un po' di stile creativo ai moduli Divi che potresti non aver pensato fosse possibile senza un codice personalizzato. Buone notizie! Con Divi, puoi utilizzare divisori e blurb per modellare i quattro angoli del tuo modulo utilizzando le opzioni integrate di Divi. E può essere piuttosto divertente provare le diverse possibilità.

In questo tutorial, ti mostrerò come creare design di angoli mobili per i tuoi contenuti in Divi. Una volta posizionati gli elementi, puoi modellare quegli angoli con innumerevoli forme, icone e colori!

Iniziamo!

Sbirciata

Ecco un'anteprima dei design degli angoli mobili possibili da questo tutorial.

Scarica GRATUITAMENTE il layout degli esempi di progettazione del bordo mobile

Per mettere le mani sul layout dei design del bordo mobile, devi prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica il file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Ora passiamo al tutorial, vero?

Iniziare

L'unica cosa di cui hai bisogno per questo tutorial è Divi. Costruiremo questi esempi da zero sul front-end di Divi Builder.

Per iniziare, crea una nuova pagina e assegna un titolo alla tua pagina. Fai clic per utilizzare Divi Builder sul front-end e scegli l'opzione "Costruisci da zero".

Ora sei pronto per partire!

Creazione del modello di layout del design dell'angolo mobile

Poiché ci saranno innumerevoli possibilità di design con questo design, ha senso creare il layout di base (o modello) su cui lavorare.

Per questo modello, aggiungeremo quattro divisori a ciascun angolo di un modulo di testo. Quindi, una volta che il layout è a posto, sarai in grado di esplorare nuovi modi per personalizzare quei divisori per design unici.

Innanzitutto, crea una nuova sezione regolare con una riga di una colonna.

Prima di aggiungere il modulo di testo, aggiorna le impostazioni della riga come segue:

Larghezza personalizzata: 640 px
Imbottitura personalizzata: 0px in alto, 0px in basso

Quindi aggiungi un modulo di testo alla riga e aggiorna quanto segue:

Dimensione del testo del testo: 20px
Altezza riga di testo: 1,8 em
Margine personalizzato: -25 px in alto, -25 px in basso, 25 px a sinistra, 25 px a destra
Imbottitura personalizzata (desktop): 10% in alto, 10% in basso, 10% a sinistra, 10% a destra
Imbottitura personalizzata (telefono): 20% in alto, 20% in basso
Larghezza bordo: 4px
Colore del bordo: #eeeeee

Il margine e il riempimento personalizzati aiuteranno ad allineare i nostri moduli divisori che aggiungeremo a breve. Poiché i divisori avranno un'altezza e una larghezza di 50 px, il margine superiore e inferiore di -25 px tirerà quei divisori a metà nel modulo di testo per un bel design simmetrico (vedrai).

Aggiunta dei primi due divisori angolari mobili

Con il modulo di testo in posizione, possiamo iniziare ad aggiungere i primi due design di angoli mobili utilizzando i moduli divisori.

Crea un nuovo modulo divisore e trascinalo nella parte superiore del modulo di testo.

Quindi e aggiorna le impostazioni del divisore come segue:

Mostra divisore: NO

Colore di sfondo: #7cda24 (o qualsiasi colore tu voglia)
Altezza: 50 px
Larghezza: 50px

L'altezza e la larghezza di 50 px ci danno il quadrato perfetto che possiamo usare per il nostro bordo mobile.

Ora aggiungi un'ombra di scatola al divisore per creare l'effetto fluttuante come segue:

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra della scatola: 20 px
Colore ombra: #ffffff

Per assicurarci che il modulo divisore rimanga sopra il modulo di testo (e non si nasconda dietro di esso), dobbiamo aggiungere un frammento di CSS all'elemento principale come segue:

Elemento principale CSS:

position: relative

Quindi aggiorna l'indice Z a 1.

Quindi duplica il modulo divisore e aggiorna le impostazioni del divisore duplicato come segue:

Allineamento del modulo: a destra
Margine personalizzato: -50px in alto

Questo allinea il divisore a destra e lo solleva all'altezza esatta del modulo divisorio che si trova sopra di esso. Questo crea l'esatto posizionamento dell'angolo che stiamo cercando.

Aggiunta dei divisori d'angolo inferiori

Per aggiungere i due divisori dell'angolo inferiore, distribuisci la modalità di visualizzazione wireframe e copia i divisori sinistro e destro appena creati e incollali sotto il modulo di testo (assicurandoti che il divisore sinistro rimanga impilato sopra il divisore destro come mostrato nell'immagine sotto).

Questo è tutto! Diamo un'occhiata al design finale del nostro layout di base.

Esplorazione di nuovi design di angoli galleggianti

Con questo modello in atto, possiamo esplorare alcuni diversi design possibili. Puoi salvare l'intera sezione nella libreria Divi in ​​modo da poterla conservare come modello in futuro. Ma per ora, duplichiamo semplicemente la sezione ed esploriamo un nuovo design.

Forme di diamante con sfondi sfumati

Con un duplicato del nostro modello in atto, usa la funzione di selezione multipla per selezionare tutti e quattro i moduli divisori. Quindi fare clic sull'icona a forma di ingranaggio delle impostazioni su uno dei divisori selezionati per distribuire le impostazioni modali dell'elemento. Potrebbe essere utile utilizzare la modalità clic per questo passaggio.

Nelle impostazioni dell'elemento, aggiorna quanto segue:

Colore di sfondo sfumato a sinistra: #7cda24
Colore di sfondo sfumato a destra: #edf000
Direzione del gradiente: 45 gradi

Quindi usa le opzioni di trasformazione per ruotare il divisore in una forma a diamante.

Trasforma Ruota Asse Z: 45 gradi

Ecco il disegno definitivo.

Divisori obliqui

Puoi anche utilizzare l'opzione di inclinazione di trasformazione per inclinare i divisori per un design ancora più unico. È possibile aggiungere un disegno di inclinazione separato per ciascun divisore o utilizzare la selezione multipla per aggiornare l'inclinazione di trasformazione per tutti e quattro contemporaneamente di -37 gradi sugli assi X e Y.

Ecco come sarebbe.

Disegni di sfondo scuro

Puoi persino sperimentare con l'aggiunta di un colore di sfondo scuro al modulo di testo per un design unico di angoli fluttuanti. Ecco un esempio del modulo di testo con un colore di sfondo di #002130 che utilizza la rotazione o l'inclinazione senza trasformazione.

Angoli arrotondati

Per mettere degli angoli arrotondati sul disegno, puoi semplicemente aggiungere angoli arrotondati alla riga come segue:

Angoli arrotondati: 20px

Angoli fluttuanti del cerchio

Per trasformare quegli angoli quadrati in cerchi, puoi aggiungere il seguente frammento di CSS personalizzato all'elemento principale di ciascun divisore:

border-radius: 50%;

Poiché i divisori sono 50px per 50px, questo creerà un design circolare perfetto.

Come puoi vedere, ci sono un sacco di modi diversi per modificare questi elementi per innumerevoli nuovi design di angoli.

Ora, esploriamo l'uso delle icone blurb per gli angoli mobili invece dei moduli divisori.

Creare angoli fluttuanti con le icone Blurb

L'aggiunta di icone Blurb a ciascun angolo del modulo di testo può darti design ancora più unici. Puoi utilizzare lo stesso modello di layout che abbiamo creato all'inizio del tutorial. L'unica differenza sarà l'utilizzo di moduli blurb invece dei moduli divisori per i quattro angoli.

Vai avanti e ottieni un duplicato del modello di layout della sezione distribuito.

Quindi elimina i moduli divisori sopra e sotto il modulo di testo.

Aggiunta dei primi due angoli dell'icona blurb

Dal momento che vorremo utilizzare il modulo blurb solo per visualizzare una singola icona, dobbiamo assicurarci di ottenere le dimensioni e la spaziatura corrette.

Aggiungi un modulo blurb sopra il modulo di testo ed elimina il titolo e il corpo del testo. Quindi fare clic per utilizzare un'icona al posto di un'immagine e selezionare l'icona della cerchia facebook.

Quindi aggiorna le seguenti impostazioni del blurb (queste impostazioni sono molto simili alle impostazioni che abbiamo aggiunto al modulo divisore nel primo esempio):

Colore di sfondo: #ffffff
Dimensione carattere icona: 50 px
Larghezza: 50px
Margine personalizzato: 0px in basso
Angoli Arrotondati: 50%
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra della scatola: 20 px
Colore ombra: #ffffff

Elemento principale CSS:

position: relative;

Blurb immagine CSS:

margin-bottom: 0px

Indice Z: 1

Quindi, duplica il modulo blurb per crearne un altro appena sotto il blurb corrente e aggiorna quanto segue:

Allineamento del modulo: a destra
Margine personalizzato: -50px in alto

Quindi copia i primi due moduli blurb e incollali sotto il modulo di testo (assicurandoti che il blurb sinistro rimanga impilato sopra il blurb destro).

Quindi puoi aggiornare le icone per ogni blurb come preferisci.

Ecco il disegno definitivo.

Esplora altri design con Blurb Icon Floating Corners

Con questa configurazione puoi esplorare molti design unici. Puoi modificare le icone, utilizzare diverse combinazioni di colori e persino ridimensionarle o ruotarle con le opzioni di trasformazione.

Ecco un esempio del design che utilizza un colore di sfondo scuro per il modulo di testo e diversi colori dell'icona.

Funziona in layout di più colonne

Finché tieni insieme gli elementi, puoi aggiungere questi layout di angoli mobili in più colonne.

Avvolgendo

La creazione di design di angoli mobili per i tuoi contenuti in Divi mostra davvero la potenza di Divi builder. Con tutte le opzioni integrate disponibili, puoi creare innumerevoli varianti di design da un modello di layout di base. Spero che questo ti ispirerà a divertirti ad esplorare nuovi design.

Non vedo l'ora di sentirti nei commenti.

Saluti!