Nozioni di base sul layout

Last updated on 12/2/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 reattiva, colonne multiple)
Elementi inline
(Contenuto specifico)
...
Elementi inline
(Contenuto specifico)
...
...
...

Pagina

Il livello Pagina è in cima 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 Sezione hash 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 ancora (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 i tutorial.

La funzione Fisso è per le barre di navigazione flottanti o altri elementi. Vedi un esempio qui: Sticky Demo

Contenitore

Un Contenitore gestisce larghezze responsive e display multi-colonna.

  • Le larghezze per mobile 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 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.

Loading...