Diseños de página
El diseño de cada página de la tienda consta de diferentes secciones, o contenedores, que definen el encabezado, el pie de página y las áreas de contenido de la página. Según el diseño, cada página puede tener una, dos, tres columnas o más. Puede considerar el diseño como el plano de planta de la página y asignar un diseño específico para que se utilice como predeterminado en las páginas de CMS, producto y categoría.
En la página, los bloques de contenido flotan para llenar el espacio disponible, según la sección del diseño de página en la que estén asignados para aparecer. Tenga en cuenta que si cambia el diseño de tres columnas a dos, el contenido del área principal se amplía para rellenar el espacio disponible. Observe también que cualquier bloque asociado con la barra lateral no utilizada parece desaparecer. Sin embargo, si restaura el diseño de tres columnas, los bloques vuelven a aparecer. Este enfoque fluido, o diseño líquido, permite cambiar el diseño de la página sin tener que rediseñar el contenido. Si está acostumbrado a trabajar con páginas de HTML individuales, este enfoque modular de bloque de creación requiere una forma diferente de pensar.
Configurar diseños predeterminados
-
En la barra lateral Admin, vaya a Stores > Settings>Configuration.
-
En el panel izquierdo bajo General, elija Web.
-
Expanda
-
Elija el(la) Default Product Layout que desea usar para las páginas de productos.
Esta configuración determina el diseño que se utiliza de forma predeterminada para las páginas de productos.
No layout updates: las actualizaciones de diseño no están disponibles para las páginas de productos.Empty: utiliza un diseño en blanco para las páginas de productos.1 column: utiliza un diseño de columna única para las páginas de productos.2 columns with left bar: utiliza un diseño de dos columnas con la barra lateral a la izquierda para las páginas de productos.2 columns with right bar: utiliza un diseño de dos columnas con la barra lateral a la derecha para las páginas de productos.3 columns: utiliza un diseño de tres columnas con barras laterales a la izquierda y a la derecha para las páginas de productos.
Cuando Page Builder está habilitado, hay opciones adicionales de ancho completo disponibles. A continuación, puede utilizar las herramientas de contenido de Page Builder para diseñar el diseño de las páginas de producto.
Page -- Full Width: utiliza el diseño Página - Anchura completa para las páginas de productos.Category -- Full Width- Utiliza el diseño Categoría - Anchura completa para las páginas de productos.Product -- Full Width- (Recomendado) Utiliza el diseño Producto - Anchura completa para las páginas de productos.
-
Elija el(la) Default Category Layout que desee usar para páginas de categoría.
Esta configuración determina el diseño que se usa de forma predeterminada para las páginas de categorías.
No layout updates: las actualizaciones de diseño no están disponibles para las páginas de categoría.Empty: utiliza un diseño en blanco para las páginas de categoría.1 column: utiliza un diseño de columna única para las páginas de categoría.2 columns with left bar: utiliza un diseño de dos columnas con la barra lateral a la izquierda para las páginas de categoría.2 columns with right bar: utiliza un diseño de dos columnas con la barra lateral a la derecha para las páginas de categoría.3 columns: utiliza un diseño de tres columnas con barras laterales a la izquierda y a la derecha para las páginas de categoría.
Cuando Page Builder está habilitado, hay opciones adicionales de ancho completo disponibles. A continuación, puede utilizar las herramientas de contenido de Page Builder para diseñar el diseño de las páginas de categorías.
Page -- Full Width: utiliza el diseño Página - Anchura completa para las páginas de categoría.Category -- Full Width- (Recomendado) Utiliza el diseño Categoría - Anchura completa para las páginas de categoría.Product -- Full Width: utiliza el diseño Producto - Anchura completa para las páginas de categoría.
-
Elija el(la) Default Page Layout que desea usar para páginas de CMS.
Esta configuración determina el diseño que se utiliza de forma predeterminada para las páginas de CMS.
No layout updates: las actualizaciones de diseño no están disponibles para las páginas de CMS.Empty: utiliza un diseño en blanco para las páginas de CMS.1 column: utiliza un diseño de columna única para las páginas de CMS.2 columns with left bar: utiliza un diseño de dos columnas con la barra lateral izquierda para las páginas de CMS.2 columns with right bar: utiliza un diseño de dos columnas con la barra lateral a la derecha para páginas de CMS.3 columns: utiliza un diseño de tres columnas con barras laterales a la izquierda y a la derecha para las páginas de CMS.
Cuando Page Builder está habilitado, hay opciones adicionales de ancho completo disponibles. A continuación, puede utilizar las herramientas de contenido de Page Builder para diseñar el diseño de sus páginas de CMS.
Page -- Full Width- (Recomendado) Utiliza el diseño Página - Anchura completa para las páginas de CMS.Category - Full Width: utiliza el diseño Categoría - Anchura completa para las páginas de CMS.Product - Full Width: utiliza el diseño Producto - Anchura completa para páginas CMS.
-
Una vez finalizado, haga clic en Save Config.
Diseños de página estándar
Una columna
El diseño 1 Column se puede usar para crear una página principal dramática con una imagen grande o un punto focal. También es una buena opción para una página de aterrizaje o cualquier otra página que tenga una combinación de texto, imágenes y vídeo.
Dos columnas con barra izquierda
El diseño 2 Columns with Left Bar se utiliza a menudo para páginas con navegación a la izquierda, como un catálogo o páginas de resultados de búsqueda con navegación por capas. También es una excelente opción para las páginas principales que necesitan navegación adicional o bloques de contenido de apoyo a la izquierda.
Dos columnas con barra derecha
Con un diseño de 2 Columns with Right Bar, el área de contenido principal es lo suficientemente grande como para tener una imagen o un titular llamativos. Este diseño también se utiliza a menudo para páginas de productos con bloques de contenido de apoyo a la derecha.
Tres columnas
El diseño 3 Column tiene una columna central lo suficientemente ancha como para incluir el texto principal de la página, con espacio a cada lado para la navegación adicional y bloques de contenido compatible.
Empty
El diseño Empty se puede usar para definir diseños de página personalizados.