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 la plano inferior de la página y asigne un diseño específico para utilizarlo como predeterminado para páginas de CMS, producto y categoría.
En la página, los bloques de contenido flotan para rellenar el espacio disponible, según la sección del diseño de página dónde se les asigna que aparezcan. 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 disposición líquida, permite cambiar el diseño de la página sin tener que volver a trabajar en el contenido. Si está acostumbrado a trabajar con páginas de HTML individuales, este módulo componente Este enfoque requiere una forma diferente de pensar.
Configurar diseños predeterminados
-
En el Administrador barra lateral, vaya a Stores > Settings>Configuration.
-
En el panel izquierdo, debajo de General, elija Web.
-
Expandir
-
Elija la Default Product Layout que desee utilizar para las páginas de producto.
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 páginas de producto.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.
Cuándo Page Builder está activada, 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 Página - Anchura completa diseño para páginas de productos.Category -- Full Width- Utiliza el Categoría - Anchura completa diseño para páginas de productos.Product -- Full Width- (Recomendado) Utiliza el Producto - Anchura completa diseño para páginas de productos.
-
Elija la Default Category Layout que desee utilizar 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.
Cuándo Page Builder está activada, 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 Página - Anchura completa diseño para páginas de categoría.Category -- Full Width- (Recomendado) Utiliza el Categoría - Anchura completa diseño para páginas de categoría.Product -- Full Width- Utiliza el Producto - Anchura completa diseño para páginas de categoría.
-
Elija la Default Page Layout que desee utilizar 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 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 a la izquierda para páginas CMS.2 columns with right bar: utiliza un diseño de dos columnas con la barra lateral a la derecha para páginas CMS.3 columns: utiliza un diseño de tres columnas con barras laterales a la izquierda y a la derecha para páginas CMS.
Cuándo Page Builder está activada, 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 Página - Anchura completa diseño para páginas de CMS.Category - Full Width- Utiliza el Categoría - Anchura completa diseño para páginas de CMS.Product - Full Width- Utiliza el Producto - Anchura completa diseño para páginas de CMS.
-
Cuando termine, haga clic en Save Config.
Diseños de página estándar
Una columna
El 1 Column El diseño se puede utilizar para crear una página de inicio 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 2 Columns with Left Bar El diseño de 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 2 Columns with Right Bar, el área de contenido principal es lo suficientemente grande como para que 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 3 Column El diseño tiene una columna central lo suficientemente ancha para el texto principal de la página, con espacio a cada lado para navegación adicional y bloques de contenido compatible.
Empty
El Empty diseño se puede utilizar para definir diseños de página personalizados.