Esplorare come creare e animare forme CSS in Divi

La creazione di forme utilizzando i CSS nel web design non è affatto un concetto nuovo. In effetti, il metodo classico di creazione di forme CSS è stato ampiamente messo in ombra da altre soluzioni grafiche HTML come Canvas e SVG. Tuttavia, le forme CSS (almeno quelle di base) sono molto più facili da creare e possono ancora svolgere un ruolo significativo nel web design. Inoltre, quando aggiungi l'animazione di scorrimento a queste forme, può emergere un elemento di design completamente nuovo.

In questo tutorial, esploreremo come creare e animare forme CSS in Divi. Una volta compreso il concetto di base su come creare alcune forme utilizzando le opzioni integrate di Divi, puoi animare queste forme per creare design di animazione di scorrimento unici per il tuo sito web. Sarai sorpreso di quanto puoi fare!

Iniziamo.

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di 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 della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

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

Esplorare come creare forme CSS con animazione in Divi

La struttura di righe e colonne

Innanzitutto, aggiungi alla sezione una riga di colonna di un terzo e due terzi.

Prima di fare qualsiasi altra cosa, apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: S
• Larghezza: 95%
• Larghezza massima: 900 px

NOTA: queste impostazioni sono fondamentali per l'impostazione del nostro design. Ad esempio, la struttura della colonna di un terzo due terzi combinata con una riga che ha una larghezza massima di 900 px senza margini (larghezza margine 1), ci fa sapere che la colonna di sinistra sarà larga esattamente 300 px. Inoltre, se mantengo il mio design contenuto all'interno di questa colonna di larghezza 300px, posso anche essere certo che avrà un bell'aspetto anche su tablet e dispositivi mobili.

Aggiunta del distanziatore del modulo divisore

Quindi, aggiungi un divisore per creare la spaziatura necessaria per la colonna che conterrà le nostre forme CSS.

A questo punto, dovresti aprire la modalità di visualizzazione dei livelli per gestire i livelli/moduli che si trovano nel menu delle impostazioni del Divi Builder.

Apri le impostazioni del divisore e aggiorna l'altezza del divisore come segue:

• Mostra divisore: NO
• Altezza: 150 px

Poiché le nostre forme CSS saranno posizionate in modo assoluto, la spaziatura effettiva dell'area della colonna può essere facilmente regolata regolando l'altezza del divisore. Personalmente, l'ho trovato più facile che cercare di manipolare l'altezza o la spaziatura della colonna. Inoltre, ti dà l'ulteriore vantaggio di modellare il divisorio come un ulteriore elemento di design (o forma). Per ora, puoi pensarlo come una tela per i tuoi futuri progetti di forme CSS.

Creazione della prima forma CSS utilizzando le opzioni bordo

Per creare la nostra forma CSS, utilizzeremo un modulo divisore. Tecnicamente, stiamo usando solo i bordi che circondano il modulo, non l'area del modulo. (Quindi potresti usare altri moduli, come moduli di testo o anche moduli di codice).

Per creare la Forma CSS, duplica il modulo divisore già creato in precedenza.

Quindi estrai l'altezza e la larghezza del modulo divisore impostando ciascuno su 0px come segue:

• Larghezza: 0px
• Altezza: 0px

Per la prima forma, creeremo un triangolo rettangolo che punta in alto a destra. Per fare ciò, aggiorna gli stili del bordo del divisore come segue:

• Colore del bordo: rgba (245,44,143,0,5)
• Larghezza bordo superiore: 150 px
• Larghezza bordo sinistro: 150 px
• Colore bordo sinistro: trasparente

Nota: dare al colore del bordo una semitrasparenza aiuterà a rivelare forme sovrapposte per un ulteriore elemento di design.

È anche una buona idea etichettare questo nuovo divisore come "forma 1" per una facile identificazione in seguito.

Poiché aggiungeremo l'animazione di scorrimento alle forme aggiuntive che creeremo, è importante dare a questa forma (e alle forme aggiuntive in questa colonna) una posizione assoluta in modo che si accumulino l'una sull'altra, quindi, hanno il stesso punto di partenza per l'animazione.

Nella scheda Avanzate, cambia la posizione in assoluta e mantieni la posizione della posizione predefinita impostata in alto a destra:

• Posizione: Assoluta
• Posizione posizione: in alto a destra (impostazione predefinita)

NOTA: È importante mantenere la posizione della posizione in alto a destra perché qualsiasi altra posizione che aggiunge una posizione centrata (come in alto al centro o centrata) entrerà in conflitto con le opzioni di trasformazione che aggiungeremo alle forme CSS in seguito.

Congratulazioni per aver creato un triangolo CSS! Anche se questo non è così impressionante in sé e per sé, migliora. Possiamo duplicare questo triangolo per creare tutti i tipi di nuovi design una volta che li spostiamo con l'animazione.

Creazione della forma 2 con l'animazione di scorrimento

Per creare la forma successiva (o triangolo in questo caso), duplica il modulo divisore precedente (forma 1) per aggiungere un triangolo in alto a destra identico che si trova direttamente sopra la forma triangolare precedente.

Quindi etichettalo come "forma 2".

Apri le impostazioni per il divisore "forma 2" e aggiungi il seguente effetto di trasformazione rotante:

• Scorri gli effetti di trasformazione: rotazione
• Abilita rotazione: SI
• Rotazione iniziale: 0° (al 30%)
• Rotazione media: 45° (al 45%)
• Rotazione finale: 90° (al 60%)

Creazione della forma 3 con l'animazione di scorrimento

Duplica il modulo divisore "forma 2" ed etichetta il duplicato "forma 3".

Quindi aggiorna le impostazioni di rotazione della trasformazione come segue:

• Rotazione media: 90°
• Rotazione finale: 180°

Per creare la forma finale (quarta), duplica il modulo divisore della forma 3 ed etichettalo come "forma 4".

Quindi aggiorna le impostazioni di rotazione della trasformazione come segue:

• Rotazione media: 180°
• Rotazione finale: 270°

A questo punto, dovresti vedere una forma quadrata creata dai triangoli sovrapposti e ora ruotati.

Testare l'animazione di scorrimento

Per testare l'animazione di scorrimento di queste forme, aggiungiamo alcuni margini temporanei nella parte superiore e inferiore della sezione. Apri le impostazioni della sezione e aggiorna quanto segue:

• Margine: 80vh in alto, 80vh in basso

Ecco come dovrebbe apparire mentre scorri su e giù per la pagina.

Prima di esplorare nuovi modi per personalizzare queste animazioni di forme, integreremo il nostro design con un titolo fittizio nella colonna di destra. Sentiti libero di saltare questo passaggio se vuoi continuare con i disegni delle forme.

Aggiunta di un titolo fittizio alla colonna di destra (opzionale)

Per aiutarti a darti un'idea di come puoi usare questi disegni di forme animate su una pagina, ho pensato che sarebbe stata una buona idea aggiungere un titolo fittizio alla colonna di destra. Questo sarebbe un ottimo esempio di come completare i titoli delle sezioni della tua pagina con una straordinaria animazione di design utilizzando le forme CSS.

Colonna CSS personalizzata

Prima di aggiungere il titolo, possiamo assicurarci che il testo sia centrato verticalmente all'interno della colonna utilizzando la proprietà display flex. Apri le impostazioni per la colonna 2 e aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
flex-direction:column;
align-items:center;

Una volta che la colonna CSS è a posto, aggiungi un nuovo modulo di testo alla colonna 2.

Quindi apri le impostazioni del testo e aggiorna il contenuto del corpo con un'intestazione h2 come segue:

<h2>elegant design</h2>

Nella scheda Progettazione, aggiorna quanto segue:

• Intestazione 2 Carattere: Poppins
• Intestazione 2 Allineamento del testo: predefinito (desktop), centrale (tablet e telefono)
• Titolo 2: Dimensione testo: 55 px (desktop), 45 px (tablet), 35 px (telefono)
• Larghezza: 100%

Mentre ci siamo, vai avanti e aggiungi il seguente effetto di "movimento orizzontale" di trasformazione a scorrimento al testo come segue:

• Scorri gli effetti di trasformazione: movimento orizzontale
• Abilita movimento orizzontale: S
• Scostamento iniziale: 2 (al 20%)
• Scostamento medio: 1 (al 35%)
• Scostamento finale: -0.6

Quindi apri le schede reattive e aggiorna l'offset finale come segue:

• Scostamento finale (tablet e telefono): 0

Esplorazione delle animazioni della forma del triangolo in alto a destra

Continuando da dove eravamo rimasti prima di aggiungere il testo del titolo, ora possiamo esplorare le possibilità di design/animazione per l'attuale forma del triangolo in alto a destra.

Un modo semplice per farlo è utilizzare la selezione multipla per selezionare tutte e quattro le forme CSS (create con moduli divisori).

Quindi apri le impostazioni per una delle forme per visualizzare il modale delle impostazioni dell'elemento che aggiornerà il design di tutti e quattro i moduli contemporaneamente in modo da poter vedere visivamente i risultati.

Quindi seleziona la scheda di progettazione e apri la scheda di origine della trasformazione. Posiziona la visualizzazione dei livelli modale e le impostazioni degli elementi modali a sinistra in modo da poter vedere le modifiche visivamente in Divi Builder.

Esplorare le animazioni di progettazione di forme CSS del triangolo verso l'alto

Ora che hai la configurazione in atto, puoi esplorare la creazione di nuove forme e vedere come appaiono con le attuali animazioni di scorrimento in atto.

Per questo prossimo esempio, creeremo una forma CSS triangolo verso l'alto (tecnicamente un triangolo isoscele).

Per fare ciò, assicurati di selezionare più volte tutte le forme e aggiornare gli stili del bordo per ciascuna come segue:

• Larghezza bordo destro: 100 px
• Colore bordo destro: trasparente
• Larghezza bordo inferiore: 100 px
• Colore bordo inferiore: rgba (245,44,143,0,5)
• Larghezza bordo sinistro: 100 px
• Colore bordo sinistro: trasparente

Aggiorna Transform Origin per esplorare nuovi design di animazione di scorrimento

Ora che abbiamo una forma/triangolo leggermente nuova in atto, anche l'animazione di rotazione che ne risulta sarà diversa. Per esplorare le diverse possibilità di progettazione dell'animazione di scorrimento, assicurati di mantenere tutte e quattro le forme selezionate utilizzando la selezione multipla, quindi regola l'origine della trasformazione per visualizzare i risultati.

Esplorare le animazioni di progettazione di forme CSS a goccia

A questo punto, dovresti essere in grado di capire come funziona questo processo. Per questo prossimo progetto, creeremo una forma a goccia che può essere eseguita creando un triangolo in basso a destra con un raggio di bordo.

Per fare ciò, assicurati di selezionare più volte tutte le forme e aggiornare gli stili del bordo per ciascuna come segue:

• Angoli arrotondati: 0px in alto a destra, 50% in alto a destra, 50% in basso a destra, 50% in basso a sinistra
• Larghezza bordo inferiore: 150 px
• Colore bordo inferiore: rgba (245,44,143,0,5)
• Larghezza bordo sinistro: 150 px
• Colore bordo sinistro: trasparente

Quindi regola il valore dell'origine della trasformazione per esplorare i progetti di animazione di scorrimento per la lacrima.

Esplorare il settore (o la fetta di pizza) Animazioni CSS Shape Design

A questo punto, dovresti essere in grado di capire come funziona questo processo. Per questo prossimo progetto, creeremo una forma di settore che può essere eseguita creando un triangolo in basso a destra con un raggio di bordo.

Per fare ciò, assicurati di selezionare più volte tutte le forme e aggiornare gli stili del bordo per ciascuna come segue:

• Angoli arrotondati: 0px in alto a destra, 0px in alto a destra, 50% in basso a destra, 50% in basso a sinistra
• Larghezza bordo destro: 75 px
• Colore bordo destro: trasparente
• Larghezza bordo inferiore: 75 px
• Colore bordo inferiore: rgba (245,44,143,0,5)
• Larghezza bordo sinistro: 75 px
• Colore bordo sinistro: trasparente

Quindi regola l'origine della trasformazione per esplorare i diversi progetti di animazione di scorrimento.

Esplorazione delle animazioni di progettazione di forme CSS trapezoidali

Per il nostro design finale della forma CSS, creeremo una forma CSS trapezoidale che può aggiungere ulteriore larghezza a un triangolo verso l'alto (o isoscele).

Per fare ciò, assicurati di selezionare più volte tutte le forme e aggiornare gli stili del bordo per ciascuna come segue:

• Angoli arrotondati: 0px
• Larghezza bordo destro: 100 px
• Colore bordo destro: trasparente
• Larghezza bordo inferiore: 100 px
• Colore bordo inferiore: rgba (245,44,143,0,5)
• Larghezza bordo sinistro: 100 px
• Colore bordo sinistro: trasparente

Quindi aggiorna la larghezza delle forme/moduli come segue:

• Larghezza: 100 px

Con la forma trapezoidale in posizione, puoi ancora una volta utilizzare l'aggiornamento dell'origine della trasformazione per ciascuno per esplorare i nuovi progetti di animazione di scorrimento.

Risultati finali

Diamo un'ultima occhiata ad alcuni dei miei design preferiti che sono possibili utilizzando questo tutorial.

Pensieri finali

Esplorare come creare e animare forme CSS in Divi può essere un ottimo modo per far fluire quei succhi creativi mentre allarghi la tua prospettiva sulla potenza delle capacità di progettazione integrate di Divi. Il trucco è capire come usare i bordi per creare forme diverse. Quindi, puoi aggiungere l'animazione di scorrimento a quelle forme. Ma non dimenticare il potere dell'origine della trasformazione, che cambia il modo in cui queste animazioni posizionano ogni forma. Questa è, ovviamente, la punta dell'iceberg quando pensi a tutte le diverse forme e animazioni che puoi combinare per creare infiniti design creativi per il tuo sito web.

Si spera che questo ti dia alcune idee su come aggiungere la perfetta animazione CSS Shape al tuo sito.

Non vedo l'ora di sentirti nei commenti.

Saluti!