Vuoi creare un pulsante mobile con l'indice Z attivato Elementor ?

Siamo sicuri che tu abbia familiarità con il pulsante che appare davanti a tutto il contenuto dello schermo e di solito con una forma circolare e un'icona al centro. Bene, questo è il pulsante di azione mobile.

Il pulsante di azione mobile può attivare un'azione o mandarti a navigare da qualche parte. Come trigger per e-mail, social network, orientamento di Visitatori per iscriversi a un canale e molti altri.

In Elementor, esistono due metodi per creare un pulsante di azione mobile, sono i seguenti:

  • Impostando Z-Indice
  • Creando una finestra popup -Popup-

In questo tutorial ti mostreremo solo come creare un pulsante di azione mobile impostando l'indice Z. E useremo la versione pro per realizzarlo.

Ma prima, scopri: Come installare Elementor su WordPress

Come creare il pulsante di azione mobile in Elementor

Puoi utilizzare la versione gratuita diElementor per creare il pulsante di azione mobile con questo metodo. Tuttavia, devi incollare il pulsante che hai progettato su ogni pagina in cui desideri che il pulsante venga visualizzato sul tuo sito web.

Con Elementor Pro, puoi anche accedere alla funzione CSS personalizzato, che useremo in questo tutorial.

Vai al tuo editor di Elementor; puoi modificare i tuoi contenuti esistenti (pagine, articoli, ecc…) o crearne uno nuovo. In questo tutorial, modificheremo una pagina.

Innanzitutto, crea una nuova sezione con una singola colonna. Seleziona il widget Pulsante e trascinalo nell'area di modifica dal pannello del widget. Quindi cambia il pulsante Testo collegamento. 

In questo tutorial, utilizzeremo il pulsante come trigger per premere il Visitatori per navigare il sito web Elementor. Quindi, sull'opzione allineamento, impostalo su droite et, Infine, cambia il taille del pulsante On Molto largo.

crea un pulsante mobile con indice Z

Come puoi vedere nella GIF sopra, questo pulsante è fermo nella sezione. Successivamente, lo faremo spostare mentre scorriamo mantenendolo nella stessa posizione.

Vai alla scheda avanzato. Nel parametro Disposizione, impostare la larghezza su Inline (auto), definire il posizione su Fisso, definire orientamento orizzontale su droite e regolalo Décalage come desiderato.

crea un pulsante mobile con indice Z

Successivamente, definiremo gli elementi essenziali in questo metodo. Nel campo Z-Index, inserire il numero 9999 renderà il bottone sempre davanti (fluttuante).

crea un pulsante mobile con indice Z

Ora è il momento di ruotare il pulsante di azione mobile. Sempre sotto la scheda avanzato, accedi al classi CSS dal blocco disposizione, allora scrivi rotate dentro.

Vedi anche: Elementor: Presentazione del miglior Page Builder per WordPress

Dopodiché vai al blocco CSS personalizzato , quindi incolla il seguente codice nel campo:

.rotate.rotate
{transform: rotate(90deg);}

Puoi vedere che la manopola ha appena ruotato, ma c'è uno strano spazio tra i lati dello schermo. Quindi, sistemiamolo regolando il Décalage a -92

crea un pulsante mobile con indice Z

Infine, faremo un ultimo piccolo tocco per questo pulsante di azione mobile. Accedi al blocco trasformatore, selezionalo PANORAMICA, accedi all'opzione spostamento e imposta ogni opzione su 7.

crea un pulsante mobile con indice Z

Ci sono diverse opzioni per ottenere una determinata cosa in Elementor. Quando si tratta del pulsante mobile, ci sono due opzioni che puoi utilizzare. Qui abbiamo trattato solo un metodo, l'altro metodo sarà un altro tutorial.

Leggi anche: Elementor: come migrare un sito Web WordPress

Se desideri avere più opzioni di stile, la creazione di un pulsante di azione mobile utilizzando il builder di Popup sarà un'alternativa migliore in quanto avrai opzioni per personalizzare il pulsante e il comportamento, come il tempo di chiusura del pulsante, la durata, l'animazione di ingresso o uscita, ecc. .

Hai appena completato 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.

...