Divi Design Showcase: nuove proposte da giugno 2020

È di nuovo il momento per il nostro Divi Showcase mensile, in cui diamo un'occhiata a dieci fantastici siti Web Divi realizzati dai membri della nostra community. Ogni mese mostriamo i migliori siti web Divi che sono stati inviati dalla nostra community e oggi vogliamo condividere con voi i primi dieci siti web per il mese di giugno. In tutto il post, indicherò alcune delle mie caratteristiche di design preferite che mi attirano in ciascuno dei siti web.

Spero vi piacciano!

Divi Design Showcase: nuove proposte da giugno 2020

1. Preston sorrisi

Questo sito è stato presentato da Christian Mauerer. La sezione dell'eroe mostra il testo animato con un effetto di digitazione utilizzando un carattere di fantasia e un CTA da un lato e il soggetto dell'immagine di sfondo dall'altro. Lo scorrimento rivela un cursore del logo che mostra i media in cui l'azienda è stata vista. Un CTA per i libri mostra i loghi dei negozi online al centro con frecce che puntano ai bordi esterni con le foto dei libri. I libri si spostano verso il centro mentre scorri. Una sezione sul proprietario del sito mostra una grande foto a sinistra e le informazioni a destra. La foto scorre più velocemente mentre scorri la pagina per vedere una galleria di immagini che si sovrappongono. Diverse sezioni includono video in stile. Mi piace soprattutto la sezione delle testimonianze, che mostra una grande immagine del proprietario, testimonianze di Facebook e foto di eventi.

Visita il sito web

2. WebDevXd

Questo sito è stato inviato da Steph di Web Dev Xd. Viene visualizzato un CTA a sinistra con pulsanti rossi su un'immagine di sfondo di una mappa del mondo e una sovrapposizione bianca. Un menu a tutta larghezza si trova sotto questa sezione e si attacca alla parte superiore mentre si scorre. La sezione successiva mostra un esempio di lavoro all'interno di uno schermo di computer da un lato e una descrizione dall'altro, ciascuno utilizzando i colori rosso e bianco di marca. I servizi sono mostrati all'interno di blurb con icone rosse. La sezione dei progetti mostra le immagini che sono impilate. Le immagini si rimpiccioliscono e le immagini nella parte posteriore si spostano ai lati al passaggio del mouse. Una sezione per i risultati finali utilizza uno sfondo rosso con blurbs che mostrano testo e icone in bianco. Il titolo si trova verticalmente a lato. Il piè di pagina mostra un dispositivo di scorrimento del post e diversi widget su uno sfondo rosso.

Visita il sito web

3. Muni

Questo sito è stato presentato da Lethicia Diniz. Utilizza colori blu e verdi e stili di carattere che si abbinano perfettamente al genere. L'intestazione mostra i pulsanti impilati per i CTA. La sezione degli eroi include un'immagine di sfondo con il soggetto da un lato e grandi punti elenco dall'altro. Le planimetrie vengono visualizzate come blocchi di testo con sfondi colorati diversi che vengono ingranditi al passaggio del mouse. Mi piace il CTA a schermo intero costruito con i livelli. Mostra una foto su un lato, un titolo che copre i secondi due terzi, un elenco di vantaggi sull'altro lato e un grande riquadro che si sovrappone agli altri due con uno sfondo blu e motivi con il CTA stesso. Viene visualizzato un dispositivo di scorrimento della testimonianza con un motivo di sfondo all'estrema destra. Il piè di pagina mostra due righe. Il primo ha CTA per leggere di più che sono in diversi colori e dimensioni, informazioni di contatto e quindi la riga in basso visualizza i widget. Le due righe vengono visualizzate su uno sfondo con parallasse.

Visita il sito web

4. SAMCARA

Questo sito è stato presentato da Xavier Ferre. Il menu di navigazione viene visualizzato verticalmente a sinistra e rimane sullo schermo durante lo scorrimento. La sezione eroe mostra il titolo del sito in caratteri enormi seguito da un elenco di servizi e un CTA di contatto cliccabile da un lato e una piccola immagine dall'altro. Le informazioni sono fornite in due grandi schede con diversi colori di sfondo e posizioni dell'immagine. Entrambi si sovrappongono alla sezione successiva che mostra un campo da basket stilizzato più grande dall'alto con un design simile alle prime due carte. Altre carte seguono questo e vengono introdotte con una grande colonna di testo. Questa sezione include un modulo di contatto e un elenco di collaboratori. I post del blog vengono introdotti con una freccia stilizzata che si ingrandisce durante lo scorrimento. La sezione blog conduce anche il lettore nel form di login.

Visita il sito web

5. Assicurazione tampone

Questo sito è stato presentato da Sean Turner. Il sito fa un ottimo uso del colore e delle immagini. La sezione dell'eroe mostra due immagini di sfondo. Il lato più grande ha una sovrapposizione blu e il lato più piccolo ha una sovrapposizione verde. Un'immagine in primo piano è posizionata dove i due si incontrano ed è posta su uno sfondo a forma di scudo. Un CTA è posizionato sull'altro lato. Il primo piano include anche forme in modelli che appaiono in tutto il sito. La sezione successiva mostra i servizi in grandi scatole con gli stessi design. Le due sezioni successive visualizzano i bordi alti su un lato e un'immagine sull'altro in un layout alternato su un'immagine di sfondo con sovrapposizioni bianche o blu. I blurb mostrano proiettili. Le immagini usano lo stesso scudo della sezione degli eroi. Un dispositivo di scorrimento dei post a larghezza intera mostra il titolo e il testo dei post più recenti. Include anche un mega menu con collegamenti testuali.

Visita il sito web

6. Curlee

Questo sito è stato presentato da Anthea A. Ancalade. La sezione dell'eroe mostra un'immagine di sfondo a schermo intero con una casella di ricerca al centro che ti consente di selezionare una posizione o utilizzare la posizione corrente. I servizi vengono visualizzati con immagini che includono titoli e sovrapposizioni accanto a un CTA. Gli stili in primo piano vengono visualizzati all'interno di un dispositivo di scorrimento a 6 colonne e includono un'immagine, un titolo, una valutazione a stelle e una posizione. Il dispositivo di scorrimento include sia la navigazione a freccia che a punti. Facendo clic su uno degli stili si accede alla relativa pagina del prodotto. I nuovi stili vengono visualizzati in 6 colonne, ma senza il cursore. La sezione del blog mostra i due post più recenti e inserisce una riga sotto i post con un collegamento per vedere di più sotto la riga. I tutorial del blog sono disposti in tre colonne e seguono lo stesso design. Include anche un feed Instagram con 6 colonne e 2 righe e un piè di pagina con un modulo di posta elettronica in stile.

Visita il sito web

7. Tipogenia

Questo sito è stato presentato da Eugenia Janakow. Usa un sacco di giallo audace all'interno della grafica. I titoli vengono creati come se fossero stati realizzati con un'etichettatrice, rendendo gli sfondi neri e il testo bianco con un aspetto 3D. Un CTA è posizionato al centro del menu. La sezione degli eroi mostra uno schermo diviso con un CTA a sinistra e un'immagine a destra. Un CTA utilizza una grafica disegnata a mano che si anima durante lo scorrimento e il passaggio del mouse. Le informazioni sul proprietario del sito mostrano un'immagine cerchiata con un CTA per saperne di più. Mi piace particolarmente la sezione testimonianze. Visualizza le recensioni di Google complete di valutazioni a stelle e un'immagine cliccabile che ti porta alla pagina Informazioni. I servizi sono mostrati all'interno di blurbs e includono una grande grafica disegnata a mano. Il blog utilizza il marchio giallo per meta e il modulo di contatto lo utilizza per lo sfondo dell'intera sezione.

Visita il sito web

8. Bushcrafter

Questo sito è stato presentato da Simone Talamo. La sezione dell'eroe mostra un'immagine a schermo intero con il soggetto al centro. Il primo piano mostra uno slogan con un CTA e pulsanti social. Diverse sezioni a tutta larghezza seguono un design simile. Ogni sezione ha un separatore frastagliato che funziona perfettamente per il genere. La sezione successiva visualizza immagini di grandi dimensioni per informazioni con testo e icone nella sovrapposizione. La maggior parte ha sfondi scuri o si fonde con sfondi scuri. Uno per un manuale mostra la copertina del libro insieme al testo. Gli ultimi post del blog visualizzano i post come carte con le ombre della scatola. Il piè di pagina mostra i prodotti con i loro nomi, immagini, valutazioni a stelle e prezzi. Le pagine del corso seguono lo stesso design e aggiungono un timer per il conto alla rovescia e interruttori in stile.

Visita il sito web

9. KWALT digitale

Questo sito è stato presentato da Nicolas Peigner. Questo ha molte animazioni interessanti, testo in stile, grafica e frecce in tutto il sito. Il giallo è usato come colore del marchio ed è usato in modi creativi. La sezione dell'eroe mostra il testo su un lato con un effetto di digitazione. Una barra si trova sotto questo ed elenca i servizi. Sul lato destro ci sono diversi elementi grafici indipendenti che si librano e rispondono al cursore. La sezione successiva mostra un titolo con una grafica animata da un lato e semplici CTA dall'altro. L'ultimo lavoro segue questo e presenta schermate di lavoro su sfondi di diversi colori e motivi. Una sezione che spiega i vantaggi mette da parte i contrassegni con icone a due colori. Un'immagine si trova dall'altra parte e conduce il lettore alla trama. Un semplice cursore di testimonianza è posizionato su uno sfondo grigio scuro per distinguersi.

Visita il sito web

10. Esplora

Questo sito è stato presentato da Ava Charpentier. Usa molte sfumature di abbronzatura per i colori di marca. La barra in alto scompare durante lo scorrimento, il logo si sovrappone all'intestazione e alla sezione dell'eroe e l'intestazione include animazioni al passaggio del mouse. L'immagine principale mostra il titolo, la descrizione e il pulsante per effettuare un ordine. Un'altra immagine viene posizionata come una finestra sull'immagine dell'eroe in vero parallasse. Le informazioni vengono visualizzate con blurb con grafica personalizzata. I prodotti sono mostrati con un colore di sfondo dietro la parte superiore dell'immagine del prodotto. Un design di sfondo simile viene utilizzato per la sezione blog. Un CTA per leggere sull'azienda visualizza il testo su un lato e un'immagine sull'altro. Le testimonianze sono presentate come carte con la citazione in alto su sfondo bianco e il nome in basso su sfondo marrone chiaro. Il sito include anche un feed Instagram e un piè di pagina personalizzato con animazione al passaggio del mouse.

Visita il sito web

In chiusura

Questi sono i nostri 10 migliori invii al sito Web Divi della community per il mese di giugno. Questi siti sono fantastici e come sempre vogliamo ringraziare tutti per i tuoi contributi!

Se desideri che il tuo design venga preso in considerazione, non esitare a inviare un'e-mail al nostro editore a nathan all'indirizzo eleganti temi dot com. Assicurati di inserire nell'oggetto dell'e-mail “DIVI SITE SUBMISSION”.

Ci piacerebbe anche sentirti nei commenti! Dicci cosa ti piace di questi siti web e se c'è qualcosa che hanno fatto vuoi che insegniamo sul blog.

Immagine in evidenza tramite domonku / shutterstock.com