Un tutorial magistrale sulla struttura del layout di flexbox. Spiegazioni come questa, sulla parte delle impostazioni sono più uniche che rare in italiano.💯❤
Bravo Tiziano!!!👏🏻👏🏻👏🏻 Con questo tutorial chiarissimo hai addirittura surclassato i miei "guru" americani preferiti, del calibro di Darrel Wilson e Rino di LivingWithPixels😜. Ho finalmente compreso la matematica che sta dietro queste nuove griglie flessibili (tutt'altro che intuitive anzi, direi molto ostiche da comprendere, per chi era abituato a trattare con le care vecchie sezioni). Grazie ancora per questo fondamentale contributo!
Molto interessante il flexbox. Domanda e possibile quando affianchi più colonne fare in modo che si posizionino una sopra l’altra così da vederlo anziché con lo scorrimento verso il basso ma tipo slider e vederle con lo swipe?
Se sono due contenitori separati, di defaut non c’è alcuna spaziatura. Se invece sono due contenitori inseriti all’interno di un altro contenitore che utilizza flexbox con direzione colonna, allora basta impostare a zero la spaziatura a livello di riga.
Ciao Tiziano, il tutorial "Contenitore Flexbox di Elementor" è un'ottima guida per imparare a utilizzare il layout Flexbox in Elementor. La chiarezza e la semplicità sono i due elementi che maggiormente caratterizzano questo tutorial. Utilizzi un linguaggio semplice e diretto per spiegare i concetti di base dell’utilizzo di Flexbox, senza utilizzare tecnicismi o terminologie difficili da comprendere per i principianti. Inoltre, il tutorial è organizzato in modo molto chiaro, con sezioni ben distinte e un'organizzazione lineare dei contenuti. Un altro aspetto positivo del tutorial è il suo approccio alla programmazione editoriale. Hai chiaramente, secondo me, pianificato il tutorial in modo da fornire una guida completa ed esaustiva, che accompagna l’utente passo dopo passo attraverso tutti i concetti e le funzionalità necessarie per padroneggiare il layout Flexbox in Elementor. In definitiva, se sei alla ricerca di una guida chiara, semplice ed efficace per imparare a utilizzare il layout Flexbox in Elementor, il tutorial "Contenitore Flexbox di Elementor" di Tiziano è la scelta perfetta. Consiglio vivamente questo tutorial a tutti coloro che vogliono migliorare le loro competenze di programmazione in Elementor.
Grazie Mariano, lo scopo era proprio quello di fornire una guida semplice e chiara all’utilizzo di questo strumento che, rispetto alle sezioni e colonne della precedente versione di Elementor, presenta alcune complessità. Soprattutto per chi non conosce come funziona Flexbox.
Ciao, ottimo video! Come fai ad avere i contorni nei widget di testo cosi precisi intorno ai numeri e le scritte "blocco"? Io se creo un testo ho sempre della spaziatura nella griglia che lo circonda anche se non è impsotato un padding o line height
Ciao, non sono certo di aver compreso bene la domanda. Prova però a controllare se nelle Impostazioni Sito -> Layout di Elementor hai impostato a zero la spaziatura interna predefinita del blocco contenitore. Questo è consigliato per evitare di avere un padding predefinito su ogni contenitore.
@@tixx Grazie per la risposta ma non è quello che intendevo, se io inserisco un widget di testo e digito la parola "blocco" intorno ho una cornice del widget che non è precisa e a filo come nelle tue scritte
Ottima guida grazie. Ti chiedo però un informazione: perchè nella landing che ho creato, quando la vedo da mobile e scrollo con il dito, la Landing si " muove " a destra e a sinistra? praticamente " sfarfalla " !! .. ho guardato i margini ed è tutto ok.. ma non riesco a togliere questo problema..
Probabilmente hai inserito elementi con un posizionamento assoluto che causano un overflow, andando a occupare più spazio del dovuto in orizzontale. Puoi provare a modificare un’impostazione dei contenitori della pagina che trovi nelle Opzioni aggiuntive di ogni contenitore. Imposta "Eccedenza" su "Nascosto".
Nel contenitore Flexbox non esistono più le colonne, ma è sufficiente cambiare la direzione degli elementi del contenitore nella visualizzazione Mobile o Tablet.
Finalmente un pò di chiarezza grazie. Riferendomi ai breakpoint come posso utilizzare un immagine o testo per la parte desktop ed un altra foto o testo solo per la parte Mobile ? grazie continua cosi
Con Elementor, per ogni widget nella sezione "Avanzato" delle impostazioni trovi un’area chiamata Responsive che ti consente di disattivare la visibilità di quel widget su desktop, tablet o mobile.
Ciao Tiziano come sempre i tutoi video sono molto completi e semplici. Volevo chiederti un'info, attualmente sto utilizzando Elementor (free) versione 3.13.2 e tra la lista degli esperimenti trovo "Contenitore Flexbox" Stato: Release Candidate e volevo sapere se questo stato lo si può considerare stabile quindi utilizzabile su un sito in produzione oppure no. Grazie per le info preziose che condividi. Davide
Ti suggerisco di provarlo comunque prima o su una copia di staging del sito, oppure effettua un backup completo prima di attivare l’esperimento. Personalmente non ho riscontrato problemi, ma potrebbero esserci ancora dei bug.
Buonasera Tiziano. Le chiedo un aiuto. Non capisco perché le pagine modificate con Elementor in fase di anteprima sono perfette, mentre online il sito risulta completamente incasinato. La ringrazio per l'aiuto e sopratutto per i tutorial che ci mette a disposizione.
Buongiorno, è difficile rispondere a questa domanda perché ci potrebbero essere un milione di motivi. Potrebbe dipendere da qualche incompatibilità con il tema o con dei plugin, oppure con un problema con la cache del sito (lato server o di qualche plugin)…
Buongiorno. A parte Elementor non ho altri plugin ma ho risolto guardando il suo video dove spiega che un kit libreria va eliminato prima di installarne uno nuovo, e sopratutto, eliminando e ricreando tutte le pagine. Comunque, on line il sito non visualizza l'immagine dell'header, pur mostrandola correttamente in anteprima.🙄
ciao non riesco a fare questa cosa con i flexbox. voglio mettere 3 flexbox in linea su una riga nella visuale desktop poi nella visuale tablet voglio usare due flexbox su una linea e il terzo su un linea diversa in basso. Ho trovato alcuni template che fanno questa cosa ma quando provo a farla io non ci riesco. Versione desktop 3 flex box in linea versione tablet 2 flex box in linea e 1 flexbox in una linea sottostante
Ciao, nel video sono spiegate le basi per ottenere il risultato che desideri. Ti do degli indizi: i primi due contenitori li imposti in larghezza contenuto: larghezza piena / larghezza 35% / dimensione crescere. Il terzo lo imposti in larghezza al 100%, così occupa l’intera larghezza del contenitore.
@@tixxho rivisto il video verso il minuto 13 parli di questa cosa mi era sfuggita. Comunque ci sono riuscito la conversione in flexbox non aveva inserito tutti i flexbox in un unico flexbox, ecco perchè non riuscivo. Li ho inseriti tutti in un unico flexbox e dopo sono riuscito ad eseguire il layout che cercavo su tablet.
Per vecchio builder intendi la gestione basata su Sezioni e colonne? L'unico modo è quello di modificare la pagina e convertire le varie sezioni a mano. Considera però che questa operazione di conversione è piuttosto "ignorante". Nel senso che le sezioni e le colonne vengono convertite in contenitori per mantenere il layout originale. Poi, è necessario intervenire manualmente per ridurre il numero di contenitori, se vuoi ottenere un codice più pulito.
Grazie. Finalmente sono riuscito a capire (quasi) tutto dei contenitori Flexbox. Quello che mi chiedo ora è... visto che i contenitori Flexbox sono così ... flessibili, a cosa serve la modalità Grid? 👍
Il Grid Layout è più adatto per i layout a griglia rispetto a quello Flexbox. CSS Grid lavora su due dimensioni, mentre Flexbox su una sola dimensione (riga o colonna).
Un tutorial magistrale sulla struttura del layout di flexbox.
Spiegazioni come questa, sulla parte delle impostazioni sono più uniche che rare in italiano.💯❤
Fantastica guida. Mi ha salvato! Un cliente ha chiesto espressamente Elementor e non lo avevo quasi mai usato. Questo video mi ha salvato.
Like meritatissimo!!!!
Hai un nuovo follower.
Grazie per i tuoi contenuti.
Gran contenuto:chiaro e preciso.
Da ieri stavo litigando con la Flexbox...😀
Ottimo contenuto utile non solo per Elementor ma per le proprietà flexbox in generale.
Bravo Tiziano!!!👏🏻👏🏻👏🏻
Con questo tutorial chiarissimo hai addirittura surclassato i miei "guru" americani preferiti, del calibro di Darrel Wilson e Rino di LivingWithPixels😜. Ho finalmente compreso la matematica che sta dietro queste nuove griglie flessibili (tutt'altro che intuitive anzi, direi molto ostiche da comprendere, per chi era abituato a trattare con le care vecchie sezioni). Grazie ancora per questo fondamentale contributo!
Bellissimo e utilissimo video. Grazie
Grazie mille Tiziano per questa guida molto chiara e utilissima!!
Prego, mi fa piacere che abbia trovato utile il video.
Complimenti, ho finalmente compreso la logica di file Xbox, mi hai aperto un mondo 😊
Mi fa piacere. Rispetto alla vecchia modalità di Elementor è tutta un’altra cosa 😀
Spiegato benissimo ! grazie mille !
Molto interessante il flexbox. Domanda e possibile quando affianchi più colonne fare in modo che si posizionino una sopra l’altra così da vederlo anziché con lo scorrimento verso il basso ma tipo slider e vederle con lo swipe?
Non mi è chiara la domanda.
Ciao Tiziano, ottimo video. Ti faccio una domanda c'è modo di avere spaziatura 0 tra due contenitori posti uno sopra all'altro?
Se sono due contenitori separati, di defaut non c’è alcuna spaziatura. Se invece sono due contenitori inseriti all’interno di un altro contenitore che utilizza flexbox con direzione colonna, allora basta impostare a zero la spaziatura a livello di riga.
Ciao Tiziano, il tutorial "Contenitore Flexbox di Elementor" è un'ottima guida per imparare a utilizzare il layout Flexbox in Elementor. La chiarezza e la semplicità sono i due elementi che maggiormente caratterizzano questo tutorial.
Utilizzi un linguaggio semplice e diretto per spiegare i concetti di base dell’utilizzo di Flexbox, senza utilizzare tecnicismi o terminologie difficili da comprendere per i principianti. Inoltre, il tutorial è organizzato in modo molto chiaro, con sezioni ben distinte e un'organizzazione lineare dei contenuti.
Un altro aspetto positivo del tutorial è il suo approccio alla programmazione editoriale. Hai chiaramente, secondo me, pianificato il tutorial in modo da fornire una guida completa ed esaustiva, che accompagna l’utente passo dopo passo attraverso tutti i concetti e le funzionalità necessarie per padroneggiare il layout Flexbox in Elementor.
In definitiva, se sei alla ricerca di una guida chiara, semplice ed efficace per imparare a utilizzare il layout Flexbox in Elementor, il tutorial "Contenitore Flexbox di Elementor" di Tiziano è la scelta perfetta. Consiglio vivamente questo tutorial a tutti coloro che vogliono migliorare le loro competenze di programmazione in Elementor.
Grazie Mariano, lo scopo era proprio quello di fornire una guida semplice e chiara all’utilizzo di questo strumento che, rispetto alle sezioni e colonne della precedente versione di Elementor, presenta alcune complessità. Soprattutto per chi non conosce come funziona Flexbox.
Ciao, ottimo video! Come fai ad avere i contorni nei widget di testo cosi precisi intorno ai numeri e le scritte "blocco"? Io se creo un testo ho sempre della spaziatura nella griglia che lo circonda anche se non è impsotato un padding o line height
Ciao, non sono certo di aver compreso bene la domanda. Prova però a controllare se nelle Impostazioni Sito -> Layout di Elementor hai impostato a zero la spaziatura interna predefinita del blocco contenitore. Questo è consigliato per evitare di avere un padding predefinito su ogni contenitore.
@@tixx Grazie per la risposta ma non è quello che intendevo, se io inserisco un widget di testo e digito la parola "blocco" intorno ho una cornice del widget che non è precisa e a filo come nelle tue scritte
Prova a utilizzare la funzione Allinea Elementi sul Contenitore Flexbox all’interno del quale è inserito il widget di testo.
Ottima guida grazie. Ti chiedo però un informazione: perchè nella landing che ho creato, quando la vedo da mobile e scrollo con il dito, la Landing si " muove " a destra e a sinistra? praticamente " sfarfalla " !! .. ho guardato i margini ed è tutto ok.. ma non riesco a togliere questo problema..
Probabilmente hai inserito elementi con un posizionamento assoluto che causano un overflow, andando a occupare più spazio del dovuto in orizzontale. Puoi provare a modificare un’impostazione dei contenitori della pagina che trovi nelle Opzioni aggiuntive di ogni contenitore. Imposta "Eccedenza" su "Nascosto".
@@tixx Molte grazie..era il posizionamento assoluto...👏👌👌
Grazie
Super!
Salve, non trovo più "inverti colonna" mobile in responsive. Come posso fare ora a invertire le colonne in mobile?
Nel contenitore Flexbox non esistono più le colonne, ma è sufficiente cambiare la direzione degli elementi del contenitore nella visualizzazione Mobile o Tablet.
Finalmente un pò di chiarezza grazie. Riferendomi ai breakpoint come posso utilizzare un immagine o testo per la parte desktop ed un altra foto o testo solo per la parte Mobile ? grazie continua cosi
Con Elementor, per ogni widget nella sezione "Avanzato" delle impostazioni trovi un’area chiamata Responsive che ti consente di disattivare la visibilità di quel widget su desktop, tablet o mobile.
Ciao Tiziano come sempre i tutoi video sono molto completi e semplici.
Volevo chiederti un'info, attualmente sto utilizzando Elementor (free) versione 3.13.2 e tra la lista degli esperimenti trovo "Contenitore Flexbox" Stato: Release Candidate e volevo sapere se questo stato lo si può considerare stabile quindi utilizzabile su un sito in produzione oppure no.
Grazie per le info preziose che condividi.
Davide
Ti suggerisco di provarlo comunque prima o su una copia di staging del sito, oppure effettua un backup completo prima di attivare l’esperimento.
Personalmente non ho riscontrato problemi, ma potrebbero esserci ancora dei bug.
@@tixx grazie mille
Ciao, come mai nel mio flex appena installato non compare la funzione spazio tra gli elementi?
Il video risale a 8 mesi fa. Ora l’opzione è stata modificata e si chiama Spaziature.
Buonasera Tiziano. Le chiedo un aiuto. Non capisco perché le pagine modificate con Elementor in fase di anteprima sono perfette, mentre online il sito risulta completamente incasinato.
La ringrazio per l'aiuto e sopratutto per i tutorial che ci mette a disposizione.
Buongiorno, è difficile rispondere a questa domanda perché ci potrebbero essere un milione di motivi. Potrebbe dipendere da qualche incompatibilità con il tema o con dei plugin, oppure con un problema con la cache del sito (lato server o di qualche plugin)…
Buongiorno. A parte Elementor non ho altri plugin ma ho risolto guardando il suo video dove spiega che un kit libreria va eliminato prima di installarne uno nuovo, e sopratutto, eliminando e ricreando tutte le pagine.
Comunque, on line il sito non visualizza l'immagine dell'header, pur mostrandola correttamente in anteprima.🙄
Dimenticavo! Grazie per avermi risposto . Non è così scontato.
ciao non riesco a fare questa cosa con i flexbox.
voglio mettere 3 flexbox in linea su una riga nella visuale desktop poi nella visuale tablet voglio usare due flexbox su una linea e il terzo su un linea diversa in basso.
Ho trovato alcuni template che fanno questa cosa ma quando provo a farla io non ci riesco.
Versione desktop 3 flex box in linea versione tablet 2 flex box in linea e 1 flexbox in una linea sottostante
Ciao, nel video sono spiegate le basi per ottenere il risultato che desideri. Ti do degli indizi: i primi due contenitori li imposti in larghezza contenuto: larghezza piena / larghezza 35% / dimensione crescere.
Il terzo lo imposti in larghezza al 100%, così occupa l’intera larghezza del contenitore.
@@tixxho rivisto il video verso il minuto 13 parli di questa cosa mi era sfuggita.
Comunque ci sono riuscito la conversione in flexbox non aveva inserito tutti i flexbox in un unico flexbox, ecco perchè non riuscivo.
Li ho inseriti tutti in un unico flexbox e dopo sono riuscito ad eseguire il layout che cercavo su tablet.
c'è un modo per trasferire pagine costruite con il vecchio builder sul nuovo?
Per vecchio builder intendi la gestione basata su Sezioni e colonne? L'unico modo è quello di modificare la pagina e convertire le varie sezioni a mano. Considera però che questa operazione di conversione è piuttosto "ignorante". Nel senso che le sezioni e le colonne vengono convertite in contenitori per mantenere il layout originale. Poi, è necessario intervenire manualmente per ridurre il numero di contenitori, se vuoi ottenere un codice più pulito.
Grazie. Finalmente sono riuscito a capire (quasi) tutto dei contenitori Flexbox. Quello che mi chiedo ora è... visto che i contenitori Flexbox sono così ... flessibili, a cosa serve la modalità Grid? 👍
Il Grid Layout è più adatto per i layout a griglia rispetto a quello Flexbox. CSS Grid lavora su due dimensioni, mentre Flexbox su una sola dimensione (riga o colonna).