Introduzione
Usare Sitely
Elementi
Come fare
Quando pensiamo ai riquadri, pensiamo alle forme quadrate o rettangolari che usiamo per separare i contenuti nella pagina web. Ma c'è di più nei riquadri di quanto possa sembrare a prima vista. Sono uno dei mattoni fondamentali del design web e, se usati in modo creativo, offrono una grande flessibilità nella disposizione del messaggio della mia pagina web. Dai un'occhiata all'intestazione della pagina di esempio qui sotto. È composta quasi interamente da riquadri: alcuni con angoli arrotondati, alcuni riempiti con immagini, alcuni con un colore solido e sovrapposti da testo, e un paio con solo icone.
In Sitely, hai a disposizione tutti gli strumenti di stile che potrei desiderare per quanto riguarda i riquadri, e tutti sono comodamente collocati nel pannello Stile sulla destra dell'interfaccia di Sitely.
Thai Delights
Authentic Asian Dining Experience
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices
Button
Button
Check Out Our Menu
Due tipi di Riquadri
Il primo tipo di riquadro è il riquadro standard - appare in questo modo:
Il secondo tipo di riquadro è il riquadro largo, che appare in questo modo:
La prima opzione è il Riempimento. Qui posso selezionare un colore con cui riempire il mio riquadro. Ho anche la possibilità di creare altri tipi di riempimento dal menu a discesa Contenuto.
Il riquadro standard è progettato per creare riquadri che rimangono all'interno dei margini sinistro e destro della mia pagina web, mentre il riquadro largo è progettato per estendersi oltre i bordi sinistro e destro della pagina, occupando l'intera larghezza del browser.
Quando aggiungo un riquadro standard all'area di lavoro, posso dimensionarlo e posizionarlo come desidero. Inoltre, il riquadro può essere stilizzato per creare l'effetto desiderato. Ecco le opzioni disponibili nel pannello di stile.
Se scelgo l'opzione Gradiente, mi verrà presentata una barra di colore gradiente dove posso selezionare due colori e un angolo per il gradiente. Devo solo cliccare su ciascuna estremità della barra di colore per scegliere i miei colori e poi applicare un angolo.
Se scelgo l'opzione immagine, posso selezionare un'immagine dal mio disco per riempire il mio riquadro. Questo mi darà altre opzioni su come riempire o adattare l'immagine all'interno del riquadro. Basta selezionare la casella di controllo Estendi e fare la mia scelta. Riempire il riquadro ingrandirà l'immagine affinché occupi l'intero riquadro - questo potrebbe comportare un ritaglio dell'immagine. Se scelgo di Adattare l'immagine, non verrà ritagliata: verrà ingrandita/ridotta in dimensione affinché l'intera immagine si adatti all'interno del riquadro. A seconda del rapporto di aspetto dell'immagine, questa opzione potrebbe creare un effetto letterbox, creando spazio ai lati o sopra e sotto l'immagine. Quando scelgo l'opzione di riempimento, ho anche la possibilità di allineare l'immagine all'interno del riquadro - a sinistra, a destra o centrato, o in alto, in basso o al centro.
L'opzione SVG è fantastica per i web designer. Questi sono grafica vettoriale scalabile che possono essere posizionati in qualsiasi dimensione sull'area di lavoro, mantenendo la loro nitidezza indipendentemente dal grado di ingrandimento. Abbiamo usato grafiche SVG nell'intestazione della pagina di esempio sopra. Le tre icone a stella sono in realtà la stessa icona, duplicata e posizionata sulla pagina a dimensioni diverse. L'icona effettiva appare in questo modo.
Nota che è nera. Questo evidenzia un altro vantaggio dell'uso delle grafiche SVG. Posso cambiare il colore/tinta della grafica utilizzando l'opzione di sovrapposizione di colore nel pannello di stile. Selezionando questa opzione, posso scegliere un colore e applicarlo all'SVG. Nota: l'SVG non deve essere contenuto all'interno di un riquadro affinché questa opzione funzioni - posso semplicemente trascinare l'SVG sull'area di lavoro dove sarà posizionato come un'immagine, piuttosto che come un riquadro.
Le opzioni di pattern predefiniti e personalizzati riempiranno il mio riquadro con uno dei tanti riempimenti a pattern offerti da Sitely. Questi pattern funzionano esattamente allo stesso modo di quando vengono utilizzati come riempimento di sfondo della pagina. Posso regolare la scala del pattern per adattarlo meglio al mio design.
Configurare lo stile dei miei riquadri.
Indipendentemente da come scelgo di riempire i miei riquadri, posso aggiungere ulteriori opzioni di stile.
Bordo: Selezionando questa opzione posso applicare un bordo al mio riquadro. Posso impostare il bordo per essere lo stesso su tutti i lati, o avere uno stile/spessore/colore diverso per ogni lato del mio riquadro.
Arrotondamento: Quest'opzione aggiunge angoli arrotondati al mio riquadro. Posso selezionare di arrotondare tutti e quattro gli angoli in modo identico, o scegliere selettivamente come e quali angoli devono essere arrotondati. Se il riquadro è un quadrato perfetto, aggiungere l'arrotondamento a tutti e quattro gli angoli può trasformare il mio riquadro in un cerchio.
Ombra: Quest'opzione aggiunge un'ombra al mio riquadro. Posso regolare l'effetto spostando il piccolo punto all'interno del cerchio, o in modo più preciso, inserendo dimensioni effettive. Il colore dell'ombra può essere cambiato cliccando sul selettore di colore.
Opacità: Qui posso ridurre l'opacità del mio riquadro. Sebbene potrei semplicemente cambiare il colore del mio riquadro per creare una tonalità più chiara, l'opzione di opacità potrebbe essere preferibile quando creo determinati tipi di effetti in cui gli elementi sottostanti della pagina devono essere visibili attraverso il riquadro.
Filtri di Sfondo: Questi filtri determinano cosa succede quando ci sono altri elementi della pagina DIETRO al mio riquadro. Mentre l'opzione di opacità consente agli elementi sottostanti di mostrarsi attraverso il mio riquadro, i filtri di sfondo aggiungono un grado di distorsione agli elementi di sfondo. Ad esempio, posizionando un riquadro completamente trasparente o parzialmente trasparente su un elemento di sfondo, e poi applicando un filtro di sfondo sfocato, l'effetto assomiglia a quello di un riquadro di vetro smerigliato che galleggia sopra lo sfondo. Effetti come questo sono particolarmente efficaci se il mio riquadro ha un'animazione di scorrimento applicata. Mentre la pagina scorre, il mio riquadro potrebbe galleggiare sopra altri elementi della pagina, dando un effetto più tridimensionale alla pagina.
Poiché i riquadri sono davvero semplici da creare, sono l'elemento ideale da utilizzare quando inizio a impostare il layout della mia pagina web (wireframing). Possono emulare immagini, aree di sfondo, pulsanti e campi di modulo per darmi una rapida panoramica di come apparirà la mia pagina. Una volta che ho il mio design di wireframe di base e inizio a lavorare sui contenuti per davvero, sarebbe bello poter convertire i miei riquadri in alcuni degli elementi più comuni senza dover ricominciare da zero. Non preoccuparti, Sitely ha pensato a tutto. Posso fare clic destro su un riquadro e scegliere una delle opzioni di conversione dal menu contestuale.
Il menu contestuale ha anche un'altra funzione utile che mi consente di copiare uno stile applicato a un elemento e poi incollare quello stile su un altro elemento. Ad esempio, potrei configurare lo stile di un pulsante sulla mia pagina, completo delle sue condizioni di passaggio del mouse e di clic. Quando voglio aggiungere un altro pulsante più in basso nella pagina, posso copiare lo stile del pulsante originale e poi incollare lo stile sul nuovo pulsante. Questo mantiene i miei design coerenti in tutta la pagina.
Segnalaci difetti di questa documentazione e li risolveremo al più presto!
Aggiornato per Sitely 5.6
