{"id":129090,"date":"2022-07-25T16:43:22","date_gmt":"2022-07-25T11:13:22","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=129090"},"modified":"2024-03-16T14:27:28","modified_gmt":"2024-03-16T08:57:28","slug":"customize-the-submenu","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/customize-the-submenu\/","title":{"rendered":"Astra - Personalizar el submen\u00fa"},"content":{"rendered":"

Puedes hacer que el men\u00fa de tu sitio web tenga un aspecto atractivo y extraordinario. Personaliza la apariencia del submen\u00fa desplegable a tu gusto, configurando diferentes opciones mientras utilizas el tema Astra.<\/p>\n\n\n\n

\u00bfCu\u00e1les son Submen\u00fas de WordPress<\/strong>?<\/h3>\n\n\n\n

Este documento muestra c\u00f3mo usar y personalizar los sub-men\u00fas y men\u00fas desplegables de WordPress f\u00e1cilmente. Un submen\u00fa o men\u00fa desplegable aparece cuando tienes algunas p\u00e1ginas bajo el dise\u00f1o del elemento del men\u00fa principal y pasas el rat\u00f3n por encima de este elemento de la p\u00e1gina principal en el men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n

\"Submenu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Aseg\u00farese de haber creado su \"men\u00fa principal\" para tener un mejor punto de partida.<\/p>\n\n\n\n

\u00bfC\u00f3mo a\u00f1adir un men\u00fa desplegable simple?<\/strong><\/h4>\n\n\n\n

Para a\u00f1adir un men\u00fa desplegable simple, s\u00f3lo tienes que ir a tu WordPress Cuadro de mandos<\/strong> > Apariencia<\/strong> > Men\u00fas<\/strong> > Cree el men\u00fa y simplemente arrastre\/suelte los elementos del men\u00fa bajo la p\u00e1gina del men\u00fa de navegaci\u00f3n principal, como se muestra en la imagen adjunta a continuaci\u00f3n.<\/p>\n\n\n\n

\"Go\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Puede crear un nuevo men\u00fa o a\u00f1adir las p\u00e1ginas al men\u00fa existente seleccion\u00e1ndolas y haciendo clic en \"A\u00f1adir al men\u00fa\".<\/p>\n\n\n\n

\"Add\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

\"P\u00e1gina de muestra\" se ha a\u00f1adido a su men\u00fa principal. Simplemente arr\u00e1strelo y su\u00e9ltelo debajo de cualquier elemento de men\u00fa existente para crear un submen\u00fa.<\/p>\n\n\n\n

\"Drag\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Aseg\u00farese de hacer clic en el bot\u00f3n 'Guardar men\u00fa<\/strong>\"para guardar los cambios. Esta p\u00e1gina de muestra aparecer\u00e1 ahora como un elemento secundario dentro de \"Todo\".<\/p>\n\n\n\n

\"Preview\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Puede a\u00f1adir m\u00e1s elementos en este submen\u00fa seleccionando y a\u00f1adiendo m\u00e1s p\u00e1ginas.<\/p>\n\n\n\n

Personalizar el submen\u00fa<\/strong> <\/h4>\n\n\n\n

Si utilizas el tema Astra y tu navegaci\u00f3n tiene varios niveles, puedes buscar una forma de modificar la apariencia de los submen\u00fas, los elementos del men\u00fa desplegable. <\/p>\n\n\n\n

En esta secci\u00f3n encontrar\u00e1s una gu\u00eda detallada sobre c\u00f3mo personalizar los submen\u00fas. Obt\u00e9n m\u00e1s informaci\u00f3n sobre c\u00f3mo cambiar la anchura, la posici\u00f3n e incluso c\u00f3mo a\u00f1adir el efecto hover: todo est\u00e1 aqu\u00ed.<\/p>\n\n\n\n

Para personalizar el submen\u00fa, vaya a Apariencia<\/strong> > Personalice<\/strong> > Creador de cabeceras<\/strong> > Men\u00fa principal<\/strong> > Dise\u00f1o<\/strong> > Submen\u00fa Contenedor <\/strong>Opciones. <\/p>\n\n\n\n

\"Submenu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

En las opciones de estilo, puede ver varias opciones relacionadas con el tama\u00f1o del divisor, el desplazamiento superior, la animaci\u00f3n del submen\u00fa, el borde, el color del submen\u00fa y muchas m\u00e1s.<\/p>\n\n\n\n

Analicemos aqu\u00ed todas las opciones posibles.<\/p>\n\n\n\n

Tama\u00f1o y color del separador<\/strong><\/p>\n\n\n\n

Puede a\u00f1adir el divisor entre todos los elementos del submen\u00fa utilizando esta opci\u00f3n de divisor. Adem\u00e1s, puede establecer el ancho y el color para el divisor aqu\u00ed.<\/p>\n\n\n\n

\"Divider\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Compensaci\u00f3n superior<\/strong><\/p>\n\n\n\n

Aqu\u00ed puede establecer el valor de desplazamiento superior que desee. Esta es la distancia entre el elemento principal y el submen\u00fa.<\/p>\n\n\n\n

\"Top\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Animaci\u00f3n del submen\u00fa<\/strong><\/p>\n\n\n\n

Aplica animaci\u00f3n de entrada al contenedor del submen\u00fa cuando el usuario pasa el rat\u00f3n por encima del men\u00fa padre. Los estilos de animaci\u00f3n son Deslizar hacia abajo, Deslizar hacia arriba y Fundido.<\/p>\n\n\n\n

\"Submenu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Anchura y color de los bordes<\/strong><\/p>\n\n\n\n

Establezca aqu\u00ed la anchura y el color del borde de los elementos del submen\u00fa. <\/p>\n\n\n\n

\"Border\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Caja Sombra<\/strong><\/p>\n\n\n\n

Utilice la opci\u00f3n para establecer la sombra de caja a los elementos del submen\u00fa. Esta opci\u00f3n est\u00e1 disponible con nuestro Plugin Astra Pro<\/a>.<\/p>\n\n\n\n

\"Box\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Color del men\u00fa<\/strong><\/p>\n\n\n\n

Una vez que tengas el dise\u00f1o del men\u00fa a tu gusto, es hora de personalizarlo con ajustes de color. Utilice la opci\u00f3n Texto\/Color del enlace para personalizar el color de los enlaces del men\u00fa en estado normal, al pasar el rat\u00f3n por encima y cuando se trata de la p\u00e1gina activa. Utilice los iconos Hover y Activo para editar los diferentes estados.<\/p>\n\n\n\n

\"Menu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Men\u00fa Fuente<\/strong><\/p>\n\n\n\n

Puede editar el color del texto y la tipograf\u00eda de los elementos del men\u00fa.\u00a0<\/p>\n\n\n\n

\"Menu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Color del texto - Elija el color de su texto.<\/p>\n\n\n\n

Tipograf\u00eda:<\/p>\n\n\n\n

Familia - Elija su familia de fuentes<\/p>\n\n\n\n

Tama\u00f1o - Elija un tama\u00f1o para su fuente (px, em)<\/p>\n\n\n\n

Peso - Elija el peso de la fuente<\/p>\n\n\n\n

Transformar - Elija las propiedades de transformaci\u00f3n de la fuente<\/p>\n\n\n\n

Altura de l\u00ednea: utilice el control deslizante para ajustar la altura de l\u00ednea.<\/p>\n\n\n\n

Espaciado y margen del men\u00fa<\/strong><\/p>\n\n\n\n

El relleno para sus men\u00fas se refiere al espacio fuera de su men\u00fa. Utiliza los controles de relleno para aumentar la separaci\u00f3n entre tu men\u00fa y otros elementos de la cabecera o el pie de p\u00e1gina.<\/p>\n\n\n\n

\"Spacing\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Submen\u00fa Color<\/strong><\/p>\n\n\n\n

Utilice la opci\u00f3n Texto\/Color del enlace para personalizar el color de los enlaces del submen\u00fa en estado normal, al pasar el rat\u00f3n por encima y cuando se trata de la p\u00e1gina activa. Utilice los iconos Hover y Activo para editar los diferentes estados.<\/p>\n\n\n\n

Nota<\/strong>: Esta opci\u00f3n est\u00e1 disponible cuando se utiliza el plugin Astra Pro.<\/p>\n\n\n\n

\"Submenu\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Haga clic en el bot\u00f3n \"Publicar\" para aplicar estos cambios.<\/p>\n\n\n\n

Nota<\/strong>: La informaci\u00f3n mencionada en este documento es para la cabecera normal. Si ha activado la cabecera transparente, deber\u00e1 configurar el submen\u00fa desde la cabecera transparente.<\/p>\n\n\n\n

Para ello, vaya a Apariencia > Personalizar > Creador de encabezados >. Cabecera transparente<\/strong> > Dise\u00f1o <\/em><\/strong>y hacer la personalizaci\u00f3n aqu\u00ed.<\/p>\n\n\n\n

Si necesita ayuda, p\u00f3ngase en contacto con nuestro equipo de asistencia.<\/p>","protected":false},"excerpt":{"rendered":"

You can make the menu on your website look attractive and extraordinary. Customize the appearance of the dropdown sub-menu according to your taste, setting different options while using the Astra theme. What are WordPress Sub Menus? This document shows how to use and customize the WordPress Sub-Menus and Drop-Downs menu items easily. A sub-menu or [\u2026]<\/p>","protected":false},"author":89,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[116],"docs_tag":[],"class_list":{"0":"post-129090","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-astra-customizer-settings"},"spectra_custom_meta":{"wp_last_modified_info":["July 28, 2022 @ 3:20 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1710579455:109"],"_wplmi_last_modified":["2022-07-28 15:20:33"],"rank_math_internal_links_processed":["1"],"rank_math_seo_score":["21"],"_edit_last":["109"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"rank_math_analytic_object_id":["1861"],"views":["21482"],"helpful":["30"],"unhelpful":["65"],"redirects":["57"],"rank_math_primary_docs_category":["116"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"3ccda3c03b3649c37c5ca33e1c6485dc\";s:6:\"images\";a:1:{i:0;i:175342;}}"],"_trp_automatically_translated_slug_es_ES":["astra-personalizar-el-submenu"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"_wp_old_slug":["astra-customize-the-submenu"],"pfd_related_docs":[""]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"mounikak","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/mounikak\/"},"uagb_comment_info":0,"uagb_excerpt":"You can make the menu on your website look attractive and extraordinary. Customize the appearance of the dropdown sub-menu according to your taste, setting different options while using the Astra theme. What are WordPress Sub Menus? This document shows how to use and customize the WordPress Sub-Menus and Drop-Downs menu items easily. A sub-menu or…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/129090"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=129090"}],"version-history":[{"count":5,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/129090\/revisions"}],"predecessor-version":[{"id":175345,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/129090\/revisions\/175345"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=129090"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=129090"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=129090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}