Il modello di sito web Dwelling CMS è pensato per le aziende immobiliari che necessitano di un sito web accattivante per i propri clienti, che li aiuti a generare nuovi contatti.
Struttura
La struttura di questo modello è realizzata principalmente utilizzando una struttura di layout a 12 colonne.
Per creare un layout a colonne, una sezione avrà bisogno di un blocco div padre con una classe di "12 colonne". Sono disponibili classi combinate per modificare l'allineamento.
Quindi, posiziona i blocchi div con la classe "Colonna" al loro interno. Questi diventeranno le tue colonne, quindi dovresti averne quante ne vuoi.
Quindi, puoi aggiungere una classe combinata specifica che determinerà il numero di colonne utilizzate dal contenuto. Ad esempio, un layout con contenuto a sinistra e un'immagine a destra potrebbe utilizzare la classe combinata "Desktop 6" per entrambe le colonne. Ciò significa che ogni blocco occuperà 6 colonne, ovvero il 50% della larghezza disponibile.
È possibile aggiungere classi combinate per modificare la larghezza delle colonne per tablet e dispositivi mobili.
Sezioni e contenitori
Per ogni blocco di contenuto è necessario utilizzare sezioni e contenitori. Le sezioni organizzano il contenuto e applicano spaziatura superiore e inferiore al blocco. I contenitori impostano una larghezza massima che si adatta alle dimensioni del dispositivo. Le sezioni dispongono di classi e classi combinate per le varianti a cui puoi fare riferimento di seguito.
Applicato all'elemento della sezione Webflow, aggiunge un riempimento superiore e inferiore al contenuto
Modifica il padding superiore trovato nella classe Section in double .
Modifica l'imbottitura inferiore trovata nella classe Sezione in doppia .
Modifica sia il padding superiore che quello inferiore presenti nella classe Section in double .
Applicato al blocco div annidato all'interno dell'elemento sezione. Questo limita tutto il contenuto a una larghezza massima .
Componenti
Questo modello include componenti predefiniti per consentire una creazione rapida e semplice delle pagine. Il modello include componenti per la navigazione, il piè di pagina e le sezioni comuni che generalmente verrebbero ripetute. Puoi visualizzare l'elenco completo dei componenti qui . I componenti possono essere utilizzati in due modi:
Contenuto identico per ogni istanza: utile per la navigazione e il piè di pagina, che dovrebbero essere identici in ogni pagina. Apportando una modifica all'istanza in un punto, la stessa verrà aggiornata in ogni pagina.
Proprietà dei componenti: per i componenti che utilizzano le proprietà di Webflow, come il componente Split Layout, è possibile utilizzare la barra laterale destra per apportare aggiornamenti di testo, immagini e link a quella singola istanza senza influire sulle altre. Questa funzionalità è ideale per i moduli che presentano contenuti diversi nel sito, ma il layout e lo stile devono rimanere sempre gli stessi.
Come usare
Accedi ai componenti nella barra degli strumenti a sinistra. Seleziona il componente desiderato per posizionarlo sulla pagina.
Fare doppio clic sul componente per aggiornare globalmente qualsiasi contenuto.
Utilizzare le proprietà del componente nella barra laterale destra per apportare modifiche uniche al contenuto senza influire sulle altre istanze di quel componente.
Se il componente deve essere completamente univoco, basta fare clic con il pulsante destro del mouse sul componente e selezionare "Scollega istanza".
Guida di stile
È disponibile una guida di stile per aggiornare facilmente gli stili che cambieranno a livello globale sul sito. Visita la guida di stile qui .
Tipografia
L'aggiornamento del carattere e delle dimensioni del carattere deve essere effettuato tramite la guida di stile. Per aggiornare il carattere principale, seleziona l'elemento Corpo e poi scegli il tag Corpo (Tutte le pagine) dal pannello di stile. Apportando modifiche qui, il carattere verrà aggiornato in tutto il progetto.
Per aggiornare il carattere e le dimensioni del titolo, seleziona ciascun titolo e poi modifica lo stile desiderato.
Colori
Per modificare i colori del sito web, vai alla sezione colori nella guida di stile. Seleziona uno dei blocchi di colore.
Nel pannello stile, seleziona il colore di sfondo.
Nel pop-up, seleziona l'icona della matita per cambiare il colore primario. Questo cambierà il colore in tutto il sito.
Ulteriori informazioni
Per ulteriori informazioni, visitare Webflow University per tutorial approfonditi.
.png)