WebSite X5Help Center

 
Daniele R.
Daniele R.
User

Full screen responsive  it

Autor: Daniele R.
Besucht 2220, Followers 1, Geteilt 0  

Salve, ho la versione 13, e non sono mai riuscito ad impostare lo sfondo in full screen, sia come foto che come video, ma devo impostare una risoluzione e quella rimane.

Vorrei sapere se questo limite è stato risolto nella versione 16, e quindi potrò ad esempio posizionare un video a pieno schermo, e un menù in rilievo, o aggiungere una galleria fotografica che scorre a pieno schermo.

io voglio fare qualcosa tipo questo:

https://www.deantonioyachts.com/

colgo l'occasione per sapere se sono stati risoliti i problemi con la versione mobile, con il responsive design impostato correttamente in offline, quando pubblico il sito diventa ilegibile e fortemente alterato nel layout.

sto valutando di cambiare software in quanto al momento molto limitato nel suo utilizzo.

questi sono i siti:

http://www.aureayachts.com/

http://www.danielerizzo.it/

Grazie anticipatamente per la risposta.


Daniele

Gepostet am
14 ANTWORTEN - 1 NüTZLICH
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... video a tutto schermo sono sempre stati possibili con codice personalizzato extra; ...di sicuro dal 2009 per la v.8 con un mio codice extra per video e slideshow; ...ma ne è passata acqua sotto i ponti, anche se il mio codice rimane ancora attuale per importare qualsiasi implementazione extra tramite i pannelli "esperto"  messi a disposizione dal programma...

... con l'attuale la v.16 basta cliccare per usare queste opzioni nello Stile delle Righe:

Immagine: lo sfondo della Riga viene creato attraverso l'importazione di un'immagine.

Elenco immagini: come sfondo della Riga viene impostato uno SlideShow in cui le immagini scorrono una dopo l'altra.

Video: come sfondo della Riga viene utilizzato un video. (*)

... visitando > Marketplace  troverai varie decine di esempi all'avanguardia, per esempio > uno a caso ...

(*) - ...!... come è noto ed anche indicato sulla Guida, è in inibito l'autoplay audio/video sui dispositivi "mobile", e adesso anche! con il browser Chrome 66+ ...!...

... la differenza comunque la farai tu e non il programma che usi...

.

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User

Ciao Daniele, ci sono diversi modi per ovviare al problema della galleria full, sulla V16 è stato indrodotto lo stile righe ma purtroppo NON è responsive comunque puoi valutarlo tu, un esempio del suo comportamento lo puoi vedere quì

https://www.giancarloweb.it/template/phone-free/

Oppure puoi utilizzare alcune gallerie a pagamento che con una manciata di codice la puoi portare a full qui il semplice tuturial

https://www.giancarloweb.it/blog/index.php?swiper-grid-slider-full

Ciao Giancarlo.

Mehr lesen
Gepostet am von Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User

Segui i consigli che ti hanno dato KolAsim e Giancarlo. Però volevo aggiungere che nel responsive non ci sono problemi di alterazione nel layout come tu hai detto, forse non hai impostato la corretta posizione degli oggetti della pagina, o di quelli di header e footer e non hai impostato le dovute interruzioni di riga, breakpoint per breakpoint, da quello Desktop a quello mobile.

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Ho dato uno sguardo veloce al tuo sito http://www.aureayachts.com/

a me sembra che le due icone dei social, nel footer, rimangano sempre sulla stessa posizione anche al restringimento della finestra del browser, quindi nei vari breakpoint, in contenuto header e footer, dovresti andare a riposizionare correttamente entro i limiti di ogni breakpoint le due icone. Sempre che poi non ci siano altri oggetti nascosti, quindi non visibili, e fuori dai limiti.

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Ah no, mi sa che non lo hai reso responsive il sito, hai lasciato solo la visualizzazione desktop... ripeto, avevo guardato in tutta fretta. Non saprei allora...

Mehr lesen
Gepostet am von Giuseppe Guida
Claudio D.
Claudio D.
Moderator
Nutzer des Monats IT

@Daniele , ...oltre quanto ti hanno già detto ...

il sito che hai segnalato non è neppure responsive ... surprised

ti assicuro che con Website puoi fare molto di meglio ... wink

Mehr lesen
Gepostet am von Claudio D.
Daniele R.
Daniele R.
User
Autor

intanto vi ringrazio tutti per le risposte e i suggerimenti.

Ho acquistato la versione 16, ho aggiornato il sito in responsive, e ho cercato di tirare fuori il meglio con il tempo a disposizione...

La situazione è migliorata ma ancora non riesco a fare quello che avrei in testa.

Lavorando con stile righe non sono riuscito a tirare niente di buono (su desktop si, ma non si adatta il contenuto al mobile), i video vengono alterati (l'altezza del video, che in 1920x 1080 funziona, quando in mobile rimane in piena larghezza, ma sopra e sotto risultano ampie parti nere).

inoltre in versione mobile, il menù hamburgher quando on line, è diverso rispetto a  come lo faccio offline, e mi lascia una parte di schermo del cellulare (laterale destro) vuoto di contenuti.

Tramite wow slider ho tirato fuori un intro in home con immagini a schermo intero, ma in risoluzioni mobile non riesco a farle adattare!

Comunque sicuramente sarò io che non le competenze o non ho dedicato il giusto tempo.

Ma mi permetto solo di suggerire che il vostro software è vincente proprio perchè facile da usare e non richiede competenze di programmazione html, e mi piacerebbe riuscire a fare anche questi layout senza dover utilizzare altri software o fare questi "giochetti" in html, che per me che non sono un programmatore, risultano scomodi.

Confido che a breve uscirà un aggiornamento proprio per la gestione di video e foto in full screen con adattamento automatico anche in mobile.

saluti, e ancora grazie.

Daniele

Mehr lesen
Gepostet am von Daniele R.
Giancarlo B.
Giancarlo B.
User

Daniele hai messo percaso il link del sito ?

Mehr lesen
Gepostet am von Giancarlo B.
Claudio D.
Claudio D.
Moderator
Nutzer des Monats IT

...un po' troppi quesiti ...

meglio sarebbe stato se ne aprivi uno per ogni domanda e soprattutto postando il link della tua prova online...

comunque , rispondo a questa...

Daniele R.
inoltre in versione mobile, il menù hamburgher quando on line, è diverso rispetto a  come lo faccio offline, e mi lascia una parte di schermo del cellulare (laterale destro) vuoto di contenuti.

se ti succede è perchè hai degli elementi (di solito in testata o in piè di pagina) che fuoriescono verso destra e quindi ti appare la barra di scorrimento...

...però non vedendo la prova... vado solo per supposizione...

Mehr lesen
Gepostet am von Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Daniele R.
... ... ... ... i video vengono alterati ... ... ... quando in mobile rimane in piena larghezza, ma sopra e sotto risultano ampie parti nere... ... ... 

... con quanto ti avevo suggerito inizialmente non dovresti trovare problemi, ed i video per i motivi che ti ho già detto sarebbe sicuramente meglio evitarli...!...

... con il LINK si potrebbe valutare, ma sicuramente le bande nere dipendono dai rapporti proporzionali in gioco; comunque, e volendo, controllabili, ...come per esempio appunto nel caso di video come sfondo, usare in un cella unica a tutta larghezza un immagine PNG o GIF trasparente nei rapporti del video, per es. 16:9...

...

Daniele R.

... ... ... ... 

inoltre in versione mobile, il menù hamburgher quando on line, è diverso rispetto a  come lo faccio offline, e mi lascia una parte di schermo del cellulare (laterale destro) vuoto di contenuti.

... ... ... 

... come anticipato da Claudio, questo perchè avrai lasciato qualche oggetto eccedente dal lauout in qualche breakpoint intermedio, quindi devi controllare...

Daniele R.
 ... ... ... 

Tramite wow slider ho tirato fuori un intro in home con immagini a schermo intero, ma in risoluzioni mobile non riesco a farle adattare!

... ... ... 

... visto che è EXTRA, se sei in grado di realizzare un qualsiasi slidewsow EXTRA(*), e pubblicarlo in rete indipendente dal programma, poi con un mio semplicissimo metodo di mia invenzione, copia/incolla, sarebbe semplicissimo ed immediato poterlo incorporare nel progetto;...potente, facile e flessibile; ... se ti interessasse devi pubblicare lo slideshow ed anche la pagina di esempio del tuo sito con una immagine di sfondo là dove vorresti poi vedere lo slideshow; ...quando e se vedrò i due LINK in un NUOVO TOPIC, poi ti dirò il resto, ...indolore...

(*) - maximage2, vegas, tympanus, sorgalla, jssor, swiper, flexslider, amazingslider, wowslider, eccetera tra quelli più amichevoli; ...il primo è quello che preferisco...

Daniele R.

... ...  o fare questi "giochetti" in html, che per me che non sono un programmatore, risultano scomodi.

... ... ... 

... questa appunto è la forza di questo programma, che non  pone né vincoli, né limitazioni; ... hai sempre a disposizione HelpCenter e la RETE; ...nessuno nasce imparato, ma un minimo di impegno personale e di bagaglio appresso è sempre richiesto...

...

... per evitare confusioni e tornare di una certa utilità, apri nuovi argomenti a tema per ogni quesito diverso che ti si possa presentare...

.




Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
#ABCD WebAgency
#ABCD WebAgency
User

Ciao Giuseppe, credo che il tuo esempio non sia idoneo in quanto la foto non rispetta i parametri responsive; da un monitor di 2560 px io l'anteprima la vedo cosi:

riducendo il tutto, vedo cosi:

il tutto dovrebbe essere come questo link:

http://www.positanoboatcharter.com/

Mehr lesen
Gepostet am von #ABCD WebAgency
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
#ABCD WebAgency
Ciao Giuseppe, credo che il tuo esempio non sia idoneo in quanto la foto non rispetta i parametri responsive; da un monitor di 2560 px io l'anteprima la vedo cosi: http://www.positanoboatcharter.com/

... ed invece l'esempio di Giuseppe  pare proprio che rispetti la filosofia del CSS COVER anche sul "mobile", (resize-ratio C/C W<>H), cui opzione indicata al primo post "Elenco immagini", ...basato su riga ad altezza fissa...

... infatti, come si nota,  il centro dell'immagine sta sempre al centro delle rispettive finestre:

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

@#ABCD WebAgency ma se parliamo di Stile Righe (e non di Swiper Animated Slider reso full width con codice, che diventa responsive a tutti gli effetti), credo sia meglio avere un'immagine come la mia nello Stile Righe, che lascia vedere la figura della modella sia su schermi come il tuo che su dispostivi mobile, che non invece uno Stile Righe come quello del tuo esempio dove c'è scritto "Scopri il Cherokee 50 Profilmarine!" che, purtroppo a causa dell'adattamento che fa Website, non certo tu, su mobile lascia vedere solo una parte della foto di sfondo e non la foto intera...

Purtroppo sappiamo molto bene come Website X5 adatta le immagini dello Stile Righe alle risoluzioni più basse, la mia era una soluzione (non certo perfetta al 100%) per far sì che le immagini dello Stile Righe siano "decifrabili", visivamente parlando, a tutte le risoluzioni SENZA l'uso di codice (per i meno esperti che non vogliono perdere la testa dietro codici vari).

@Kol, grazie per il riscontro.

Un caro saluto a tutti

Mehr lesen
Gepostet am von Giuseppe Guida