Cómo personalizar el menú de navegación de Elementor y el widget de cartera de Elementor (Tutorial)

¿Quiere mejorar la experiencia de usuario de su sitio de WordPress con un diseño lucrativo? Estás en el lugar correcto si esta pregunta ronda por tu mente.

El viaje del usuario comienza apenas ingresan a su sitio web. ¿Qué sucede si sus visitantes encuentran su sitio desorganizado o complejo? Sin duda, su sitio tendrá una mala impresión y los usuarios no podrán encontrar su contenido preferido.

El 61% de los usuarios prueba un sitio diferente si no puede encontrar lo que está buscando rápidamente.

Google

Entonces, ¿qué podría ayudarlo a desarrollar la estructura de su sitio web para una mejor experiencia de usuario?

En la publicación del tutorial de hoy, le mostraremos cómo puede mejorar la experiencia de usuario de su sitio web utilizando el menú de navegación y el widget de Portafolio en su sitio de Elementor.

Comencemos con el widget de menú de navegación de Elementor .

¿Qué es el menú de navegación de Elementor?

El menú de navegación o el menú de navegación es un segmento del sitio web que muestra todos los enlaces en los que se puede hacer clic de forma conjunta. Si los usuarios ingresan al sitio, pueden hacer clic en cada enlace para encontrar su contenido preferido en el sitio web. El menú de navegación se puede presentar de diferentes maneras. Como horizontal, vertical y desplegable .

Dependiendo de la plantilla de su sitio web, puede elegir cualquiera de ellos. Pero le recomendamos que utilice el más compatible que coincida con el diseño de su sitio.

Aquí hay una muestra del menú actual de Happy Addons. Se ve genial y simple. Trate de mantener el menú de su sitio web como este e incluya todos los enlaces importantes.

Cómo funciona el menú de navegación de Elementor (tipos de menú de navegación)

Sabemos que el widget del menú de navegación de Elementor tiene tres tipos de patrones que puede usar en su sitio de WordPress. Al igual que otros widgets de Elementor, el widget del menú de navegación también es fácil de implementar y totalmente flexible. Incluso no necesita usar extensiones de terceros para aplicar este widget.

Además de estos tres tipos de diseño, puede agregar punteros y animaciones, personalización de menú premeditada, submenú, capacidad de respuesta móvil, etc.

Discutamos una por una parte y veamos cómo funciona en cualquier sitio de WordPress:

Menú de navegación horizontal

Usando este patrón, el menú se expandirá horizontalmente desde el lado izquierdo hacia el lado derecho. Este diseño de diseño es especialmente para usuarios que desean mantener su sitio web simple y ordenado. Por ejemplo, para profesionales, figuras públicas, portales de noticias y otros tipos de sitios web de Elementor.

Menú de navegación vertical

Al igual que el menú horizontal, el menú vertical expande el menú de arriba a abajo. Este diseño se ve genial, a la moda y simple. Puede aplicar este diseño en su sitio de Elementor si su sitio representa bienes raíces, educación o cualquier agencia en línea.

Obtenga más información: Cómo crear una página de destino de alta conversión para negocios en línea

Menú de navegación desplegable

Parece vertical, pero los menús se abrirán después de hacer clic en el botón desplegable. Puede usar este diseño simple pero atractivo si desea mantener el espacio en la sección del encabezado. El espacio suficiente brinda a los usuarios una buena vista del sitio web, incluido el logotipo, el texto del encabezado, los botones sociales y más.

Puede utilizar este patrón de diseño si tiene un sitio web de cartera, un sitio web de pasión, música o un sitio web personal. Aquí tienes un ejemplo que puedes ver.

Cómo agregar menú en Elementor

A continuación, le mostramos el proceso paso a paso para agregar el menú de navegación de Elementor en su sitio de WordPress.

requisitos previos

• sitio de WordPress
• Elementor (GRATIS)
• Elementor (Pro)

Digamos que tiene un sitio de WordPress existente. Y ha instalado Elementor FREE y la versión Pro. El menú de navegación es una característica premium. Por lo tanto, debe comprar el paquete pro antes de usar este widget.

Paso uno: abre una nueva página

• Seleccione el lienzo de Elementor y haga clic en el botón ' Editar con Elementor '.

Paso dos: agregue una sección

• Al seleccionar Elementor Canvas , obtendrá una nueva interfaz. Para hacer eso, haga clic en el botón rojo (+) . Y luego elija su sección preferida que desea usar. En nuestro caso, hemos seleccionado el segundo patrón.

• Después de seleccionar el segundo patrón, puede ver las dos secciones en la parte superior de la pantalla.

• Ahora busque el widget 'Menú de navegación' en la barra de búsqueda de Elementor.

• Una vez que lo haya encontrado, arrastre y suelte el widget en la sección que desee. Le recomendamos que lo pegue en el lado derecho de la sección.

• Una vez que agregue el menú en la sección, aparecerá inmediatamente.

En caso de que no sepa cómo crear un menú en WordPress, consulte la guía aquí.

Paso tres: personalizar el menú de navegación

Bueno, ya está todo listo para personalizar el menú de su sitio. En esta personalización, puede utilizar tres partes cruciales.

• Contenido
• Estilo
• Avanzado

Personalización de contenido

En contenido, puedes encontrar dos opciones. Diseño y enlace Wrapper . Ahora toque el botón Diseño . Encontrarás todas las opciones de personalización relacionadas con el diseño de tu menú.

• Menú : seleccione el menú que creó en su sitio de WordPress.
• Diseño : Hay tres tipos de diseños disponibles. Horizontal, vertical y desplegable.
• Alinear : para cambiar la alineación de su menú.
• Puntero : Agréguelos para que su menú sea más atractivo. Como subrayado, sobrerayado, enmarcado, texto, etc.
• Animación : Con ella puedes añadir animaciones a tu menú. Como fundido de entrada y salida, reducción de entrada y salida y más.
• Desplegable Modile : compruebe si su diseño responde a dispositivos móviles o no.

• Veamos cómo puede agregar un diseño en este widget

• De la misma manera, puede aplicar animación en el widget.

Personalización de estilo

Después de la personalización inicial, puede estilizar el menú. Para eso, toque el botón Estilo . Y encontrarás dos opciones: menú principal; desplegable

• Veamos cómo puede agregar rápidamente las funciones en su widget de menú de navegación de Elementor. Aquí puede cambiar el color del texto, el ancho, el relleno, el relleno vertical y el espacio.

• Para anunciar colores al pasar el mouse, haga clic en el mouse y cambie los colores preferidos que desea agregar.

Características avanzadas

Con las funciones avanzadas, puede hacer más con su diseño actual. Tales como efectos de movimiento, fondo, efecto de borde, enmascaramiento, posicionamiento, capacidad de respuesta, CSS personalizado y más.

• Una vez que haya terminado con todo el diseño, haga clic en el botón Publicar . Y a su menú de navegación de Elementor le gustará el siguiente:

Así es como puede agregar el widget del menú de navegación en su sitio de Elementor. Solo tratamos de mostrar cómo funciona la función y aplicarla al diseño. Ahora es tu turno de aplicarlos uno por uno.

Sin embargo, si desea obtener una guía detallada, aquí está el video que puede ver ahora.

¿Qué más puede agregar con el menú de navegación de Elementor?

• Animaciones de subrayado
• animaciones de fondo
• animaciones de texto
• Espaciado y alineación del menú
• Color, fondo y tipografía
• Y más

Por lo tanto, al utilizar estas funciones, puede mejorar la estructura del menú de WordPress y darle un aspecto estándar. Pero recuerda; tratar de implementarlos siguiendo los pasos adecuados. Por ejemplo, puede probar uno por uno en su servidor local. Una vez que confirme el diseño final, aplíquelo en su sitio en vivo. Intenta practicar esta regla si no quieres desglosar la formación de la plantilla de tu sitio web.

Sugerencia adicional: Presentamos el widget Mega Menu de Happy Addons

Además de combinar estas funciones con el menú de su sitio web, puede agregar funciones más avanzadas utilizando el widget de mega menú de Happy Addons. Puede crear mega menús como dribble, InVision, Bobbi Brown, Adidas, Puma, Evernote y más a partir de su imaginación.

Además, puede agregar íconos personalizados, insignias y el menú predeterminado de WordPress en su sitio y ayudar a hacerlos más hermosos para sus usuarios.

Aquí hay un breve tutorial que puede consultar para aprender sobre el widget de menú Mega de Happy Addons.

Para obtener una guía detallada, también puede consultar la documentación oficial para saber cómo funciona este widget y el proceso de solicitud.

Cómo personalizar su sitio de WordPress usando el widget de cartera de Elementor

Aquí vamos a hablar sobre otra característica premium de Elementor: el widget de cartera . Después de personalizar su menú de navegación de Elementor, puede embellecer el aspecto de su sitio aplicando el widget de cartera. Este widget ayuda a mostrar sus publicaciones, páginas y tipos de publicaciones personalizadas en una cuadrícula atractiva y filtrable. Para completar el proceso requiere sólo unos pocos pasos. Por lo tanto, puede utilizar fácilmente este widget en su sitio.

Sin embargo, veamos cómo agregar una cartera con Elementor. Suponemos que ya tiene un sitio web de cartera creado con Elementor. De lo contrario, puede consultar el artículo para aprender cómo crear un sitio web de cartera usando Elementor.

Paso uno: crea una página

En primer lugar, abra una página en la que desee agregar un widget de cartera. Y luego haz clic en Editar con Elementor .

Después de eso, se abrirá su lienzo de diseño. De la misma manera que agregó el widget del menú de navegación de Elementor, de manera similar, puede agregar este widget.

Paso dos: agregue el widget de cartera

Busque el widget Portafolio en la barra de búsqueda y arrástrelo al lienzo.

Nota : el widget de Portafolio SOLO funciona con publicaciones, páginas y tipos de publicaciones personalizadas. El widget de Portafolio NO funciona con Galerías.

Paso tres: personalizar el widget de cartera

Una vez que agregue el widget, sus publicaciones aparecerán automáticamente en la pantalla.

Toda la personalización consta de tres partes. Contenido, estilo y avance .

Contenido

• Columnas: establezca el número de columnas que se muestran en el widget
• Recuento de publicaciones: establezca la cantidad exacta de publicaciones que se mostrarán en el widget
• Tamaño de la imagen: establece el tamaño de las imágenes.
• Proporción de artículos: establece la proporción de los artículos.
• Mostrar título: elija si desea mostrar u ocultar el título. El título se mostrará mientras se desplaza sobre las imágenes.
• Etiqueta HTML de título: Envuelva el título con una etiqueta, ya sea H1…H6, span, div o párrafo.

• Barra de filtro : establezca si desea mostrar u ocultar la barra de filtro sobre la cartera. Elija la taxonomía desde la que mostrar las publicaciones. Las opciones incluyen: categorías, etiquetas y cualquier tipo de taxonomía de publicación personalizada

• Consulta : seleccione la fuente desde la que el widget mostrará el contenido. Las opciones incluyen publicaciones, páginas, tipos de publicaciones personalizadas si están disponibles, selección manual, consulta actual y relacionadas.

Estilo

• Espacio entre elementos : establezca el espacio exacto entre los elementos
• Espacio entre filas: establezca el espacio exacto entre filas de elementos
• Radio del borde: establezca el radio del borde de las imágenes para controlar la redondez de las esquinas
• Color de fondo : establezca el color de fondo de la superposición cuando se desplaza sobre la imagen
• Color : establezca el color del título de la publicación. El título aparece dentro de la superposición cuando pasas el cursor sobre la imagen.
• Tipografía : Personaliza la tipografía del Título
• Color : establezca el color del texto de la barra de filtro
• Color activo : establezca el color para el texto activo de la barra de filtros
• Tipografía : personaliza la tipografía del texto de la barra de filtros
• Espacio entre elementos : establezca el espacio entre los elementos en la barra de filtro
• Espaciado de filtro : establezca el espacio entre la barra de filtro y las imágenes

Características avanzadas

Puede agregar algunas características avanzadas a su diseño. Como margen, relleno, índice Z, CSS, efectos de movimiento, fondo, borde, enmascaramiento, atributos y más.

Entonces, después de personalizar todas las configuraciones de su diseño, así es como se verá en su sitio en vivo.

Sin embargo, si desea agregar un tutorial más detallado, puede consultar el siguiente video tutorial.

Algunas preguntas frecuentes sobre el menú de Elementor y el widget de cartera

Conclusión

Crear un menú de sitio web requiere mucho trabajo duro y paciencia. Pero una plataforma de código abierto como WordPress nos lo pone más fácil. Los recursos, complementos, documentación y otros tutoriales breves disponibles podrían ayudar fácilmente a cualquier persona a crear y personalizar sus sitios.

Sin embargo, hay varias formas de crear un menú personalizado de WordPress y un sitio de cartera. Puedes hacerlo manualmente o seguir el proceso que te mostramos arriba. Pero le recomendamos que evite el proceso manual. Puede romper la estructura de su sitio si no tiene suficiente experiencia en el diseño de sitios web.

Para automatizar su proceso y reducir el esfuerzo innecesario, el widget del menú de navegación de Elementor podría ser la mejor opción. Y el widget de cartera puede ayudarlo a rediseñar su sitio al hacer que sus páginas web sean más lucrativas y atractivas.

Si desea llevar su experiencia de diseño de sitios de Elementor al siguiente nivel, puede utilizar Happy Addons . Es una colección de diversas funciones y widgets de Elementor. Utilizándolos correctamente, puede enriquecer un aspecto profesional en poco tiempo.