Crear un menu header con Elementor Pro paso a paso

Publicado: 14/04/2023
Categoría: Plugins, Wordpress

En este vídeo, te voy a enseñar cómo crear un menú header con Elementor Pro.
Lo primero que necesitas, es tener instalado Elementor y Elementor Pro. Este y otros muchos plugins premium para WordPress puedes descargarlos desde Librenetworks.com si te haces miembro. Tienes el link abajo, en la descripción del vídeo.
Bien, una vez instalados Elementor y Elementor Pro, en el menú lateral izquierdo de WordPress, debes ir a Plantillas, Añadir nueva.
Ahora, en tipo de plantilla, debes hacer clic en el desplegable y elegir Header. A continuación, introduce un nombre a la plantilla. Por ejemplo, Header Demo. Luego, haz clic en Crear Plantilla.
A continuación, podrás elegir entre algunas de las plantillas que ya vienen creadas en la versión Pro, o crear una desde cero. En esta ocasión, veremos cómo crear una desde cero.
Para ello, tan solo tienes que hacer clic en cerrar la pestaña, arriba a la derecha.
Ahora, el primer paso es definir la estructura que quieres que tenga el Header.
Para ello, haz clic en el símbolo del más. En esta ocasión, definiremos una estructura de dos bloques.
En la sección izquierda, colocaremos el logo de la web.
Hacemos clic sobre la sección, y en el menú lateral izquierdo, arrastramos la opción Site Logo.
Si no has configurado el logo de tu sitio, como es mi caso, te aparecerá algo como esto. Para configurarlo, haz clic en este botón, y se te abrirán los ajustes del sitio.
Aquí podrás definir el logo del sitio y el Favicon, así como el nombre y la descripción del sitio web.
Hacemos clic, seleccionamos la imagen de nuestro logo, y hacemos clic en Insertar.
Ahora, haz clic en actualizar, y ya puedes cerrar la pestaña.
Como ves, ya aparece el logo de tu sitio en el header.
Ahora, en la sección derecha, colocaremos el menú.
Hacemos clic sobre la sección, y en el menú lateral izquierdo, arrastramos la opción de Menú.
Si no tienes creado ningún menú, te aparecerá algo como esto. Hacemos clic, y se abrirá una nueva ventana donde crear un menú.
Indicamos un nombre al nuevo menú, y hacemos clic en el botón para crear un nuevo menú.
Ahora, seleccionamos las páginas que queremos que aparezcan en el menú.
Las ordenamos, y guardamos.
Volvemos al editor del header, guardamos como borrador, y refrescamos la página.
Como vemos, ahora aparece el menú que hemos creado.
Para que quede un poco mejor, lo vamos a alinear verticalmente al centro.
Nos colocamos encima de la columna derecha, hacemos clic derecho en el ratón, y seleccionamos Editar Columna.
A continuación, vamos a Alineación Vertical, hacemos clic en el desplegable y seleccionamos la opción Medio. Como ves, el menú ahora se ha centrado al medio de la columna en el eje vertical.
Vamos a hacer lo mismo con la columna izquierda, donde está el logo, para que ambas queden igual.
Nos colocamos encima de la columna izquierda, hacemos clic derecho en el ratón, y seleccionamos Editar Columna.
Vamos a Alineación Vertical, hacemos clic en el desplegable y seleccionamos la opción Medio.
Ahora, vamos a crear una sección superior, que utilizaremos para mostrar un mensaje de envío gratuito.
Nos colocamos sobre la sección del menú, y hacemos clic sobre el símbolo del más.
Añadimos una nueva sección, esta vez de una única columna.
Una vez creada la sección, vamos al apartado Disposición, y en ancho del contenido seleccionamos ancho completo.
Hacemos clic sobre el símbolo más de la sección y arrastramos la opción de Encabezado.
Escribimos el mensaje que queramos. En este caso pondremos Envío Gratuito 24 horas
En Etiqueta HTML, seleccionamos párrafo.
Lo alineamos al centro en el eje horizontal.
Y vamos a alinearlo también al medio del eje vertical, como hicimos con el menú y el logo.
Hacemos clic sobre el símbolo de la columna para editarla.
Vamos a Alineación Vertical, hacemos clic en el desplegable y seleccionamos la opción Medio.
Para cambiar el color de fondo, seleccionamos la sección, vamos a estilo, y fondo.
En tipo de fondo, puedes elegir entre fondo clásico de un color, degradado, fondo con un vídeo, o fondo con un pase de diapositivas.
Para este caso, vamos a seleccionar la opción de Fondo Clásico.
Con el selector de color, puedes seleccionar el color que quieras, o también pegar un código de color.
Yo pegaré un código de color de amarillo como el de mi logo.
Para terminar, tan solo tenemos que hacer clic en el botón de publicar y seleccionar donde queremos que se muestre el menú.
Podemos elegir que se muestre en todo el sitio, o solo en páginas determinadas.
En general, querrás que se muestre en todo el sitio, aunque en ocasiones, como por ejemplo en una Landing Page, puedes no querer que se muestre el menú, o que se muestre otro menú diferente.
Porque sí, también puedes crear varios menús y que se muestren uno u otro en función de la página en la que esté el usuario.
En esta ocasión, quiero que se muestre un único menú, y que se muestre en todas las páginas del sitio web.
Selecciono esta opción y hago clic en guardar.
Ahora, si vamos al sitio web y refrescamos la página, verás que el menú ya aparece correctamente.
Por supuesto, que me he olvidado de mencionarlo antes, la tipografía y los colores de letras también se pueden modificar a tu gusto.
Por ejemplo, para cambiar la tipografía del menú, basta con seleccionarlo, ir a la pestaña estilo y hacer clic en la sección Tipografía.
Aquí, podrás cambiar el tipo de letra, el tamaño, el espacio entre letras, etc.
Tienes control total para hacer lo que quieras.
Lo mismo ocurre para los colores.
En la pestaña de estilo, puedes modificar el color del texto con el selector de color.
También puedes cambiar los colores cuando colocas el ratón sobre el menú, o para la pestaña que está seleccionada.
Esto se hace en estas dos pestañas.
Por ejemplo, aquí vamos a poner el color del selector cuando colocamos el ratón encima del menú.
Lo vamos a poner del mismo azul que el texto de envío gratuito.
Lo mismo se puede hacer para la pestaña activa en ese momento. La vamos a poner también en azul.
Mencionarte también que las columnas y demás se pueden redimensionar, añadir columnas, quitarlas, etc.
Puedes hacer lo que quieras, y ahora ya es cosa tuya el experimentar con las opciones para dejarlo todo a tu gusto.
Por último, vamos a ver como hacer que el menú sea sticky, es decir, que mientras hacemos scroll hacia abajo, el menú se quede siempre fijado arriba.
Vamos a hacer que el menú se quede fijado arriba de la pantalla cuando el usuario haga scroll hacia abajo, pero vamos a hacer que solo se fije la zona del menú, sin la parte superior para que no ocupe demasiada pantalla.
Para ello, seleccionamos la sección del menú, y vamos a ajustes avanzados.
Una vez ahí, vamos a efectos sticky, y en el desplegable seleccionamos la opción arriba.
A continuación, puedes indicar si quieres que el menú se fije en todos los dispositivos, o solo en algunos.
Mi recomendación es fijar el menú solo en el ordenador, ya que en dispositivos móviles ocupará demasiada pantalla, y el usuario no tendrá una buena experiencia de uso.
Por último, para que se vea bien al hacer scroll hacia abajo, vamos a colocarle un fondo blanco al menú.
Para cambiar el color de fondo, seleccionamos la sección, vamos a estilo, y fondo.
En tipo de fondo, vamos a seleccionar la opción de Fondo Clásico, y elegimos un color blanco con el selector de color.
Hacemos clic en guardar y tu menú ya estará listo.
Ahora, si refrescas la página, tu menú se quedará fijado arriba en la pantalla cuando el usuario haga scroll hacia abajo.
Espero que hayas aprendido a crear un menú header con Elementor Pro. Ahora te toca a ti experimentar.
Recuerda suscribirte, y visitar Librenetworks.com si quieres ahorrar dinero en plugins y temas premium para WordPress.