WebSite X5Help Center

 
Francesco C.
Francesco C.
User

Consiglio impostazione layout sito  it

Autore: Francesco C.
Visite 1687, Followers 2, Condiviso 0  

Mi sono imbattuto sul sito di orologi "swatch" e mi ha colpito la semplicità ed il layout della home.

Ho cercato di creare una cosa simile ma non riesco (ed ho provato varii metodi) ad ottenere 2 cose in primis. 

1 - Sul sito swatch le immagini del menu sono disposte su 2 colonne in versione mobile, su 3 colonne in versione desktop. Nei miei tentativi con WebSite invece, nella versione mobile le immagini vengono disposte automaticamente una per colonna. Ho anche eliminato il breakpoint inferiore ai 480px, ma così ottengo 3 immagini per colonna e il risultato fa diventare ciechi. Come potrei gestire la disposizione di più immagini per colonna sulla versione mobile? 

2 - Sempre le immagini che vengono usate nel menu della home, hanno il collegamento nella parte bassa con i testi che cambiano colore al passaggio del mouse. Inoltre, i testi sono racchiusi in una cella a sfondo bianco che segue e si adatta alle varie dimensioni delle immagini (per dimensioni intendo le differenze tra desktop e mobile). Come potrei ottenere un risultato simile?

Grazie e scusate se sono stato poco chiaro. 

Postato il
18 RISPOSTE - 6 UTILI
Fabio C.
Fabio C.
User

1) Devi fare il contrario di quello che hai fatto, aggiungi un breakpoint inferiore al 480, fai sia quello da 480 che un'altro da 400

2) Simula un collegamento ipertestuale. al posto del percorso ci metti #

Leggi di più
Postato il da Fabio C.
Francesco C.
Francesco C.
User
Autore

Grazie per la risposta.

Proverò il primo consiglio, per il secondo non ho capito invece.

Leggi di più
Postato il da Francesco C.
Fabio C.
Fabio C.
User

Inserisci l'oggetto testo poi in Inserisci Collegamento clicchi su File o Url--->file su internet e inserisci # e in opzioni "apri nella stessa finestra" in questo modo hai simulato un collegamento ipertestuale e al passaggio del mouse il testo cambierà di colore in base a come hai settato i testi al passo 2--->Stile dei testi--->collegamento su passaggio del mouse

Leggi di più
Postato il da Fabio C.
Francesco C.
Francesco C.
User
Autore

Riprendo questa discussione in quanto non riesco a venirne a capo. 

Il 1° punto non riesco ad ottenerlo. 

Vorrei ottenere le immagini in 3 colonne su versioni ne desk e su 2 colonne in versione mobile.

Ho provato con immagini semplici ma ottengo 2 risultati:

1° risultato = 3 colonne sia su desk che mobile.

2° risultato = 3 colonne su desk e 1 su mobile.

Come già scritto vorrei emulare una cosa simile al sito della swatch (basta googla re).

Ho provato con l'oggetto mansory (mi pare di ricordare che si scriva così) ma anche dando impostando il numero di colonne, non rispetta i settaggi che imposto.

Leggi di più
Postato il da Francesco C.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

ma hai fatto quello che ti ha suggerito Patrizia ?

comunque ... ...posta il link del sito dove stai provando...

che vale più di mille parole...

Leggi di più
Postato il da Claudio D.
Francesco C.
Francesco C.
User
Autore

Ho fatto varii tentativi, anche quello gentilmente suggerito da Patrizia.

La bozza è qui.

Quello che voglio ottenere invece è un risultato del genere 

(le 3 colonne su mobile diventano 2).

Leggi di più
Postato il da Francesco C.
Stiac Engineering
Stiac Engineering
User

Ciao Francesco,

se intendi il sito shop.swatch.com mi pare di vedere qualche problemino da mobile.

Un oggetto che ti potrebbe essere di aiuto dal mio punto di vista è Masonry (es. https://www.stiac.it/website-book.php).

Se desideri invece posizionare più oggetti, suppongo tu debba "giocare" con i breakpoint, tuttavia non credo sia possibile riuscire nell'intento senza codice extra.

L'ordinamento generalmente va per multipli, ad esempio 6 celle da PC, 3 intermedi e 1 da mobile. Il problema principale deriva che non è possibile switchare da multipli di 3 a 2, almeno non con la versione corrente.

Potresti usare 4 blocchi da desktop. Con multipli diversi ottieni che i primi elementi vengono posizionati singolarmente, ad esempio:

A.

B.

Andrebbe implementa la logica del programma che al posto di mandare le celle 5 e 6 su una riga propria, le posizioni raggruppate come le altre celle nella figura B.

Almeno è ciò che denoto io per il primo quesito.

Per rispondere al secondo quesito, potresti usare l'opzione Stile dell'oggetto e impostare del testo di descrizione o in alternativa l'oggetto Content Slider (esempio qui).

Spero di esserti stato di aiuto.

Leggi di più
Postato il da Stiac Engineering
Francesco C.
Francesco C.
User
Autore

Ho provato masonry ma passa sempre da 3 ad 1.

Ho provato anche i brakpoint...

Qualcuno puo' aiutarmi con codice extra?

Leggi di più
Postato il da Francesco C.
Claudio D.
Claudio D.
Moderator
Utente del mese IT
Francesco C.
Ho provato anche i brakpoint...

metti un breakpoint a 320 che è il minimo ...

così avrai due oggetti posizionabili tra il 320 ed il break superiore...

sotto i 320 website forza l'oggetto singolo...

Leggi di più
Postato il da Claudio D.
Francesco C.
Francesco C.
User
Autore

Proverò anche questa alternativa a 320px.

In realtà con un breakpoint a 480 ed un ulteriore a 400px, su i cellulari con schermo più grande (anche a  parità di risoluzione) riesco a visualizzare 2 colonne.

Esempio :

s10 plus (impostato in fullhd) 2 colonne.

S7 edge 1 sola colonna.

Se la risoluzione è la stessa, perché ottengo 2 diversi risultati? 

Leggi di più
Postato il da Francesco C.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

il 320 è la risoluzione minima con la quale tagli fuori praticamente quasi tutti gli smartphone... 

e così penso che risolverai...

Leggi di più
Postato il da Claudio D.
Francesco C.
Francesco C.
User
Autore
Gabriele C.
Ciao Francesco, se intendi il sito shop.swatch.com mi pare di vedere qualche problemino da mobile. Un oggetto che ti potrebbe essere di aiuto dal mio punto di vista è Masonry (es. https://www.stiac.it/website-book.php). Se desideri invece posizionare più oggetti, suppongo tu debba "giocare" con i breakpoint, tuttavia non credo sia possibile riuscire nell'intento senza codice extra. L'ordinamento generalmente va per multipli, ad esempio 6 celle da PC, 3 intermedi e 1 da mobile. Il problema principale deriva che non è possibile switchare da multipli di 3 a 2, almeno non con la versione corrente. Potresti usare 4 blocchi da desktop. Con multipli diversi ottieni che i primi elementi vengono posizionati singolarmente, ad esempio: A. B. Andrebbe implementa la logica del programma che al posto di mandare le celle 5 e 6 su una riga propria, le posizioni raggruppate come le altre celle nella figura B. Almeno è ciò che denoto io per il primo quesito. Per rispondere al secondo quesito, potresti usare l'opzione Stile dell'oggetto e impostare del testo di descrizione o in alternativa l'oggetto Content Slider (esempio qui). Spero di esserti stato di aiuto.

In realtà non sono riuscito neanche con masonry (l'ho scritto anche prima).

L'esempio del sito swatch l'ho linkato qui.

Francesco C.
Ho fatto varii tentativi, anche quello gentilmente suggerito da Patrizia. La bozza è qui. Quello che voglio ottenere invece è un risultato del genere  (le 3 colonne su mobile diventano 2).
Leggi di più
Postato il da Francesco C.
Stiac Engineering
Stiac Engineering
User

Il motivo per cui non ci riesci lo trovi nella risposta che ti ho fornito. Non è possibile switchare da multipli di 3 a 2 e viceversa.

Dovresti attendere qualche idea o ingegnarti come possibile.

Leggi di più
Postato il da Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Francesco C.
... ... ... In realtà non sono riuscito neanche con masonry (l'ho scritto anche prima). ... ... ...

... se noti, l'esempio originale Masonry divide le colonne per 5, 4, 3, 2, ... come vorresti ottenere tu...

... breakpoint >> 1400 > 1200 > 960 > 720 > 480

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco C.
Francesco C.
User
Autore

Farò altre prove.

Se qualche buon'anima dovesse riuscire...

Piu che masonry, l'ideale nel mio caso sarebbe ottenere questo risultato con immagini semplici o con l'oggetto" animated image" (magari con codice extra). 

In tutti i casi anche con masonry potrei "accontentarmi". 

Leggi di più
Postato il da Francesco C.
Francesco C.
Francesco C.
User
Autore
 ‪ KolAsim ‪ ‪
Francesco C. ... ... ... In realtà non sono riuscito neanche con masonry (l'ho scritto anche prima). ... ... ... ... se noti, l'esempio originale Masonry divide le colonne per 5, 4, 3, 2, ... come vorresti ottenere tu... ... breakpoint >> 1400 > 1200 > 960 > 720 > 480 .

Proverò questi breakpoint e aggiornerò a breve.

@ KolAsim - Se invece volessi ottenere lo stesso risultato con immagini semplici, magari con codice extra, avresti qualche soluzione adatta allo scopo?

Leggi di più
Postato il da Francesco C.
Francesco C.
Francesco C.
User
Autore

Con un compromesso alla fine ci sono riuscito.

Se qualcuno che è ferrato riesce con codice extra, ne sarei grato.

Leggi di più
Postato il da Francesco C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... senza programma non posso dirti molto...
... hai provato con l'Oggetto Testo...?... ... ... le immagini affiancate verrebbero considerate come testo, andando all'occorrenza a capo...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪