Nozioni di base sul layout

Last updated on 10/29/2024@mrbirddev

Struttura di una pagina web slidde

Slidde.co utilizza una semplice struttura a quattro livelli:

  • Pagina (Stili Globali)
  • Diapositiva (Segmentazione del Contenuto)
  • Contenitore (Larghezza Responsiva, Colonne Multiple)
  • Elementi Inline (Contenuto Specifico)

Pagina

Il livello Pagina è 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 Pagina, utilizza l'opzione Seleziona pagina nella barra degli strumenti.

La funzione Mostra/nascondi diapositiva tramite hash URL può simulare un sito web multi-pagina. Dai un'occhiata a questa demo: Demo Link

Diapositiva

Un Diapositiva è l'elemento di primo livello sotto un Pagina, 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 ID ancoraggio (ID HTML) è essenzialmente un ID HTML. Nominali in base al contenuto all'interno del Diapositiva per una facile navigazione utilizzando link come “#ID”. Scopri di più sui link di salto.

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

Il Fisso (Rimane in alto dopo lo scorrimento) è una funzionalità per barre di navigazione flottanti o qualsiasi altro elemento. Vedi un esempio qui: Sticky Demo

Contenitore

Un Contenitore gestisce larghezze responsive e visualizzazioni multi-colonna.

  • Le larghezze per dispositivi mobili e desktop di solito differiscono. Usa l'attributo Larghezza in un Contenitore 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.