Conceptos básicos de diseño

Last updated on 12/2/2024@mrbirddev

Estructura de una página web slidde

Slidde.co utiliza una estructura simple de cuatro capas:

Página
(Estilos globales)
Diapositiva
(Segmentación de contenido)
Contenedor
(Ancho adaptable, múltiples columnas)
Elementos en línea
(Contenido específico)
...
Elementos en línea
(Contenido específico)
...
...
...

Página

La capa Página está en la parte superior y se utiliza para establecer estilos globales como fuentes, colores y estilos de enlaces, ya que las propiedades CSS son heredables.

Opcionalmente, puedes usar variables CSS para hacer tu plantilla más amigable para el usuario.

Si no puedes seleccionar el elemento Página directamente, utiliza la opción Seleccionar página en la barra de herramientas.

La función Sección hash puede simular un sitio web de múltiples páginas. Mira esta demostración: Demo Link

Diapositiva

Un Diapositiva es el elemento de primer nivel bajo un Página, utilizado para segmentar contenido.

  • Páginas simples, como las páginas de "link en bio", pueden tener solo un Slide.
  • Las páginas de destino complejas pueden incluir múltiples secciones como #header, #hero, #works, #contact, #footer.

Un ID de ancla (ID HTML) es esencialmente un ID de HTML. Nómbralos según el contenido dentro del Diapositiva para facilitar la navegación usando enlaces como “#ID”. Aprende más sobre los enlaces de salto.

Para ocultar un Diapositiva del sitio web final pero mantenerlo guardado, marca el atributo Oculto. Esto es similar a las diapositivas ocultas de PowerPoint y también puede usarse para tutoriales.

La función Pegajoso es para barras de navegación flotantes u otros elementos. Ve un ejemplo aquí: Sticky Demo

Contenedor

Un Contenedor gestiona anchos responsivos y pantallas de múltiples columnas.

  • Los anchos de móvil y escritorio usualmente difieren. Usa el atributo Ancho en un Contenedor para anchos adaptativos en diferentes dispositivos.
  • Las columnas definen cuántas columnas hay en un contenedor. Puedes establecer anchos como x/12 (por ejemplo, dos columnas de 6/12 para un ancho del 50% cada una).

Cada columna también puede tener configuraciones de alineación horizontal y vertical.

Otros

Otros elementos son elementos en línea, que pueden ser posicionados dentro del contenedor.

Siguiendo este enfoque estructurado, puedes crear páginas web visualmente atractivas y responsivas con facilidad usando Slidde.co.

Loading...