Consiglio impostazione layout sito
Author: Francesco C.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.
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 #
Author
Grazie per la risposta.
Proverò il primo consiglio, per il secondo non ho capito invece.
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
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.
ma hai fatto quello che ti ha suggerito Patrizia ?
comunque ... ...posta il link del sito dove stai provando...
che vale più di mille parole...
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).
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.
Author
Ho provato masonry ma passa sempre da 3 ad 1.
Ho provato anche i brakpoint...
Qualcuno puo' aiutarmi con codice extra?
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...
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?
il 320 è la risoluzione minima con la quale tagli fuori praticamente quasi tutti gli smartphone...
e così penso che risolverai...
Author
In realtà non sono riuscito neanche con masonry (l'ho scritto anche prima).
L'esempio del sito swatch l'ho linkato qui.
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.
... se noti, l'esempio originale Masonry divide le colonne per 5, 4, 3, 2, ... come vorresti ottenere tu...
... breakpoint >> 1400 > 1200 > 960 > 720 > 480
.
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".
Author
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?
Author
Con un compromesso alla fine ci sono riuscito.
Se qualcuno che è ferrato riesce con codice extra, ne sarei grato.
... senza programma non posso dirti molto...
... hai provato con l'Oggetto Testo...?... ... ... le immagini affiancate verrebbero considerate come testo, andando all'occorrenza a capo...
.