Come aggiungere l'effetto punto a una colonna in Elementor

Vuoi aggiungere un effetto punto a una colonna in Elementor?

Elementor è perfetto per creare un sito Web, in cui l'accento è posto sul design. In Elementor, puoi aggiungere effetti di animazione per rendere il tuo sito web più interattivo.

Uno degli effetti di animazione che puoi aggiungere a una pagina basata su Elementor è un effetto punto. Puoi aggiungere un effetto punto a una sezione, colonna o widget.

Questo articolo ti mostrerà come aggiungere un punteggio a una colonna in Elementor. A proposito, se non conosci Elementor, puoi fare riferimento al nostro articolo precedente per scoprirlo come installare Elementor.

Come aggiungere l'effetto punto a una colonna in Elementor

In Elementor, la colonna è un elemento obbligatorio. Qui è dove puoi aggiungere i widget, gli elementi di design effettivi per creare la tua pagina. Come con altri tipi di elementi in Elementor, puoi anche personalizzare una colonna per renderla elegante.

È possibile aggiungere uno sfondo a tinta unita, uno sfondo dell'immagine, un'ombra, per l'effetto al passaggio del mouse. L'effetto hover integrato di Elementor ti consente di utilizzare uno sfondo diverso, un bordo diverso e un'ombra esterna diversa quando si punta.

Per iniziare ad aggiungere un effetto punto a una colonna in Elementor, fai prima clic sull'handle della colonna su cui vuoi aggiungere l'effetto punto per passare al pannello delle impostazioni della colonna.

Nel pannello delle impostazioni (pannello sul lato sinistro), vai alla scheda Style e apri il blocco Sfondo. In quest'ultimo, puoi aprire la scheda AU PANORAMICA per impostare uno sfondo diverso sullo stato di puntamento.

È possibile utilizzare uno sfondo a tinta unita, uno sfondo sfumato o uno sfondo immagine. È inoltre possibile impostare la durata della transizione (la transizione dallo stato normale allo stato di puntamento) in l'opzione Durata transizione.

Per impostare un bordo diverso e un'ombra di riquadro diversa sullo stato di puntamento, puoi aprire il blocco Confine. Fare clic sulla scheda PANORAMICA  di quel blocco e impostare lo stile del bordo, la dimensione del bordo, il colore del bordo, il raggio del bordo e l'ombra dell'area per lo stato di puntamento.

Aggiunta di un effetto al passaggio del mouse avanzato a una colonna in Elementor

A differenza di Divi BuilderElementor non usa la trasformazione CSS per il suo effetto al passaggio del mouse. Pertanto, puoi aggiungere solo effetti al passaggio del mouse di base. Ma come Elementor (la versione pro) tu ti permette di aggiungere CSS personalizzati, puoi utilizzare CSS personalizzato per aggiungere la trasformazione CSS per aggiungere un effetto al passaggio del mouse avanzato.

Gli effetti di rollover vengono creati utilizzando la trasformazione CSS. Per aggiungere una trasformazione CSS a una colonna, prima vai a la scheda Avanzate e apri il blocco CSS personalizzato (assicurati che il pannello delle impostazioni sia in modalità pannello delle impostazioni della colonna). Aggiungi il seguente codice CSS.

Il codice :

selettore: hover {transition: all .2s easy-in-out; trasforma: scala (1.1); cursore: punto; indice z: 1; }

• Matrice
• Traduci
• Scala
• Ruota
• storto

Il codice CSS sopra usa la trasformazione della scala. Puoi semplicemente sostituirlo con lo stile di trasformazione che preferisci.

leggere questa pagina per saperne di più sulla trasformazione CSS.

1. Prenotazione del ristorante visivo

Crea il sistema Prenotazioni online del tuo sito web di ristorante o bar, grazie a questo eccellente plugin WordPress premium. Con quest'ultimo avrai la possibilità di creare da solo tavoli e posti a sedere sulla griglia che offre questo plugin e lasciare che i tuoi clienti prenotino quelli gratuiti, questa è la caratteristica principale di questo plugin e ciò che lo distingue dagli altri plugin in questo elenco.

Usando Drag & Drop, puoi trascinare diversi tipi di tavoli sulla griglia del tuo ristorante e calcolare il numero massimo di posti per ogni tavolo, nonché il numero di tavoli. I visitatori del tuo ristorante possono scegli la forma del tavolo che preferisci e la posizione del tavolo rispetto agli altri tavoli nella griglia.

Qui per te Plugin 5 WordPress per ottimizzare le descrizioni e le etichette delle categorie

I clienti del tuo ristorante saranno lieti di fare questa scelta direttamente su Internet invece di viaggiare. Con questo plugin saranno in grado di farsi un'idea di cosa li attenderà oggi.

Offre tra le altre funzionalità: supporto per Drag and Drop, 3 tipi di sistema di prenotazione, una gestione abbastanza intuitiva, completa personalizzazione del suo layout e molto altro.

Download | Demo | Web hosting

• Qual è la differenza tra un blog e un sito web?
• Come copiare e incollare testo in WordPress senza problemi di formattazione
• Benchmarking SEO: analisi competitiva
• 5 plugin di WordPress per accettare pagamenti PayPal