WebSite X5Help Center

 
Francesco C.
Francesco C.
User

Consiglio impostazione layout sito  it

Auteur : Francesco C.
Visité 1699, Followers 2, Partagé 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. 

Posté le
18 RéPONSES - 6 UTILE
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 #

Lire plus
Posté le de Fabio C.
Francesco C.
Francesco C.
User
Auteur

Grazie per la risposta.

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

Lire plus
Posté le de 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

Lire plus
Posté le de Fabio C.
Francesco C.
Francesco C.
User
Auteur

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.

Lire plus
Posté le de Francesco C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois 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...

Lire plus
Posté le de Claudio D.
Francesco C.
Francesco C.
User
Auteur

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

Lire plus
Posté le de 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.

Lire plus
Posté le de Stiac Engineering
Francesco C.
Francesco C.
User
Auteur

Ho provato masonry ma passa sempre da 3 ad 1.

Ho provato anche i brakpoint...

Qualcuno puo' aiutarmi con codice extra?

Lire plus
Posté le de Francesco C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois 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...

Lire plus
Posté le de Claudio D.
Francesco C.
Francesco C.
User
Auteur

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? 

Lire plus
Posté le de Francesco C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

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

e così penso che risolverai...

Lire plus
Posté le de Claudio D.
Francesco C.
Francesco C.
User
Auteur
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).
Lire plus
Posté le de 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.

Lire plus
Posté le de 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Francesco C.
Francesco C.
User
Auteur

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

Lire plus
Posté le de Francesco C.
Francesco C.
Francesco C.
User
Auteur
 ‪ 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?

Lire plus
Posté le de Francesco C.
Francesco C.
Francesco C.
User
Auteur

Con un compromesso alla fine ci sono riuscito.

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

Lire plus
Posté le de 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...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪