WebSite X5Help Center

 
Francesco C.
Francesco C.
User

Consiglio impostazione layout sito  it

Author: Francesco C.
Visited 1776, Followers 2, Shared 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. 

Posted on the
18 ANSWERS - 6 USEFUL
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 #

Read more
Posted on the from Fabio C.
Francesco C.
Francesco C.
User
Author

Grazie per la risposta.

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

Read more
Posted on the from 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

Read more
Posted on the from Fabio C.
Francesco C.
Francesco C.
User
Author

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.

Read more
Posted on the from Francesco C.
Claudio D.
Claudio D.
Moderator
Best User of the month 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...

Read more
Posted on the from Claudio D.
Francesco C.
Francesco C.
User
Author

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

Read more
Posted on the from 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.

Read more
Posted on the from Stiac Engineering
Francesco C.
Francesco C.
User
Author

Ho provato masonry ma passa sempre da 3 ad 1.

Ho provato anche i brakpoint...

Qualcuno puo' aiutarmi con codice extra?

Read more
Posted on the from Francesco C.
Claudio D.
Claudio D.
Moderator
Best User of the month 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...

Read more
Posted on the from Claudio D.
Francesco C.
Francesco C.
User
Author

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? 

Read more
Posted on the from Francesco C.
Claudio D.
Claudio D.
Moderator
Best User of the month IT

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

e così penso che risolverai...

Read more
Posted on the from Claudio D.
Francesco C.
Francesco C.
User
Author
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).
Read more
Posted on the from 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.

Read more
Posted on the from Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Francesco C.
Francesco C.
User
Author

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

Read more
Posted on the from Francesco C.
Francesco C.
Francesco C.
User
Author
 ‪ 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?

Read more
Posted on the from Francesco C.
Francesco C.
Francesco C.
User
Author

Con un compromesso alla fine ci sono riuscito.

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

Read more
Posted on the from Francesco C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪