Nozioni di base sul layout

Struttura di una pagina web slidde

Slidde.co utilizza una semplice struttura a quattro livelli:

• userCompName.Page (Stili Globali)
• userCompName.Slide (Segmentazione del Contenuto)
• userCompName.Container (Larghezza Responsiva, Colonne Multiple)
• Elementi Inline (Contenuto Specifico)

userCompName.Page

Il livello userCompName.Page è al vertice ed è utilizzato per impostare stili globali come font, colori e stili dei link, poiché le proprietà CSS sono ereditabili.

Opzionalmente, puoi utilizzare variabili CSS per rendere il tuo template più user-friendly.

Se non puoi selezionare direttamente l'elemento userCompName.Page, utilizza l'opzione userCompOption.Select page nella barra degli strumenti.

La funzione userCompOption.hashSection può simulare un sito web multi-pagina. Dai un'occhiata a questa demo: Demo Link

userCompName.Slide

Un userCompName.Slide è l'elemento di primo livello sotto un userCompName.Page, utilizzato per segmentare il contenuto.

• Pagine semplici, come le pagine "link in bio", possono avere solo uno Slide.
• Pagine di destinazione complesse potrebbero includere più sezioni come #header, #hero, #works, #contact, #footer.

Un userCompOption.htmlId è essenzialmente un ID HTML. Nominali in base al contenuto all'interno del userCompName.Slide per una facile navigazione utilizzando link come “#ID”. Scopri di più sui link di salto.

Per nascondere un userCompName.Slide dal sito web finale ma mantenerlo salvato, controlla l'attributo userCompOption.hidden. Questo è simile alle diapositive nascoste di PowerPoint e può essere utilizzato anche per tutorial.

Il userCompOption.sticky è una funzionalità per barre di navigazione flottanti o qualsiasi altro elemento. Vedi un esempio qui: Sticky Demo

userCompName.Container

Un userCompName.Container gestisce larghezze responsive e visualizzazioni multi-colonna.

• Le larghezze per dispositivi mobili e desktop di solito differiscono. Usa l'attributo userCompOption.width in un userCompName.Container per larghezze adattive su diversi dispositivi.
• Le colonne definiscono quante colonne ci sono in un contenitore. Puoi impostare larghezze come x/12 (ad esempio, due colonne da 6/12 per una larghezza del 50% ciascuna).

Ogni colonna può anche avere impostazioni di allineamento orizzontale e verticale.

Altro

Altri elementi sono elementi inline, che possono essere posizionati all'interno del contenitore.

Seguendo questo approccio strutturato, puoi creare pagine web visivamente accattivanti e responsive con facilità utilizzando Slidde.co.