Come aggiungere una dimensione personalizzata al tuo motivo di sfondo con Divi

I nuovi modelli di sfondo di Divi aggiungono molte opzioni di progettazione visiva a qualsiasi layout Divi. Questi motivi di sfondo ripetuti hanno un bell'aspetto, ma possono essere utilizzati per qualcosa di più di un semplice motivo ripetuto. Possiamo anche usarli come un'unica grafica di sfondo per attirare l'attenzione su aree specifiche dello schermo o spezzare elementi visivi. Le impostazioni del motivo di sfondo di Divi, in questo caso, Dimensioni personalizzate, ci offrono molte opzioni di progettazione. In questo post, esamineremo tre esempi e vedremo come aggiungere una dimensione personalizzata al tuo motivo di sfondo con Divi per aiutarti a ottenere idee per il tuo sito Web Divi.

Anteprima

Per prima cosa, vediamo cosa faremo. Ecco uno sguardo a ciascun motivo di sfondo sulle dimensioni dello schermo di desktop, tablet e telefono.

Risultati del primo motivo di sfondo di dimensioni personalizzate

Desktop

Tavoletta

Telefono

Risultati del secondo motivo di sfondo di dimensioni personalizzate

Desktop

Tavoletta

Telefono

Risultati del modello di sfondo del terzo formato personalizzato

Desktop

Tavoletta

Telefono

Layout del modello di sfondo di dimensioni personalizzate

Per i nostri esempi, sto usando la prima sezione della pagina di destinazione gratuita di Acai Bowl disponibile all'interno di Divi. Aggiungeremo tre diversi modelli di sfondo e li personalizzeremo per ciascuna delle opzioni del dispositivo. La sezione per i miei esempi utilizza il colore di sfondo #f9f3fd. Manterremo questo colore di sfondo e aggiungeremo motivi di sfondo ad esso.

Primo esempio di motivo di sfondo di dimensioni personalizzate

Il nostro primo esempio aggiungerà strisce diagonali che appaiono solo nella parte inferiore della sezione. Avremo bisogno di impostazioni diverse per desktop, tablet e dispositivi telefonici.

Innanzitutto, apri le impostazioni della sezione facendo clic sull'icona a forma di ingranaggio per la sezione.

Quindi, scorri verso il basso fino a Sfondo . Effettueremo modifiche a tutte e tre le dimensioni dello schermo, quindi iniziamo selezionando l'icona della tavoletta che appare quando passiamo con il mouse sulle opzioni Sfondo.

Scegli il motivo di sfondo

Quindi, assicurati che Desktop sia selezionato, scegli la scheda Motivo di sfondo e fai clic su Aggiungi motivo di sfondo .

Seleziona la casella a discesa sotto il motivo di sfondo.

Scegli il motivo di sfondo Strisce diagonali dall'elenco. Possiamo modificare questo modello, quindi non è solo uno schermo pieno di strisce. Quindi, lo useremo per creare il nostro sfondo unico.

• Motivo di sfondo: strisce diagonali

Impostazioni del motivo di sfondo

Cambia il Colore del modello in rgba(68,40,84,0.13). Questo colore si sposa bene con il nostro colore di sfondo.

• Colore del modello: rgba (68,40,84,0.13)

Quindi, apri la casella a discesa Dimensione modello e seleziona Dimensione personalizzata. Impostare l'altezza del motivo su 41vh, l'origine di ripetizione del motivo su in basso al centro e il motivo ripetuto su Ripeti X (orizzontale). Questo ci dà il controllo sulla dimensione del motivo di sfondo e sul posizionamento sullo schermo.

• Dimensione del modello: dimensione personalizzata
• Altezza: 41vh
• Ripeti origine: in basso al centro
• Ripeti: ripeti X (orizzontale)

Impostazioni dello sfondo del tablet

Successivamente, dobbiamo fare in modo che lo sfondo funzioni bene con dimensioni dello schermo diverse. Avremo bisogno di regolare l'altezza del modello in base alle dimensioni dello schermo. Scorri di nuovo fino alle impostazioni Sfondo e seleziona l' icona Tablet .

Cambia l' altezza del modello a 30vh.

• Altezza del modello: 30vh

Impostazioni dello sfondo del telefono

Infine, scorri fino alle Impostazioni Sfondo e seleziona l' icona Telefono .

Cambia l' altezza del modello a 25vh. Chiudi le impostazioni del modulo e salva la pagina.

• Altezza del modello: 25vh

Secondo esempio di motivo di sfondo di dimensioni personalizzate

Il nostro secondo esempio di motivo di sfondo di dimensioni personalizzate aggiungerà un cerchio al centro dello schermo. Per il nostro design, apparirà dietro la ciotola di acai nella nostra immagine in primo piano.

Scegli il motivo di sfondo

Nella sezione Impostazioni , scorri verso il basso fino a Sfondo e seleziona l'icona del tablet per aprire le impostazioni delle dimensioni dello schermo del dispositivo. Scegliere la scheda Desktop , selezionare la scheda Motivo di sfondo e fare clic su Aggiungi motivo di sfondo .

Vogliamo Polka Dot per questo esempio. Questa è l'opzione predefinita, quindi non sarà necessario aprire la casella a discesa per questa. Sto mostrando le opzioni nel caso in cui tu stia passando da un motivo di sfondo diverso a questo. I pois vengono visualizzati automaticamente quando fai clic su Aggiungi motivo di sfondo. Fare doppio clic sul modello o utilizzare la casella a discesa per modificarlo.

• Motivo di sfondo: pois

Cambia il Colore in bianco. Questo ci permette di aggiungere un cerchio bianco sullo sfondo.

• Colore: #ffffff

Prossimo. imposta la Dimensione del modello su Personalizzata, l' Altezza su 400 vh e l' Origine di ripetizione al centro. Queste impostazioni controllano la dimensione e la posizione dei punti. In questo caso, abbiamo creato un singolo punto da visualizzare sullo sfondo.

• Dimensione del modello: dimensione personalizzata
• Altezza del modello: 400vh
• Ripeti origine: centro

Impostazioni dello sfondo del tablet

Successivamente, dobbiamo assicurarci che funzioni bene su tutte le dimensioni dello schermo. Scegli la scheda tablet .

Quindi, cambia il Pattern Height a 300vh.

• Altezza del modello: 300vh

Impostazioni dello sfondo del telefono

Infine, torna alle Impostazioni di sfondo e seleziona la scheda del telefono per aprire le impostazioni delle dimensioni dello schermo del telefono.

Cambia l' altezza del modello a 200vh. Chiudi le impostazioni del modulo e salva la pagina.

• Altezza del modello: 200vh

Esempio di modello di sfondo del terzo formato personalizzato

Questo esempio mostra una singola linea a zig-zag attraverso il centro della sezione. Per questo, non avremo bisogno di regolare il telefono separatamente. Gli consentiremo di seguire le impostazioni del tablet.

Scegli il motivo di sfondo

Per il nostro terzo esempio di motivo di sfondo di dimensioni personalizzate, apri le impostazioni della sezione e scorri verso il basso fino a Sfondo . Passa il mouse sopra le impostazioni di Sfondo e fai clic sull'icona del tablet per aprire le impostazioni del dispositivo. Scegli la scheda Desktop e seleziona la scheda Motivo di sfondo . Fare clic su Aggiungi motivo di sfondo .

Apri la casella a discesa Motivo di sfondo e scegli Zig Zag 2. Questo motivo riempie lo schermo con linee a zig-zag, ma lo regoleremo in modo che mostri solo una linea.

• Motivo di sfondo: Zig Zag 2

Cambia il colore del motivo di sfondo in rgba(68,40,84,0.09). Questo colore non ha un contrasto elevato con il nostro colore di sfondo, quindi non distrarrebbe.

• Colore motivo di sfondo: rgba(68,40,84,0.09)

Impostare la dimensione del motivo su Dimensioni personalizzate, l' altezza del motivo su 20vh, l' origine di ripetizione del motivo al centro e la ripetizione del motivo per ripetere X (orizzontale). Come gli altri esempi, questo controlla la dimensione e la posizione del motivo.

• Dimensione del modello: dimensione personalizzata
• Altezza del modello: 20vh
• Ripeti origine: centro
• Pattern Ripeti: Ripeti X (orizzontale)

Impostazioni dello sfondo del tablet

Infine, scorri fino all'inizio delle Impostazioni Sfondo e fai clic sull'icona della tavoletta . Le impostazioni del telefono utilizzeranno automaticamente queste impostazioni, quindi non sarà necessario apportare modifiche nella scheda del telefono.

Scorri verso il basso fino a Altezza modello e cambialo in 10vh. Chiudi le impostazioni del modulo e salva la pagina.

• Altezza del modello: 10vh

Risultati

Ecco uno sguardo a ciascun motivo di sfondo sulle dimensioni dello schermo di desktop, tablet e telefono.

Risultati del primo motivo di sfondo di dimensioni personalizzate

Desktop

Tavoletta

Telefono

Risultati del secondo motivo di sfondo di dimensioni personalizzate

Desktop

Tavoletta

Telefono

Risultati del modello di sfondo del terzo formato personalizzato

Desktop

Tavoletta

Telefono

Pensieri finali

Questo è il nostro sguardo su come aggiungere una dimensione personalizzata al tuo motivo di sfondo con Divi. I nuovi motivi di sfondo di Divi hanno aperto molte opzioni di design. Questi modelli stanno benissimo con i nostri layout. Il concetto di utilizzare una dimensione personalizzata per un motivo di sfondo significa che non siamo vincolati alla semplice ripetizione dei motivi. I motivi di sfondo di Divi possono essere utilizzati per molto di più. Utilizzando i concetti che abbiamo trattato qui, puoi utilizzare qualsiasi motivo di sfondo di Divi per creare i tuoi disegni di sfondo unici.

Vogliamo sentire da voi. Hai aggiunto una dimensione personalizzata al tuo motivo di sfondo con Divi? Facci sapere la tua esperienza nei commenti.