Crea gruppi di stack di immagini nel tuo sito Web Elementor utilizzando i componenti aggiuntivi Happy

Hai notato i fantasiosi gruppi di immagini sui siti Web al giorno d'oggi? Allora non sei solo. A causa della bella rappresentazione di più immagini che conferisce a qualsiasi sito Web un aspetto moderno, i gruppi di stack di immagini sono diventati sempre più popolari negli ultimi tempi.

Questo design elegante si adatta perfettamente alla home page, alle informazioni sulla pagina o anche a una pagina di destinazione incentrata sulla conversione. Quindi, se desideri visualizzare le tue immagini in modo bello e semplice, il gruppo stack di immagini è sicuramente un'ottima scelta. Soprattutto se stai usando Elementor, Happy Addons ti rende estremamente facile aggiungere un tale gruppo di immagini.

Questo è un tutorial passo-passo interattivo e intuitivo su come creare un gruppo di stack di immagini in modo da poter creare facilmente stack di immagini da solo.

Iniziamo!

Widget del gruppo dello stack di immagini di Happy Addons a colpo d'occhio

Se vuoi rendere le immagini del tuo sito web più attraenti per i tuoi visitatori, prova il nuovo widget Image Stack Group di Happy Addon. Con questo esclusivo widget gratuito, puoi facilmente creare immagini di gruppo impilate all'interno di Elementor.

È difficile visualizzare le immagini del tuo sito Web in un gruppo di stack, anche se utilizzi l'editor drag and drop di Elementor. Devi aggiungere codice CSS e JavaScript personalizzato per progettare questo tipo di elemento in Elementor. Ci vuole molto tempo prezioso per completare l'intero progetto. Potrebbe anche essere necessario assumere uno sviluppatore per completare correttamente il progetto.

Ma se usi il widget Happy Addons, puoi semplicemente realizzare questo tipo di progettazione di immagini interattive in meno di un minuto senza pagare un centesimo. Puoi visualizzare le immagini dei membri del tuo team, dei canali social e di altre immagini/icone in modo più organizzato.

Come utilizzare il widget del gruppo di immagini per creare un gruppo di immagini

In questa parte del nostro articolo, ti mostreremo come utilizzare il widget Image Stack Group per creare uno straordinario gruppo di immagini.

Prima di iniziare, devi avere i seguenti plugin sul tuo sito web:

• Elementor (gratuito)
• Componenti aggiuntivi felici (gratuiti)

Se non conosci Elementor, segui questa pratica guida e impara come utilizzare Elementor (Guida passo passo per principianti).

Passaggio 1: aggiungi il widget del gruppo di stack di immagini

Innanzitutto, devi aggiungere il widget nella posizione adatta del tuo sito web. Qui, mostreremo i nostri account social nell'area del piè di pagina del nostro sito Web utilizzando questo strumento avanzato.

Puoi digitare " gruppo di immagini " nel campo di ricerca, quindi trascinarlo nella posizione corretta del sito.

Passaggio 2: gestisci il contenuto

Qui, gestiremo il contenuto del widget.

Aggiungi elementi e imposta il loro allineamento

Dopo aver aggiunto il widget, vedrai l'interfaccia come l'immagine qui sotto. In Contenuto > Elementi , puoi aggiungere e rimuovere elementi. Inoltre, puoi copiare un elemento.

È possibile impostare l' allineamento dell'intero contenuto.

Aggiungi immagini/icone all'elemento

È necessario aprire un singolo elemento per aggiungere il contenuto. Fare clic sull'elemento prima, quindi scegliere il tipo di supporto . È possibile utilizzare un'immagine o un'icona . Qui mostreremo i nostri account social usando le icone. Segui questa immagine qui sotto per aggiungere un'icona.

Aggiungi descrizione comando e imposta posizione

Puoi scrivere una descrizione comando per l'icona e impostare la posizione della descrizione comando.

Inserisci link e cambia colore icona

Puoi inserire un link e cambiare il colore dell'icona. Segui l'immagine qui sotto per farlo.

Cambia il colore di sfondo e bordo

Scegli il Tipo di sfondo come Classico e Gradiente in base alle tue esigenze. Qui, abbiamo impostato il Colore di sfondo predefinito e cambiato il Colore del bordo .

Passaggio 3: aggiungi altri elementi

Dopo aver aggiunto il contenuto di un singolo elemento, abbiamo anche aggiunto altri tre elementi e il relativo contenuto seguendo la procedura sopra.

Passaggio 4: personalizza il design

Personalizziamo il design utilizzando le opzioni di stile.

Immagini/icone di stile

In Stile > Immagine/Icona , puoi personalizzare il design dell'immagine/icona a modo tuo. Qui puoi impostare la dimensione dell'elemento, la dimensione dell'icona, la spaziatura, la dimensione del bordo, il colore del bordo e il raggio del bordo in base ai tuoi scopi di progettazione. Puoi anche definire il colore dell'icona globale, il tipo di sfondo e l' ombra del riquadro .

Descrizione comando stile

Puoi dare uno stile alla descrizione comando qui nell'area stile. Qui puoi impostare la posizione globale della descrizione comando . Inoltre, puoi aggiungere riempimento e raggio del bordo al suggerimento. E imposta Tipografia, Colore, Colore di sfondo e Ombra riquadro del suggerimento.

Passaggio 5: controlla l'anteprima del design

Dopo aver personalizzato il design, puoi vedere l'output finale di Image Stack Group. La nostra anteprima assomiglia all'immagine animata sotto, che è proprio come la volevamo.

Leggi la documentazione completa di Image Stack Group Widget.

Puoi anche guardare questo pratico tutorial video del widget Image Stack Group.

Alcuni widget di immagini più felici che puoi usare

Ecco alcuni altri widget avanzati relativi alle immagini che potresti utilizzare anche per decorare il tuo sito web.

Confronta immagini (gratuito)

Alla ricerca di uno strumento utile per confrontare un'immagine all'interno di una diapositiva prima e dopo. Prova il nuovo widget Confronta immagini di Happy Addons. Con questo widget gratuito, puoi mostrare le immagini del tuo sito Web nelle diapositive prima e dopo per un confronto migliore.

Controlla il widget Documentazione del confronto delle immagini.

Fisarmonica di immagini (gratuita)

Il widget Image Accordion di Happy Addons ti consente di progettare bellissime fisarmoniche utilizzando le immagini per il tuo sito Web Elementor. Viene fornito con una serie di bellissimi design facili da usare e completamente personalizzabili. Proviamo ora questo utile widget.

Controlla il widget Documentazione della fisarmonica di immagini per sapere come usarlo.

Griglia immagine (gratuita)

Vuoi mostrare le immagini del tuo sito Web in un layout a griglia in Elementor? Dai un'occhiata al widget Griglia di immagini di Happy Addons. Questo strumento ti consente di progettare una griglia di immagini interattiva in pochi minuti. Puoi utilizzare questo widget per creare una galleria di immagini, un portfolio e altro.

Leggi il widget Documentazione della griglia di immagini e impara come usarlo nel modo giusto.

Effetto passaggio immagine (gratuito)

Image Hover Effect è anche un fantastico widget che ti consente di aggiungere effetti al passaggio del mouse alle immagini del tuo sito web. Viene fornito con oltre 20 straordinari effetti al passaggio del mouse facili da implementare. Dai un'occhiata a questo strumento gratuito per rendere la tua immagine più redditizia.

Leggi la documentazione del widget Effetto al passaggio dell'immagine.

Immagine a scorrimento (Pro)

Se vuoi mostrare i loghi dei tuoi clienti, i membri del team e altre immagini in stile orizzontale e verticale, puoi utilizzare il widget Immagine a scorrimento di Happy Addons. Questo strumento facile da usare viene fornito con diversi design completamente flessibili. Provalo ora e rendi il tuo sito web più coinvolgente.

Segui la documentazione completa del widget Scrolling Image.

Scorrimento immagine singola (Pro)

Vuoi presentare un'immagine lunga al tuo sito Web Elemntor e cercare lo strumento giusto per farlo? Dai un'occhiata al nuovo widget Scorrimento immagine singola di Happy Addons che ti consente di visualizzare immagini di grandi dimensioni in stili diversi.

Consulta la documentazione del widget Scorrimento immagine singola.

Conclusione

L'uso perfetto delle immagini rende il tuo sito web più interattivo e facile da usare. Ecco perché dovresti usare lo strumento giusto per gestire le immagini del tuo sito web.

In questo blog, abbiamo discusso del widget Image Stack Group e di come utilizzarlo correttamente. Abbiamo anche introdotto altri utili widget relativi alle immagini di Happy Addons che puoi utilizzare anche per decorare il tuo sito web.

Se hai domande su questo blog, puoi scriverci nella casella dei commenti qui sotto. E non dimenticare di condividere questo post sui tuoi canali social e iscriviti alla nostra newsletter per ottenere tutorial più pratici su WordPress ed Elementor.