Cómo personalizar el menú NAV elemental y el widget de elemento de cartera (tutorial)

¿Le gustaría mejorar la experiencia del usuario del usuario de WordPress con un diseño rentable? Estás exactamente en el lugar correcto si esta pregunta flota en tu mente. El viaje del usuario comienza solo después de ingresar a su sitio web. ¿Qué sucede si sus visitantes encuentran su sitio no organizado o complejo? Ciertamente, su sitio tendrá una mala impresión, y los usuarios no podrán encontrar su contenido favorito. El 61% de los usuarios intentan otro sitio si no encuentran lo que están buscando. Google Entonces, ¿qué podría ayudar a desarrollar la estructura de su sitio web para una mejor experiencia de usuario?
Al publicar el tutorial de hoy, mostraremos cómo puede mejorar la experiencia del usuario de su sitio utilizando el menú NAV y el widget de cartera en su sitio web de Elementor. Comencemos con el menú Widget Elementor Nav. ¿Qué es el menú de NAV elemental?

El menú de navegación o el menú de navegación es un segmento de sitio web que presenta los enlaces importantes juntos en los que se puede hacer clic. Si los usuarios ingresan al sitio, pueden hacer clic en cada enlace para encontrar su contenido favorito en el sitio. El menú NAV se puede presentar de diferentes maneras. Como horizontal, vertical y desplegable.
Dependiendo de la plantilla de su sitio, puede elegir cualquiera de ellos. Pero le recomendamos que use el más compatible que coincida con el diseño de su sitio aquí hay una muestra del menú de complementos felices actuales. Se ven geniales y simples. Intente mantener su menú de sitio así e incluir enlaces muy importantes. Cómo funciona el menú El Elementor NAV (tipos de tipos de navegación) que conocemos el widget del menú Elemoror Nav tiene tres tipos de modelos que puede usar en su sitio web de WordPress. Al igual que los otros widgets de Elementor, el widget del menú de navegación también es fácil de implementar y totalmente flexible. Ni siquiera debe usar extensiones de terceros para aplicar este widget. Además de estos tres tipos de apariencia, puede agregar indicadores y animaciones, personalización premeditada del menú, submenú, receptividad móvil, etc. Discutamos uno por uno y veamos cómo funciona en cualquier sitio de WordPress: menú de NAV horizontal usando este modelo, el menú se extenderá horizontalmente a la izquierda a la derecha. Este aspecto de diseño es especial para los usuarios que desean mantener su sitio web simple y cuidado. Tales como para profesionales, personas públicas, portales de noticias y otros tipos de sitios web de elementos.
Fuente de la imagen: Elementor

Menú naval vertical Al igual que el menú horizontal, el menú vertical extiende el menú de arriba a abajo. Este aspecto se ve genial, de moda y simple. Puede aplicar esto en el elemento de su sitio si su sitio representa bienes raíces, educación o cualquier agencia en línea.
Fuente de la imagen: Elementor

Obtenga más información: cómo crear una página de destino con una gran conversión de conversión para el menú de navegación en línea parece vertical, pero los menús se abrirán después de hacer clic en el botón desplegable. Puede usar este aspecto simple, pero con gran aspecto, si desea mantener espacio en la sección del encabezado. El espacio suficiente ofrece a los usuarios una hermosa vista del sitio web, que incluye el logotipo, el texto del encabezado, los botones sociales y más. Puede usar este modelo de diseño si tiene un sitio web de cartera, un sitio web de pasión, música o un sitio web personal. Aquí hay un ejemplo que puede ver. Fuente de la imagen: Elementor
Cómo agregar un menú al elemento a continuación muestra el proceso paso a paso para agregar el menú de ElemorAn Nav a su sitio web de WordPress. Requisitos preliminares

Sitio de WordPress
Elementor (gratis)
Elementor (Pro)
Supongamos que tiene un sitio de WordPress existente. Y ha instalado la versión gratuita y profesional. 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: abra una nueva página
Seleccione el lienzo Elementer y haga clic en el botón “Editar con Elementor”.
Paso dos: agregue una sección
Como seleccionó Elementor Canvas, obtendrá una nueva interfaz. Para hacer esto, haga clic en el botón Rojo (+). Y luego elija la sección favorita que desea usar. En nuestro caso, seleccionamos el segundo modelo.

Después de seleccionar el segundo modelo, puede ver las dos secciones en la parte superior de la pantalla.
Ahora busque el widget “Menú de Nav” en la barra de búsqueda elemental.

Después de haberlo encontrado, tire y coloque el widget en la sección que desee. Recomendamos pegarlo al lado derecho de la sección. Una vez que agregue el menú a la sección, aparecerá de inmediato.

Si no sabe cómo crear un menú en WordPress, consulte la guía aquí.

Paso tres: Personalice bien el menú NAV, está listo para personalizar el menú de su sitio en esta personalización, puede usar tres piezas cruciales.

Contenido

Estilo
Avanzado
Personalización de contenido en contenido, puede encontrar dos opciones. Diseño y enlace de envoltura. Ahora toque el botón de aspecto. Encontrará todas las opciones de personalización relacionadas para el diseño de su menú.
Menú: seleccione el menú que creó en su sitio web de WordPress.
Apariencia: hay tres tipos de diseño disponibles. Horizontal, vertical y vertical.

Alineación: para cambiar la alineación del menú.
Indicador: agrégalos para que el menú sea más hermoso. Como habría sido enfatizado, anular, enmarcar, texto, etc.
Animación: con ella puedes agregar animaciones al menú. Como Fade In-Out, Schink In-Out y muchos más.
Menú desesperado del modo: Compruebe si su diseño está respondiendo o no a los dispositivos móviles.
Veamos cómo puede agregar un vistazo a este widget
De la misma manera, puede aplicar animación en widget.
Estilo de personalización Después de la personalización inicial, puede estilizar el menú. Para esto, toque el botón de estilo. Y encontrará dos opciones: menú principal; Menú desplegable.

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

Para anunciar los colores en el mouse, haga clic en Hover y cambie sus colores favoritos que desea agregar. Características avanzadas con características avanzadas, puede hacer más con su diseño actual. Tales como efectos de movimiento, antecedentes, efecto fronterizo, enmascaramiento, posicionamiento, capacidad de respuesta, CSS personalizado y más.

Después de haber terminado con todo su diseño, haga clic en el botón de publicación. Y su menú de navegación primaria estará a continuación:
Por lo tanto, puede agregar el widget del menú NAV al sitio web de su Elemento. Solo tratamos de mostrar cómo funciona la función y aplicarla en el 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é puedes agregar con el menú de NAV elemental?

Subrayar animaciones

Animaciones de fondo
Animaciones de texto
Espacio y alineación de menús
Color, fondo y tipografía
Y otra
Por lo tanto, utilizando estas funciones, puede mejorar la estructura del menú de WordPress y darle un aspecto estándar. Pero recuerda; Intente implementarlos siguiendo los pasos apropiados. Por ejemplo, puede probar uno por uno en el servidor local. Una vez confirme su diseño final, aplíquelo a su sitio en vivo. Intente practicar esta regla si no desea desglosar la formación de plantilla de su sitio.
Consejo de bonificación: presentamos el widget MEGA Menu Happy Addons además de combinar estas funciones en el menú de su sitio web, puede agregar funciones más avanzadas utilizando el widget de complementos felices del menú Mega.Puedes crear mega menús como Dribble, Invision, Bobbi Brown, Adidas, Puma, Evernote y muchos más en tu imaginación.También puede agregar iconos personalizados, insignias y un menú predeterminado de WordPress en su sitio y puede ayudar a que sean más hermosos para sus usuarios. Aquí hay un tutorial corto que puede verificar para obtener información sobre el widget de menú Mega feliz. Para obtener una guía detallada, También puede consultar la documentación oficial para averiguar cómo funcionan este widget y el proceso de solicitud.Cómo personalizar su sitio web de WordPress utilizando el widget de cartera de Elementor
Crear un sitio web de cartera
Aquí hablaremos sobre otra característica premium de Elementor-the Portfolio Widget. Después de personalizar su menú de navegación elemental, puede embellecer el aspecto de su sitio aplicando su widget de cartera. Este widget lo ayuda a mostrar sus publicaciones, páginas y tipos de publicaciones personalizadas en una cuadrícula atractiva y filtrable. Para completar el proceso, solo toma unos pocos pasos. Por lo tanto, puede usar fácilmente el uso de este widget en su sitio. Supongamos que ya tiene un sitio web de cartera creado con Elementor. De lo contrario, puede consultar el artículo para averiguar cómo crear un sitio web de cartera usando Elementor. Paso uno: cree una página en primer lugar, abra una página donde desea agregar un widget de cartera. Luego haga clic en Edición con Elementor. Después de eso, se abrirá el lienzo de diseño. En la forma en que ha agregado el menú Widget para la navegación, también puede agregar este widget.
Paso dos: Agregue el widget de cartera que busca el widget de cartera en la barra de búsqueda y tírelo en el lienzo.

Nota: El widget de cartera solo funciona con publicaciones, páginas y tipos de publicaciones personalizadas. El widget de cartera no funciona con las galerías. Paso tres: personalice el widget de cartera después de agregar 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 widget
Número de publicaciones: Establezca la cantidad exacta de publicaciones que se mostrarán en Widget

Tamaño de la imagen: establecer el tamaño de la imagen

Informe de elementos: Establezca el informe del título Elementos: elija si desea mostrar u ocultar el título. El título se mostrará mientras pasa con mouse sobre imágenes

Etiqueta HTML para el título: Envuelva el título con una etiqueta, ya sea H1 … H6, Span, Div o Párrafo

Barra de filtración: Establezca si se muestra u ocultar la barra de filtrado en la parte superior de la cartera. Elija la taxonomía para mostrar las publicaciones. Las opciones incluyen: categorías, etiquetas y cualquier taxonomía de tipo post personalizada
Interrogación: seleccione la fuente desde la cual 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 relacionada.
Estilo
Distancia del elemento: Establezca la distancia exacta entre los elementos
Gap de filas: establezca la distancia exacta entre las filas de los elementos
Chenar Radius: Establezca el aumento de las imágenes para controlar la redondez de la esquina
Color de fondo: establezca el color de fondo de la superposición al pasar con el mouse sobre la imagen

Color: Establezca el color del título de la publicación. El título aparece en la superposición al pasar con el mouse sobre la imagen

Tipografía: personalice la tipografía del título

Color: establezca el color del texto de la barra de filtrado
Color activo: configure el color para el texto activo de la barra de filtrado
Tipografía: personalice la tipografía del texto de la barra de filtro
Espacio entre elementos: establezca el espacio entre los elementos en la barra de filtro
Espaciado del filtro: establezca la distancia entre la barra de filtro y las imágenes
Características avanzadas Puede agregar algunas características avanzadas a su diseño. Como margen, llenado, índice z, CSS, efectos de movimiento, antecedentes, 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. Todo esto, si desea agregar un tutorial más detallado, puede consultar el próximo tutorial en video.
Cómo crear un sitio web de viajes de WordPress y un elemento en menos de una hora
Algunas preguntas frecuentes sobre el menú de primaria y el widget de cartera
¿Puedo usar el menú de navegación primaria con cualquier tema?
Respuesta: Sí, por supuesto. Elementor es totalmente compatible con los temas existentes en el ecosistema de WordPress. Además, para funciones profesionales. Cualquiera sea el tema que use, puede aplicar el menú NAV en su sitio web
¿Funcionarán el menú Elementer y el widget de cartera si no renovan el paquete Pro?
Respuesta: Una vez que haya actualizado el plan Pro, podrá usar todas las funciones premium. Pero si la fecha expira, entonces no puede obtener asistencia premium. Tales como actualizaciones de software, asistencia y otras cosas. Para eliminar esta confusión, puede leer este artículo. Le dará una idea de lo que sucede cuando Elementor Pro expire (descubra lo que debe hacer).

¿Puedo transferir mi licencia profesional de un dominio a otro?

Por supuesto. Simplemente deshabilite el elemento de su dominio anterior y active el nuevo. Puede administrarlo en su cuenta viendo Sitios> Gestión de licencias.
¿Cómo migro mi sitio elemental de un dominio a otro?
Si tu puedes hacerlo.Por ejemplo, debe seguir algunos pasos para transferir con éxito todos los datos sin perder ninguno.Paso 1: un mantenimiento preliminar Paso 2: Mueva los archivos a un nuevo servidor Paso 3: Exportar base de datos Paso 4: Cree una nueva base de datos MySQL Paso 5: Importar base de datos Paso 6: Editar WP-Config Paso 7: Busque y reemplace la URL en la Contenido de elemento Paso 8: Regenerar la primaria CSS Para obtener más detalles, consulte la guía detallada aquí. ¿El widget de navegación y cartera me impedirá clasificar el SEO?
No, no debe usar Elementor Pro para fines de SEO.A SEO le preocupa ser un método efectivo para el contenido, pero no para la parte de diseño técnico.También es cierto que una mejor estructura web mejorará su experiencia de usuario.Así que piensa en este punto.
Conclusión La creación de un menú para el sitio web requiere mucho trabajo y paciencia. Pero la plataforma de código abierto como WordPress nos hace más fácil. Los recursos disponibles, los complementos, la documentación y otros tutoriales cortos podrían ayudar fácilmente a cualquiera a construir y personalizar sitios. Sin embargo, hay varias formas de crear un menú y sitio de cartera de WordPress personalizados. Puedes hacerlo manualmente o seguir el proceso que mostré 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 del sitio. Para automatizar su proceso y reducir el esfuerzo inútil, el widget del menú de navegación primaria podría ser la opción final. Y el widget de cartera puede ayudarlo a rediseñar su sitio haciendo que sus páginas web sean más rentables y más atractivas. Si desea mejorar su experiencia en el diseño del sitio Elemental en el siguiente nivel, puede usar complementos felices. Es una colección de diversas funciones y widgets Elementary. Usándolos correctamente