{"id":168573,"date":"2023-11-27T13:54:50","date_gmt":"2023-11-27T08:24:50","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=168573"},"modified":"2023-11-27T14:00:54","modified_gmt":"2023-11-27T08:30:54","slug":"transparent-custom-header","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/transparent-custom-header\/","title":{"rendered":"Crear una cabecera personalizada transparente"},"content":{"rendered":"

Con Astra Site Builder, puedes crear una cabecera personalizada y tambi\u00e9n hacerla adhesiva. Sin embargo, el efecto de cabecera transparente solo est\u00e1 disponible actualmente con la cabecera predeterminada de Astra.<\/p>\n\n\n\n

En tal caso, si necesita mostrar un encabezado personalizado en algunas p\u00e1ginas con un efecto de transparencia, deber\u00e1 realizar algunos ajustes en el encabezado personalizado para activar el efecto de transparencia.<\/p>\n\n\n\n

Esta gu\u00eda explica c\u00f3mo crear una cabecera personalizada transparente utilizando Astra Site Builder. Antes de seguir adelante, le recomendamos que consulte las instrucciones sobre c\u00f3mo Cabecera personalizada con Astra<\/a> Site Builder funciona.<\/p>\n\n\n\n

<\/a>C\u00f3mo crear una cabecera personalizada transparente<\/strong><\/h3>\n\n\n\n

Para crear una cabecera personalizada transparente, siga los pasos que se indican a continuaci\u00f3n para crear primero una cabecera personalizada.<\/p>\n\n\n\n

Antes de empezar a utilizar el Constructor de Sitios, aseg\u00farese de haber instalado y activado el plugin Astra Pro. Adem\u00e1s, actualice tanto el Tema Astra<\/a> y Astra Addon a las \u00faltimas versiones para acceder al Constructor de Sitios.<\/p>\n\n\n\n

Despu\u00e9s, ve al panel de control de WordPress, haz clic en Astra, luego en M\u00f3dulos Astra Pro y activa el bot\u00f3n Site Builder.<\/p>\n\n\n\n

\"Create<\/a><\/figure>\n\n\n\n

Una vez que active el Constructor de Sitios, podr\u00e1 ver el Constructor de Sitios en Astra en el panel de control de WordPress.<\/p>\n\n\n\n

Tras hacer clic en el Creador de sitios, puede explorar el renovado Creador de sitios a trav\u00e9s de la secci\u00f3n Todos los dise\u00f1os.<\/p>\n\n\n\n

\"Create<\/a><\/figure>\n\n\n\n

Desde el panel de control del constructor de sitios, puede crear una plantilla de cabecera.<\/p>\n\n\n\n

\"Create<\/a><\/figure>\n\n\n\n

Puede crear un dise\u00f1o de cabecera utilizando columnas o seleccionar el dise\u00f1o ya creado de los patrones.<\/p>\n\n\n\n

\"Create<\/a><\/figure>\n\n\n\n

Una vez a\u00f1adido el dise\u00f1o de la cabecera, seleccione la columna o grupo principal y borre el fondo para hacerlo transparente.<\/p>\n\n\n\n

\"Create<\/a><\/figure>\n\n\n\n

Aplique las condiciones de visualizaci\u00f3n para habilitar el encabezado personalizado en el sitio web y publique los cambios.<\/p>\n\n\n\n

A continuaci\u00f3n, vaya a la secci\u00f3n CSS adicional del personalizador y a\u00f1ada el siguiente CSS:<\/p>\n\n\n\n

.my-transparent-header{\r\r\nmargin-bottom: -100% !important;\r\r\n}\r\r\n.my-transparent-header a {\r\r\ncolor: #ffffff !important;\r\r\n}<\/code><\/pre>\n\n\n\n
Nota:<\/strong> La clase en el CSS anterior debe coincidir con la clase a\u00f1adida en el bloque de encabezado personalizado.<\/p>\n\n\n\n
Publique los cambios del personalizador y el encabezado personalizado transparente deber\u00eda estar habilitado en el sitio web.<\/p>\n\n\n\n
\"Create<\/a><\/figure>\n\n\n\n
Adem\u00e1s, puede modificarlo seg\u00fan sus necesidades a\u00f1adiendo opciones de dise\u00f1o adicionales mediante el CSS.<\/p>\n\n\n\n
Esperamos que este art\u00edculo le haya sido \u00fatil. Si tiene alguna pregunta, no dude en comentarla a continuaci\u00f3n.<\/p>","protected":false},"excerpt":{"rendered":"
Con Astra Site Builder, puedes crear una cabecera personalizada y tambi\u00e9n hacerla adhesiva. Sin embargo, el efecto de cabecera transparente s\u00f3lo est\u00e1 disponible actualmente con la cabecera predeterminada de Astra. En tal caso, si necesitas mostrar un encabezado personalizado en unas pocas p\u00e1ginas con efecto de transparencia, tendr\u00e1s que hacer algunos [...]<\/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":[2363],"docs_tag":[],"class_list":{"0":"post-168573","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-site-builder"},"spectra_custom_meta":{"_edit_lock":["1701074866:89"],"rank_math_internal_links_processed":["1"],"rank_math_primary_docs_category":["2363"],"rank_math_seo_score":["25"],"_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"],"_edit_last":["89"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"views":["5338"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"efa25d69378c23abd0a502fa1b03788c\";s:6:\"images\";a:1:{i:0;i:168574;}}","a:2:{s:5:\"check\";s:32:\"efa25d69378c23abd0a502fa1b03788c\";s:6:\"images\";a:1:{i:0;i:168574;}}"],"rank_math_schema_VideoObject":["a:12:{s:5:\"@type\";s:11:\"VideoObject\";s:8:\"metadata\";a:8:{s:5:\"title\";s:5:\"Video\";s:4:\"type\";s:8:\"template\";s:9:\"shortcode\";s:15:\"s-6564530e0c273\";s:9:\"isPrimary\";b:1;s:23:\"reviewLocationShortcode\";s:24:\"[rank_math_rich_snippet]\";s:8:\"category\";s:12:\"%categories%\";s:4:\"tags\";s:6:\"%tags%\";s:15:\"isAutoGenerated\";b:1;}s:4:\"name\";s:11:\"%seo_title%\";s:11:\"description\";s:17:\"%seo_description%\";s:10:\"uploadDate\";s:20:\"%date(Y-m-dTH:i:sP)%\";s:12:\"thumbnailUrl\";s:16:\"%post_thumbnail%\";s:8:\"embedUrl\";s:0:\"\";s:10:\"contentUrl\";s:77:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/11\/clear-bg-color.mp4\";s:8:\"duration\";s:0:\"\";s:5:\"width\";i:1280;s:6:\"height\";i:594;s:16:\"isFamilyFriendly\";b:1;}","a:12:{s:5:\"@type\";s:11:\"VideoObject\";s:8:\"metadata\";a:8:{s:5:\"title\";s:5:\"Video\";s:4:\"type\";s:8:\"template\";s:9:\"shortcode\";s:15:\"s-6564530e0c465\";s:9:\"isPrimary\";b:1;s:23:\"reviewLocationShortcode\";s:24:\"[rank_math_rich_snippet]\";s:8:\"category\";s:12:\"%categories%\";s:4:\"tags\";s:6:\"%tags%\";s:15:\"isAutoGenerated\";b:1;}s:4:\"name\";s:11:\"%seo_title%\";s:11:\"description\";s:17:\"%seo_description%\";s:10:\"uploadDate\";s:20:\"%date(Y-m-dTH:i:sP)%\";s:12:\"thumbnailUrl\";s:16:\"%post_thumbnail%\";s:8:\"embedUrl\";s:0:\"\";s:10:\"contentUrl\";s:77:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/11\/clear-bg-color.mp4\";s:8:\"duration\";s:0:\"\";s:5:\"width\";i:1280;s:6:\"height\";i:594;s:16:\"isFamilyFriendly\";b:1;}"],"_wp_old_slug":["create-a-transparent-custom-header"],"pfd_related_docs":[""],"helpful":["0"],"unhelpful":["3"],"redirects":["2"],"_trp_automatically_translated_slug_es_ES":["cabecera-personalizada-transparente"]},"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":"With Astra Site Builder, you can create a custom header and also make it sticky. However, the transparent header effect is currently available only with the default Astra header. In such a case, if you need to display a custom header on a few pages with a transparency effect, you will need to make some…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/168573"}],"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=168573"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/168573\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=168573"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=168573"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=168573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}