{"id":29269,"date":"2018-10-10T00:00:00","date_gmt":"2018-10-09T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=29269"},"modified":"2024-02-15T16:14:27","modified_gmt":"2024-02-15T10:44:27","slug":"dim-content-on-menu-hover","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/dim-content-on-menu-hover\/","title":{"rendered":"Atenuar el contenido al pasar el rat\u00f3n por encima del men\u00fa"},"content":{"rendered":"<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/Screen-Recording-2018-10-10-at-06.40.35.52-PM.gif\" alt=\"Astra Starter Sites\"\/><\/figure>\n\n\n\n<p>\u00bfTe gusta el estilo del men\u00fa al pasar el rat\u00f3n por encima en el GIF anterior? Puedes a\u00f1adir un efecto de atenuaci\u00f3n similar al contenido del men\u00fa hover con el CSS. De este modo, los visitantes se centrar\u00e1n m\u00e1s en el men\u00fa de navegaci\u00f3n, lo que mejorar\u00e1 la conversi\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00bfPor qu\u00e9 utilizar un men\u00fa Hover Dim?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mayor concentraci\u00f3n:<\/strong>&nbsp;Al atenuar moment\u00e1neamente el contenido, el men\u00fa se convierte en el centro de atenci\u00f3n visual, dirigiendo la mirada de los visitantes hacia las opciones de navegaci\u00f3n.<\/li>\n\n\n\n<li><strong>Mayor claridad:<\/strong>&nbsp;Al reducir el desorden visual, la navegaci\u00f3n resulta m\u00e1s f\u00e1cil de escanear y comprender, sobre todo para los usuarios con deficiencias visuales.<\/li>\n\n\n\n<li><strong>Experiencia de usuario mejorada:<\/strong>\u00a0La transici\u00f3n suave crea una sensaci\u00f3n m\u00e1s pulida e interactiva, lo que repercute positivamente en la calidad general de su sitio web.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>C\u00f3mo implementar el men\u00fa Hover Dim<\/strong><\/h3>\n\n\n\n<p>Astra, tienen un Personalizador integrado donde puedes modificar directamente varios ajustes.\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Desde el panel de control de WordPress, vaya a la secci\u00f3n \"Apariencia\" y busque la opci\u00f3n \"Personalizar\".<\/li>\n\n\n\n<li>Dentro del Personalizador, busca una pesta\u00f1a o secci\u00f3n llamada \"CSS adicional\". Aqu\u00ed es donde puedes a\u00f1adir tu propio c\u00f3digo CSS para personalizar los estilos de tu sitio web.<\/li>\n\n\n\n<li>Copie y pegue el siguiente fragmento de c\u00f3digo en el editor de CSS:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted lang:css decode:true\">\/* Dim content on menu hover *\/\n#encabezado:hover~#contenido {\n\topacidad: 0.1;\n\ttransici\u00f3n: all 0.5s linear 0.1s;\n}\n\n#content {\n\ttransition: all 0.5s linear 0.1s;\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pulse el bot\u00f3n \"Publicar\" para aplicar los cambios. <\/li>\n\n\n\n<li>Vuelva a su sitio web y pase el rat\u00f3n por encima del men\u00fa para ver el efecto en acci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p>No olvide probar y ajustar el efecto para adaptarlo al dise\u00f1o general de su sitio web y a las preferencias del p\u00fablico.<\/p>\n\n\n\n<p>Esperamos que este documento le haya sido \u00fatil. No dude en dejarnos un comentario a continuaci\u00f3n si tiene alguna duda.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfTe gusta el estilo del men\u00fa al pasar el rat\u00f3n por encima en el GIF anterior? Puedes a\u00f1adir un efecto de atenuaci\u00f3n similar al contenido del men\u00fa hover con el CSS. Con esto, los visitantes tendr\u00e1n un mayor enfoque en el men\u00fa de navegaci\u00f3n y es mejor para la conversi\u00f3n. \u00bfPor qu\u00e9 utilizar un men\u00fa Hover Dim? C\u00f3mo implementar el [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","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":"default","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":[2113],"docs_tag":[],"class_list":{"0":"post-29269","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-custom-css"},"spectra_custom_meta":{"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["0"],"wpil_links_inbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["2"],"wpil_links_outbound_external_count_data":["a:2:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:26:\"https:\/\/cl.ly\/14d37087d19a\";s:4:\"host\";s:5:\"cl.ly\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:14:\"Additional CSS\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:23:\"child theme's style.css\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-15T04:41:24+00:00"],"_edit_lock":["1708079206:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["60"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_title":["How to Dim Content on Menu Hover?"],"_ht_kb_post_views_count":["11"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["29269"],"wp_last_modified_info":["February 24, 2022 @ 1:58 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["5677"],"helpful":["1"],"unhelpful":["4"],"redirects":["4"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2021-09-08 20:14:54"],"rank_math_title":["How to Dim Content on Menu Hover?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["992"],"rank_math_seo_score":["11"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"b668e98f7fb7d54cf48b6ba215cb06df\";s:6:\"images\";a:1:{i:0;i:40880;}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["atenuar-el-contenido-al-pasar-el-raton-por-encima-del-menu"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"pfd_related_docs":[""],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:10:\"core\/image\";i:1;s:14:\"core\/paragraph\";i:2;s:12:\"core\/heading\";i:3;s:9:\"core\/list\";i:4;s:14:\"core\/list-item\";i:5;s:17:\"core\/preformatted\";i:6;s:14:\"uagb\/container\";i:7;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1780101869\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"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":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"Liked how the menu is styled on hover in the above GIF? You can add a similar dim effect\u00a0to the content on the menu hover with the CSS. With this, visitors will have an increased focus on the navigation menu and it&#8217;s better for conversion. Why Use a Menu Hover Dim? How to Implement the&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/29269"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=29269"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/29269\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=29269"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=29269"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=29269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}