Vai al contenuto principale

Come creare bordi con sfondi su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Le immagini di bordi e di sfondo continuano ad essere elementi di design popolari durante la creazione di siti Web. L'uso delle giuste immagini di sfondo può aggiungere personalità e stile al tuo sito senza sprecare tempo e denaro per la grafica personalizzata. E i bordi sono utili per aggiungere struttura ai tuoi contenuti.

Oggi uniremo questi due punti di forza progettando immagini di sfondo come i bordi. Divi ha una serie di opzioni utili per personalizzare le immagini di sfondo, il che semplifica la progettazione di immagini di sfondo per disegni di bordi unici. Questo ci consente di combinare colori, sfumature, ombreggiature e modalità di fusione in tutti i tipi di modi creativi.

Cominciamo.

Cosa ti serve per iniziare

Per iniziare, è necessario quanto segue:

  1. Tema Divi installato e attivo
  2. Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
  3. Immagini da utilizzare per contenuti di fantasia

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Suggerimenti generali per la creazione di motivi per bordi di immagini di sfondo

Prima di iniziare a creare, ecco alcuni suggerimenti generali da tenere a mente quando si creano modelli di bordi di immagini di sfondo.

# 1 Scegli immagini con molta trama

Il più delle volte, vorrai che i tuoi confini siano più stretti. Ciò significa che non sarai in grado di vedere gran parte dell'immagine. È quindi utile utilizzare immagini che abbiano molta consistenza. Ad esempio, puoi utilizzare una foto di un paesaggio, un mazzo di fiori o un'alta torre. Ecco alcune immagini che sto usando per questo tutorial.

Varietà darriete piano

# 2 usa gradienti e trasparenza con i bordi dell'immagine di sfondo

Le immagini di sfondo da sole a volte possono essere un ottimo confine per i tuoi contenuti. Ma la maggior parte delle volte, ti consigliamo di aggiungere sovrapposizioni all'immagine di sfondo per ottenere un po 'di colore o per rendere gli sfondi più scuri o più chiari. Le sfumature di sfondo sono un ottimo modo per aggiungere una sovrapposizione alle immagini di sfondo e creare motivi di bordo unici.

# 3 Utilizza le modalità di unione

Usa i gradientiUtilizzando i metodi di fusione sulle immagini di sfondo è possibile applicare colori e trame unici ai motivi dei bordi. Tutto quello che devi fare è aggiungere un colore di sfondo o un gradiente con l'immagine di sfondo e quindi selezionare una modalità di fusione per l'immagine di sfondo. Colore, Luminosità, Moltiplicazione e Schermo sono alcuni ottimi metodi di fusione per i bordi dell'immagine di sfondo.

Usa le opzioni degli angoli arrotondati per forme uniche

Bordi con angoli arrotondati

Tutti i bordi non devono avere bordi diritti. Mescola un po '! Le opzioni degli angoli arrotondati di Divi ti consentono di modellare questi angoli in modo creativo.

Usa immagini di sfondo parallasse come bordi

Usa immagini di parallasse come bordiIl bello della parallasse è che dà vita al design con il movimento. Inoltre, se usi immagini di sfondo con parallasse per i tuoi bordi, puoi creare un movimento sottile che risalta e fa risaltare il tuo contenuto.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Disegno del bordo di immagine di sfondo in Divi

Ora che comprendiamo l'idea generale alla base della creazione di modelli di bordi di immagini di sfondo, immaginiamone alcuni insieme. Costruiremo 2 diversi modelli. Ognuno avrà un modulo di presentazione di base che fungerà da contenuto di fantasia. E useremo i parametri della colonna per aggiungere il bordo dell'immagine di sfondo del modulo.

Cominciamo con il nostro primo design.

#1 immagine di sfondo del bordo

Questo primo disegno presenta uno stretto bordo dell'immagine di sfondo con un'ombra dell'area per farlo sembrare più simile a una cornice per il contenuto.

Ecco come progettarlo.

Innanzitutto, aggiungi una riga di due colonne a una sezione normale.

Scegli un layout a doppia colonna

Aggiungi modulo di riepilogo

Quindi aggiungi un modulo blurb nella colonna di sinistra.

Aggiungi modulo di riepilogo divi

Una volta posizionato il blurb, apri le impostazioni del testo esploso ed estrai l'immagine predefinita in modo che siano visibili solo il titolo e il contenuto del corpo.

Ripristina immagine predefinita

Quindi dai al tuo testo uno sfondo bianco.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Quindi aggiornare i parametri di progettazione della presentazione come segue:

  • Titolo del testo: Oswald
  • Polizia del corpo: Lato
  • Margine 5% nella parte superiore, 5% nella parte inferiore, 5% a sinistra, 5% a destra
  • Tappezzeria: 7% nella parte superiore, 7% nella parte inferiore, 10% a sinistra, 10% a destra
  • Angoli arrotondati: 20px in alto a destra, 20px in basso a sinistra
  • Box Shadow: vedi screenshot

Stile del modulo di riepilogo modificato

Aggiungi un'immagine di sfondo alla colonna

Questo si occupa del nostro modulo di presentazione. Ora aggiungiamo il nostro bordo dell'immagine di sfondo. Per fare ciò aggiungeremo un'immagine di sfondo alla colonna contenente il modulo Blurb. Apri le impostazioni della riga, quindi le impostazioni per la colonna 1 e aggiungi il seguente sfondo:

  • Immagine di sfondo: [carica l'immagine di tua scelta]
  • Colore di sfondo: #303a7a
  • Immagine di sfondo della miscela: luminosità

Divi colore di sfondo si fondonoQuindi aggiorna gli angoli arrotondati e l'ombra della scatola come segue:

  • Angoli arrotondati: 20px in alto a destra, 20px in basso a sinistra
  • Box Shadow: vedi screenshot

Modifica della colonna bordo divi

Risultato finale

Ora controlla il progetto finale.

Risultato finale divi border with image

Immagine di sfondo del bordo # 2

Immagine con bordo quadratoIl prossimo progetto evidenzia il fatto che l'uso di immagini altamente strutturate può creare bellissimi bordi, specialmente quando li combini con i metodi di fusione delle immagini.

Ecco come progettarlo.

Aggiungi il modulo Blurb

Per creare il design, aggiungeremo il testo blurb alla colonna 2 della stessa riga che contiene il design n. 1. Vai avanti e copia il modulo di layout del design n. 1 e incollalo nella colonna 2. Quindi, aggiorna le impostazioni del modulo di presentazione come segue:

  • Angoli arrotondati: ripristina le impostazioni predefinite
  • Margine: 10% nella parte superiore, 10% nella parte inferiore, 10% a sinistra, 10% a destra
  • Tappezzeria: 15% nella parte superiore, 15% nella parte inferiore, 10% a sinistra, 10% a destra
  • Larghezza del bordo: 1px
  • Colore del bordo: #ffffff

Configurazione della spaziatura dei moduli di riepilogo DiviAggiungi un'immagine di sfondo alla colonna

Con il nostro modulo attivo, apri le impostazioni della linea e aggiungi un gradiente di sfondo alla colonna 2.

  • Sfumatura dello sfondo a sinistra: #f7e0a5
  • Gradiente di sfondo destro Colore: rgba (237,240,0,0.79)
  • Direzione sfumatura: 90deg
  • Posizione iniziale: 50%
  • Posizione finale: 0%

disegni di bordo immagine di sfondo divi

Quindi aggiungi un'immagine di sfondo con un piacevole effetto sfumato.

  • Immagine di sfondo: [scarica immagine]
  • Mix di immagini di sfondo: colore

Divi mix di colori

Come puoi vedere, la modalità di fusione del colore preserva la luminosità dei due gradienti di colore dietro l'immagine per creare un bel motivo del bordo dell'immagine con colori tenui.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Risultato finale

Scopri il risultato finale del design.

Risultato finale divi

Ultimi pensieri

Creare bordi con immagini è un modo semplice per aggiungere bellezza e personalità al tuo design. Il design evidenziato in questo tutorial è fatto per evidenziare le possibilità disponibili con Divi nella progettazione di bordi unici. Pertanto, con le diverse combinazioni di colori, i design sono illimitati. Quindi, prendi alcune immagini ed esplora di più il design dei bordi con le immagini su Divi.

Alla tua salute.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota4
Tweet
Enregistrer