Per personalizzare i widget delle recensioni nella piattaforma EmbedReviews è possibile utilizzare il campo CSS personalizzato e applicare le classi con la modifica dei loro attributi.
Come applicare i Custom CSS?
Ad esempio, se è necessario rendere il titolo più grande di 24px, basta aggiungere la classe .es-title nel campo Custom CSS e digitare font-size:30px.
Ecco una guida passo passo:
Nel pannello delle impostazioni, spostarsi nella casella Custom CSS
Digitare .es-title {font-size:30px;}
Fare clic sul pulsante "Save" in alto a destra
Questo è tutto.
Di seguito è riportato l'elenco delle classi utilizzate in tutti i widget delle recensioni che è possibile aggiungere nel campo CSS personalizzato e modificarne gli attributi di stile.
Classi generali per TUTTI i widget delle recensioni
Per modificare qualsiasi parte del widget delle recensioni, utilizzare il pulsante:
Titolo del widget
Usare la classe .es-title per modificare la dimensione del carattere o il colore del titolo del widget:
.es-title {color: #000000; font-size: 24px;}
Intestazione del widget
Utilizzare l'ID #es-header per modificare l'allineamento del testo dell'intestazione e il margine inferiore:
#es-header{text-align: center; margin-bottom: 50px;}
Rivista box (sfondo e bordo)
Usare la classe es-box per modificare il colore dello sfondo e del bordo dell'area di revisione:
.es-box { background-color: #FFFFFF; padding: 25px; width: 100%; border-radius: 8px; border: 1px solid #D6DAE4; overflow: hidden; position: relative; }
Nome del revisore
Usare la classe .es-username per modificare la dimensione del carattere o il colore del nome del recensore:
.es-username {color: #000000; font-size: 18px; line-height: 25px; word-break: break-word; font-weight: 600; margin-bottom: 15px;}
Foto del recensore
Utilizzare la classe .es-avatar per modificare il raggio del bordo e la posizione della foto del recensore. L'esempio qui sotto è per regolare la foto in modo che appaia come un cerchio. Se è necessario renderla quadrata, basta impostare l'attributo border-radius a 9%:
.es-avatar {border-radius: 50%;}
Utilizzare la classe .avatar-75 per modificare le dimensioni della foto del revisore:
.avatar-75 {larghezza: 75px; altezza: 75px; }
Stelle
Utilizzare la classe .es-stars per modificare il margine o la posizione delle stelle:
.es-stars {margine inferiore:15px;}
Utilizzare la classe .es-stars svg per modificare le dimensioni delle stelle. Ad esempio:
.es-stars svg {altezza:30px; larghezza:30px;}
Revisione del testo
Utilizzare la classe .es-text per modificare la dimensione o il colore del testo della recensione. Se è necessario modificare le dimensioni del testo, è sufficiente aggiungere l'attributo font-size. Ad esempio: font-size:12px (per una dimensione del carattere più piccola) o font-size:20 (per una dimensione del carattere più grande):
.es-text {line-height: 1,5; word-break: break-word; margin-bottom: 20px; color: #000000;font-size:15px;}
Data di revisione
Usare la classe .es-date per modificare la dimensione del carattere e il colore della data di revisione:
.es-date {font-size: 12px; color: #9CA0AC; display: inline-block;}
Logo sorgente
Utilizzare la classe .es-logo per modificare la posizione del logo/icona di origine:
.es-logo { display: inline-block; margin-right: 4px; position: relative; top: 6px; background-repeat: no-repeat; width: 20px; height: 20px; background-size: contain; border-radius: 50%;}
Utilizzare la classe .es-logo svg per modificare le dimensioni dell'icona:
.es-logo svg {larghezza: 20px; altezza: 20px;}
----
Classi CSS per lightbox
Slider lightbox
Nota bene: per modificare qualsiasi elemento dello slider lightbox che abbia la stessa classe del widget, è necessario utilizzare l'id #es-slider e aggiungere accanto a esso la classe che si desidera sia diversa da quella del widget. Ad esempio, per modificare la foto del recensore si può usare la classe #es-lightbox-slider .es-avatar per cambiare la posizione della foto solo nello slider lightbox:
#es-lightbox-slider .es-avatar {margin-bottom: -30px; top: -40px; position: relative; overflow: visible; margin-left: 0; }
Utilizzare .es-lightbox-box per modificare il colore, il raggio del bordo o il padding del popup dello slider:
.es-lightbox-box { position: relative; padding: 0 40px 40px; background-color: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: visible; margin-top: 80px; }
Slider lightbox dimensione foto recensore
Utilizziamo due classi per la foto del recensore: .avatar75 come classe generale e .avatar100 per lo slider lightbox. Quindi, per modificare le dimensioni della foto del recensore nella lightbox, modificare la classe .avatar100:
.avatar-100 { width: 100px; height: 100px; }
Lightbox verticale
Nota bene: per modificare qualsiasi elemento della lightbox verticale che abbia la stessa classe del widget, è necessario utilizzare l'id #es-vertical e aggiungere accanto a esso la classe che si desidera sia diversa da quella del widget.
Utilizzare l'id #es-vertical se si desidera modificare il colore di sfondo:
#es-vertical { background: #FFFFFF;}
Altre classi specifiche per il lightbox verticale sono le seguenti:
Area di valutazione superiore
Usare .es-rating-box per modificare lo sfondo della valutazione, il padding o aggiungere bordi:
.es-rating-box { padding: 30px 20px; }
Barre di avanzamento
Usare .es-bar-stars per modificare il colore delle barre di avanzamento nell'area di valutazione:
.es-bar-stars { background-color: #0081FF; border-radius: 8px; height: 12px; }
Numero di valutazione media
Utilizza la classe .es-rating-number per modificare la dimensione o il colore del numero di valutazione.
Stelle sotto il numero di valutazione
Utilizza la classe .es-rating-stars per modificare il margine o il riempimento di queste stelle.
Se hai domande o hai bisogno di ulteriore assistenza, non esitare a contattarci e chattare con noi o inviarci un'e-mail a support@embedsocial.com
Siamo felici di aiutarti.