Limitazioni Widget 
Autore: Piero B.
Visite 369,
Followers 2,
Condiviso 0
problema riguarda i widget: non permettono di impostare larghezze personalizzate. Si espandono automaticamente fino a occupare tutta la larghezza disponibile della finestra, senza possibilità di controllo preciso. Ormai, la stragrande maggioranza degli utenti naviga da dispositivi mobili e responsive. Purtroppo, le attuali limitazioni nella gestione di questi formati rendono difficile offrire un’esperienza utente davvero ottimale.
Esempio: Widget Animated Box 1
Postato il
Buongiorno Piero,
hai per caso una pagina di esempio contenente l'oggetto che menzioni, così da poter verificare quale problema stai riscontrando relativamente alla versione responsive?
Grazie.
Ciao, si è argomentato spesso sul forum delle problematiche di website su come gestisce il responsive, come ad esempio il Blog oppure le dimensione dei font di grandi dimensioni che non si ridimensionano a dovere e fuoriescono dal schermo, e molto altro.
Per quanto riguarda il tuo discorso credo sia corretto che l'oggetto a livello di smartphone occupi automaticamente tutto lo schermo in larghezza anche per una questione di leggibilità dello stesso visto le piccole dimensioni, ma potrei non avere compreso bene il tuo problema, se vuoi al limite posta un esempio pratico, ciao.
Autore
Grazie per le risposte rapide. Vorrei aiutarvi a comprendere meglio il problema legato al responsive: a questo indirizzo potete vedere un esempio concreto dei limiti riscontrati nella visualizzazione su dispositivi mobili — https://www.ariannacakeart.net/website.
Inoltre, sul sito principale https://www.ariannacakeart.net, trovate anche una pagina realizzata con WordPress e il plugin Elementor, perché la cliente si è affezionata proprio a quei box che, purtroppo, con WebsiteX5 non sono riuscito a riprodurre come desiderava.
Vi confesso che sono un grande appassionato di WebsiteX5 da anni, ma con queste limitazioni non riesco più a soddisfare le esigenze dei miei clienti.
Autore
Gestisco questo sito da anni, sempre realizzato con WebsiteX5, ma purtroppo mi trovo costretto a cambiare per forza, proprio a causa delle limitazioni nella gestione responsive che non mi permettono più di soddisfare le richieste dei clienti.
si si certo, ci sono ancora limitazioni e vincoli specialmente sul responsive che per l'azienda sembrano insuperabili, peccato.
Buongiorno Piero,
ho visitato https://www.ariannacakeart.net/website tramite smartphone, potresti chiarirmi su quali aspetti vorresti portare l'attenzione e se sono relativi alla vista in verticale o orizzontale?
Grazie.
Autore
"Finché si parla di desktop, tutto ok. Su smartphone funziona correttamente a schermo intero in verticale, ma in orizzontale la visualizzazione non è ottimale. Inoltre, questa l'immagine è relativa a un tablet."
non so a cosa ti riferisci di preciso, ma guardando velocemente il sito, avendo tu la PRO, a mio parere con uno sfruttamento di tutti i breakpoint e una più attenta gestione delle interruzioni di riga migliori di molto la situazione...
tipo qui
ho risposto senza vedere il tuo ultimo post,
comunque si esattamente dove dicevo io...
sfrutta i breakpoint ed usa le interruzioni di riga...
vedrai che migliori
si se il problema è sui breackpoint intermedi procedi come consigliato da Claudio, poi ho notato molto spazio lateralmente, probabilmente aumentado il corpo del sito al primo breackpoint potresti anche migliorare anche questo aspetto.
Autore
Grazie Claudio, ci ho provato ma purtroppo non è possibile migliorare la situazione. Il problema è legato al widget, che non consente di personalizzare la larghezza: è fissa e si adatta in modo automatico allo spazio disponibile, espandendosi in modo imprevedibile.
Sì, come detto da Claudio, devi inserire una interruzione di riga al PASSO 4 Pagine > sezione "Responsive". Metti magari un'interruzione di riga tra gli oggetti a 720px e fai in modo che i contenuti si verticalizzino in modo tale che non stanno uno accanto all'altro con quello spazio così limitato. Il problema NON è dei widget ma di come sono state (mal)gestite le interruzioni di riga nelle impostazioni Responsive
può essere che abbia dei limiti in tal senso , ma non mi pare proprio che tu stia usando propriamente i breakpoint e le interruzioni di riga...
posta l'immagine del breakpoint che usi
e della sezione responsive della pagina ai tre breakpoint inferiori...
io NON vedo interrruzioni di riga manuali...
https://guide.websitex5.com/it/support/solutions/articles/44000796190-come-e-perch%C3%A9-impostare-le-interruzioni-di-riga-
Autore
ok, seguo alla lettera le vostre istruzioni e vi faccio sapere. grazie della vostra velocità nelle risposte.
Autore
Purtroppo, forzare un a capo peggiora ulteriormente la situazione, perché il widget si estende fino a occupare tutta la larghezza della pagina.
In ogni caso, non è un problema — grazie comunque per la disponibilità!
ma hai aggiunto i breakpoint ?
e a che breakpoint hai messo l'interruzione ?
se la metti ad esempio dove ti ha suggerito Giuseppe o ad un breakpoint creato a doc inferiore , si allargherà a tutta pagina, ma la pagina sarà larga il giusto esteticamente per contenerlo ...
vedi tu...
se postavi le immagini che ti ho chiesto si vede come stai facendo...
si è esatto quello che dici, ma puoi giocare con deggli oggetti che occupano lo spazio ai lati del widget, facendoli sparire a risoluzioni inferiori in modo da non riempire completamente lo spazio a risoluzioni intermedie, ci devi lavorare ma è fattibile.
un esempio pratico:
Autore
Sì sì, lo so — aggiungendo oggetti alla pagina si riesce bene o male a raggiungere lo scopo, anche se questo comporta scrivere qualche riga di codice in più che, alla fine, non è davvero necessaria.
Resto comunque dell’idea che, se il widget permettesse la personalizzazione della larghezza, il problema non si porrebbe affatto e si potrebbe ottenere un risultato davvero su misura al 100%.
E comunque veramente Grazie a Tutti per la collaborazione....
Ho capito cosa intendi... Tu non vorresti una larghezza del genere come quella dell'animated box indicato dalla freccia rossa, giusto?
scusami Piero, ma nessuna riga di codice fa tutto il software, almeno diamo a Cesare quel che è di Cesare
In effetti in quel caso non puoi farci nulla se non intervenendo con del codice extra sulla larghezza dell'oggetto oppure dovresti inserire degli oggetti vuoti (es. simple separator come indicato da Giancarlo) tra un animated box e l'altro e cercare di "lavorare" su quelli, mantenendoli ad una certa visualizzazione o nascondendoli per cercare di ottenere quello che vorresti tu.
Ad una certa visualizzazione basterebbe agire sui valori di padding-right e padding-left portandoli da 20px a 180/200px e ottieni quello che, credo, vuoi ottenere tu
A questo punto sì, sono d'accordo con te che se si potesse agire sulla larghezza di tali oggetti direttamente nelle impostazioni degli stessi, la cosa sarebbe ben gradita.
Ciao
Autore
Sì Giancarlo, intendevo dire che è il software a generarla, ed è semplicemente materiale in più che il browser deve caricare e interpretare.
... visto che hai nominato il codice, magari hai già fatto qualche esperimento...
... intanto che si aspetta il rinnovo degli oggetti, e si prova con breakpoint adeguati, senza andar a strafare, e se ci si accontenta, ...nelle risoluzioni intermedie (480-720) si potrebbe cercare di ottenere un aspetto simile a questa simulazione:
.
ciao
L'oggetto fa il suo lavoro come lo fanno gli oggetti di WP. Certo è limitato sulle opzioni ,magari poco responsive e molto adattivo ma un buon grafico o uno smanettone puro a forza di girarci intorno, ne esce fuori alla grande. Questo oggetti si adattano alla larghezza del contenuto di pagina. O intervieni di codice o c'è poco da fare. Le cose si complicano quando i box sono dispari al contrario si raggiunge un buon compromesso se sono pari con una formattazione mirata sugli spostamenti degli oggetti come già segnalato da utenti più esperti di me.
Se vuoi fare una prova con del codice extra (NO AI BLABLA) e semprechè tu non abbia cambiato o sotituito gli oggetti devi prima ripetere esattamente la procedura che ti ha indicato CLAUDIO e dove era assodato che avresti avuto una visualizzazione estesa dell'oggetto.Dovresti partire con una interruzione a 1150px come da foto sottostante. Per evitare che l'oggetto si espanda rendendolo graficamente inguardabile vai sulle proprietà della tua pagina PASO 3 poi su ESPERTO e in CODICE, prima della chiusura del tag Head, inserisci questo codice:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (max-width: 1149.9px) {
#pluginAppObj_163,
#pluginAppObj_164,
#pluginAppObj_160,
#pluginAppObj_166,
#pluginAppObj_168 {
width: 100%;
max-width: 400px;
height: auto; /* oppure 400px se tu lo preferisci fisso */
margin: 0 auto;
display: block;
}
}
</style>
Nelle impostazione del passo 4 da quello che vedo hai un layout da 1150 il classico. Regola l'interruzione di riga a partire da 1150.
Dovresti ottenere questo effetto: