Usando le pseudoclassi ho creato una sorta di reset per Website x5 per farlo diventare responsivo. Il codice funziona abbastanza bene ma non è perfetto e va migliorato, quindi se qualcuno vuole dare il suo contributo ben venga.

Per testarlo suggerisco di procedere così:

1) apri un nuovo progetto e imposta il template base (punto 1>scelta delò modello>nuovo modello)

2) Inserire il codice di responsivizzazione (riportato sotto) nella HEAD della pagina che volete creare (o se èpreferite nella HEAD di tutte le pagine al punto 4)

3) in creazione della pagina create una griglia con 12 colonne (agendo sul tasto aggiungi colonna)

4) iniziate ad inserire i vari elementi nella pagina

ATTENZIONE: se inserite più elementi in una riga dovete specificare quanto spazio in percentuale deve occupare ogni oggetto presente nella riga ossia dovete aggiungere una linea di codice nella HRAD della pagina specificando la % di larghezza del singolo elemento presente in una determinata riga.

Ad esempio:

[quote]

#imContent div[style^="width:"]:nth-of-type(3) div[style^="float:"]:nth-of-type(2) {width:60% !important; float:left !important; } /* richiama la terza riga e il 2° elemento in essa presente ("nth-child(2)") e gli assegna una larghezza del 60% */

[/quote]

Ricordate che ogni spazio vuoto lasciato tra gli oggetti inseriti in una riga, è considerato un “elemento” a se e va conteggiato come tale specificando la sua larghezza % come tutti gli altri oggetti.

PROBLEMI RISCONTARTI:

- la galelria immagini non viene responsivizzata (forse è meglio usare un altro plug-in responsivo per le gallerie immagini inserendo in un “oggetto html”)

- allineamenti degli oggetti non sempre perfetti (occorrerebbe migliorare il codice da qualche parte)

CODICE di Responsivizzazione:

[quote]

<!-- RESPONSIVIZZAZIONE STRUTTURA WEBSITE -->

<!-- Elementi che compongono il flusso normale della pagina (ossia elementi statici e relativi):
- "html" è la pagina intera cioè la finestra del browser (ossia lo sfondo)
- "imPage" è l'elemento contenitore di tutti gli altri facenti parte del flusso normale
- "imHeader"(ossia intestazione), "imContent" e "imFooter"(ossia piè pagina), sono gli elementi contenuti che si susseguono

Elementi absolute staccati dagli altri (si rapportano all'html ossia finestra del browser):
- "imHeaderBg" è lo sfondo dell'Header (ossia sfondo intestazione)
- "imMnMn" è il menù
- "imContentGraphics" è lo sfondo dei contenuti (tutti i contenuti)
- "imFooterBg" è lo sfondo dell Footer (ossia sfondo piè pagina)

-->

<style>

html, body {height:100%; width:100%; margin: 0px, padding: 0px; }
html { } /* Eventuali personalizzazioni */
body { margin: 0 auto !important; }/* Eventuali personalizzazioni */

* {margin: 0 auto !important; }

#imPage {min-height:100%; width:100%; margin: 0px; padding: 0px; z-index:1000003 !important; }
#imHeader, #imHeaderBg { width:100%; margin: 0px 0px; left: 0; top: 0; }

#imMnMn {position: absolute; top: 150px; margin: 0xp; padding:0px; width: 100%; }
#imMnMn > ul { text-align: left; }
#imMnMn li {display: inline; }

#imContent {
height:90%;
min-height:200px;
width:100%;
margin:0;
margin-top: 40px;
padding:0px;
overflow:hidden;
}
#imContentGraphics { position:absolute; top:190; left:0; width:100%; }

#imFooter, #imFooterBg {
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

#imFooPad { } /* Mappa del sito di fine pagina */

img, embed, object, video { max-width: 100%; } /* Per evitare lo sbordamento di immagini, video... dal loro box contenitore */

</style>

<!-- Selezione delle Righe e Colonne nella struttura della pagina 
(il richiamo vinene fatto attraverso l'uso delle pseudoclassi strutturali).
Notare che: 
1) l'espressione "div[style^="width:"]:nth-of-type(2)" richiama la seconda sriga riga (ossia 2° figlio di quel tipo)
2) l'espresssione "div[style^="float:"]:nth-of-type(1)" richiama la 2° colonna (ossia 2° figlio di quel tipo)
3) Per ogni riga, le colonne corrispondono agli elementi inseriti + eventuali spazi vuoti) 
4) Layout ad una sola riga hanno solo i div delle colonne presenti (vedere il sorgente della struttura)
-->

<style>
div[style^="width:"] {width:100% !important; float:left !important; } /* elementi riga della struttura */
div[style^="float:"] {width:auto !important; float:left !important; } /* elementi colonne della struttura (i vari oggetti o spazi vuoti nella struttura) */

/* RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA:
#imContent div[style^="width:"]:nth-of-type(2) { width:100% !important; } richiama la 2° riga (ossia il secondo figlio di quel tipo (riga) 
#imContent div[style^="width:"]:nth-of-type(1) div[style^="float:"]:nth-of-type(3) {width:100% !important; float:left !important; } /* richiama la 3° colonna della prima riga("nth-child(2)") 
*/
</style>

<!-- Selezione generale degli elementi del contenuto della pagina -->

<style>
div[id^="imCell_"] {width:100% !important; float:left !important; } /* contenitori dei contenitori oggetti (Richiamo generale) */
div[id^="imCellStyle_"] {width:100% !important; } /* elementi contenitori oggetti (Richiamo generale) */
#imContent iframe {width:98% !important; float:left;} /* elementi iFrame (ad esempio per i contenuitori delle mappe) */

div[id^="imHTMLObject_"] {width:100% !important; } /* elementi contenitori oggetti HTML */

div[id^="imTextObject_"] {width:100% !important; } /* elementi style contenitori TESTO */
div[id^="imTableObject_"] {width:100% !important; } /* elementi style contenitori TABELLA */
div[class^="text-container"] {width:100% !important; } /* (eventuali schede) contenitori dei contenitori SCHEDE */
div[class^="text-tab-content"] {width:100% !important; } /* (eventuali schede) elementi contenitori SCHEDE */
div[class^="text-inner"] {width:98% !important; } /* elementi testi oggetti testo */
table { width:100% !important; } /* elementi tabella (ognuna identificata con un id ) */
tr { } /* righe tabella (non identificate univocamente, usare le pseudoclassi strutturali per richiamrle singolarmente: ad ES. "tr:nth-child(4) td {...}") */
td { } /* colonne tabella (identificate complessivamente con la classe "imVc" ma non identificate univocamente (vale il discorso fatto sopra per il richiamo singolare delle righe) */

div[id^="imObjectImage"] {width:100% !important; } /* elementi contenitori oggetti IMMAGINE */
img[id^="imObjectImage"] {width:100% !important; height: auto !important;} /* IMMAGINI contenute nel oggetto contenitore */

div[id^="imObjectGallery"] {width:100% !important; } /* elementi contenitori oggetti GALLERY */

div[id^="imObjectVideo"] {width:100% !important; } /* elementi contenitori oggetti VIDEO */

*[id^="imObjectForm"] {width:100% !important; } /* elementi contenitori oggetto FORM */
*[id^="imObjectForm"] fieldset.first div {width:99% !important; } /* elementi contenuti nell' oggetto FORM */

div[id^="imObjectSocialNetwork"] {width:100% !important; } /* elementi contenitori oggetto SOCIAL */

div[id^="GuestBookObject"] {width:100% !important; } /* elementi contenitori oggetto GUESTBOOK */

div[id^="imObjectMap"] {width:100% !important; } /* elementi contenitori oggetto MAPPA */

div[id^="imObjectFlash"] {width:100% !important; } /* elementi contenitori oggetto ANIMAZIONE FLASH */

div[id^="imProductList"] {width:100% !important; } /* elementi contenitori oggetto CARRELLO PRODOTTI */

div[id^="dynObj"] {width:100% !important; } /* elementi contenitori OGGETTO DINAMICO */ 
div[id^="dynamic-object-text"] {width:100% !important; } /* elementi TESTO OGGETTO DINAMICO */

</style>

<!--
ESEMPIO di stili per operare nei singoli elementi del contenuto della pagina (richiamandoli col proprio id)

<style type="text/css">
#imContent > div { width:100% !important }
#imCell_1 { width:100% !important; }
#imCellStyle_1 { width:100% !important; }

div[style="float: left; width: 320px;"] { width:31.3% !important; margin:1%; }
#imCell_2 { width:100% !important; }
#imCellStyle_2 { width:100% !important; }
#imCellStyle_2 .text-inner { width:88% !important; }
#imCell_2 img{ width:100% !important; height: auto !important; }

#imCell_3 { width:100% !important }
#imCellStyle_3 { width:100% !important }
#imCellStyle_3 .text-inner { width:88% !important; }
#imCell_3 img{ width:100% !important; height: auto !important; }

#imCell_4 { width:100% !important }
#imCellStyle_4 { width:100% !important }
#imCellStyle_4 .text-inner { width:88% !important; }
#imCell_4 img{ width:100% !important; height: auto !important; }
</style>

-->

[/quote]

... sarebbe stato utile per la valutazione presentarne l'anteprima di quello che si è fatto...

... ottima come idea, ma va bene come esperimenti e soddisfazioni personali...

... per WebSiteX5 non servirebbe usandolo ad hoc, e se non si ottiene CLICCANDO come sta nella sua filosofia, e non sarebbe a conti fatti un bel vedere; un sito para-responsive si può ottenere anche senza uso di codici:
http://www.zspace.it/kolasim/paginaelastica_k/paginaelastica_k100.html
http://www.zspace.it/kolasim/paginaelastica_k/paginaelastica_k.html
... vedi anche il pioniere in WebSiteX5, ed altro, qui: https://helpcenter.websitex5.com/post/113289
...
... complimenti comunque per l'iniziativa, che personalmente purtroppo non posso provare...
... appassionati del responsive e che possono valutare e provare potrebbero dirti di più e nel caso consigliarti...
.

ciao

Ecco un esempio di ciò che dicevo sopra:

http://www.net-office.it/test-res/

Sotto c'è il codice leggermente aggiornato per ottenere quella pagina responsiva.

meglio scriverlo normale va...

<!-- RESPONSIVIZZAZIONE STRUTTURA WEBSITE -->

<!-- Elementi che compongono il flusso normale della pagina (ossia elementi statici e relativi):
- "html" è la pagina intera cioè la finestra del browser (ossia lo sfondo)
- "imPage" è l'elemento contenitore di tutti gli altri facenti parte del flusso normale
- "imHeader"(ossia intestazione), "imContent" e "imFooter"(ossia piè pagina), sono gli elementi contenuti che si susseguono

Elementi absolute staccati dagli altri (si rapportano all'html ossia finestra del browser):
- "imHeaderBg" è lo sfondo dell'Header (ossia sfondo intestazione)
- "imMnMn" è il menù
- "imContentGraphics" è lo sfondo dei contenuti (tutti i contenuti)
- "imFooterBg" è lo sfondo dell Footer (ossia sfondo piè pagina)

-->

<style>

html, body {height:100%; width:100%; margin: 0px, padding: 0px; }
html { } /* Eventuali personalizzazioni */
body { margin: 0 auto !important; }/* Eventuali personalizzazioni */

* {margin: 0 auto !important; min-height: auto !important; }

#imPage {min-height:100%; width:100%; margin: 0px; padding: 0px; z-index:1000003 !important; }
#imHeader, #imHeaderBg { width:100%; margin: 0px 0px; left: 0; top: 0; }

#imMnMn {position: absolute; top: 150px; margin: 0xp; padding:0px; width: 100%; }
#imMnMn > ul { text-align: left; }
#imMnMn li {display: inline; }

#imContent {
height:90%;
min-height:200px;
width:100%;
margin:0;
margin-top: 40px !important;
padding:0px;
overflow:hidden;
}
#imContentGraphics { position:absolute; top:190; left:0; width:100%; }

#imFooter, #imFooterBg {
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

#imFooPad { } /* Mappa del sito di fine pagina */

img, embed, object, video { max-width: 100%; } /* Per evitare lo sbordamento di immagini, video... dal loro box contenitore */

</style>

<!-- Selezione delle Righe e Colonne nella struttura della pagina
(il richiamo vinene fatto attraverso l'uso delle pseudoclassi strutturali).
Notare che:
1) l'espressione "div[style^="width:"]:nth-of-type(2)" richiama la seconda sriga riga (ossia 2° figlio di quel tipo)
2) l'espresssione "div[style^="float:"]:nth-of-type(1)" richiama la 2° colonna (ossia 2° figlio di quel tipo)
3) Per ogni riga, le colonne corrispondono agli elementi inseriti + eventuali spazi vuoti)
4) Layout ad una sola riga hanno solo i div delle colonne presenti (vedere il sorgente della struttura)
-->

<style>
div[style^="width:"] {width:100% !important; float:left !important; } /* elementi riga della struttura */
div[style^="float:"] {width:auto !important; float:left !important; } /* elementi colonne della struttura (i vari oggetti o spazi vuoti nella struttura) */

/* RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA:
#imContent div[style^="width:"]:nth-of-type(2) { width:100% !important; } richiama la 2° riga (ossia il secondo figlio di quel tipo (riga)
#imContent div[style^="width:"]:nth-of-type(1) div[style^="float:"]:nth-of-type(3) {width:100% !important; float:left !important; } /* richiama la 3° colonna della prima riga("nth-child(2)")
*/
</style>

<!-- Selezione generale degli elementi del contenuto della pagina -->

<style>
div[id^="imCell"] {width:100% !important; float:left !important; } /* contenitori dei contenitori oggetti (Richiamo generale) */
div[id^="imCellStyle"] {width:100% !important; } /* elementi contenitori oggetti (Richiamo generale) */
#imContent iframe {width:100% !important; } /* elementi iFrame (ad esempio per i contenuitori delle mappe) */

div[id^="imHTMLObject"] {width:100% !important; } /* elementi contenitori oggetti HTML */

div[id^="imTextObject"] {width:100% !important; } /* elementi style contenitori TESTO */
div[id^="imTableObject"] {width:100% !important; } /* elementi style contenitori TABELLA */
div[class^="text-container"] {width:100% !important; } /* (eventuali schede) contenitori dei contenitori SCHEDE */
div[class^="text-tab-content"] {width:100% !important; } /* (eventuali schede) elementi contenitori SCHEDE */
div[class^="text-inner"] {width:98% !important; } /* elementi testi oggetti testo */
table { width:100% !important; } /* elementi tabella (ognuna identificata con un id ) */
tr { } /* righe tabella (non identificate univocamente, usare le pseudoclassi strutturali per richiamrle singolarmente: ad ES. "tr:nth-child(4) td {...}") */
td { } /* colonne tabella (identificate complessivamente con la classe "imVc" ma non identificate univocamente (vale il discorso fatto sopra per il richiamo singolare delle righe) */

div[id^="imObjectImage"] {width:100% !important; } /* elementi contenitori oggetti IMMAGINE */
img[id^="imObjectImage"] {width:100% !important; height: auto !important;} /* IMMAGINI contenute nel oggetto contenitore */

div[id^="imObjectGallery"] {width:100% !important; height:auto !important; min-height: none !important; float:none !important;} /* elementi contenitori oggetti GALLERY */

div[id^="imObjectVideo"] {width:100% !important; } /* elementi contenitori oggetti VIDEO */

*[id^="imObjectForm"] {width:100% !important; } /* elementi contenitori oggetto FORM */
*[id^="imObjectForm"] fieldset.first div {width:99% !important; } /* elementi contenuti nell' oggetto FORM */

div[id^="imObjectSocialNetwork"] {width:100% !important; } /* elementi contenitori oggetto SOCIAL */

div[id^="GuestBookObject"] {width:100% !important; } /* elementi contenitori oggetto GUESTBOOK */

div[id^="imObjectMap"] {width:100% !important; } /* elementi contenitori oggetto MAPPA */

div[id^="imObjectFlash"] {width:100% !important; } /* elementi contenitori oggetto ANIMAZIONE FLASH */

div[id^="imProductList"] {width:100% !important; } /* elementi contenitori oggetto CARRELLO PRODOTTI */

div[id^="dynObj"] {width:100% !important; } /* elementi contenitori OGGETTO DINAMICO */
div[id^="dynamic-object-text"] {width:100% !important; } /* elementi TESTO OGGETTO DINAMICO */

</style>

<!--
ESEMPIO di stili per operare nei singoli elementi del contenuto della pagina (richiamandoli col proprio id)

<style type="text/css">
#imContent > div { width:100% !important }
#imCell_1 { width:100% !important; }
#imCellStyle_1 { width:100% !important; }

div[style="float: left; width: 320px;"] { width:31.3% !important; margin:1%; }
#imCell_2 { width:100% !important; }
#imCellStyle_2 { width:100% !important; }
#imCellStyle_2 .text-inner { width:88% !important; }
#imCell_2 img{ width:100% !important; height: auto !important; }

#imCell_3 { width:100% !important }
#imCellStyle_3 { width:100% !important }
#imCellStyle_3 .text-inner { width:88% !important; }
#imCell_3 img{ width:100% !important; height: auto !important; }

#imCell_4 { width:100% !important }
#imCellStyle_4 { width:100% !important }
#imCellStyle_4 .text-inner { width:88% !important; }
#imCell_4 img{ width:100% !important; height: auto !important; }
</style>

-->

</style>

<!-- Spazio in % degli elementi sulla stessa riga -->
<style>

#imContent div[style^="width:"]:nth-of-type(6) div[style^="float:"]:nth-of-type(1) {width:50% !important; float:left !important; } /* richiama il 1° elemento dlla 6° riga */
#imContent div[style^="width:"]:nth-of-type(6) div[style^="float:"]:nth-of-type(2) {width:50% !important; float:left !important; } /* richiama il 2° elemento dlla 6° riga */
#imContent div[style^="width:"]:nth-of-type(7) div[style^="float:"]:nth-of-type(1) {width:70% !important; float:left !important; } /* richiama il 1° elemento dlla 7° riga */
#imContent div[style^="width:"]:nth-of-type(7) div[style^="float:"]:nth-of-type(2) {width:30% !important; float:left !important; } /* richiama il 2° elemento dlla 7° riga */

</style>

ciao Massimo ti seguo, qui e nel topic di Skeggia:

avrei molto da dire ai vari guru/moderatori  che mettono in un angolo gli oggetti  e le caratteristiche peculiari del programma per rinforzare la propria tesi di sabbia, ma non lo farò perché ho altre priorità.

Ti consiglio di insistere nel tuo tentativo ma solo a scopo autodidattico perché credo che ormai (sempre se verrà rispettata la consuetudine) non manchi molto all'uscita della nuova versione del programma, la quale se non verranno deluse le forti e pressanti insistenze  nostre vedrà inclusa anche la possibilità del responsive.

Personalmente ho già raggiunto mesi fa risultati decisamente migliori e mai pubblicati che poi ho interrotto a causa di circostanze e di sentimenti/risentimenti personali.

Se lo fai per te stesso insisti pure, a rischio dei tuoi rapporti con chi in questo forum ed in quello non ufficiale ha fatto il nido e rispettivi gregari.

Se hai un interesse professionale nella materia invece che hobbystica...lascia perdere; non ne vale la pena.

... ottimo esercizio ed orizzonti allargati; ...ho visto che ti sei aggregato al Topic di Skeggia...

.

ciao

ciao Massimo, bel lavoro... come detto da Fabio e KolAsim, io nel post che ho aperto e ti sei inserito, avevo gettato il sasso nello stagno, raccolto poi da fabio, provando e riprovando però ho deciso che dopo aver ottenuto risultati, per me, a dir poco deludenti, mentre fabio è andato mooolto oltre, di non proseguire su questa strada, perchè con website 11pro è uno sforzo improbo, ma non impossibile, come dimostrato anche da "quelli del cucuzzolo"...ma ne vale la pena? a scopo didattico si... io penso che websiteX5 per la stragrande maggioranza degli utenti vada bene per quello che è, io non ho cambiato programma con quelli della concorrenza perchè website ti permette di fare le operazioni di base per costruire un sito molto semplicemente, anche l'aggiunta di codice per chi ne è capace, per tutto il resto c'è....mastercard...poi non essendo un amante della navigazione da smartphone, con quegli schermi così piccoli, che personalmente uso solo per "servizio" cioè per reperire informazioni immediatamente mentre si è in mobilità...poi come dice fabio, se è vero, che la prossima versione renderà possibile il responsive, ne saremo tutti felici per il lavoro in meno da fare...
un saluto a Massimo, Fabio & Kol...

Ciao Skeggia,

di cuore ricambio il saluto ed aggiungo che

• il mio tentativo e quello di "quelli del cocuzzolo" sono scarsamente comparabili, in quanto loro sono partiti da un template  responsive preconfezionato per adattarlo al programma (in maniera lodevole ma limitata), mentre io ho lavorato sull'adattabilità di un progetto esistente creato con una versione perfino vecchia del programma per non obbligare gli utenti alla forzata conversione di un sito già in funzione e collaudato
• nel frattempo non ho visto un solo esempio di applicazione dei loro template da parte degli estimatori o di loro stessi; esiste una serie di problematiche che sublimano la presentazione degli oggetti più semplici e comuni come i testi e le immagini da integrare nel template; qualora anche si decidesse di ridisegnare il proprio sito usando uno di quei templates come si comporterebbe un sottosito come il blog o il cart o la pagina di ricerca...? assumerebbero anch'esse il template? magari "quelli del cocuzzolo" anno previsto anche questa eventualità, ma in mancanza di dimostrazioni mi permetto di preferire alla loro la mia che lo fa, ed alla mia quella di Incomedia che lo farà

@Massimo:

• smetti di lavorare senza "display: flex"
• aggiungi qualche riga di jQ (per soggiogare i limiti del css)
• considera il formato svg
• separati da ogni preconcetto di design che limita il tuo ingegno personale

e forse otterrai quel che stai cercando!

ho visto l'ultima newsletter di Incomedia: hanno appena fatto una promozione sulla 11Evo col 60% di sconto fino al 30 Agosto; mi sa che appena rientrano dalle ferie lanciano la nuova

Cosa intendi per "dispaly: flex" ???

https://helpcenter.websitex5.com/post/113289#48