Per un certo tipo di attività come un servizio di fotoritocco, l'aggiunta di un confronto di immagini può essere uno strumento utile per descrivere il tuo servizio. Puoi aggiungere il confronto delle immagini alla home page, alla landing page o a qualsiasi pagina in cui parli del servizio che offri.
Elementor infatti non offre alcun widget o funzionalità per aggiungere il confronto delle immagini, ma puoi ottenerlo utilizzando un componente aggiuntivo. Ci sono moduli aggiuntivi Elementor che offrono un widget per aggiungere un confronto di immagini. Tre di questi sono: Componenti aggiuntivi essenziali, Buon Addon;e JetElements.
In questo articolo ti mostreremo come aggiungere il confronto delle immagini Elementor utilizzando JetElements.
JetElements di per sé è un componente aggiuntivo premium per Elementor sviluppato da Crocoblock. Fa parte della famiglia JetPlugins. Il componente aggiuntivo viene fornito con un widget chiamato Immagini di confronto che puoi utilizzare per aggiungere il confronto delle immagini alla pagina di Elementor.
Come aggiungere il confronto delle immagini in Elementor
Assicurati di aver installato e attivato il componente aggiuntivo JetElements prima di iniziare. Se non conosci Elementor, puoi leggere il nostro articolo precedente per imparare come usare Elementor.
Aggiungeremo direttamente il widget Immagini di confronto in questo articolo.
Prima di iniziare, puoi preparare due immagini da confrontare. Ad esempio, puoi preparare un'immagine precedente e un'immagine successiva. Quando sei pronto, trascina semplicemente il widget Immagini di confronto nella casella di modifica di Elementor.
Per impostazione predefinita, il widget di confronto immagini di JetElements crea due confronti di immagini. Se hai solo bisogno di creare un confronto di immagini (due immagini da confrontare), puoi eliminare uno dei confronti di immagini esistenti.
Leggi anche: Elementor: come aggiungere l'animazione di Lottie
Per aggiungere l'immagine prima e dopo, apri il confronto delle immagini esistente (facendo clic su di esso) per modificare il file contenuto. Seleziona semplicemente l'immagine precedente sul file prima dell'immagine sezione e selezionare l'immagine dopo il dopo l'immagine sezione. Come puoi vedere, puoi anche sovrascrivere le etichette per ogni sezione.
Una volta completata la selezione delle immagini, è possibile aprire il blocco Impostazioni profilo per impostare la posizione iniziale del separatore. Se desideri aggiungere più di un confronto di immagini, puoi impostare le impostazioni del carosello.
Quindi puoi definire lo stile del confronto delle immagini passando alla scheda Style. Puoi aprire cinque blocchi di regolazione per definire lo stile del confronto delle immagini. Ma se hai solo bisogno di aggiungere un confronto di immagini, devi solo aprire i primi tre blocchi.
- generale
Puoi aprire questo blocco per impostare il riempimento, l'ombra del riquadro, il tipo di bordo e il raggio del bordo.
- Discografica
Puoi aprire questo blocco per stilizzare le etichette di confronto (l'etichetta "prima" e "dopo"). Puoi impostare cose come allineamento orizzontale, allineamento verticale, colore del testo, colore di sfondo, tipografia (famiglia di caratteri, stile del carattere, dimensione del carattere), ecc...
- Handle
Puoi aprire questo blocco per modellare la maniglia. Puoi impostare cose come l'allineamento della maniglia, la larghezza del controllo, l'altezza del controllo, il colore della maniglia (sia in stato normale che al passaggio del mouse) e così via.
Se aggiungi più di un confronto di immagini, puoi anche aprire i blocchi Frecce del carosello et Punti del carosello per definire lo stile di frecce e punti di navigazione.
Questo è tutto. È possibile fare clic sul pulsante PUBBLICARE / AGGIORNARE per Pubblicare /modifica la tua pagina una volta che hai finito di modificarla.
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come aggiungi il confronto delle immagini in Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
