{"id":132255,"date":"2022-09-07T12:49:31","date_gmt":"2022-09-07T07:19:31","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=132255"},"modified":"2023-08-01T14:42:54","modified_gmt":"2023-08-01T09:12:54","slug":"how-to-add-custom-css-for-specific-pages","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-add-custom-css-for-specific-pages\/","title":{"rendered":"C\u00f3mo a\u00f1adir CSS personalizado para p\u00e1ginas espec\u00edficas"},"content":{"rendered":"

WordPress hace que sea bastante f\u00e1cil para nosotros para el estilo de p\u00e1ginas espec\u00edficas mediante la adici\u00f3n de una \u00fanica clase espec\u00edfica de la p\u00e1gina a cada p\u00e1gina. Puede utilizar CSS personalizado en p\u00e1ginas espec\u00edficas en WordPress. Si alguna vez has querido aplicar estilo a una p\u00e1gina \u00fanica espec\u00edfica pero no est\u00e1s seguro de c\u00f3mo hacerlo, este documento te ayudar\u00e1.<\/p>\n\n\n\n

Para a\u00f1adir CSS personalizado en p\u00e1ginas espec\u00edficas de WordPress, necesitar\u00e1 a\u00f1adir su c\u00f3digo CSS al archivo styles.css accesible a trav\u00e9s de su backend de WordPress, generalmente siguiendo esta ruta:<\/p>\n\n\n\n

Apariencia > Editor de temas > Styles.css<\/p>\n\n\n\n

Nota:<\/h4>

Dependiendo del tema que est\u00e9 utilizando, puede tener una pesta\u00f1a CSS personalizada integrada en el tema, que hace lo mismo por usted y genera sus estilos dentro de su archivo Styes.css, pero le permite introducir su CSS en un editor dentro de una pesta\u00f1a del tema.<\/p><\/div><\/div>\n\n\n\n

C\u00f3mo aplicar CSS en una p\u00e1gina o entrada espec\u00edfica<\/h2>\n\n\n\n

Hay varias maneras con las que usted puede agregar aplicar CSS en una p\u00e1gina espec\u00edfica o un post. Pero, la m\u00e1s com\u00fan es<\/p>\n\n\n\n

1. Utilizar el id o la clase HTML <\/h3>\n\n\n\n

Este es uno de los enfoques m\u00e1s comunes si desea aplicar CSS en una p\u00e1gina o post espec\u00edfico. Todo lo que necesitamos hacer es tomar un identificador \u00fanico que tendr\u00e1 una p\u00e1gina o post. Entonces, esta clase HTML o id nos permite dirigir todos nuestros scripts CSS a la p\u00e1gina o post deseado.<\/p>\n\n\n\n

1. Encontrar la clase HTML o id de la p\u00e1gina<\/h5>\n\n\n\n

En primer lugar, debe encontrar el id o la clase utilizada para el script CSS. Esto se puede encontrar f\u00e1cilmente con la ayuda de la herramienta de inspecci\u00f3n del navegador.<\/p>\n\n\n\n

S\u00f3lo tienes que abrir la p\u00e1gina donde aplicas CSS y hacer clic con el bot\u00f3n derecho en el elemento que quieres editar. A continuaci\u00f3n, haz clic en Inspeccionar.<\/p>\n\n\n\n

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

En la captura de pantalla anterior, el identificador \u00fanico de la p\u00e1gina de inicio es la clase \"home\". Por lo tanto, si desea aplicar algunas reglas CSS s\u00f3lo a la p\u00e1gina de inicio, debe utilizar esta clase en sus selectores.<\/p>\n\n\n\n

Por ejemplo, digamos que queremos aplicar alg\u00fan estilo al logotipo s\u00f3lo en la p\u00e1gina de inicio. Entonces, adem\u00e1s de la clase home, tambi\u00e9n necesitamos el selector de imagen del logo. De nuevo, esto se puede obtener de la herramienta de inspecci\u00f3n del navegador.<\/p>\n\n\n\n

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

En este caso, utilizaremos la clase \"logotipo personalizado\" para aplicar nuestro estilo al logotipo. Vamos a juntarlos con la clase agarrada en el paso anterior. Por \u00faltimo, podemos aplicar nuestro gui\u00f3n s\u00f3lo en la p\u00e1gina de inicio utilizando el siguiente selector CSS:<\/p>\n\n\n\n

.home .custom-logo{ \/*your CSS here *\/}\n<\/code><\/pre>\n\n\n\n
2. Busque la clase HTML o id de la entrada<\/h4>\n\n\n\n
Al igual que las p\u00e1ginas, cada entrada debe tener una clase HTML \u00fanica. De nuevo, s\u00f3lo tienes que inspeccionar el elemento del post al que quieres aplicar CSS con la ayuda de la herramienta de desarrollo del navegador. Entonces, ver\u00e1s el identificador \u00fanico con el atributo postid.<\/p>\n\n\n\n
Para el siguiente post con el tema Astra, la clase que identifica este post es postid-130187.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Por \u00faltimo, crea tu propio selector CSS que cumpla tus requisitos, como en el ejemplo del logotipo personalizado. A continuaci\u00f3n, puedes aplicar el CSS en la p\u00e1gina o entrada espec\u00edfica a\u00f1adi\u00e9ndolo en Apariencia > Personalizar > CSS adicional. <\/p>\n\n\n\n
.postid-130187 .custom-logo{ \/*your CSS here *\/}<\/code><\/pre>\n\n\n\n
Recuerde que el CSS personalizado le ofrece la flexibilidad de personalizar p\u00e1ginas o secciones individuales, lo que permite una integraci\u00f3n perfecta de los cambios de dise\u00f1o, manteniendo la coherencia general de su sitio web. Tanto si quieres ajustar el dise\u00f1o, los colores, la tipograf\u00eda u otros elementos visuales, el CSS personalizado te permite tener un control total sobre la apariencia de tu sitio web.<\/p>\n\n\n\n
Sin embargo, es importante tener cuidado al aplicar CSS personalizado, ya que una implementaci\u00f3n incorrecta puede tener consecuencias no deseadas o provocar conflictos con los estilos existentes. Prueba siempre tus cambios a fondo y ten en cuenta el impacto potencial en otras p\u00e1ginas o dispositivos para garantizar una experiencia de usuario fluida.<\/p>","protected":false},"excerpt":{"rendered":"
WordPress hace que sea bastante f\u00e1cil para nosotros para el estilo de p\u00e1ginas espec\u00edficas mediante la adici\u00f3n de una \u00fanica clase espec\u00edfica de la p\u00e1gina a cada p\u00e1gina. Puede utilizar CSS personalizado en p\u00e1ginas espec\u00edficas en WordPress. Si alguna vez ha querido aplicar estilo a una p\u00e1gina \u00fanica espec\u00edfica pero no est\u00e1 seguro de c\u00f3mo hacerlo, este documento le ayudar\u00e1. Para a\u00f1adir [...]<\/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":"","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":"default","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":[108],"docs_tag":[],"class_list":{"0":"post-132255","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-general"},"spectra_custom_meta":{"wp_last_modified_info":["August 1, 2023 @ 2:42 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1690881176:86"],"rank_math_seo_score":["19"],"_wplmi_last_modified":["2023-08-01 14:42:54"],"rank_math_internal_links_processed":["1"],"_edit_last":["86"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"rank_math_primary_docs_category":["108"],"views":["18234"],"rank_math_analytic_object_id":["1918"],"helpful":["14"],"unhelpful":["27"],"redirects":["6"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"02f46f3efa269facc3c475606b7c8680\";s:6:\"images\";a:1:{i:0;i:132261;}}"],"pfd_related_docs":[""],"_trp_automatically_translated_slug_es_ES":["como-anadir-css-personalizado-para-paginas-especificas"],"_uag_page_assets":["a:9:{s:3:\"css\";s:5248:\" .uagb-block-f9992b79.wp-block-uagb-inline-notice .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-f9992b79 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;border: 2px solid #FFD54F;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;} .uagb-block-f9992b79.uagb-dismissable button[type=\"button\"] svg{width: 16px;height: 16px;top: 15px;} .uagb-block-f9992b79.uagb-dismissable > svg{width: 16px;height: 16px;top: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-f9992b79 .uagb-notice-title{background-color: #FFD54F;border-top-right-radius: 3px;border-top-left-radius: 3px;} .uagb-block-f9992b79.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}@media only screen and (max-width: 976px) { .uagb-block-f9992b79 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-f9992b79 .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-f9992b79.uagb-dismissable button[type=\"button\"] svg{top: 15px;} .uagb-block-f9992b79.uagb-dismissable > svg{top: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}}@media only screen and (max-width: 767px) { .uagb-block-f9992b79 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-f9992b79 .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-f9992b79.uagb-dismissable button[type=\"button\"] svg{top: 15px;} .uagb-block-f9992b79.uagb-dismissable > svg{top: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-f9992b79.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}}.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:271:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'DOMContentLoaded', function() {\n\tUAGBInlineNotice.init( {\"c_id\":null,\"cookies\":false,\"close_cookie_days\":1,\"noticeDismiss\":\"\",\"icon\":\"rectangle-xmark\"}, '.uagb-block-f9992b79' );\n});\n });\";s:18:\"current_block_list\";a:7:{i:0;s:14:\"core\/paragraph\";i:1;s:18:\"uagb\/inline-notice\";i:2;s:12:\"core\/heading\";i:3;s:10:\"core\/image\";i:4;s:9:\"core\/code\";i:5;s:14:\"uagb\/container\";i:6;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776711739\";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":"mounikak","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/mounikak\/"},"uagb_comment_info":0,"uagb_excerpt":"WordPress makes it quite easy for us to style specific pages by adding a unique page-specific class to every page. You can use custom CSS on specific pages in WordPress. If you\u2019ve ever wanted to apply styling to a specific unique page but are unsure how to, this document will help you. To add custom…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132255"}],"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=132255"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132255\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=132255"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=132255"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=132255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}