Utilizzando il widget Call To Action di Elementor Pro può succedere di trovarsi nella situazione di avere due o più widget affiancati orizzontalmente ma con altezze diverse. Questo è causato dalla differente quantità di testo inserita nei titoli o nelle descrizioni del widget.
È possibile sistemare questo problema ricorrendo a del codice CSS. In questo video ti mostro come fare:
Questo è il codice CSS che ho utilizzato nel video:
selector .elementor-cta {
height: 100%;
display: flex;
flex-direction: column;
}
selector .elementor-cta__content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-start;
}
selector .elementor-cta__button-wrapper {
margin-top: auto;
}
Trascrizione del video
In questo video ti mostro come risolvere un problema che potrebbe succedere utilizzando il widget ‘Call To Action’ di Elementor Pro. In pratica, creando diversi widget ‘Call To Action’ con una diversa quantità di testo, potresti trovarti in una situazione di questo tipo, nella quale i widget hanno tre altezze diverse. Noi vogliamo ottenere invece una cosa di questo tipo: ossia, anche se l’altezza del testo è diversa, tutti e tre i widget presentano la stessa altezza. In questo video ti mostrerò come fare, senza utilizzare alcun plugin aggiuntivo, ma semplicemente con del codice CSS.
Sottolineo anche un’altra cosa: questo problema capita con il widget ‘Call To Action’, non capita invece con il widget ‘Riquadro Immagine’. Infatti, qui vedi che ho utilizzato tre widget ‘Riquadro Immagine’ con quantità di testo diverse, ma la pagina non ha questo problema perché i singoli widget hanno la stessa altezza. Con il widget ‘Call To Action’, invece, non è così, perché se pubblico utilizzando testi diversi o altezze diverse, si presenta il problema.
Vediamo quindi, partendo da zero, come andare a risolvere questo problema. Prima di iniziare, ti faccio notare che nell’esempio che andrò a creare in questo video, utilizzo la funzione Contenitore Flexbox di Elementor, che è una delle ultime novità introdotte da Elementor. Quindi, non vado ad utilizzare le vecchie sezioni, le vecchie colonne eccetera, ma utilizzo il ‘Contenitore Flexbox’ di Elementor.
Per attivarlo, basta andare in Elementor, selezionare ‘Impostazioni’, poi ‘Caratteristiche’, e sotto la voce ‘Contenitore Flexbox’, scegliere di attivare e poi salvare le impostazioni. Una volta fatto, partiamo dalla nostra pagina bianca su Elementor e vado a creare una prima sezione, un primo contenitore. Quindi, clicco su ‘+’, scelgo ‘Contenitore Flexbox’ orientato in direzione riga, e all’interno di questo contenitore vado ad inserire la ‘Call To Action’.
Un vantaggio del contenitore flexbox è che, mentre in passato dovevo creare una sezione, poi mettere tre colonne, e in ogni colonna mettere il widget ‘Call To Action’, ora posso tranquillamente trascinare il widget ‘Call To Action’ direttamente all’interno del mio contenitore e poi lo vado a duplicare. Così facendo, vedi che ho tre contenitori.
Ora che li abbiamo inseriti, ti mostro un piccolo intervento da fare in ottica responsive, perché Elementor, per impostazione predefinita, non va a capo all’interno di un contenitore flexbox. Questo significa che io, andando a duplicare ulteriori contenitori, vedo che continuano ad aggiungersi, però diventando incredibilmente stretti e quindi molto brutti da vedere. Li vado a eliminare e ti mostro come gestire a livello responsive la dimensione di ogni singolo contenitore.
Il primo intervento da fare è: mi posiziono sul primo contenitore, vado in avanzato e, come larghezza, scelgo volendo tre colonne, dimensione personalizzata al 25 percento. Poi, come dimensione, scelgo ‘cresci’, quindi attivo la proprietà ‘Flex Grow’ che permette appunto al contenitore di crescere andare a occupare lo spazio, mantenendo però la base partendo dal 25 percento di spazio occupato. Ora vado a replicare queste impostazioni anche sugli altri e vedi che, così facendo, i contenitori sono allineati.
Andiamo a vedere anche in ottica responsive. Quindi, vado su tablet: tre contenitori. Su mobile, non mi sta bene perché voglio invece che il contenitore prenda tutta la riga. Quindi, torno qua, sul primo widget flexbox, nel caso del mobile, scelgo larghezza al 100% e vado a replicare la stessa impostazione anche per gli altri due. Così vedi, ho la possibilità di gestire gli allineamenti in ottica responsive.
Rimane solo un piccolo intervento da effettuare, ossia andare qua, nell’impostazione del contenitore, e attivare questa voce ‘Wrap’, in modo che i contenitori vadano a capo. Così facendo, se io dovessi andare a duplicare a crearne uno nuovo, vedi che in automatico vanno a capo e rimane preservato l’impostazione, quindi non vanno ad accumularsi in orizzontale, restringendo i vari spazi. Ora, questi qua sotto non mi servono, quindi li vado a eliminare.
Una volta sistemata la struttura responsive delle mie tre colture affiancate, andiamo a personalizzarle. Quindi, comincio a caricare l’immagine. Quindi, vado qua a pescare le varie immagini. L’intestazione la mantengo uguale, però vado a personalizzare il testo delle varie descrizioni, le vado ad aggiungere anche qua e anche nella terza. La differenza però è che qua, nella seconda, vado ad accorciarla e anche qua la vado ad accorciare, ma un pochino meno.
In questo modo, ho tre widget ‘Call To Action’ di diversa altezza. Quindi vado ad aggiornare e ad aprire in una scheda, qua a fianco la pagina, così ho la possibilità di vedere, senza avere Elementor tra le scatole, come appare la pagina ai miei visitatori.
Come puoi vedere, è abbastanza evidente il problema: tre widget ‘Call To Action’, tutti e tre con altezze differenti. Prima di procedere all’intervento, voglio suggerirti una piccola modifica ai widget ‘Call To Action’, per rendere più evidente tutti gli interventi che andremo a fare. Quindi torno qua su Elementor e seleziono un widget, vado in ‘Avanzato’, applico un’ombra al bordo, così è più evidente dove finisce e dove inizia il contenitore. Inoltre, qua, sempre nel widget ‘Call To Action’, nello stile, vado a rendere un pochino più scuro lo sfondo del contenuto. Ora che ho fatto, vado a replicare la modifica anche sugli altri due, vado ad aggiornare, torno sulla pagina, faccio un refresh.
E qua puoi notare una cosa: in realtà i widget hanno tutti e tre la stessa altezza, perché vedi che l’ombra del bordo evidenzia che tutti e tre i widget hanno la stessa altezza. Il problema è che c’è questo elemento qua interno che si adatta, diventa un po’ più alto, un po’ più basso, in base alla quantità di contenuto. Vediamo di risolvere questo problema.
Il primo passaggio è quello di aprire gli strumenti per sviluppatori del tuo browser. Quindi, se utilizzi Chrome, Brave, Firefox, in tutti i browser praticamente hanno una funzione di questo tipo e ci basta cliccare qua sulla pagina col tasto destro del mouse, scegliere ‘Ispeziona’. In alcuni casi si chiama ‘Analizza’, e automaticamente il browser apre una schermata di questo tipo, dove qui a lato, o eventualmente in alcuni casi sotto, appare il codice della pagina e vedi che, spostandoti con il mouse sui vari elementi del codice, viene evidenziata la porzione della pagina interessata da quel codice.
Quindi vedi che, ad esempio, se io seleziono qua questo ‘div’ con classe ‘elementor-widget-container’, viene evidenziato esattamente quel widget e in questa situazione vedo che questo widget non rappresenta il problema perché quel widget effettivamente ha la stessa altezza. Il problema nasce invece selezionando il widget ‘Elementor CTA’, perché quello è più basso di quanto, diciamo così, dovrebbe essere, e quindi comincio ad applicare alcune regole CSS per correggere questo problema.
Quindi seleziono qua il blocco ‘Elementor CTA’ e qua applico una regola come questa che imposta l’altezza del widget al 100%. Sempre l’elemento ‘div’ con la classe ‘elementor-cta’, devo applicare altre due regole. Una è questa: ‘display: flex’, quindi devo attivare il modello flexbox anche per questo widget e poi la direzione ‘flex-direction’ deve essere ‘column’, in modo che il widget si sviluppi in verticale. Come vedi ora la situazione è tornata al punto di partenza, ma non ti preoccupare, andremo a risolverla tra poco.
L’altro intervento che devo fare, questa volta, è sull’elemento ‘cta-content‘, quindi questo elemento che racchiude il contenuto del widget, il contenuto testuale del widget. Quindi vado a selezionare questo elemento ‘cta-content‘ e anche qua vado ad applicare alcune regole CSS, ossia queste: ‘display: flex’, anche in questo caso, ‘flex-direction’ sempre ‘column’ perché si sviluppi in verticale e ora vado a applicare quella regola che porta, diciamo, questo elemento ad occupare tutto quello spazio in altezza. La regola è questa: ‘flex-grow: 1’ e vedi che, così facendo, anche tutto il contenitore, quindi questo sfondo, va a occupare tutto lo spazio.
Ora mi rimane ancora una cosa da correggere, ossia il pulsante che appare qua mentre io lo voglio alla stessa altezza. Quindi, voglio che si posizioni sempre in fondo. Posso correggere anche questo. Per farlo, mi sposto, mi vado a selezionare qua ‘Ispeziona’ il pulsante e vedo che l’elemento pulsante è contenuto in questo ‘div’ con la classe ‘elementor-cta__button-wrapper‘. Vado ad applicare anche qua una regola CSS, che è questa: ‘margin-top: auto;‘ e vedi che in automatico viene effettuato questo intervento.
Ti consiglio anche qua, nella sezione ‘Elementor CTA content’, di applicare questa regola ‘justify-content: flex-start’. Non è indispensabile sempre, però per evitare problemi, per fare in modo che questo elemento parta effettivamente in alto. Tutte queste regole che abbiamo inserito sono indispensabili perché il tutto funzioni. Se infatti io torno qua sul mio prima la regola sull’elemento ‘CTA’ e vado a disattivare queste impostazioni, vedi che torniamo al problema, quindi mi servono tutte queste regole. Ora c’è la necessità di andare a cementare queste regole CSS all’interno del codice della mia pagina, perché altrimenti, avendole impostate qua con lo strumento per sviluppatori del browser, mi basta fare un refresh per cancellarle, perché sono regole che vedo solo io in questo momento. Quindi devo andare a inserire queste regole dentro Elementor. Vediamo come fare.
Quindi mi sposto qua su Elementor. Essendo il widget ‘Call To Action’ disponibile solo in ‘Elementor Pro’, posso sfruttare un’altra funzionalità di ‘Elementor Pro’, ossia il CSS personalizzato, altrimenti, in alternativa, potrai inserire il CSS, questo codice CSS, all’interno del tema. Quindi, per andare a inserirlo, mi basta andare qua e selezionare il contenitore. Quindi non lo applico a livello di ogni singolo widget, ma lo applico a livello del contenitore, in modo che non devo ripeterlo tre volte per ogni widget che ho. Mi seleziono qua il contenitore. Nelle impostazioni avanzate del contenitore, trovo il campo ‘CSS personalizzato’. E quindi comincio a inserire le regole. La prima cosa che scrivo è ‘selector’, in modo che questa regola vada a impattare solo questi contenuti e poi qua vado a copiare le regole che mi servono. La prima, ci ricordiamo, serviva, cioè andava a colpire l’elemento con la classe ‘elementor-cta’. Quindi copio, mi sposto qua, punto ‘elementor-cta’, uso il punto perché è una classe CSS.
Poi apro le parentesi e qua inserisco le varie dichiarazioni, che sono queste tre. Copio queste dichiarazioni che ho creato qua all’interno, le incollo e ho inserito la prima. Devo inserire anche l’altra regola. Quindi vado ‘selector’, anche in questo caso torno qua e questa volta devo copiare le dichiarazioni relative alla classe ‘elementor-cta__content’. Quindi copio, ‘.elementor-cta__content’, apro e chiudo parentesi graffa, vado a copiare anche in questo caso tutte queste dichiarazioni e le vado a inserire qua dentro.
Torno all’interno della mia pagina, questa volta devo copiare questa classe, quella relativa al bottone, torno qua su Elementor, a capo, ‘selector’, punto, apro e chiudo parentesi graffa, questa volta senza copiare, me la ricordo dato che è molto breve, ‘margin-top: auto;’. Aggiorno. Ora posso tranquillamente chiudere questo, fare un refresh della pagina e vedi che tutti e tre i widget hanno la stessa altezza e i pulsanti sono allineati grazie alle regole CSS.
Come visto, conoscendo le regole, il funzionamento CSS, senza installare alcun plugin aggiuntivo, è possibile ottenere il risultato desiderato in modo abbastanza semplice.