WebSite X5Help Center

 
Piero B.
Piero B.
User

Limitazioni Widget  it

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
28 RISPOSTE - 12 UTILI
Incomedia
Eric C.
Incomedia


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.

Leggi di più
Postato il da Eric C.
Giancarlo B.
Giancarlo B.
User

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.

Leggi di più
Postato il da Giancarlo B.
Piero B.
Piero B.
User
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.

Leggi di più
Postato il da Piero B.
Piero B.
Piero B.
User
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.

Leggi di più
Postato il da Piero B.
Giancarlo B.
Giancarlo B.
User
Piero B.
ma con queste limitazioni non riesco più a soddisfare le esigenze dei miei clienti.

si si certo, ci sono ancora limitazioni e vincoli specialmente sul responsive che per l'azienda sembrano insuperabili, peccato.

Leggi di più
Postato il da Giancarlo B.
Incomedia
Eric C.
Incomedia

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.

Leggi di più
Postato il da Eric C.
Piero B.
Piero B.
User
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."

Leggi di più
Postato il da Piero B.
Claudio D.
Claudio D.
Moderator
Utente del mese IT
Piero B.
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

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

Leggi di più
Postato il da Claudio D.
Claudio D.
Claudio D.
Moderator
Utente del mese IT
Piero B.
"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."

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

Leggi di più
Postato il da Claudio D.
Giancarlo B.
Giancarlo B.
User

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.

Leggi di più
Postato il da Giancarlo B.
Piero B.
Piero B.
User
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.

Leggi di più
Postato il da Piero B.
Giuseppe Guida
Giuseppe Guida
User

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

Leggi di più
Postato il da Giuseppe Guida
Claudio D.
Claudio D.
Moderator
Utente del mese IT
Piero B.
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.
ummm... non credo 

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-

Leggi di più
Postato il da Claudio D.
Piero B.
Piero B.
User
Autore

ok, seguo alla lettera le vostre istruzioni e vi faccio sapere. grazie della vostra velocità nelle risposte.

Leggi di più
Postato il da Piero B.
Piero B.
Piero B.
User
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à!

Leggi di più
Postato il da Piero B.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

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... 

Leggi di più
Postato il da Claudio D.
Giancarlo B.
Giancarlo B.
User
Piero B.
Purtroppo, forzare un a capo peggiora ulteriormente la situazione, perché il widget si estende fino a occupare tutta la larghezza della pagina.

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.

Leggi di più
Postato il da Giancarlo B.
Giancarlo B.
Giancarlo B.
User

un esempio pratico:

Leggi di più
Postato il da Giancarlo B.
Piero B.
Piero B.
User
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....

Leggi di più
Postato il da Piero B.
Giuseppe Guida
Giuseppe Guida
User

Ho capito cosa intendi... Tu non vorresti una larghezza del genere come quella dell'animated box indicato dalla freccia rossa, giusto?

Leggi di più
Postato il da Giuseppe Guida
Giancarlo B.
Giancarlo B.
User
Piero B.
anche se questo comporta scrivere qualche riga di codice in più che, alla fine, non è davvero necessaria.

scusami Piero,  ma nessuna riga di codice fa tutto il software, almeno diamo a Cesare quel che è di Cesare wink

Leggi di più
Postato il da Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User

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.

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Leggi di più
Postato il da Giuseppe Guida
Piero B.
Piero B.
User
Autore

Sì Giancarlo, intendevo dire che è il software a generarla, ed è semplicemente materiale in più che il browser deve caricare e interpretare.

Leggi di più
Postato il da Piero B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Piero B.
... si riesce bene o male a raggiungere lo scopo, anche se questo comporta scrivere qualche riga di codice in più ... ... ... 

... 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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User

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.

Leggi di più
Postato il da Roberto M.
Roberto M.
Roberto M.
User

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:

Leggi di più
Postato il da Roberto M.