Come creare moduli fluttuanti che collidono nello spazio 3D in Divi

È sempre divertente esplorare nuovi design possibili utilizzando Divi. E oggi useremo Divi per esplorare lo spazio 3D! Tecnicamente, esploreremo come progettare moduli fluttuanti che sembrano collidere nello spazio 3D. Questo design funzionerà bene come un modo creativo per stupire i visitatori mostrando che hai una "distesa" di servizi, prodotti o risorse sul tuo sito web.

Ovviamente, questo tutorial non si confronterà con quello che immagino sarebbe l'esplorazione dello spazio nella vita reale. Ma, si spera che voi esploratori Divi là fuori possiate imparare alcune cose lungo la strada.

Sbirciata

Ecco un'anteprima del design che costruiremo insieme.

Scarica GRATIS i moduli galleggianti che collidono nel layout dello spazio 3D

Per mettere le mani sul design costruito 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 i 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.

Andiamo al tutorial, vero?

Iscriviti al nostro canale Youtube

Iniziare con un layout predefinito

Per iniziare, assicurati di avere il tema Divi installato e attivo. Quindi crea una nuova pagina, assegna un titolo alla pagina e distribuisci Divi Builder (sul front-end). Seleziona l'opzione "Scegli un layout predefinito". Quindi seleziona il layout della pagina di destinazione del videogioco e importalo nella tua nuova pagina.

Per ottenere un vantaggio sul nostro design, utilizzeremo la sezione intitolata "Caratteristiche di gioco" che contiene i blurb che utilizzeremo per il nostro design. Poiché questa è l'unica sezione di cui abbiamo veramente bisogno, vai avanti ed elimina ogni sezione e riga tranne le due righe di contrassegni.

Implementazione dei Blurb fluttuanti in 3D Space Design in Divi

Creare la prima riga di Blurbs

All'interno della sezione del layout predefinito contenente le due righe di contrassegni, crea una nuova riga a una colonna e trascinala nella parte superiore della sezione.

Ora, usando la funzione di selezione multipla di Divi (tieni premuto ctrl/cmd mentre selezioni ogni blurb), seleziona 5 dei blurb nelle due colonne sottostanti e trascinali nella nuova riga di una colonna nella parte superiore della sezione.

Ora puoi eliminare le due righe fornite con il layout predefinito di seguito. Dopodiché, dovresti avere solo una singola riga di una colonna contenente 5 blurb.

Aggiungere prospettiva alla nostra sezione

Per ottenere l'effetto 3D che stiamo cercando in questo progetto, dobbiamo aggiungere la proprietà css prospettiva alla nostra sezione. Ciò aggiungerà la prospettiva 3D alla nostra riga ogni volta che ruotiamo la riga utilizzando le opzioni di trasformazione.

Apri le impostazioni della sezione e aggiungi il seguente CSS personalizzato all'elemento principale:

perspective: 1000px;

In seguito, potresti voler aumentare o diminuire il valore della prospettiva per avvicinare o allontanare gli elementi 3D (in questo caso, le righe) dalla prospettiva dell'utente quando guarda lo schermo.

Per ulteriori informazioni, controlla come funziona la prospettiva con le opzioni di trasformazione in Divi.

Personalizzazione della riga

Prima di iniziare a modellare i nostri blurb, configuriamo prima le nostre impostazioni di riga. Ci sono tre cose principali che dobbiamo cambiare a livello di riga per questo design:

1. Dobbiamo allineare i nostri blurb orizzontalmente usando "display:flex". Ciò manterrà il nostro design coerente e reattivo su tutti i dispositivi (invece di utilizzare un layout a 5 colonne che si romperà su tablet e telefono).
2. Dobbiamo eliminare i margini di colonna predefiniti impostando la larghezza della grondaia su 1.
3. Dobbiamo usare la rotazione della trasformazione per ruotare la riga di 45 gradi sull'asse X. Con la proprietà prospettiva aggiunta al genitore (la sezione), la riga e tutti i suoi elementi hanno l'effetto 3D che stiamo cercando.

Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza grondaia: 1
Larghezza: 80% (desktop), 100% (tablet), 100% (telefono)
Trasforma Ruota asse X: 45 gradi

Elemento principale della colonna CSS:

display: flex;
justify-content: center;

Regolazione dello stile e della spaziatura di Blurb

Ora è il momento di modificare un po' il contenuto e lo stile dei nostri blurb.

Dal momento che vogliamo applicare le stesse personalizzazioni a tutti i nostri blurb, usa di nuovo multiselect per selezionare tutti i blurb e distribuire le impostazioni modali degli elementi.

Innanzitutto, elimina il contenuto del corpo.

Quindi aggiungi un colore di sfondo:

Colore di sfondo: rgba (20,241,217,0,16)

Quindi aggiorna la seguente spaziatura:

Margine personalizzato (desktop): 2vw a destra
Margine personalizzato (tablet e telefono): 0vw right

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

Quindi, aggiungi un bordo come segue:

Larghezza bordo: 2px
Colore del bordo: rgba (20,241,217,0.66)

A questo punto, tutti i blurb hanno lo stile in atto. Abbiamo ancora bisogno di usare le opzioni di trasformazione per cambiare la scala e la posizione di ciascuno dei blurb individualmente che si aggiungeranno all'effetto fluttuante 3D dei blurb. Ma prima di farlo, duplichiamo la riga per creare la nostra seconda riga di blurb.

Creare la seconda fila di blurb

Per creare la seconda riga di blurb, duplica semplicemente la riga di 5 blurb che hai appena personalizzato.

Per creare un effetto di collisione, possiamo ruotare la riga duplicata nella direzione opposta (-45 gradi).

Apri la riga duplicata e aggiorna quanto segue:

Trasforma Ruota asse X: -45°

Aumenta l'imbottitura della sezione superiore e inferiore

A questo punto, le strisce frontali potrebbero estendersi al di fuori della sezione. Per risolvere questo problema, aggiungi il seguente riempimento alla tua sezione:

Imbottitura personalizzata: 15% in alto, 15% in basso

Utilizzo delle opzioni di trasformazione per ridimensionare e posizionare singolarmente ogni Blurb

A questo punto, sei pronto per essere creativo con il modo in cui desideri che ciascuno dei tuoi blurb "galleggi" nello spazio 3D. Per fare ciò, puoi utilizzare le opzioni di trasformazione per ridimensionare e posizionare ogni blurb uno per uno esattamente dove lo desideri. In questo modo, i tuoi blurb sembreranno avere profondità diverse nello spazio 3D.

Per semplificare le cose, numererò i segni distintivi da 1 a 10 iniziando con il segno all'estrema sinistra nella riga in alto (Testo in evidenza n. 1) e terminando con il segno all'estrema destra nella seconda riga (Testo in evidenza n. 10).

Blurb #1

Iniziamo con il nostro primo blurb nella riga in alto. Apri le impostazioni del blurb e aggiorna quanto segue:

Scala di trasformazione (asse x e y): 90%

Blurb #2

Apri le impostazioni per Blurb #2 e aggiorna quanto segue:

Scala di trasformazione (asse x e y): 80%
Trasforma Trasla asse X: -10%

Blurb #3

Scala di trasformazione (asse x e y): 80%
Trasforma Trasla asse X: 20%

Blurb #4

Scala di trasformazione (asse x e y): 85%
Trasforma Trasla asse X: -30%

Blurb #5

Scala di trasformazione (asse x e y): 60%

Una volta fatto, la tua prima riga dovrebbe assomigliare a questa.

Continua a personalizzare le opzioni di trasformazione per i blurb 6-10, iniziando con il blurb #6 all'estrema sinistra della seconda riga.

Trama #6

Scala di trasformazione (asse x e y): 60%
Trasforma Trasla asse X: -40%
Trasforma Trasla asse Y: -20%

Blurb #7

Scala di trasformazione (asse x e y): 90%
Trasforma Trasla asse X: 20%

Trama #8

Scala di trasformazione (asse x e y): 70%
Trasforma Trasla asse X: -50%

Blurb #9

Scala di trasformazione (asse x e y): 80%
Trasforma Trasla asse X: -20%

Blurb #10

Scala di trasformazione (asse x e y): 70%
Trasforma Trasla asse X: -60%

Ora diamo un'occhiata a come appare la seconda riga mentre si scontra con la nostra prima riga nello spazio 3D.

Per completare il design, possiamo aggiungere alla sezione una bella immagine di sfondo spaziale 3D. Sto usando l'immagine di sfondo della sezione superiore fornita con il layout della pagina di destinazione del videogioco che abbiamo usato per questo tutorial.

Progetto definitivo

Ora diamo un'occhiata al design finale dei nostri moduli mobili 3D.

Desktop

Tavoletta

Telefono

A causa dei 5 blurb che si estendono lungo la riga, è un po' più difficile inserire tutti i 5 blurb senza che si estenda al di fuori del viewport. Per risolvere questo problema puoi semplicemente nascondere la trama lontana in ogni riga sul telefono. Oppure puoi dare a ciascuno dei tuoi blurb una dimensione più piccola sul telefono.

Pensieri finali

Spero che questo tutorial ti dia qualche ispirazione su come creare i tuoi moduli fluttuanti nello spazio 3D. Bastano pochi passaggi per far ruotare l'intera fila di moduli in 3D utilizzando la prospettiva e le opzioni di trasformazione. Successivamente, puoi posizionare ciascuno dei moduli per farli galleggiare ovunque tu voglia.

Divertiti ad esplorare.

Non vedo l'ora di sentirti nei commenti.

Saluti!