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