Ahora que has conseguido un sitio web excelente, el siguiente paso es organizar y darle estructura a tus páginas web para que se vean fantásticas. Para ayudarte, HostPapa te ofrece diseños para que tu contenido sea accesible y entretenido. Los diseños son parte del Creador de sitios web y cuentan con un sistema de arrastrar y soltar fácil de usar.
Para aprender cómo acceder al Creador de sitios web para que puedas comenzar, visita este artículo.
Para comenzar a usar los diseños
- Desplaza el cursor al menú ubicado a la izquierda de tu pantalla.
- Selecciona la primera opción: la pestaña Build.
- En el menú desplegable, elige la opción Layouts.
Familiarizándote con los diseños
Los diseños te permiten crear múltiples áreas de contenido para dar forma al mismo y atraer visitantes a tus páginas web. Son independientes entre sí, pero se mostrarán juntas en tu página web al mismo tiempo.
Las áreas de contenido pueden acomodar una gran cantidad de detalles en un espacio limitado. También se les conoce como contenedores.
Estos contenedores son creados con:
- Filas
- Filas plegables
- Columnas
- Pestañas
- Pestañas verticales
- Acordeones
Puede haber secciones de tu página web que no necesitan mostrarse al visitante a menos que seleccionen la opción de hacerlo. Para estos casos, los diseños pueden ocultar información según se requiera.
¿Qué son las filas?
Las filas agrupan áreas de contenido y pueden apilarse verticalmente.
¿Qué son las filas plegables?
Usar filas plegables significa que puedes hacer que tus filas se expandan o se oculten, y todo con un efecto de animación. Para activar esta opción, sólo tendrás que:
- Desplazar el cursor al menú ubicado a la izquierda de tu pantalla.
- Seleccionar la primera opción: la pestaña Build.
- En el menú desplegable, elegir la opción Layouts.
- Hacer clic en la segunda opción del siguiente menú: Collapsible Rows.
Ahora puedes elegir expandir u ocultar tu fila
- Coloca el cursor en el campo Caption para darle un nombre a tu fila.
- A continuación, dirígelo al campo Sub-caption que se encuentra en la sección Additional Options. Ahí puedes agregar un subtítulo o H2, como también se le conoce.
- Elige si quieres que la fila nueva se expanda o se oculte marcando el botón de selección en la opción Expanded o Collapsed.
- Para agregar una imagen, haz clic en el menú desplegable Image Source.
Destaca secciones de tus páginas web con columnas
Las columnas te ayudan a crear áreas de contenido horizontales y abiertas. Son ideales para las secciones de introducción y pueden ayudar a aprovechar mejor el espacio de tu página cuando el contenido es limitado.
Opciones disponibles para Columnas:
- Mostrar encabezados por sección: aquí puedes decidir incluir un título.
- Mostrar delimitadores de sección: esto te permite crear divisiones entre columnas.
- Distribuir el ancho de forma equitativa entre columnas: con esta opción, el ancho de la columna será uniforme, independientemente del contenido que utilices.
- Igualar la altura de los paneles de contenido por columna: la altura de los paneles de contenido por columna depende de la cantidad de contenido que incluya. El uso de esta opción igualará el alto de las columnas.
Uso de pestañas para adaptar tu contenido al espacio disponible
Si te cuesta trabajo adaptar tu contenido a un espacio reducido, las pestañas pueden serte de gran ayuda.
Cómo acceder al botón Tabs:
- Desplaza el cursor al menú ubicado a la izquierda de tu pantalla.
- Selecciona la primera opción: la pestaña Build.
- En el menú desplegable, elige la opción Layouts.
- Haz clic en el botón Tabs, que aparece como la segunda opción desde abajo.
El grupo de Tabs tiene tres secciones, pero solo se puede mostrar una a la vez. La primera pestaña se abrirá automáticamente cuando se cargue la página web. Al configurar las pestañas, se mostrarán las preferencias siguientes:
- Altura mínima en píxeles: al aplicar esta opción, todas tus pestañas tendrán esa misma altura.
- Animar la transición entre secciones: al pasar de una pestaña a otra, se mostrará un efecto de transición visual.
- Distribuir el ancho uniformemente entre pestañas: no importa la cantidad de contenido en cada pestaña, esta opción garantiza que el ancho sea siempre el mismo.
- Igualar la altura de los paneles de contenido de las pestañas: por defecto, cada pestaña tiene una altura basada en su contenido. Esta opción te permite igualar de manera automática la altura de tus pestañas.
Pestañas verticales
Las pestañas verticales, que funcionan de forma similar a las pestañas tradicionales, permiten que los visitantes sigan desplazándose hacia abajo en tu página, en lugar de moverse repentinamente de izquierda a derecha.
En las pestañas verticales puedes usar casi las mismas opciones que en las pestañas tradicionales.
- Indicar la altura mínima en píxeles.
- Animar la transición entre secciones.
- Igualar la altura de los paneles de contenido de las pestañas.
Uso de acordeones
Los acordeones están diseñados para mostrar solo una sección a la vez. Al abrir una sección del acordeón, la anterior se oculta con un efecto animado.
Para consultar las opciones del acordeón, sigue estos pasos:
- Desplaza el cursor hacia el menú ubicado a la izquierda de tu pantalla.
- Selecciona la primera opción: la pestaña Build.
- En el menú desplegable, elige la opción Layouts.
- Haz clic en el botón Accordion, que aparece como la primera opción en la parte superior del siguiente menú.
Si necesitas ayuda con tu cuenta de HostPapa, abre un ticket de soporte desde tu Escritorio.
