Cómo diseñar un encabezado personalizado elemental en 2 minutos

Una sección de encabezado es una parte central de su sitio. Los usuarios comienzan a navegar con esta parte después de ingresar al sitio. Es posible que los visitantes no se interesen en navegar el sitio sin problemas con una estructura compleja. Por lo tanto, debe mantener la sección de encabezado simple y adaptable a su sitio web. El 94% de las personas dice que el diseño web es la razón por la cual no confían en un sitio web. Brendan Hufford, director de SEO de creación de un buen encabezado también es una tarea vital. Con Elementor, puede componer su propio diseño, rediseñarse y proporcionar una estructura adecuada sin ninguna experiencia técnica.
En este tutorial, le mostraremos un proceso fácil para crear un encabezado elemental personalizado para su sitio de WordPress. Vamos a sumergirnos en cómo crear y personalizar el encabezado elemental

En esta parte de nuestro blog, le mostraremos cómo puede crear y personalizar el encabezado elemental de dos maneras simples. 1. Cree encabezados utilizando el generador de temas de Elementor 2. Cree y personalice el encabezado elemental desde el científico utilizando el widget Elementor, necesitará el widget del menú de Elemor Nav y el encabezado prefabricado para operar con el diseño del encabezado. También debe considerar lo siguiente antes de comenzar a diseñar el encabezado de su sitio.
Elementor (gratis)
Elementor Pro
Asegúrese de haber instalado y activado tanto la versión gratuita como la versión premium de Elementor. La primera forma: crear encabezados utilizando el generador de temas de la función de constructor de temas Elementor es la forma más sencilla de crear un encabezado con Elementor. Es una característica básica de elemental y totalmente fácil de aplicar. Para hacer esto, navegue plantilla-> temo builder-> encabezado. Aquí, obtendrá diferentes opciones para crear una plantilla. En segundo lugar, haga clic en el botón superior Agregue nuevo o agregue un encabezado nuevo para crear la primera plantilla de encabezado y esperar la siguiente pantalla. Después de un tiempo, puede ver una ventana emergente modal como la imagen a continuación. Aquí, debe seleccionar el tipo de plantilla-> Antes y escribir el nombre correcto de la plantilla. Luego haga clic en el botón Crear plantilla para guardar la plantilla.

Finalmente, verá la biblioteca Elementer con bloques y páginas prefabricados. Aquí, debe elegir un bloque de encabezado adecuado e instalarlo en su sitio web.

La segunda forma: Crear y personalizar el encabezado elemental desde cero usando el widget elemental es el momento de mostrar la segunda forma de crear un encabezado para su sitio elemental. Es cierto que el primer método lo ahorra durante mucho tiempo. Pero el segundo método le dará más libertad mientras diseña. Porque puedes diseñar todo el artículo desde cero.

Intentemos esto. Paso uno: Agregue el widget para el logotipo del sitio, plantea tres columnas primero. Como parte de su encabezado, necesita un logotipo, barra de búsqueda y botones sociales en algunos casos. Puede obtener todos estos elementos en la galería de widgets Elementor. Para agregar un logotipo del Sitio, seleccione el widget e insértelo en el lienzo. Ahora lo personalice por su manera. Suponga que puede cambiar su tamaño, puede alinearlo, agregar una leyenda y enlace personalizados.
También puede estilizar el widget del logotipo. Para hacer esto, toque el botón de estilo. Puede encontrar las opciones relacionadas para ciertas personalizaciones. Como ancho, altura, opacidad, filtros CSS, tipo de borde y más.

Paso dos: Agregue el menú Widget Nav ahora la parte principal viene para agregar el menú Widget Nav. Es una característica pro una elemental. Debe actualizar su paquete de GRATIS a Pro. Para agregar el widget del menú NAV, deberá considerar ciertas cosas.

Agregue páginas esenciales a su sitio

Crear un menú en el área de MISE> Menú
Agregue las páginas necesarias al menú
Y finalmente guarda el menú
Una vez que haya terminado de agregar las páginas esenciales y crear un menú, explore su lienzo de diseño elemental. Después de eso, elija el widget del menú Nav en la galería de widgets Elementor y péguelo en el área marcada.
Inmediatamente, aparecerán las opciones de personalización de contenido. Visite cada lado y experimente el mejor modelo de diseño que desea usar. Tales como aspectos del menú, alineación, indicador, animación y más. También puede decidir cómo se ve su menú en los dispositivos móviles.

Este widget tiene tres tipos de aspectos horizontales, verticales y desplegables. Elija lo más adecuado para usted. De manera similar, puede estilizar el widget tocando el botón de estilo. Entonces, cambie la tipografía, el color del texto y otras configuraciones de estilo.

Cambie el patrón de color que se ajusta con el diseño de su sitio para hacer esto, haga clic en Text & Pointer Hover Color y experimente con diferentes modelos.

Además de agregar modelos generalizados, puede hacer aún más con la configuración avanzada. Tales como Edge, Padding, Z-Index, CSS ID, Movements, Animaciones, etc.


Paso tres: agregue el widget de formulario de búsqueda o el widget del botón de distribución social, la mayoría de los sitios web usan ambas funciones en la parte del encabezado. O puede agregar un widget de formulario de búsqueda o un botón de distribución social. Busque en el widget y tírelo al área marcada.

Puede cambiar su apariencia, como mínimo, clásico y completamente en el área de contenido. También agregue un sustituto y cambie el tamaño del formulario.

Acceda a la sección de estilo y realice los cambios necesarios para la forma de la forma en función del modelo de color general. Como el tamaño del artículo, el color del texto, el color del fondo, el color del borde, la sombra de la caja, el tamaño del borde y muchos más.

La sección avanzada está allí para agregar funciones más avanzadas y rentables. Puede ajustar el borde, llenar, agregar índice z, CSS, función de movimiento, etc.

Una vez que haya terminado con su diseño, puede verificar su capacidad de respuesta en la tableta y el móvil.

Guía rápida: cómo hacer un sitio web amigable con dispositivos móviles

La vista previa final del encabezado elemental Después de aplicar todos los modelos y características, así es como se vería: sin embargo, si desea que su encabezado sea más satisfactorio y sorprendente, puede obtener ayuda de este tutorial para aplicar todo el paso por el paso -paste la configuración. Lea también: cómo personalizar el menú de NAV elemental y la cartera de elementos de widget (tutorial) crear menús a gran escala, como PUMA, adidas, dribbble, wedvs, utilizando el widget de menú de happy addons Happy Addon Menú Mega, que le permite crear no solo el típico menú de navegación de WordPress, sino también crear menús a gran escala como PUMA, Adidas, Dribbble, Wedevs, Invision y muchos más.

Puede agregar insignias e iconos personalizados a los elementos en el menú de su sitio web. También puede agregar plantillas prefabricadas al menú y hacerlo más atractivo para sus usuarios. Sin embargo, puede ver este video tutorial para averiguar cómo crear un menú Mega usando el widget del menú Happy Mega.

¡Lea la documentación del menú de Happy Mega!