Come creare un modulo di testimonianza appiccicoso in Divi

Rifat Divi Tutorials Apr 21, 2022

Uno degli aspetti più intriganti della progettazione di layout con Divi è la varietà di approcci che possiamo adottare. I moduli con contenuto sono un ottimo esempio. Possiamo utilizzare le loro opzioni di contenuto direttamente o combinarle con altri moduli per produrre dei design davvero unici. Ad esempio, le combinazioni di moduli ci consentono di creare elementi appiccicosi. In questo tutorial, esamineremo come rendere appiccicoso il modulo della testimonianza Divi consentendo allo stesso tempo le informazioni sulla testimonianza di scorrere normalmente in questo tutorial.

Anteprima del design

Ecco un'anteprima di ciò che creeremo. Poiché la versione mobile di questo design non sarà appiccicosa, esporrò solo la versione desktop a scopo di anteprima.

Modello

Come punto di partenza, utilizzerò la pagina di destinazione del pacchetto di layout dei servizi elettrici gratuito di Divi . Puoi vedere le testimonianze in questa pagina, ma sono in uno stile completamente diverso. Per abbinare il nuovo stile, aggiornerò le testimonianze con quelle nuove. Ma lo rinominerò in modo che le impostazioni possano essere mostrate.

Verranno utilizzati due moduli per costruire la testimonianza in questo tutorial. L'immagine, il nome, il titolo di lavoro e l'azienda verranno mostrati utilizzando il modulo testimonial. Userò un modulo di testo per il contenuto della testimonianza. Il modulo di testo continuerà a scorrere normalmente. Fino a quando l'utente non avrà finito di leggere una testimonianza, il modulo della testimonianza rimarrà al suo posto. Quindi, il modulo testimonial potrà scorrere insieme al resto del testo.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Progetta una sezione di testimonianze appiccicose

L'aggiunta di una riga a colonna singola a una nuova sezione è il primo passaggio. Il titolo sarà centrato in questa riga.

Testo del titolo

Ora aggiungi un modulo di testo del titolo su questa nuova riga.

Aprire le impostazioni ed effettuare le seguenti regolazioni.

  • Testo: Titolo 3
  • Contenuto: clienti felici

Impostazioni di progettazione

Nella scheda Progettazione, modifica quanto segue.

  • Allineamento del testo: centrato
  • Carattere: Chakra Petch
  • Peso: grassetto
  • Colore: #000000

E per completare il tutto, scegli una dimensione del carattere di 50 pixel su desktop e tablet e 20 pixel sui dispositivi mobili per il telefono. Salva le modifiche ed esci dalla configurazione del modulo.

  • Dimensioni: Desktop 50px, Tablet 28px, Telefono20px

Prima fila di testimonianze

Successivamente, metti una riga 2/3, 1/3 sotto il titolo. Questa riga includerà la testimonianza iniziale.

Impostazioni di riga

Seleziona la scheda Design e seleziona la casella di controllo Equalizza altezza colonne.

  • Equalizza le altezze delle colonne: Sì

Impostazioni della colonna

Apri le impostazioni della prima colonna insieme alle impostazioni della riga. Seleziona lo Stile bordo superiore dal menu a discesa Stili bordo. La larghezza dovrebbe essere 2px e il colore dovrebbe essere #ffd600. Chiudere la configurazione di riga. Questo aggiungerà una linea gialla sopra la testimonianza, simile a quella che abbiamo sostituito in precedenza.

  • Stili bordo: superiore
  • Colore bordo superiore: #ffd600
  • Larghezza: 2px

Testo Testimonianza

Successivamente, aggiungeremo il modulo di testo che includerà il contenuto della testimonianza. Nella colonna di sinistra, sotto la linea gialla, aggiungi un modulo di testo.

Impostazioni del testo della testimonianza

Successivamente, aggiungeremo il modulo di testo che includerà il contenuto della testimonianza. Nella colonna di sinistra, sotto la linea gialla, aggiungi un modulo di testo.

Inserisci il contenuto della testimonianza nell'editor di contenuti.

Quindi vai alla scheda del design. Seleziona Chakra Petch come stile del carattere. Seleziona Grassetto come peso e Nero come colore. Scegli 30px per il desktop e 14px per il tablet per la dimensione del testo. La configurazione del telefono si sincronizzerà automaticamente con il tablet, quindi non sarà necessario aggiornare nulla. La proprietà Altezza riga di testo deve essere impostata su 2em. Ciò si traduce in una colossale testimonianza stampata che attirerà l'attenzione.

  • Carattere: Chakra Petch
  • Peso: grassetto
  • Colore nero
  • Dimensioni: desktop 30px, tablet 14px
  • Altezza della linea: 2em

Seleziona Centrato dal menu a discesa Allineamento testo. Chiudere la configurazione del modulo di testo.

  • Allineamento: centrato

Impostazioni del modulo Testimonial

Quindi, nella colonna di destra, aggiungi un modulo Testimonial. Questo sarà appiccicoso e includerà il nome dell'individuo, il nome dell'azienda, il titolo di lavoro e la fotografia.

Le impostazioni del contenuto

Inserisci il contenuto della testimonianza nelle impostazioni del modulo. Lascia vuota la sezione Corpo. Ciò è stato ottenuto attraverso l'uso del modulo di testo.

  • Autore
  • Titolo di lavoro
  • Azienda
  • Immagine

Imposta lo sfondo su bianco scorrendo verso il basso.

  • Sfondo: #ffffff

Successivamente, fai clic sull'icona Pin. Questa è la versione appiccicosa dello sfondo. Quando il modulo diventa appiccicoso, lo sfondo cambia colore. Il colore di sfondo dovrebbe essere nero.

  • Colore di sfondo appiccicoso: #000000

Icona di citazione

Quindi vai alla scheda del design. Scegli #ffd600 come colore per l'icona del preventivo.

  • Colore icona preventivo: #ffd600

Immagine

Riduci la larghezza e l'altezza dell'immagine a 150px scorrendo verso il basso. Gli angoli arrotondati devono essere impostati su 0px.

  • Larghezza immagine: 150px
  • Angoli arrotondati: 0px

Testo

Seleziona l'opzione Centrato dal menu a discesa Allineamento testo. Questo inserisce il nome dell'autore, il titolo di lavoro e il nome dell'azienda al centro del testo.

  • Allineamento del testo: centrato

Testo dell'autore

Seleziona Chakra Petch per il carattere e grassetto per il peso e centrato per l'allineamento sotto il testo dell'autore. Seleziona il nero come colore predefinito. Seleziona l'icona Pin e cambia il colore dello sticky in #ffd600. La dimensione del desktop dovrebbe essere impostata su 20px, mentre la dimensione del tablet dovrebbe essere impostata su 14px.

  • Carattere: Chakra Petch
  • Colore del testo normale: nero
  • Colore testo bloccato: #ffd600
  • Dimensioni: desktop 20px, tablet 14px

Posizione del testo

Successivamente, scorri verso il basso fino a Posizione testo. Seleziona Exo come carattere. Scegli il nero come colore del testo predefinito. Per impostare il colore bloccato su bianco, fare clic sull'icona Pin.

  • Carattere: Es
  • Colore del testo normale: #000000
  • Colore testo bloccato: #ffffff

Testo aziendale

Scorri verso il basso fino alla sezione intitolata "Testo aziendale". Seleziona Exo come carattere. Scegli il nero come colore del testo predefinito. Per impostare il colore bloccato su bianco, fare clic sull'icona Pin.

  • Carattere: Es
  • Colore del testo normale: #000000
  • Colore testo bloccato: #ffffff

Box Ombra

Passa alla sezione della casella e seleziona la prima opzione.

  • Box Shadow: prima opzione ombra

Effetto di scorrimento

Infine, vai su Effetti di scorrimento nella scheda Avanzate. Scegli Desktop come Posizione adesiva e Rimani in alto come Posizione adesiva. Compensa la parte superiore adesiva di 50px. Colonizza l'elemento appiccicoso inferiore. Questo istruisce il modulo su come e dove aderire.

  • Posizione appiccicosa: resta in alto
  • Offset superiore appiccicoso: 50 px
  • Elemento appiccicoso inferiore: colonna

Scegli Non attaccare dal simbolo della tavoletta per la posizione appiccicosa. Ciò impedisce al modulo di aderire a tablet e smartphone. Chiudere la configurazione del modulo.

  • Posizione appiccicosa: non attaccare

Ora, mentre scorri lo schermo, il modulo testimonial rimane in alto e cambia colore.

Una volta che il modulo è allineato con il fondo della colonna, scorre in sequenza con la colonna.

Duplica la riga

Successivamente, creeremo la seconda riga copiando e modificando la prima riga. Per duplicare una riga, passaci sopra con il mouse e fai clic sull'icona duplica.

Infine, accedi a ciascun modulo di testo e testimonianza individualmente e sostituisci il contenuto della testimonianza esistente con le nuove informazioni sulla testimonianza. Dopo aver apportato le modifiche necessarie, chiudere i moduli e salvare la pagina. Ripetere il processo di duplicazione per aggiungere altre testimonianze. Ora hai una sezione di testimonianze appiccicose coinvolgente che presenta due testimonianze che si distinguono e hanno un aspetto fantastico.

Progettazione finale

Dopo tutto il trambusto, il nostro design finalmente è così.

Pensieri finali

Questo conclude il nostro esame su come rendere appiccicoso il tuo elemento testimonial Divi . Le impostazioni di Divi consentono di incollare qualsiasi elemento. Quando i moduli vengono combinati, come moduli di testo per i contenuti e moduli di testimonianze per il materiale di supporto, possono essere creati design affascinanti. Le testimonianze che abbiamo incluso qui sono solo un modo per combinare i moduli Divi con impostazioni permanenti.