Con el generador de encabezados WoodMart, puede personalizar fácilmente la parte superior de su sitio web y colocar allí todos los elementos que desee. Elija de la biblioteca de elementos como menús, logotipo, carrito y widgets de lista de deseos, bloques HTML, botones sociales, búsqueda y otros. Puede organizarlos en el orden que necesite y personalizar sus estilos. Cree diferentes diseños para PC y dispositivos móviles fácilmente y haga que su sitio web responda sin modificaciones de código.

Puede encontrar la interfaz del administrador del generador de encabezado WoodMart en su Panel de administración -> WoodMart -> Generador de encabezado. Allí, puede ver la lista de todos los encabezados creados. Le permite editarlos, crear nuevos, importar, eliminar o marcar algunos encabezados como predeterminados para su sitio web (botón de estrella).

 

¿Cómo crear un nuevo header?

Hay algunas maneras de crear un nuevo encabezado con el generador de encabezados: cree una estructura vacía y llénela con cualquier elemento que necesite, use la biblioteca de ejemplos de plantillas y luego personalícela según sus necesidades o impórtela con datos JSON exportados de algún otro recurso.

Vaya a Panel de control -> WoodMart -> Generador de encabezado y haga clic en el botón "Create new header". Verá una ventana emergente con dos secciones. El primero enumera todos los ejemplos de diseños de encabezados de la biblioteca. Puede elegir cualquiera de ellos como base de encabezado y luego simplemente personalizarlo. Debajo de esta lista, puede ver otra que contiene encabezados que ya existían en su lista de administradores de encabezados. Por lo tanto, debe hacer clic en uno de todos estos encabezados para elegir cuál se utilizará como su nueva base de encabezado. Después de esta acción, se creará el nuevo diseño y podrá comenzar a editarlo.

Si tiene una exportación JSON del encabezado que haya creado anteriormente desde otra web que operara con Woodmart, puede hacer clic en el botón "Importar", pegar sus datos JSON allí y hacer clic en "Importar" en la ventana emergente. Esta acción creará un nuevo encabezado en la base de los datos importados.

 

Configuración de filas y columnas del header

Cuando edita su encabezado con el generador de encabezados, puede ver un área con tres filas que contienen tres columnas cada una. Representan tres partes del encabezado de su sitio web: barra superior, encabezado principal y parte inferior del encabezado. Todas estas columnas son áreas de contenedor que permiten arrastrar y soltar, por lo que puede agregar cualquier elemento dentro de ellas y simplemente arrastrarlas y soltarlas entre columnas. De esta manera, puede componer cualquier tipo de diseño y establecer cualquier orden para los elementos de contenido del encabezado.

Cada parte del encabezado tiene su propia configuración y puede hacer clic en el icono "Editar" para configurar su altura, esquemas de colores, bordes, etc. En esta ventana emergente de configuración, también puede marcar esta fila para que se atasque (sticky header) en el desplazamiento, se oculte en el móvil y / o en dispositivos de escritorio, agregue la línea del borde inferior, establezca un color de fondo o una imagen y elija la estructura de diseño de la fila.

 

Cómo agregar y editar elementos de construcción

Para agregar un nuevo elemento a algunas de sus posiciones de encabezado, debe hacer clic en el botón "Agregar elemento". Verá una ventana emergente que contiene todos los elementos disponibles, entre ellos:

1. Website logo image / Logo de la web
2. Main navigation menu / Menu principal
3. Secondary menu / Menú secundario (arriba del principal)
4. Mobile menu (Menú móvil)
5. Shopping cart widget (Icono agregar al carrito)
6. Wishlist icon (Icono lista de deseos)
7. Search form (Formulario de búsqueda de productos)
8. Login/register links (Icono de cuenta)
9. Categories dropdown (Menu desplegable de categorías)
10. Simple vertical line (Linea vertical / Separador)
11. Horizontal spacing (Espaciado horizontal)
12. Plain text/HTML (HTML / Texto plano)
13. HTML Block built with WPBakery (Bloque de HTML)
14. Button with link (Botón con enlace)
15. Information box (Caja de información)
16. Social buttons (Iconos de redes sociales)

Después de agregar todos los elementos que desea usar en el encabezado de su sitio web, puede reorganizarlos en el orden que desee y editar su configuración. Para reordenar, simplemente puede arrastrar y soltar elementos entre todas las columnas del área. Cuando mueve el mouse sobre algún elemento, puede ver tres botones que le permiten editar, clonar o eliminar este elemento.

 

 

Cambiar colores en el header:

 

Cómo cambiar la altura del encabezado

La altura total del encabezado se calcula en función de todas las alturas de las filas, incluida la barra superior, el encabezado principal y la parte inferior. Puede editar cada fila y encontrar tres controles deslizantes para su altura: altura para escritorio, para dispositivos móviles y para el encabezado adhesivo/sticky (el menú sigue al visitante en la medida que hace scroll down o navega en la página) si tiene habilitada la opción "Hacer que sea sticky". Por lo tanto, puede especificar diferentes valores para diferentes estados de encabezado: para dispositivos de escritorio, dispositivos móviles y cuando el usuario se desplaza hacia abajo en la página.

 

Cómo configurar el logo en el header

Puede cambiar el logo en su encabezado utilizando el elemento "Logo" del Header Builder. Agréguelo a cualquier fila y columna que necesite y cargue la imagen de su logotipo allí. Para este elemento, puede cargar dos imágenes: una que se mostrará en el encabezado y otra que se usará para el estado del encabezado fijo (sticky). También puede especificar opciones de ancho de imágenes para ambas imágenes. Tenga en cuenta que también deberá agregar un elemento de logo diferente para el diseño del encabezado móvil.