Come aggiungere ombre box su un lato agli elementi di design in Divi

L'aggiunta di ombre a scatola unilaterale a vari elementi di design in Divi è un modo sottile per aggiungere un tocco creativo senza distrarre dal contenuto. In questo tutorial, ti mostrerò come aggiungere ombre a scatola unilaterale al layout della pagina delle domande frequenti sulla terapia di Divi. Come suggerimento bonus, ti mostrerò anche come combinare le icone blurb come una grafica centrata verticalmente. Imparando queste tecniche di progettazione Divi, puoi aggiungere ombre box unilaterali a qualsiasi modulo o colonna che desideri.

Iniziamo.

Sbirciata

Ecco un'anteprima del design del layout delle FAQ che costruiremo utilizzando le ombre della scatola su un lato.

Iniziare

Per iniziare, dovrai creare una nuova pagina. Dalla dashboard di WordPress, vai su Pagine > Aggiungi nuovo. Quindi dai un titolo alla tua pagina e distribuisci il visual builder. Seleziona l'opzione "Scegli un layout predefinito". Dal popup Load from Library, trova e seleziona il Therapist Layout Pack. Quindi seleziona il layout della pagina delle domande frequenti del terapeuta e fai clic su "Usa questo layout".

Ora sei pronto per iniziare a progettare.

Parte 1: Organizzazione del layout

In questo layout predefinito, concentreremo la nostra attenzione sulla seconda sezione contenente le domande simulate all'interno di più moduli di commutazione. Per cominciare, cambiamo il layout delle colonne della riga in tre colonne (1/3 1/3 1/3).

Quindi, sposta tutti i moduli nella colonna 2 nella colonna 3 utilizzando la funzione Multiselect di Divi. Per fare ciò, tieni premuto Command (o Control) e fai clic su ciascun modulo nella colonna 2 finché non vengono selezionati tutti. Quindi trascinali sulla colonna 3.

Ora dobbiamo dare alla nostra riga un po' più di spazio. Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza: 80%
Larghezza grondaia: 2
Equalizza le altezze delle colonne: S

Parte 2: Progettazione dei moduli Toggle

Per personalizzare contemporaneamente il design di tutti i moduli di commutazione in questa sezione, utilizzare la funzione Selezione multipla per selezionare ciascuno dei moduli di commutazione. Una volta selezionati tutti, apri le impostazioni per uno qualsiasi dei moduli di commutazione.

Quindi aggiorna quanto segue:

Apri Toggle Colore del testo: #ffffff
Apri Toggle Colore di sfondo: rgba(0,0,0,0)
Chiuso Toggle Colore del testo: #ffffff
Chiuso Toggle Colore di sfondo: rgba(0,0,0,0)

Colore del corpo del testo: #ffffff

Imbottitura personalizzata: 3vw in alto, 3vw in basso, 2vw a sinistra, 2vw a destra

Ora possiamo aggiungere un'ombra della scatola sul lato sinistro del nostro modulo di attivazione/disattivazione aggiornando le opzioni dell'ombra della scatola come segue:

Posizione orizzontale dell'ombra del riquadro: -30px
Posizione verticale dell'ombra del riquadro: 0px
Forza sfocatura ombra scatola: 40 px
Forza di diffusione dell'ombra della scatola: -35px
Colore ombra: rgba (0,0,0,0,4)

Il trucco per posizionare correttamente l'ombra della scatola è spostare l'ombra a sinistra impostando la posizione orizzontale su -30px. Dopodiché, devi trovare il giusto equilibrio tra forza di sfocatura e forza di diffusione per mantenere l'ombra della scatola visibile a sinistra senza che sanguini sulla parte superiore e inferiore del modulo.

Salva le impostazioni.

Ora tutti i tuoi moduli di commutazione sono stati aggiornati con il nuovo design.

Tuttavia, vogliamo che l'ombra del riquadro dei moduli di commutazione nella colonna di destra sia posizionata sul lato destro (non a sinistra). Per cambiarlo, usa Multiselect per selezionare tutti i moduli di attivazione/disattivazione nella colonna di destra e apri le impostazioni dell'elemento. Quindi cambia la posizione orizzontale da -30px a 30px come segue:

Posizione orizzontale dell'ombra del riquadro: 30 px

Quindi salvare le impostazioni.

Questo si prende cura dei nostri moduli a ginocchiera con le loro esclusive ombre a scatola unilaterale. Ora abbiamo bisogno di aggiungere ombre simili a scatola unilaterale alle nostre colonne.

Parte 3: aggiunta di ombre box su un lato alle colonne

Per aggiungere ombre box unilaterali alle colonne, dovremo aggiungere alcuni frammenti di CSS nella scheda Avanzate delle impostazioni di riga.

Apri le impostazioni della riga e fai clic sulla scheda Avanzate. All'interno dell'elemento principale della colonna 1, aggiungi il seguente CSS:

box-shadow: 30px 0px 70px -45px rgba(0,0,0,0.4)

Se non hai familiarità con i CSS, dovresti essere in grado di riconoscere la somiglianza del codice con le impostazioni del modulo box shadow disponibili nel generatore Divi. Nel codice sopra...

30px è il valore per la posizione orizzontale
0px è il valore per la posizione verticale
70px è il valore per l'intensità della sfocatura
-45px è il valore per la forza di diffusione
rgba(0,0,0,0.4) è il colore dell'ombra

Ho dato all'ombra della casella di colonna una maggiore forza di sfocatura rispetto ai moduli di attivazione/disattivazione per creare una profondità leggermente maggiore.

Per aggiungere un'ombra della casella sinistra alla colonna 3, dovrai aggiungere il seguente CSS all'elemento principale della colonna 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Anche in questo caso, l'unica differenza tra questo CSS e quello utilizzato per la colonna 1 è la posizione orizzontale negativa.

Parte 4: aggiunta di icone Blurb alla colonna 2

Ora che le nostre ombre della scatola unilaterali sono complete, abbiamo una colonna centrale vuota in cui possiamo combinare alcune icone del modulo blurb per creare un semplice design grafico. Per fare ciò, aggiungi prima un modulo blurb ed elimina il titolo e il contenuto. Quindi fare clic per utilizzare un'icona e selezionare la seguente icona di chat.

Quindi aggiorna le impostazioni di progettazione come segue:

Colore icona: rgba(203,241,252,0,37)
Dimensione carattere icona: 20vw
Margine personalizzato: 0px inferiore

Quindi, duplica il modulo blurb per crearne uno aggiuntivo sotto.

Quindi aggiorna la descrizione in alto con un'icona a punto interrogativo e aggiorna le seguenti impostazioni di progettazione:

Dimensione carattere icona: 9vw
Larghezza: 40%
Allineamento del modulo: a destra
Margine personalizzato: -2vw

Infine, copia il modulo blurb del punto interrogativo che hai appena progettato e incollalo sotto il modulo blurb dell'icona della chat grande. Quindi aggiorna le impostazioni di progettazione per quel modulo blurb come segue:

Parte 5: centratura verticale dei moduli nella colonna 2

Per completare il design, dobbiamo centrare verticalmente le icone del blurb nella colonna 2 in modo che rimangano un elemento di design centrato per il nostro layout. Per ottenere ciò, sfrutteremo l'uso del flex da parte di Divi. Poiché abbiamo scelto di equalizzare le altezze delle colonne per la nostra riga, possiamo utilizzare un semplice frammento di CSS per centrare tutti i moduli all'interno della colonna 2. Puoi sempre saperne di più su come allineare verticalmente il contenuto in Divi a tuo piacimento. Ma per ora, apri le impostazioni della riga e fai clic sulla scheda Avanzate. Quindi inserisci il seguente css all'interno dell'elemento principale della colonna 2:

margin: auto

Ora tutti i moduli blurb saranno centrati verticalmente all'interno della colonna 2.

Per rendere le cose più facili agli occhi, vai avanti e centra il testo su ciascuno dei moduli di testo che si trovano nella parte superiore della colonna 1 e della colonna 2. Quindi aggiungi un gradiente di sfondo alla sezione come segue:

Colore sfondo sfumato sinistro: #616ce1
Colore di sfondo sfumato a destra: #3846e0

Questo è tutto. Ora il disegno è completo.

Controlla il risultato finale.

E nota come l'ombra della scatola si espande e si contrae quando si aprono e si chiudono gli interruttori.

Pensieri finali

L'aggiunta di ombre scatolari unilaterali a moduli e colonne può dare profondità ai tuoi contenuti in modi creativi. Il trucco è sapere come regolare in modo efficace le impostazioni del design dell'ombra della scatola di Divi. Questo layout di pagina delle FAQ è solo uno dei tanti esempi che puoi incorporare in questo design. Ma il processo complessivo è abbastanza semplice e dovrebbe essere una buona tecnica che puoi tenere nella tua cassetta degli attrezzi di progettazione per progetti futuri.

Non vedo l'ora di sentirti nei commenti.

Saluti!