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.