Card Custom

Card con sfondo via Group Control Background, overlay differenziato normal/hover, numero, titolo e sottotitolo. All’hover: animazione cerchio e linea — tutto configurabile dal pannello Elementor senza toccare CSS.

Una card che si ricorda

Non una card statica. Sfondo dinamico, overlay separati per normal e hover, animazione cerchio e linea al passaggio del mouse — tutto controllato dall’editor Elementor.

Background via Group Control

Il background della card usa il Group Control Background nativo di Elementor: colore piatto, gradiente o immagine. Nessun campo personalizzato — la stessa interfaccia che già conosci.

Overlay doppio normal / hover

Colore overlay separato per lo stato normale e per lo stato hover tramite ::after e ::before. Puoi schiarire, scurire o cambiare tinta al passaggio del mouse.

Cerchio + linea animati

All'hover compare un cerchio decorativo nell'angolo e una linea orizzontale sotto il contenuto. Colore e dimensione configurabili dal pannello Style → Hover, senza CSS aggiuntivo.

Numero, titolo, sottotitolo

Tre livelli di testo: numero opzionale (per sequenze o categorie), titolo e sottotitolo. Tipografia e colore configurabili separatamente per ciascuno.

Intera card cliccabile

Il link avvolge tutta la card tramite il controllo URL nativo di Elementor. Supporta link interno, esterno con target="_blank" e attributo nofollow.

Altezza e border radius responsive

Altezza card configurabile in px o % con controllo responsive (desktop, tablet, mobile separati). Border radius lato per lato tramite controllo Dimensions.

Pronto in 4 passi

Installa il plugin

Carica la cartella in /wp-content/plugins/ e attivalo dal pannello WordPress.

Trascina il widget

Cerca "Card" nel pannello widget Elementor — la card appare nella categoria dc_cat. Trascina nel layout. Viene creata con titolo e sottotitolo di default.

Imposta background e overlay

Nel pannello Content scegli background (colore, gradiente o immagine). Nel pannello Style → Card imposta il colore overlay per lo stato Normal e per Hover separatamente.

Personalizza cerchio e linea

Dal pannello Style → Hover imposta il colore del cerchio decorativo e della linea. Aggiungi il link nel pannello Content per rendere la card cliccabile.

Hai bisogno di una funzionalità su misura?

Il codice sorgente è disponibile nel repository dei widget Elementor custom. Libero da usare, modificare e integrare nei tuoi progetti.