Ti piacerebbe scoprire come ingrandire una scheda profilo con il plug-in per la creazione di pagine Elementor ?

In questo nuovo tutorial Elementor, ti mostreremo come applicare un effetto Zoom su una scheda profilo, rivelando il nome del profilo e le icone dei social network.

Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:

Quindi torniamo al perché siamo qui.

Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.

Creiamo una nuova sezione con una struttura a 3 colonne, poi nel pannello definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.

Sezione a 3 colonne

Aggiungiamo un widget Sezione interna nella colonna centrale. Il widget Sezione Interna è configurato di default con 2 colonne, cancelliamone una. Configuriamo il resto nel pannello modificandolo Hauteur su Altezza minima e Altezza minima impostiamo il cursore su 400.

Aggiungi un widget Sezione interna

Nella scheda Style, modifichiamo il Sovrapposizione di sfondo. Cliquez sur Classico sul tipo di sfondo e seleziona un'immagine dalla libreria e nelle impostazioni dell'immagine, seleziona Centrato Centrato in posizione Coperchio su Taglia. opacità su 1 e

Nella sezione confini clic % ed entra 4 per tutti i raggi di cordolo.

In numero di caselle, imposta il cursore su 0 su Orizzontale, per 70 su Verticale, per 63 su Flou, per all'60 ottobre su diffusore. Dovresti vedere un bellissimo effetto ombra sotto la tua immagine.

in sezione interna far scorrere il Widget del titolo. Come titolo inserisci Steve Jobs, nella scheda Stile, seleziona il colore bianco # FFFFFF. Nella tipografia, seleziona la Dimensione 20.

Quindi seleziona la colonna del Widget Sezione Interna e nella scheda Stile, seleziona il tipo di bordo cliccando su Solido, tutte le larghezze su 1, e i colori su #FFFFFF.

Nella scheda avanzato, cambia i margini in 15 e margini interni su 20.

applica uno Zoom su una mappa con Elementor

Ora inserisci le icone dei social media trascinando il widget Icone dei social media nella sezione Interna.

Modifica i collegamenti ai social media nella scheda Contenuto cliccando su Ogni social network. Se desideri aggiungere altri social network, fai clic sul pulsante Aggiungiehm un elemento

Nel Campo Icone, clicca su Libreria Icone e nella barra di ricerca digita le prime lettere del tuo social network, appena lo trovi selezionalo e clicca sul pulsante Inserisci.

Quindi vai alla scheda Style, nella sezione icona, cambia il colore in personnalisé.

Leggi anche la nostra guida su; Come aggiungere l'impaginazione con Elementor

Sur Colore principale, imposta la trasparenza al minimo.

Sur Colore secondario, seleziona il colore # FFFFFF. In Dimensioni, inserisci 20, Margine interno attivato 0.4.

Ora fai clic sulla scheda avanzato, e nella sezione posizionamento, Cliquez sur personnalisé. su larghezza personalizzata, accedere 0.

Scopri anche Come utilizzare il selettore colore con Elementor

Sur Posizione, selezionare assoluto, su Maiusc 15Su Orientamento verticale choisir Basso;e spostamento su 20.

Selezionare nuovamente il Sezione interna e nella scheda avanzato, nella sezione CSS personalizzato (Se non disponi di questa sezione, esegui rapidamente l'aggiornamento alla versione pro di Elementor per continuare)

Copia e incolla il codice seguente in questa sezione:

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

A priori non dovresti vedere molto, ma se passi il mouse sopra l'immagine dovresti vedere uno zoom applicato all'immagine.

applica uno Zoom su una mappa con Elementor

Ora copia e incolla il codice seguente dopo il codice precedente per mostrare o nascondere alcuni elementi della colonna:

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

Ora non appena passi il mouse sopra l'immagine, lo zoom si applica all'immagine e vengono visualizzati i nomi e le icone dei social network.

applica uno Zoom su una mappa con Elementor

Duplichiamo questa colonna 2 volte ed eliminiamo le altre 2 colonne.

applica uno Zoom su una mappa con Elementor

Cambia l'immagine di sfondo delle Sezioni Interne, così come il nome e i link dei social network.

Ecco qua, hai appena svolto questo compito facilmente. Visualizza in anteprima il lavoro del tuo tablet e smartphone, cercando di modificare i margini in modo che corrispondano a ciascun dispositivo.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come applicare un effetto Zoom su una scheda profilo. 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.

...