WebSite X5Help Center

 
Francesco C.
Francesco C.
User

Consiglio impostazione layout sito  it

Автор: Francesco C.
Просмотрено 1285, Подписчики 2, Размещенный 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. 

Размещено
18 Ответы - 6 Полезно
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 #

Читать больше
Размещено От Fabio C.
Francesco C.
Francesco C.
User
Автор

Grazie per la risposta.

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

Читать больше
Размещено От 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

Читать больше
Размещено От Fabio C.
Francesco C.
Francesco C.
User
Автор

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.

Читать больше
Размещено От Francesco C.
Claudio D.
Claudio D.
Moderator

ma hai fatto quello che ti ha suggerito Patrizia ?

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

che vale più di mille parole...

Читать больше
Размещено От Claudio D.
Francesco C.
Francesco C.
User
Автор

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

Читать больше
Размещено От 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.

Читать больше
Размещено От Stiac Engineering
Francesco C.
Francesco C.
User
Автор

Ho provato masonry ma passa sempre da 3 ad 1.

Ho provato anche i brakpoint...

Qualcuno puo' aiutarmi con codice extra?

Читать больше
Размещено От Francesco C.
Claudio D.
Claudio D.
Moderator
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...

Читать больше
Размещено От Claudio D.
Francesco C.
Francesco C.
User
Автор

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? 

Читать больше
Размещено От Francesco C.
Claudio D.
Claudio D.
Moderator

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

e così penso che risolverai...

Читать больше
Размещено От Claudio D.
Francesco C.
Francesco C.
User
Автор
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).
Читать больше
Размещено От 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.

Читать больше
Размещено От 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Francesco C.
Francesco C.
User
Автор

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

Читать больше
Размещено От Francesco C.
Francesco C.
Francesco C.
User
Автор
 ‪ 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?

Читать больше
Размещено От Francesco C.
Francesco C.
Francesco C.
User
Автор

Con un compromesso alla fine ci sono riuscito.

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

Читать больше
Размещено От 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...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪