Scarica un Client Showcase GRATUITO e avanzato Hover/Click Design per Divi

Pubblicato: 2019-09-26

Le persone si relazionano con altre persone. Ecco perché su quasi tutti i siti web che visiti, vedrai apparire dei volti. Dai clienti precedenti ai membri del team e altro ancora; prima mostri ai clienti e alle persone che stanno dietro la tua azienda, maggiori sono le tue possibilità di convincerli che la tua azienda, il marchio o il prodotto sono la soluzione giusta. In questo post, ci concentreremo sulla presentazione dei tuoi clienti in un modo bello e avanzato. Potrai anche scaricare gratuitamente il file JSON!

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

vetrina cliente

Mobile

vetrina cliente

Scarica GRATUITAMENTE The Client Showcase Hover/Click Design

Per mettere le mani sul design hover/click della vetrina client gratuita, dovrai prima scaricarlo utilizzando il pulsante qui sotto. 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

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.

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!

Iniziamo a ricreare!

Aggiungi nuova sezione

La prima cosa che devi fare è aggiungere una nuova sezione normale alla pagina su cui stai lavorando.

vetrina cliente

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

vetrina cliente

Dimensionamento

Prima di aggiungere qualsiasi modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

  • Usa larghezza grondaia personalizzata: Sì
  • Larghezza grondaia: 1
  • Equalizza le altezze delle colonne: Sì
  • Larghezza: 100%
  • Larghezza massima: 100%

vetrina cliente

Spaziatura

Rimuovi l'imbottitura superiore e inferiore predefinita della riga successiva.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px

vetrina cliente

Impostazioni colonna 2

Continua aprendo le impostazioni della seconda colonna.

vetrina cliente

Spaziatura

Aggiungi alcuni valori di riempimento personalizzati alla colonna.

  • Imbottitura superiore: 9vw
  • Imbottitura inferiore: 9vw
  • Imbottitura sinistra: 8vw
  • Imbottitura destra: 8vw

vetrina cliente

Aggiungi modulo di testo alla colonna 1

Aggiungi H3 e contenuto del paragrafo

Una volta completate le impostazioni di riga e colonna, continua aggiungendo un modulo di testo alla colonna 1. Aggiungi le informazioni sul cliente alla casella del contenuto.

vetrina cliente

Sfondo sfumato

Vai alle impostazioni dello sfondo e applica il seguente sfondo sfumato:

  • Colore 1: RGB (43,135,218,0)
  • Colore 2: rgba(0,0,0,0.55)
  • Posiziona il gradiente sopra l'immagine di sfondo: Sì

vetrina cliente

Immagine di sfondo

Carica anche un'immagine di sfondo.

vetrina cliente

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

  • Carattere del testo: Lato
  • Colore del testo: #dbdbdb
  • Dimensione del testo: 1vw (desktop), 1.8vw (tablet), 2.3vw (telefono)
  • Altezza riga di testo: 1,5 vw (desktop), 2 vw (tablet), 2,5 vw (telefono)

vetrina cliente

Intestazione 3 Impostazioni testo

Apporta anche alcune modifiche alle impostazioni del testo di H3.

  • Intestazione 3 Carattere: Display Playfair
  • Intestazione 3 Peso del carattere: grassetto
  • Colore testo titolo 3: #ffffff
  • Intestazione 3 Dimensioni testo: 3vw (desktop), 4vw (tablet), 5vw (telefono)
  • Intestazione 3 Altezza riga: 1.6em

vetrina cliente

Spaziatura

Continua andando alle impostazioni di spaziatura e modellando la forma e la posizione del modulo di conseguenza:

  • Margine superiore: 9vw
  • Margine inferiore: 9vw
  • Margine sinistro: 7vw (desktop), 16vw (tablet), 17vw (telefono)
  • Margine destro: 7vw (desktop), 16vw (tablet), 17vw (telefono)
  • Imbottitura superiore: 32vw (desktop), 55vw (tablet), 49vw (telefono)
  • Imbottitura inferiore: 3vw (desktop), 6vw (tablet e telefono)
  • Imbottitura sinistra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)
  • Imbottitura destra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)

vetrina cliente

Scatola ombra

Stiamo anche aggiungendo un'ombra colorata a scatola.

  • Posizione orizzontale dell'ombra del riquadro: 0px
  • Posizione verticale dell'ombra del riquadro: 0px
  • Forza di diffusione dell'ombra della scatola: 7vw
  • Colore ombra: #ffcf0f

vetrina cliente

ID CSS

Completa le impostazioni del modulo aggiungendo un ID CSS.

  • ID CSS: display-foto-1

vetrina cliente

Clona modulo testo cinque volte

Una volta completato il primo modulo di testo, vai avanti e clonalo 5 volte.

vetrina cliente

Cambia contenuto e immagine di sfondo di ogni duplicato

Modifica il contenuto e l'immagine di sfondo in ogni duplicato.

vetrina cliente

Cambia il colore dell'ombra della casella di ogni duplicato

Insieme all'ombra della scatola.

  • Colore ombra: #9f89ed

vetrina cliente

Modifica l'ID CSS di ogni duplicato e aggiungi classe CSS

Ciascun modulo di testo nella colonna 1 necessita di un ID CSS univoco. Il primo modulo di testo nella colonna contiene l'ID CSS 'photo-display-1', il secondo necessita di 'photo-display-2', il terzo 'photo-display-3' e così via. Aggiungi anche una classe CSS a ciascun modulo di testo duplicato (assicurati di non aggiungerne uno al modulo di testo originale).

  • ID CSS: photo-display-2 (da 2 a 6)
  • Classe CSS: photo-hide-first (ogni modulo di testo nella colonna 1 tranne il primo)

vetrina cliente

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H2

Dopo aver completato tutti e 6 i moduli nella colonna 1, puoi passare alla seconda colonna. Lì, il primo modulo di cui avremo bisogno è un modulo di testo con alcuni contenuti H2.

vetrina cliente

Impostazioni testo H2

Vai alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:

  • Intestazione 2 Carattere: Display Playfair
  • Colore testo titolo 2: #636363
  • Titolo 2: Dimensione testo: 3vw (desktop), 6vw (tablet e telefono)
  • Intestazione 2 Spaziatura lettere: 0.1vw
  • Altezza riga intestazione 2: 1.2em

vetrina cliente

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo alla colonna 2 con alcuni contenuti del paragrafo a tua scelta.

vetrina cliente

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

  • Carattere del testo: Lato
  • Allineamento del testo: giustifica
  • Dimensione del testo: 0.9vw (desktop), 2vw (tablet), 2.7vw (telefono)
  • Altezza riga di testo: 2.1em

vetrina cliente

Spaziatura

Modifica anche i valori dei margini nelle impostazioni di spaziatura.

  • Margine superiore: 2vw
  • Margine inferiore: 2vw
  • Margine destro: 7vw

vetrina cliente

Aggiungi modulo divisore alla colonna 2

Visibilità

Al modulo successivo, che è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

  • Mostra divisore: Sì

vetrina cliente

Linea

Passa alla scheda Design e cambia il colore della linea.

  • Colore linea: #636363

vetrina cliente

Spaziatura

Successivamente, modifica i valori dei margini tra le diverse dimensioni dello schermo.

  • Margine inferiore: 7vw
  • Margine sinistro: 14vw (desktop), 39vw (tablet), 38vw (telefono)
  • Margine destro: 14vw (desktop), 39vw (tablet), 38vw (telefono)

vetrina cliente

Trasforma Ruota

Ruota il modulo divisore.

  • Sinistra: 90 gradi

vetrina cliente

Trasforma Traduci

E riposizionalo utilizzando alcuni valori di conversione di trasformazione personalizzati su diverse dimensioni dello schermo.

  • Destra: 2vw (desktop), 3vw (tablet e telefono)
  • In basso: -17.3vw (desktop), -43vw (tablet e telefono)

vetrina cliente

Aggiungi il modulo di testo n. 3 alla colonna 2

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno è un altro modulo di testo. Assicurati di aggiungere il nome del cliente corrispondente alla casella del contenuto (associalo al primo modulo di testo nella colonna 1).

vetrina cliente

Impostazioni testo

Passa alla scheda Progettazione e modifica le impostazioni del testo di conseguenza:

  • Carattere del testo: Lato
  • Stile del carattere del testo: maiuscolo
  • Dimensione del testo: 1.3vw (desktop), 2.5vw (tablet), 3vw (telefono)
  • Spaziatura delle lettere del testo: 1px
  • Altezza riga di testo: 1.2em

vetrina cliente

Spaziatura

Aggiungi successivamente un margine superiore e inferiore personalizzato.

  • Margine superiore: 1em
  • Margine inferiore: 1em

vetrina cliente

ID CSS

Passa alla scheda Design e aggiungi un ID CSS. Assicurati che il numero sia lo stesso del modulo di testo corrispondente nella colonna 1.

  • ID CSS: foto-clic-1

vetrina cliente

Clona il modulo di testo n. 3 cinque volte

Una volta completato il primo modulo di testo client, clonalo 5 volte.

vetrina cliente

Modifica il contenuto di ogni duplicato (corrisponde ai moduli di testo nella colonna 1)

Modificare il nome del cliente in ogni modulo di testo duplicato.

vetrina cliente

Cambia l'ID CSS di ogni duplicato

E abbina l'ID CSS di ogni duplicato con il modulo di testo nella colonna 1.

  • ID CSS: photo-click-2 (da 2 a 6)

vetrina cliente

Aggiungi il modulo di codice n. 1 alla colonna 2

Inserisci codice CSS

L'ultima parte di questo tutorial si concentra sul funzionamento della funzionalità al passaggio del mouse. Aggiungi un primo modulo di codice alla colonna 2 e inserisci le seguenti righe di codice CSS: 

<style>
.photo-hide-first {
display: none;
}
</style>

vetrina cliente

Aggiungi il modulo di codice n. 2 alla colonna 2

Inserisci codice JQuery

Aggiungi un altro modulo di codice proprio sotto il precedente e inserisci il seguente codice jQuery per far funzionare la funzione hover: 

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

vetrina cliente

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

vetrina cliente

Mobile

vetrina cliente

Pensieri finali

In questo post, ti abbiamo mostrato come creare una bella vetrina per i clienti che puoi utilizzare su qualsiasi sito web che crei. Abbiamo combinato le opzioni integrate di Divi con del codice jQuery per far funzionare l'approccio. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.