Crear un menu header con Elementor Pro paso a paso

• 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.