Cómo editar el encabezado de WordPress con Elementor

El encabezado del encabezado es el área donde los usuarios interactúan por primera vez con su sitio. Se utiliza principalmente para navegar por el sitio, de modo que los visitantes reciben una dirección clara durante la visita de diferentes páginas. Además, puede usar este lugar para la marca, agregar un botón CTA y mantener muchas información necesaria. Por defecto, los temas de WordPress ofrecen un formato de diseño global para un encabezado. Pero si desea hacer un encabezado personalizado, puede editar los archivos básicos del tema. Que consume mucho tiempo y es difícil para un usuario sin tecnología.
¿Cuál podría ser la solución más fácil? Elementor son las páginas populares para crear páginas, lo que hace que las tareas de diseño de su sitio web sean más fáciles que nunca con funciones de deslizamiento y colocación. Usando Elementary, puede crear y personalizar un encabezado muy efectivo. En este blog, le mostraremos una guía de paso por paso sobre cómo editar el encabezado en el elemento. Hoy aprenderás a:
Edite el encabezado del sitio existente con Elementor
Crear encabezados utilizando plantillas de encabezado elemental prefabricadas
Diseñe el encabezado elemental desde cero utilizando widgets útiles
Al final de la guía, obtendrá un punto de bonificación que le llevará la capacidad de diseño de su sitio al siguiente nivel. Así que no te lo pierdas.
Cómo editar el encabezado del sitio existente con Elementor

Es hora de mostrarle cómo editar el encabezado actual de nuestro sitio elemental. Aquí, usamos los widgets Elementer y Pro para diseñar nuestro encabezado. Entonces debe instalar estos dos complementos.
Elementor (gratis)
Elementor Pro
Primero, eche un vistazo al encabezado actual de nuestro sitio web. Tenga en cuenta que hemos agregado el logotipo de nuestro sitio y un menú de navegación en el encabezado. Ahora agregaremos un botón al encabezado actual. Además, diseñe un encabezado superior para mostrar un formulario de búsqueda, nuestros canales sociales y la dirección de nuestra oficina.

Solo se necesitan 5 pasos para obtener el aspecto deseado –
Paso 1: Agregue un botón
Paso 2: Agregue y personalice el formulario de búsqueda
Paso 3: Agregue y personalice el ícono social
Paso 4: Agregue el icono del mapa
Paso 5: Agregar y personalizar el título
Paso 1: Agregue un botón para agregar el botón, necesitamos agregar una nueva columna al lado derecho del menú de navegación. Verifique esta imagen a continuación para saber cómo agregar una nueva columna al elemento.
Ahora busque el widget del botón en la galería de widgets Elementor. Luego tire y colóquelo en la nueva columna.

En el área de contenido, obtendrá todas las opciones necesarias para agregar el contenido del botón. Aquí, puede establecer el botón Tipo como predeterminado, información, éxito, advertencia y peligro. Puede escribir el botón de texto, ingresar el enlace, administrar el botón de alineación y tamaño. También puede agregar un icono y controlar el espacio entre los iconos según la necesidad. Sin embargo, puede agregar una ID de botón que lo ayudará a agregar código personalizado al botón.

Para personalizar el estilo predeterminado del botón, puede acceder al área de estilo. Aquí, puede cambiar el diseño del botón utilizando las opciones de estilo a continuación.

Tamaño fijo
IMPRESIÓN
Sombra de texto
El color del texto
Tipo de fondo
El tipo de borde
Rayo fronterizo
Sombra de la caja
Recubrimiento
Es hora de agregar nuestro encabezado desde arriba. Para hacer esto, debemos agregar una nueva sección junto con tres columnas en la parte superior del encabezado. Veamos cómo agregar una nueva sección al elemento.

Paso 2: Agregue y personalice el formulario de búsqueda después de haber agregado con éxito la nueva sección, agregará el formulario de búsqueda de widget a la columna derecha.

Puede cambiar el contenido predeterminado del formulario de búsqueda accediendo a la sección de contenido. Puede seleccionar el aspecto del formulario de búsqueda, como la pantalla clásica, mínima y completa. Puedes escribir el sustituto. Además, configure el botón de tipo de icono o el texto y la búsqueda de tipo de icono y la flecha. Sin embargo, puede administrar el tamaño del icono aquí en el área de contenido.

En el área de estilo, puede cambiar el estilo de entrada del formulario de búsqueda y también puede personalizar el color del botón, el color de fondo, el tamaño del icono y el ancho.

Paso 3: Agregue y personalice el ícono social que queremos mostrar nuestros canales sociales en el encabezado anterior. Así que agregué el widget de elemento de iconos sociales en la columna central.

Puede agregar cuentas sociales de manera eficiente haciendo clic en el artículo + Agregar. Puede duplicar y eliminar un artículo de acuerdo con sus necesidades. También elija la forma personalizada, como redondeada, cuadrada y círculo. Y administrar las columnas y establecer la alineación.

Para agregar un elemento, contenido, primero debe abrir un elemento. Luego puede agregar el ícono social, ingresar un enlace y definir el color.

El área de estilo le permite personalizar el color del icono, el tamaño, el relleno, el espacio, la distancia entre las filas, el tipo de borde y el rayo del borde. Aquí, elija la animación de los íconos que pasan para proporcionar un aspecto vibrante a sus íconos sociales. Es hora de agregar nuestra dirección de oficina al encabezado superior. Queremos agregar un icono de Man Ubation y un título. Es por eso que debe agregar una sección interior a la columna izquierda del encabezado superior. Puede encontrar el widget en el elemento del panel de widget a la izquierda y puede agregarlo a la columna.

Paso 4: Agregue el icono del mapa ahora tenemos dos columnas en la columna principal en el lado izquierdo del encabezado superior. En primer lugar, agregué el widget de icono. Luego agregué un icono de mapa y establecí su alineación.

Cambié el color y el tamaño primario del icono yendo al área de estilo. Aquí, puede establecer el valor del icono rotado.

Paso 5: Agregue y personalice el título para agregar la dirección, agregamos el widget del título. Usando la sección de contenido, puede agregar su título, insertar un enlace según sus necesidades. Establezca el tamaño, la etiqueta HTML y la alineación en su propio estilo.


También puede personalizar el título utilizando las opciones de estilo predeterminadas, como color de texto, impresión, contorno de texto, sombra de texto y modo de mezcla.

Vista previa final del encabezado actual después de la personalización del encabezado, este es el nuevo aspecto de nuestro encabezado.

Si desea crear un encabezado elemental personalizado a su manera, debe seguir la guía a continuación. Puede diseñar un elemento personalizado utilizando los dos modos. Puede elegir el bloque de elemento prefabricado escuchado o puede crearlo desde cero usando widgets de elementor. Ver. Cree encabezado con el cabezal de encabezado para crear un encabezado utilizando el generador de temas del Elementor, debe instalar (gratis y Pro) en su sitio web.

Siga estos pasos a continuación y cree el encabezado personalizado.

Navegue plantilla-> temas constructor-> encabezado.

Haga clic en el botón Agregar nuevo o el botón Agregar nuevo encabezado.
Elija Tipo de plantilla-> encabezado y escriba el nombre de la plantilla.
Haga clic en el botón Crear plantilla para guardar la plantilla.
En la página siguiente, obtendrá la biblioteca elemental con bloques y páginas prefabricados.
Seleccione un bloque de encabezado correcto e instálelo en su sitio web.
Eso es todo. Diseñe y personalice el encabezado elemental desde cero usando el widget elemental
Si es un usuario elemental regular, puede usar widgets Elementor para crear su encabezado personalizado. Elementor ofrece todos los widgets necesarios en su versión gratuita que necesita para diseñar su encabezado. Básicamente, un encabezado común tiene un logotipo del sitio, un menú de navegación y un formulario de búsqueda. Puede seguir esta guía paso a paso y descubrir cómo crear y personalizar el encabezado elemental usando widgets de elementor. Para seguir el diseño web moderno, puede crear un encabezado pegajoso para su sitio. Estará en el mismo lugar en la pantalla mientras el usuario ejecuta la página web. Vea esta guía sobre cómo crear un encabezado pegajoso en el elemento. Bonificación: Use el widget Happy Mega Menú al complementos felices para crear menús a gran escala, como adidas, dribbble y puma, tiene un sitio web electrónico o comercial y necesita agregar muchas páginas al menú. Sin embargo, el menú predeterminado Elementor Nav no le da la opción de crear un menú más grande dependiendo de sus necesidades y busca una solución para deshacerse de él. Para resolver su problema, los complementos felices, uno de los mejores y más rápidos suplementos de elementos, ha lanzado recientemente un nuevo widget “Happy Mega Menu”. Con este widget exclusivo, puede crear grandes menús, como adidas, dribbble, wedvs, invision, puma y muchos más. Pruebe Widget Happy Mega Menu para crear su menú de navegación en unos minutos.
También puede consultar la documentación completa del Widget de menú Happy Mega desde complementos felices y puede averiguar cómo usarla correctamente. ¿Estás listo para editar tu encabezado elemental? Elementor le brinda toda la flexibilidad para diseñar y personalizar el encabezado de su sitio. Usando Elementor, no solo puede crear un nuevo encabezado desde cero, sino también editar el encabezado actual de su sitio en la guía anterior, expliqué cómo editar el encabezado de la manera correcta. Discutimos lo que debemos hacer para crear un encabezado personalizado elemental. Finalmente, también compartí un punto de bonificación sobre cómo el widget de menú de Mega Happy Happy lo ayudará a construir fácilmente un mega menú para su sitio. Si lo encuentra útil, distribuirlo en los canales. Su socialización. Recuerde unirse a nuestro boletín para obtener guías más útiles sobre WordPress y Elementor. Capaz de nuestro boletín. Obtenga las últimas noticias y actualizaciones sobre Elementor