Una guida utile per la progettazione di elementi circolari in Divi
Pubblicato: 2019-05-01Ogni tanto il design di un sito web richiede alcuni elementi circolari. È un bel modo per uscire dalla monotonia dei design standard delle scatole su una pagina web. La creazione di elementi circolari può sembrare semplice (e in effetti lo è!), ma se non hai familiarità con alcune regole di base, potresti incontrare alcuni ostacoli non necessari che possono essere piuttosto frustranti.
Ad esempio, a volte è difficile far allineare e adattare il contenuto all'interno di un elemento a forma di cerchio con la spaziatura corretta. Oppure potresti avere difficoltà a rendere la cerchia reattiva per i dispositivi mobili. Per questo motivo alcuni hanno fatto ricorso all'utilizzo di un'immagine di sfondo circolare per i contenuti. Ma se non vuoi usare uno sfondo di immagine personalizzato, la tua prossima scommessa migliore è usare i CSS. La buona notizia è che Divi elimina la necessità di creare il proprio CSS personalizzato per creare elementi circolari, rendendo il processo molto più semplice. Quindi, se hai mai voluto dare a un elemento una forma circolare in Divi, questo è il post che fa per te.
In questo tutorial, ti guiderò attraverso le basi su come creare elementi circolari in Divi (incluse sezioni, righe e moduli). Quindi ti mostrerò quanto è facile implementare queste tecniche su un layout predefinito.
Controlla!
Sbirciata
Scarica GRATUITAMENTE il layout degli elementi circolari di esempio
Per mettere le mani sugli elementi circolari di esempio progettati in questo tutorial, dovrai 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 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.
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.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, crea una nuova pagina in Divi. Quindi dai un titolo alla pagina e distribuisci il generatore Divi sul front-end. Seleziona l'opzione "costruisci da zero".
Aggiungeremo anche un layout predefinito alla nostra pagina un po' più tardi, ma per ora possiamo iniziare a costruire da zero.
Ora sei pronto per partire!
I tre passaggi fondamentali per creare un elemento circolare
Ci sono davvero tre semplici passaggi per creare un elemento circolare. Per illustrare questi passaggi, applicherò questi passaggi a un modulo di invito all'azione utilizzando Divi Builder.
Passaggio 1: elemento di dimensione con valori di altezza e larghezza uguali
Il primo passaggio consiste nell'impostare l'altezza e la larghezza sullo stesso valore uguale. Fondamentalmente vogliamo rendere l'elemento un quadrato perfetto prima di renderlo un cerchio perfetto. In questo esempio, diamo al modulo di invito all'azione un'altezza e una larghezza di 10vw.
Passaggio 2: aggiungi il raggio del bordo del 50% per tutti e quattro gli angoli
Il secondo passaggio consiste nell'impostare il raggio del bordo dell'elemento (o modulo) al 50% su tutti e quattro gli angoli. In Divi, puoi modificare il raggio del bordo di un elemento sotto l'opzione denominata "Angoli arrotondati".
Passaggio 3: allinea il contenuto all'interno dell'elemento circolare
Il terzo passaggio consiste nell'allineare il contenuto dell'elemento circolare. Possiamo farlo regolando l'imbottitura dell'elemento. (Inoltre, tratterò un modo per utilizzare la flessibilità per centrare verticalmente il contenuto più avanti in questo post)
In questo esempio, possiamo aggiungere il seguente riempimento per avvicinare il nostro contenuto al centro dell'elemento circolare:
Imbottitura personalizzata: 18vw superiore, 3vw sinistra, 3vw destra
Naturalmente, potrebbero essere necessarie ancora modifiche per assicurarsi che il testo/contenuto si adatti all'elemento circolare sui dispositivi mobili, ma questo copre la configurazione di base.
Potresti notare che ho usato l'unità di lunghezza vw per ridimensionare e distanziare il mio elemento circolare. Questo è utile per creare un design reattivo più coerente. Spiegherò.
Utilizzo delle unità di lunghezza relativa per rendere reattivi gli elementi circolari
Utilizzo dell'unità di lunghezza VW per altezza e larghezza
Di tutte le unità di lunghezza relativa, l'unità di lunghezza vw è una delle mie preferite per il design reattivo. Poiché l'unità di lunghezza vw è relativa alla larghezza della finestra del browser (non all'elemento padre), è possibile ottenere un design coerente che si adatta facilmente alle dimensioni della finestra del browser.
Diamo un'occhiata a come appare il nostro modulo di invito all'azione circolare di esempio mentre riduco la larghezza del browser.
Utilizzo dell'unità di lunghezza VW per il contenuto di elementi circolari
L'uso dell'unità di lunghezza vw per la dimensione e il contenuto degli elementi circolari è una buona combinazione per il design reattivo. Fondamentalmente, ciò consente al contenuto (come testo o immagini) di adattarsi perfettamente alle dimensioni dell'elemento del cerchio per un design coerente su tutti i browser. Tuttavia, devi stare attento con l'uso dell'unità di lunghezza vw per il corpo del testo perché il testo potrebbe diventare troppo piccolo sui dispositivi mobili. Mi piace usare l'unità di lunghezza vw per i titoli e quindi regolare la dimensione del corpo del testo con i pixel secondo necessità.
Inoltre, se prevedi di mantenere il design dell'elemento circolare sul display del telefono, dovrai ridurre al minimo il contenuto e regolare le dimensioni dell'elemento circolare per ottenere il massimo spazio.
Utilizzando il nostro esempio attuale, puoi assegnare al testo del titolo un valore di lunghezza vw e quindi ridimensionare il modulo sul cellulare come segue:
Dimensione del testo del titolo: 4vw
Larghezza (telefono): 70vw
Altezza (telefono: 70vw
Come puoi vedere, tutto il contenuto ora si trova bene anche all'interno dell'elemento circolare sul display del telefono.
E i pixel?
Se vuoi usare unità di lunghezza assoluta (come i pixel) per ridimensionare il tuo cerchio, va benissimo. Dovrai solo assicurarti e apportare le modifiche alle dimensioni necessarie in ogni punto di interruzione per il display del tablet e del telefono per assicurarti che l'elemento circolare si adatti alla finestra del browser. In alcuni casi, l'utilizzo dei pixel può essere più semplice per ottenere le dimensioni giuste (o più esatte) sui display di tablet e telefoni.
Ad esempio, prendiamo lo stesso modulo di invito all'azione e usiamo i pixel (invece di vw) per ridimensionare e distanziare il nostro modulo.
Puoi aggiornare l'altezza, la larghezza e l'imbottitura come segue:
Larghezza: 500 px
Altezza: 500 px
Imbottitura personalizzata: 200 px in alto, 20 px a sinistra, 20 px a destra
Questo design sarà simile sul desktop, ma il problema si presenta ogni volta che si visualizza l'elemento circolare sul display del telefono. Poiché l'elemento circolare viene ridimensionato utilizzando i pixel (un'unità di lunghezza assoluta), l'elemento circolare si estenderà all'esterno del contenitore e del browser sul display del telefono.
Ecco perché è importante regolare la larghezza e i valori dei pixel di riempimento sui display mobili. Ad esempio, potresti dover modificare la larghezza e l'altezza in 300 px.
Perché l'unità di lunghezza % non funziona molto bene per il dimensionamento di elementi circolari?
Se desideri una soluzione più reattiva per gli elementi circolari, potresti pensare che l'uso delle percentuali sia la risposta. Tuttavia, quando si ridimensionano gli elementi su una pagina Web, l'unità di lunghezza percentuale per l'altezza non funziona allo stesso modo dell'unità di lunghezza percentuale per la larghezza. Questo perché l'altezza predefinita degli elementi è solitamente lasciata all'impostazione predefinita (altezza: auto). Quindi, ad esempio, se stai cercando di impostare l'altezza del 100% a un modulo Divi, il modulo non si regolerà perché i contenitori principali (colonna, riga, sezione, ecc.) hanno tutti un valore indefinito per l'altezza. Il browser non sta fondamentalmente cercando di impostare il modulo al 100% di niente (cosa che non può). Questo non è il caso della larghezza. La larghezza predefinita di qualsiasi elemento di blocco (o div) è 100%. Quindi tutte le sezioni, le righe e i moduli hanno questa larghezza predefinita del 100%, a meno che non vengano modificati dalle impostazioni. Questo è il motivo per cui l'unità di lunghezza % non è l'opzione migliore da utilizzare quando si tenta di creare un elemento circolare reattivo. L'elemento circolare deve avere la stessa altezza e larghezza su tutte le dimensioni del browser, quindi è difficile farlo utilizzando un'unità di lunghezza percentuale per l'altezza. Tuttavia, ci sono modi per far funzionare l'altezza e la larghezza al 100% con più CSS personalizzati applicati agli elementi principali. Ma per creare elementi circolari in Divi, potresti trovare più facile lavorare con l'unità di lunghezza vw.
Allineamento del contenuto all'interno di un elemento circolare
Se vuoi allineare il contenuto all'interno di un elemento circolare, hai davvero due opzioni che considererei semplici quando usi Divi. Puoi utilizzare il padding per allineare il contenuto che ti dà un maggiore controllo su dove vuoi che il contenuto venga visualizzato all'interno dell'elemento del cerchio. Oppure puoi utilizzare la proprietà flex (con padding) per assicurarti che il contenuto venga visualizzato direttamente al centro del cerchio.
Allineamento del contenuto dell'elemento circolare con il padding
Per allineare il contenuto all'interno di un elemento circolare utilizzando il padding, suggerirei di utilizzare un'unità di lunghezza relativa (come % o vw) in modo che il padding aumenti o diminuisca con la dimensione del contenitore o la larghezza del browser. Non si desidera utilizzare unità di lunghezza assoluta per il riempimento all'interno di un elemento circolare dimensionato utilizzando unità relative. Il risultato sarebbe incoerente e il design si romperebbe sui dispositivi mobili. Ad esempio, se avessi un elemento circolare con un'altezza di 10vw e una larghezza di 10vw. Quell'elemento si ridurrà di dimensioni man mano che il browser si riduce in larghezza. Se hai aggiunto un'imbottitura di 100 px nella parte superiore dell'elemento, i 100 px rimarrebbero ogni volta che regoli la larghezza del browser e rompi il design. Tuttavia, se hai aggiunto un'imbottitura 3vw, questa imbottitura si adatterebbe bene all'elemento.
Questo è il motivo per cui ho suggerito di utilizzare vw padding nel nostro esempio di modulo di invito all'azione.
Allineamento del contenuto dell'elemento circolare con la proprietà Flex
Se non vuoi preoccuparti così tanto di posizionare il padding superiore e inferiore per assicurarti che il contenuto sia centrato verticalmente, puoi utilizzare la proprietà flex. Aggiungendo alcuni frammenti di css al genitore (elemento circolare), puoi assicurarti che tutto il contenuto rimanga centrato verticalmente. Quindi puoi utilizzare l'allineamento, il riempimento o il margine per assicurarti che anche il contenuto rimanga centrato orizzontalmente.
Ecco cosa intendo.
Utilizzando il nostro esempio, apri le impostazioni del modulo di invito all'azione.
Quindi imposta il padding superiore e inferiore su 0px.
Quindi vai alla scheda Avanzate e aggiungi il seguente frammento di CSS all'Elemento principale:
display:flex; align-items: center;
Per questo particolare modulo, c'è un po' di imbottitura extra sotto la descrizione della promozione che eliminerà un po' l'allineamento. Quindi puoi sbarazzartene aggiungendo il seguente CSS alla descrizione della promozione:
padding-bottom: 0px
Dai un'occhiata a questo post su come allineare verticalmente i contenuti per maggiori informazioni.
Metterlo in pratica: aggiungere elementi circolari a un layout predefinito
Ora che hai una migliore comprensione su come creare elementi circolari in Divi, vediamo come potrebbe funzionare su un vero e proprio progetto di layout. Per questo esempio, userò la pagina di destinazione Farmer di Divi dal Farmer Layout Pack.
Carica il layout della pagina di destinazione dell'agricoltore sulla tua pagina
Per iniziare, aggiungiamo prima il layout della pagina di destinazione dell'agricoltore alla pagina. Per fare ciò, apri il menu delle impostazioni e la parte inferiore di Divi Builder e fai clic sul pulsante Carica dalla libreria. Nel popup di caricamento dalla libreria, trova il Farmer Layout Pack e selezionalo. Quindi fare clic per utilizzare la pagina di destinazione dell'agricoltore.
Questo caricherà il layout nella pagina.
Creare un'intestazione di sezione circolare
Per il primo esempio, convertiremo la sezione di intestazione superiore del layout in un elemento circolare. Per farlo utilizzeremo le nostre tre regole di base:
1: elemento di dimensione con valori di altezza e larghezza uguali
2: aggiungi il raggio del bordo del 50% per tutti e quattro gli angoli
3: Allinea il contenuto all'interno dell'elemento circolare
Apri le impostazioni della sezione e aggiorna quanto segue:
Larghezza: 70vw (desktop), 70vw (tablet), 80vw (telefono)
Larghezza massima: 1080px
Allineamento della sezione: centro
Altezza: 70vw (desktop), 70vw (tablet), 80vw (telefono)
Altezza massima: 1080px
Nota che ho aggiunto ulteriori valori di altezza e larghezza per tablet e telefono, inoltre ho aggiunto anche un'altezza massima e una larghezza massima. L'importante è assicurarsi che tutti i valori di altezza e tutti i valori di larghezza siano uguali.
Ora dobbiamo aggiungere il raggio del bordo del 50% su tutti e quattro gli angoli.
Angoli arrotondati: 50% (tutti e quattro gli angoli)
Poiché si tratta di una sezione, il contenuto include una riga a due colonne con più moduli. Con così tanti contenuti, dobbiamo apportare alcune modifiche alle dimensioni dei moduli per assicurarci che il contenuto si adatti alla sezione.
Innanzitutto, apri le impostazioni del modulo di testo in alto nella colonna 1 che contiene il titolo della sezione. Quindi aggiorna la dimensione del testo del titolo come segue:
titolo Dimensione testo: 4vw
Quindi diminuire la quantità di testo del corpo nel modulo di testo direttamente sotto il modulo di testo che contiene l'intestazione.
Ora possiamo allineare il contenuto regolando la spaziatura della riga. Apri le impostazioni della riga e aggiorna quanto segue:
Margine personalizzato: 10vw top (desktop), 5vw (tablet), 0vw (telefono)
Imbottitura personalizzata: 3vw sinistra, 3vw destra
Per rendere più evidente la forma del cerchio, possiamo aggiungere un divisore della sezione superiore e spostare la posizione dell'immagine di sfondo in alto a sinistra.
Ora controlliamo il risultato.
Realizzare moduli Blurb circolari
Ora diamo un'occhiata a fare alcuni blurb circolari su questo layout. Per questo esempio, usiamo i quattro moduli blurb nella sezione intitolata "I nostri prodotti". Una volta trovato, apri le impostazioni del modulo blurb nella parte superiore della colonna 2.
Quindi aggiornare la dimensione del modulo come segue:
Larghezza immagine: 7vw
Larghezza: 50vw (desktop), 80vw (telefono)
Larghezza massima: 400 px
Allineamento del modulo: centro
Altezza: 50vw (desktop), 80vw (telefono)
Altezza massima: 400 px
Quindi, aggiungi il raggio del bordo o gli angoli arrotondati:
Angoli Arrotondati: 50%
Successivamente, aggiorniamo il design e la spaziatura del contenuto come segue:
Posizionamento immagine/icona: in alto
Dimensione del testo del titolo: 2vw (desktop), 20px (tablet)
Orientamento del testo: centro
Imbottitura personalizzata: 0vw in alto, 0vw in basso, 4vw a sinistra, 4vw a destra
Infine, allineiamo verticalmente il contenuto utilizzando la proprietà flex aggiungendo il seguente CSS personalizzato all'elemento principale:
display: flex; align-items: center;
Estendi lo stile circolare a tutti i Blurb nella sezione
Questo si occupa del design circolare del nostro primo modulo. Ora tutto ciò che dobbiamo fare è estendere le impostazioni di progettazione del modulo blurb ai restanti tre blurb nella sezione. Per fare ciò, fai clic con il pulsante destro del mouse sul modulo blurb che abbiamo appena progettato e seleziona "Estendi stili Blurb". Nel popup Estendi stili, seleziona per estendere lo stile in tutta la sezione.
Risultato finale
Ora diamo un'occhiata al risultato finale.
Pensieri finali
Spero che tu abbia appreso alcuni suggerimenti utili su come creare elementi circolari in Divi. Comprendendo tre passaggi di base e come utilizzare correttamente le unità di lunghezza per dimensionare e distanziare il tuo elemento, puoi creare il design circolare che stai cercando abbastanza facilmente. E può essere davvero divertente incorporare alcuni elementi circolari su un layout Divi esistente o prefabbricato. Sentiti libero di esplorare la creazione di moduli circolari, righe o anche intere sezioni!
Non vedo l'ora di sentirti nei commenti.
Saluti!