Editar un menú significa cambiar los elementos que aparecen en la barra de navegación, como los botones que llevan al visitante a páginas: “Inicio”, “Acerca de”, “Servicios” o “Contacto”.

Usted puede agregar, eliminar, renombrar o reorganizar estos elementos - En caso de que quiera crear un menú, .

Consulte a continuación cómo editar:

• Menú disponible en el diseño del sitio
• Menú agregado en el Creador de Sitios con IA

Menú disponible en el diseño del sitio

1En el Editor del Creador de sitios con IA, haga clic en el menú que desea editar    

2Se exhibirá la barra de herramientas con los recursos para edición. A continuación, seleccione la opción que desea y consulte cómo hacerlo:

• Configurar botones - Para ajustar el tamaño, relleno, añadir ícono o información
• Cambiar fuente
• Cambiar color
• Añadir enlace
• Alinear los elementos del menú - Alineado a la izquierda, derecha, centrado o justificado
• Ordenar la posición de los elementos del menú - Para cambiar el orden
• Definir el estilo - A través de CSS
• Añadir efectos - Para crear movimientos y transiciones
• Duplicar un elemento del menú - Para incluir más opciones en el menú principal
• Eliminar un elemento del menú - Para quitar solo un elemento del menú
• Eliminar un menú principal - Para quitar toda la sección del menú

Configurar botones

1En la "Barra de herramientas”, haga clic en el ícono de cursor de puntero (Botón)

2A continuación, haga clic en la opción que desea:

• Configurar el botón - ajustar el tamaño, ancho, altura, relleno del ítem de menú con color, definición del borde y espaciado;
• Agregar ícono - al lado del ítem de menú incluir un ícono que lo represente;
• Agregar tooltip (Consejo de herramienta) - agregar una pequeña caja de información que se mostrará cuando el usuario pase el cursor del mouse sobre un elemento, sin hacer clic.

Configurar el botón

A) Tamaño - si define que el ítem del menú se mostrará con relleno o contorno, es posible configurar el tamaño que se presentará. Haga clic en la opción que desea:

• S - pequeño
• M - mediano
• L - grande 
• Ícono de 3 puntos - para definir manualmente la altura y ancho. Para ello, haga clic en el botón blanco y arrastre en la barra hasta llegar a la opción que desea

B) Rellenar - defina cómo desea que el ítem del menú se muestre:

• Relleno con color - haga clic en el ícono de círculo blanco
• Contorno - haga clic en el ícono de círculo vacío 
• Solo el texto - el ítem del menú se mostrará solo con el nombre, sin relleno ni contorno. Para ello, haga clic en el ícono de X. 

C) Esquina - al definir el relleno o el contorno, elija si los bordes serán:

• Rectos - esquinas cuadradas;
• Redondeadas - formato de "cápsula" o "pastilla";
• Definido manualmente - esta opción permite que usted mismo defina la intensidad de las esquinas redondeadas. Para ello, haga clic en el icono de 3 puntos, luego haga clic en el círculo blanco y arrastre en la barra hasta llegar a la opción que desea;

D) Espaciado - defina cuánto deben estar cerca o lejos unos de otros los elementos del menú. Para ello, haga clic en el círculo blanco y arrastre en la barra hasta llegar a la opción que desea.

1Para guardar los cambios, haga clic en Actualización

Agregar ícono

1Haga clic en la pestaña Ícono

2A continuación, haga clic en el ícono de +

3En la pantalla que se abrirá, utilice el campo de búsqueda para buscar el ícono que desea - Navegue entre las pestañas disponibles o en “Personalizado”, en caso de que tenga la imagen guardada en su dispositivo

4Para insertar el ícono junto al elemento del menú, haga clic en la opción encontrada

5A continuación, defina:

• A) Posición - si el ícono debe estar posicionado a la izquierda o a la derecha del elemento del menú;
• B) Tamaño - haga clic en el tamaño disponible que desea o para configurarlo manualmente, haga clic en el ícono de 3 puntos y luego, haga clic en el círculo blanco y arrastre en la barra hasta llegar a la opción que desea;
• C) Espaciado - defina cuán cerca estará el elemento del menú del ícono. Para esto, haga clic en el botón blanco y arrastre en la barra hasta llegar a la opción que desea

6Para guardar los cambios, haga clic en Actualización

Agregar tooltip (Consejo de herramienta)

1Haga clic en la pestaña Tooltip

2A continuación, haga clic en el botón para activar - En color “Azul” significa que está activado

3En el campo “Texto”, ingrese la información que desea presentar

4Si desea que la información se muestre con la acción de un clic en lugar de al pasar el mouse, active el botón Enable on Click     

5Para guardar los cambios, haga clic en Actualización

Cambiar fuente

1En la "Barra de herramientas”, haga clic en el ícono de letra T (Fuente)

2Usted puede elegir entre otra opción o Anãdir nueva fuente

3A continuación, defina el tamaño, altura, espaciado y peso

4Para guardar los cambios, haga clic en Actualización

Cambiar color

1En la "Barra de herramientas”, haga clic en el ícono de cuadrado (Colores)

2Usted puede elegir aplicar el color solo en el texto o uno diferente para cuando pase el cursor del mouse.

Para esto, al lado del cuadrante de recursos, haga clic en la opción que desea:

• Círculo azul - color para el texto;
• Ícono de cursor de puntero - cambiar el color al pasar el cursor del mouse.

3A continuación, haga clic en la pestaña que desea configurar:

• Fnd (Fondo) - el color de fondo del botón;
• Texto - el color que se muestra en el nombre del elemento del menú;
• Borde - el color y efecto alrededor del botón;
• Sombra - efecto alrededor del botón, para dar profundidad o realce visual.

4Para definir los colores, usted puede usar los recursos:

• A) Área de selección de color principal (cuadro grande en el centro) - haga clic y arrastre el círculo blanco para aclarar, oscurecer o ajustar la intensidad del color - El fondo de este cuadro cambia según la barra de color al lado (vertical);
• B) Barra vertical de colores (a la derecha) - para elegir el color base (rojo, verde, azul, etc.). Sirve para cambiar rápidamente entre tonalidades, como de amarillo a azul - Después de elegir aquí, usted refina en el cuadro al lado;
• C) Paleta de colores predefinidos (parte inferior) - son colores rápidos o usados recientemente. Haga clic en el que desea para aplicar rápidamente a su elemento;
• D) Campo de color en hexadecimal - usted puede pegar el código del color - Por ejemplo: #ffffff para blanco, #000000 para negro.

5De acuerdo con la pestaña elegida, hay algunos recursos distintos:

Fnd (Fondo) - configuración de gradiente:

A) Control de gradiente - funcionalidad que puede ser aplicada en el color de fondo del botón - Haga clic en los círculos y arrastre para cambiar los colores y la dirección del efecto;

B) Tipo de relleno del gradiente - elija entre las opciones:

• Lineal - la transición del color va de un lado al otro;
• Radial - para un efecto circular.

C) Ángulo del gradiente - defina la dirección del gradiente, para controlar cómo se mezclan los colores:

• 90° - de izquierda a derecha
• 180° - de arriba hacia abajo
• 45° - diagonal, y así sucesivamente.

Borde:

A) Tipo de borde (ícono en la esquina superior izquierda del cuadrado grande) - elija entre sólido, punteado, rayado, entre otros;

B) Tamaño del borde - defina el grosor del borde. Puede aumentar o disminuir para dejar el contorno más delgado o más grueso.

Sombra:

A) Parámetros de la sombra - son los ajustes que definen cómo aparecerá la sombra de un texto u objeto. Controlan la posición, intensidad y apariencia de la sombra.

6Para guardar los cambios, haga clic en Actualización

Ordenar la posición de los artículos de menú

1En la "Barra de herramientas”, haga clic en el ícono de flechas (Mover a la derecha o a la izquierda)

2A cada clic, la flecha de la izquierda mueve el elemento del menú a las primeras posiciones y la flecha de la derecha a las últimas

3Para guardar los cambios, haga clic en Actualización

Definir el estilo - A través de CSS   

Defina cómo los elementos van a aparecer en la pantalla (colores, tamaños, fuentes, espacios, sombras, bordes, etc.) con código CSS (Cascading Style Sheets).

Es necesario que usted tenga los códigos que desea aplicar.

1En la "Barra de herramientas”, haga clic en el ícono de engranaje (Configuraciones)

2En “Estilo”, configure el CSS 

3Para guardar los cambios, haga clic en Actualización

Añadir efectos  

1En la "Barra de herramientas”, haga clic en el ícono de engranaje (Configuraciones)

2En la pantalla que se abrirá, haga clic en la pestaña Efectos

3A continuación, haga clic en el efecto que desea aplicar

4En “Estilo”, elija el estilo del movimiento de entrada o salida - Si el efecto se aplica directamente y cierra esta pantalla, acceda nuevamente para configurar estos otros recursos

5Para aplicar la duración del efecto, haga clic en el círculo blanco y arrastre en la barra hasta llegar a la opción que desea

6Para guardar los cambios, haga clic en Actualización

Duplicar un elemento del menú

1En la "Barra de herramientas”, haga clic en el ícono de documentos superpuestos (Duplicado)

2A continuación, edite la información como desee

3Para guardar los cambios, haga clic en Actualización

Eliminar un elemento del menú

Esta acción es para remover solo un elemento del menú principal - Después de eliminar y guardar, no es posible volver y restaurar.  

1En la "Barra de herramientas”, haga clic en el ícono de papelera (Eliminar)

2Para guardar los cambios, haga clic en Actualización

Eliminar un menú principal

Esta acción elimina todo el menú principal, incluyendo todos los elementos que contiene - Después de eliminar y guardar, no es posible volver y restaurar.

1En el menú que desea eliminar, pase el cursor del mouse y en el margen que se mostrará, en la esquina superior derecha, haga clic en el ícono de flecha

2En la barra de herramientas que se abrirá, haga clic en el ícono de papelera (Eliminar)

3Para guardar los cambios, haga clic en Actualización