{"id":33260,"date":"2022-03-18T07:00:08","date_gmt":"2022-03-18T14:00:08","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33260"},"modified":"2025-01-16T13:07:47","modified_gmt":"2025-01-16T21:07:47","slug":"estilos-globales-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/","title":{"rendered":"Decodificando WordPress: Una Introducci\u00f3n a Los Estilos Globales"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Los bloques de WordPress y las funciones de <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/wordpress-full-site-editing-2\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Full-Site Editing (FSE)<\/span><\/a><span style=\"font-weight: 400;\"> hacen que crear y dise\u00f1ar un <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/11-secretos-para-crear-un-sitio-web-exitoso\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">sitio web exitoso<\/span><\/a><span style=\"font-weight: 400;\"> sea f\u00e1cil y r\u00e1pido.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Los estilos globales pueden ayudarte a unificar la <\/span><a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-templates\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">apariencia de tu sitio WordPress<\/span><\/a><span style=\"font-weight: 400;\"> sin tener que editar bloques separados o p\u00e1ginas. Entonces, ya sea que desees cambiar tu color de fondo o ajustar la tipograf\u00eda de los encabezados, podr\u00e1s hacer todas tus modificaciones en un solo lugar, resultando en una mejor y m\u00e1s cohesiva <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/que-es-experiencia-de-usuario\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Experiencia de Usuario (UX)<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En esta publicaci\u00f3n, te guiaremos a trav\u00e9s de los Estilos Globales. Explicaremos qu\u00e9 son, sus beneficios y c\u00f3mo funcionan las nuevas caracter\u00edsticas. Luego, hablaremos sobre c\u00f3mo usarlos para dise\u00f1ar tu sitio WordPress. \u00a1Comencemos!&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-una-vista-general-de-los-estilos-globales-de-wordpress\" class=\"wp-block-heading\"><b>Una Vista General de los Estilos Globales de WordPress<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Antes de trabajar con los Estilos Globales, es importante entender qu\u00e9 son y c\u00f3mo funcionan. Esta funci\u00f3n trabaja en conjunto con &#8216;theme.json&#8217;, un nuevo archivo de configuraciones de tema. Los desarrolladores pueden <\/span><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">usar &#8216;theme.json&#8217;<\/span><\/a><span style=\"font-weight: 400;\"> para definir la configuraci\u00f3n predeterminada de un sitio, as\u00ed como los bloques individuales. Gutenberg aplica este JSON autom\u00e1ticamente cuando colocas el archivo en el directorio ra\u00edz de un tema basado en bloques.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Este archivo es una de las herramientas m\u00e1s \u00fatiles del nuevo editor de sitio en WordPress 5.9. El archivo le permite a los autores del tema a compartir los Estilos Globales, as\u00ed como todas las configuraciones Globales. <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/todo-lo-que-necesitas-saber-de-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress<\/span><\/a><span style=\"font-weight: 400;\"> reformatea los datos tomados de esos objetos JSON y los convierte en CSS. Luego los usuarios pueden personalizar los estilos a\u00fan m\u00e1s en el editor de WordPress.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En versiones anteriores del <\/span><a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plugin Gutenberg<\/span><\/a><span style=\"font-weight: 400;\">, ten\u00edas que registrar la compatibilidad de las propiedades de estilo de un bloque antes de que pudieras trabajar con ellos en el &#8216;theme.json&#8217;. Tambi\u00e9n, en los temas cl\u00e1sicos y versiones antiguas, ten\u00edas que emplear PHP para definir cosas como tu elecci\u00f3n de colores <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/fuentes-seguras-web\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">y tipograf\u00edas<\/span><\/a><span style=\"font-weight: 400;\">. Luego, necesitabas a\u00f1adir los estilos para el front y backend de tu tema.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin embargo, con la \u00faltima actualizaci\u00f3n, cuando usas un tema con el archivo &#8216;theme.json&#8217;, WordPress autom\u00e1ticamente a\u00f1ade los estilos definidos all\u00ed a tu hoja de estilo. Puedes utilizar este sistema para a\u00f1adir paletas de color completamente nuevas, cambiar la tipograf\u00eda de los temas y m\u00e1s.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-por-que-usar-los-estilos-globales-de-wordpress\" class=\"wp-block-heading\"><b>Por Qu\u00e9 Usar los Estilos Globales de WordPress<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin importar tu nivel de habilidades, es probable que encuentres la experiencia de los Estilos Globales intuitiva y accesible. En general, puede simplificar el proceso de <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/elementos-de-diseno-web\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">dise\u00f1o web<\/span><\/a><span style=\"font-weight: 400;\"> al hacer m\u00e1s f\u00e1cil cambiar el look general de tu sitio. Si eres un principiante de WordPress, sacar provecho de estos Estilos Globales puede significar que no necesitar\u00e1s <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-contratar-un-desarrollador-web\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">contratar a un desarrollador<\/span><\/a><span style=\"font-weight: 400;\"> para poder <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/diseno-web-6-consejos\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">dise\u00f1ar tu sitio web<\/span><\/a><span style=\"font-weight: 400;\">. \u00a1Lo sentimos desarrolladores!&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aunque, por otro lado, esta nueva funci\u00f3n puede ser particularmente \u00fatil para los desarrolladores de temas. Esto es debido a que los Estilos Globales le ayudan a los desarrolladores de WordPress a dise\u00f1ar los bloques entre el <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-update-old-wordpress-posts-block-editor\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Editor en Bloque<\/span><\/a><span style=\"font-weight: 400;\">. Esto puede tener muchas ventajas, especialmente para aquellos autores de nuevos temas. Ofrece una variedad de controles que minimizan la necesidad de crear soluciones personalizadas para dise\u00f1ar un sitio.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En otras palabras, los Estilos Globales simplifican el desarrollo de tema en una gran medida. Como resultado, puede ayudarle a los desarrolladores a evitar <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/errores-de-diseno-web-que-asustan\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">errores da\u00f1inos de dise\u00f1o<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-creando-el-archivo-theme-json\" class=\"wp-block-heading\"><b>Creando el Archivo &#8216;theme.json&#8217;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">El archivo &#8216;theme.json&#8217; contiene dos partes importantes: las Configuraciones y los Estilos. Las Configuraciones se refieren a la lista de valores globales o contextuales de configuraci\u00f3n que determinan c\u00f3mo se comportan los bloques y el editor. Por ejemplo, influencia qu\u00e9 controles son habilitados por defecto, cu\u00e1les est\u00e1n escondidos en la interfaz de usuario (UI), la disponibilidad de la paleta de color, configuraci\u00f3n de tipograf\u00edas, etc.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Los Estilos manejan el lenguaje de dise\u00f1o del tema y le permite a los autores de tema definir elementos tales como:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Tama\u00f1o de fuente<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Altura de la l\u00ednea<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Colores de fondo<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Colores de enlace<\/span><\/li>\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Si deseas <\/span><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">crear un archivo &#8216;theme.json&#8217;<\/span><\/a><span style=\"font-weight: 400;\">, puedes crear un nuevo archivo con ese nombre y luego ponerlo dentro de la carpeta ra\u00edz de tu tema. Todos los contenidos de tu archivo deben ser insertados entre dos corchetes: { }.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, usar\u00e1s <\/span><i><span style=\"font-weight: 400;\">property names<\/span><\/i><span style=\"font-weight: 400;\"> y <\/span><i><span style=\"font-weight: 400;\">value<\/span><\/i><span style=\"font-weight: 400;\"> entre doble comillas y separados con dos puntos, por ejemplo:&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">{<\/span>\n<span style=\"font-weight: 400;\">\"property-name\": \"value\"<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">El <\/span><i><span style=\"font-weight: 400;\">property name<\/span><\/i><span style=\"font-weight: 400;\"> puede ser una configuraci\u00f3n o un bloque de nombre. A continuaci\u00f3n hay un ejemplo de un archivo b\u00e1sico &#8216;theme.json&#8217;:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n    \"version\": 1,\n    \"settings\": {},\n    \"styles\": {},\n    \"customTemplates\": {},\n    \"templateParts\": {}\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">La Versi\u00f3n 1 del formato &#8216;theme.json&#8217; es la versi\u00f3n m\u00e1s temprana y estable. Sin embargo, la Versi\u00f3n 2 es usada para comenzar con WordPress 5.9. Mientras que la versi\u00f3n de la secci\u00f3n debe ser la primera en seguir el corchete, las secciones subsecuentes pueden ser ubicadas en cualquier orden.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Como mencionamos, las dos secciones principales del archivo son \u201cConfiguraciones y Estilos\u201d <\/span><i><span style=\"font-weight: 400;\">(Settings y Styles).<\/span><\/i><span style=\"font-weight: 400;\"> Entonces veamos m\u00e1s de cerca los ajustes preestablecidos de cada uno.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ajustes-predefinidos-de-configuracion-o-presets\"><b>Ajustes Predefinidos de Configuraci\u00f3n o<\/b><b><i> Presets<\/i><\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Presets<\/span><\/a><span style=\"font-weight: 400;\"> se refiere a los controles predeterminados, as\u00ed como tambi\u00e9n a cualquier propiedad CSS y son generados por los valores en &#8216;theme.json&#8217;. Algunas de las categor\u00edas predefinidas incluyen:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Color<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tipograf\u00eda<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Dise\u00f1o<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Espacio<\/span><\/li>\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Estas categor\u00edas tambi\u00e9n ten\u00edan subcategor\u00edas. Por ejemplo, una subcategor\u00eda de Color, ser\u00eda Paleta de Color:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">{<\/span>\n<span style=\"font-weight: 400;\">\"version\": 2,<\/span>\n<span style=\"font-weight: 400;\">\"settings\": {<\/span>\n<span style=\"font-weight: 400;\">     \"color\": {<\/span>\n<span style=\"font-weight: 400;\">          \"palette\": [<\/span>\n<span style=\"font-weight: 400;\">               {<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Cada configuraci\u00f3n predeterminada tambi\u00e9n crea propiedades CSS personalizadas usando la convenci\u00f3n <\/span><span style=\"font-weight: 400;\">\u201c&#8211;wp&#8211;preset&#8211;{preset-category}&#8211;{preset-slug}\u201d<\/span><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Hay muchas configuraciones predeterminadas y ejemplos que puedes utilizar para crear tu archivo &#8216;theme.json&#8217;, por lo tanto, no las repasaremos. Sin embargo, puedes referirte al <\/span><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress Handbook<\/span><\/a><span style=\"font-weight: 400;\"> para una gu\u00eda m\u00e1s detallada.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-estilos-predeterminados-o-styles-presets\"><b>Estilos Predeterminados o <\/b><b><i>Styles Presets<\/i><\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Styles presets<\/span><\/a><span style=\"font-weight: 400;\"> controla los estilos de los objetos entre los bloques. Por ejemplo, lo siguiente ser\u00eda una manera de usar el valor hex para un fondo y un Estilo Global predeterminado para el color del texto:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">{\n        \"version\": 2,\n\t\"settings\": { ... },\n\t\"styles\": {\n\t\t\"color\": {\n\t\t\t\"background\": \"#FBF\",\n\t\t\t\"text\": \"var(--wp--preset--color--purple)\"\n\t\t}\n\t}\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Si quisi\u00e9ramos cambiar el color del encabezado de un bloque, se ver\u00eda similar a esto:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n        \"version\": 2,\n\t\"settings\": {...},\n\t\"styles\": {\n\t\t...,\n               \"blocks\": {\n\t             \"core\/heading\": {\n\t\t\t     \"color\": {\n\t\t\t\t      \"text\": \"var(--wp--preset--color--blue)\"\n\t\t\t     }<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">De nuevo, hay ejemplos casi que infinitos y maneras de usar las configuraciones predeterminadas de los estilos de bloque. Puedes consultar la documentaci\u00f3n de WordPress para <\/span><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#block-styles\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">una explicaci\u00f3n completa<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><br><span style=\"font-weight: 400;\">Tambi\u00e9n hay secciones de <\/span><a href=\"https:\/\/fullsiteediting.com\/lessons\/templates-and-template-parts\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Plantillas y partes de Plantillas<\/span><\/a><span style=\"font-weight: 400;\">. Estas incluyen los archivos b\u00e1sicos de tu tema, tales como index.html, adem\u00e1s de secciones para organizar y estructurar tu tema.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-como-disenar-tu-sitio-wordpress-usando-estilos-globales\" class=\"wp-block-heading\"><b>C\u00f3mo Dise\u00f1ar Tu Sitio WordPress Usando Estilos Globales<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Si est\u00e1s buscando una forma amigable con los principiantes para utilizar los Estilos Globales y dise\u00f1ar tu sitio web, puedes emplear la interfaz de Estilos Globales con un tema de Bloques de WordPress. Ten en cuenta que solo tendr\u00e1s acceso a la interfaz de Estilos con <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/la-actualizacion-wordpress-5-9-full-site-editing-ha-sido-postergada-hasta-enero\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress 5.9<\/span><\/a><span style=\"font-weight: 400;\"> o en adelante.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tC\u00f3mo Crear una Gu\u00eda de Estilo de Marca para Tu Sitio Web\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-crear-guia-estilo-marca-website\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elige-un-tema-basado-en-bloques\"><b>Elige un Tema Basado en Bloques<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Primero, necesitar\u00e1s un tema basado en bloques. Para encontrar uno, puedes navegar al <\/span><a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Directorio de Temas de WordPress<\/span><\/a><span style=\"font-weight: 400;\"> desde tu panel administrativo de WordPress al navegar a&nbsp;<\/span><\/p>\n\n\n\n<p><b>\u2018Apariencia &gt; Temas &gt; A\u00f1adir nuevo\u2019.<\/b><span style=\"font-weight: 400;\"> A continuaci\u00f3n, puedes hacer clic en \u2018<\/span><b>Filtrar por Caracter\u00edsticas\u2019<\/b><span style=\"font-weight: 400;\"> y selecciona \u2018<\/span><b>Edici\u00f3n completa del sitio\u2019<\/b><span style=\"font-weight: 400;\"> o \u2018<\/span><b>Full Site Editing\u2019<\/b><span style=\"font-weight: 400;\">, seguido de<\/span><b> \u2018Aplicar Filtros\u2019<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1339\" height=\"725\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1.jpg\" alt=\"El filtro de Caracter\u00edsticas de WordPress Full-Site Editing\" class=\"wp-image-33262 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1.jpg.webp 1339w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-300x162.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-1024x554.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-768x416.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-600x325.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-1200x650.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-730x395.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-784x424.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-1-877x475.jpg.webp 877w\" data-sizes=\"(max-width: 1339px) 100vw, 1339px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1339px; --smush-placeholder-aspect-ratio: 1339\/725;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Una vez que <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/18-tips-profesionales-para-elegir-el-tema-perfecto-de-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">encuentras un tema WordPress<\/span><\/a><span style=\"font-weight: 400;\"> que te gusta, puedes desplazar el mouse sobre \u00e9l, luego selecciona la opci\u00f3n \u201cInstalar\u201d seguido de \u201cActivar\u201d. Usaremos <\/span><a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Twenty Twenty-Two<\/span><\/a><span style=\"font-weight: 400;\">, el cual puede que ya est\u00e9 instalado si est\u00e1s usando WordPress 5.9 o m\u00e1s adelante.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accediendo-la-interfaz-de-estilos\"><b>Accediendo la Interfaz de Estilos<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, dir\u00edgete a tu Editor de Tema (<\/span><b>Apariencia &gt; Editor<\/b><span style=\"font-weight: 400;\">). En la parte superior derecha de la pantalla, ver\u00e1s un icono de media luna, el cual representa el panel de Estilos.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1247\" height=\"727\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2.jpg\" alt=\"El \u00edcono del panel de Estilos en WordPress\" class=\"wp-image-33263 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2.jpg.webp 1247w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-300x175.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-1024x597.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-768x448.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-600x350.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-1200x700.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-730x426.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-784x457.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-2-877x511.jpg.webp 877w\" data-sizes=\"(max-width: 1247px) 100vw, 1247px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1247px; --smush-placeholder-aspect-ratio: 1247\/727;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Cuando haces clic en \u00e9l, te mostrar\u00e1 una Gu\u00eda de Bienvenida a Estilos. Si necesitas acceso a esto en el futuro, puedes encontrarla haciendo clic en los 3 puntos verticales en la esquina superior derecha y seleccionando la opci\u00f3n \u2018<\/span><b>Gu\u00eda de bienvenida<\/b><span style=\"font-weight: 400;\">\u2019.<\/span><span style=\"font-weight: 400;\">&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">La ventana de vista previa te muestra c\u00f3mo se ve el dise\u00f1o actual de tu tema. Bajo el panel de Estilos, encontrar\u00e1s configuraciones para:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Tipograf\u00eda<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Colores<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Disposici\u00f3n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloques<\/span><\/li>\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Veamos cada una de cerca.<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tipografia\"><b>Tipograf\u00eda<\/b><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-5.jpg\" alt=\"Opciones de configuraci\u00f3n de Tipograf\u00eda de Texto en Estilos de WordPress.\" class=\"wp-image-33264 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-5.jpg.webp 663w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-5-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-5-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Bajo Tipograf\u00eda, puedes administrar la configuraci\u00f3n de Tipograf\u00eda para dos elementos: Texto y Enlaces. Puedes cambiar la familia de la fuente y el tama\u00f1o.<br><br><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes ajustar la altura de la l\u00ednea y seleccionar un tama\u00f1o de fuente. Tendr\u00e1s estas mismas opciones para tus enlaces. Cuando hayas finalizado, recuerda guardar tus cambios.&nbsp;<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-colores\"><b>Colores<\/b><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Bajo Colores, encontrar\u00e1s los estilos predeterminados de colores que vienen con tu tema. Para crear tus propias paletas de color, puedes ingresar los valores num\u00e9ricos HEX o usar el selector de color de arrastrar y soltar para generar tus colores predeterminados.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-4.jpg\" alt=\"La configuraci\u00f3n de colores en Estilos de WordPress.\u00a0\" class=\"wp-image-33265 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-4.jpg.webp 663w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-4-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-4-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes renombrar los colores a algo m\u00e1s identificable o descriptivo que los valores hexadecimales alfanum\u00e9ricos. Puedes a\u00f1adir gradientes personalizadas, aplicar filtros de duo tonos a las im\u00e1genes y m\u00e1s.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, puedes modificar los colores de 3 elementos principales: Fondo de pantalla, Texto, y Enlaces. Tambi\u00e9n puedes seleccionar cualquiera de estos elementos para personalizar el dise\u00f1o. Los cambios ser\u00e1n aplicados instant\u00e1neamente a medida que est\u00e1s editando.&nbsp;<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-disposicion\"><b>Disposici\u00f3n<\/b><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Bajo Disposici\u00f3n, puedes ajustar el relleno y otros elementos. Esto es simple y puede ser bastante \u00fatil cuando necesites hacer un ajuste menor (por ejemplo, por el bienestar de la simetr\u00eda de p\u00e1gina).&nbsp;<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-bloques\"><b>Bloques<\/b><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Finalmente, puedes cambiar la apariencia de los bloques individuales. Despu\u00e9s de que seleccionas los Bloques del panel de Estilos, podr\u00e1s encontrar una lista de bloques en tu sitio.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Digamos que quieres hacer un cambio en el estilo de tu Bloque de Encabezado. Puedes seleccionar Encabezado de la lista, luego ajustar sus configuraciones de Colores y Tipograf\u00eda.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"414\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6.jpg\" alt=\"Las opciones de Estilo para el bloque de Encabezados de WordPress.\" class=\"wp-image-33266 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-300x138.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-768x353.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-600x276.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-730x336.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-784x361.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/Global-styles-WordPress-DreamHost-ES-6-877x403.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/414;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Cuando hayas finalizado, puedes hacer clic en <\/span><b>Guardar.<\/b><span style=\"font-weight: 400;\"> Si alguna vez deseas revertir los cambios a los estilos de temas que ten\u00edas antes, puedes navegar al panel de Estilos, haz clic en los 3 puntos verticales y luego selecciona <\/span><b>Restablecer los valores por defecto.&nbsp;<\/b><\/p>\n\n\n\n<h2 id=\"h-una-mejor-manera-de-usar-y-disenar-en-wordpress\" class=\"wp-block-heading\"><b>Una Mejor Manera de Usar y Dise\u00f1ar en WordPress<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">WordPress est\u00e1 trabajando continuamente para mejorar la experiencia de edici\u00f3n de sus usuarios. Ahora, gracias a los Estilos Globales, el desarrollo de temas se ha vuelto mucho m\u00e1s f\u00e1cil para ambos principiantes y profesionales experimentados.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Como lo discutimos en esta publicaci\u00f3n, puedes crear un archivo &#8216;theme.json&#8217; para aplicar configuraciones de Estilos Globales en tu tema. Tambi\u00e9n puedes usar el editor de Estilos con un tema basado en bloques para personalizar la apariencia de tu sitio. Todo esto hace que&nbsp;<\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/elementos-de-diseno-web\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">dise\u00f1ar un sitio web exitoso<\/span><\/a><span style=\"font-weight: 400;\"> sea un paseo en el parque.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">DreamHost es un equipo de expertos web experimentados. Entendemos la importancia de optimizar tu experiencia WordPress. Prometemos apoyar tus esfuerzos usando la m\u00e1s reciente tecnolog\u00eda <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/maneras-de-apoyar-codigo-abierto\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">open-source<\/span><\/a><span style=\"font-weight: 400;\"> y soporte galardonado. \u00a1\u00c9chale un vistazo a nuestros <\/span><a href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">planes de WordPress<\/span><\/a><span style=\"font-weight: 400;\"> hoy para que encuentres el que se ajusta a tus necesidades!\u00a0\u00a0<\/span><span style=\"font-weight: 400;\"><\/span><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Haz M\u00e1s Con DreamPress\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Las actualizaciones autom\u00e1ticas de DreamPress y fuertes defensas de seguridad quitan la administraci\u00f3n de servidor de tus manos para que te puedas enfocar en la ceraci\u00f3n de contenido.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Ve Los Planes                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Los bloques de WordPress y las funciones de Full-Site Editing (FSE) hacen que crear y dise\u00f1ar un sitio web exitoso sea f\u00e1cil y r\u00e1pido.&nbsp; Los estilos globales pueden ayudarte a unificar la apariencia de tu sitio WordPress sin tener que editar bloques separados o p\u00e1ginas. Entonces, ya sea que desees cambiar tu color de fondo [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":33267,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!","toc_headlines":"[[\"h-una-vista-general-de-los-estilos-globales-de-wordpress\",\"Una Vista General de los Estilos Globales de WordPress\"],[\"h-por-que-usar-los-estilos-globales-de-wordpress\",\"Por Qu\u00e9 Usar los Estilos Globales de WordPress\"],[\"h-creando-el-archivo-theme-json\",\"Creando el Archivo 'theme.json'\"],[\"h-como-disenar-tu-sitio-wordpress-usando-estilos-globales\",\"C\u00f3mo Dise\u00f1ar Tu Sitio WordPress Usando Estilos Globales\"],[\"h-una-mejor-manera-de-usar-y-disenar-en-wordpress\",\"Una Mejor Manera de Usar y Dise\u00f1ar en WordPress\"]]","hide_toc":false,"footnotes":""},"categories":[11668,11683],"tags":[],"class_list":["post-33260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-wordpress-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Una Introducci\u00f3n a Los Estilos Globales - DreamHost<\/title>\n<meta name=\"description\" content=\"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Decodificando WordPress: Una Introducci\u00f3n a Los Estilos Globales\" \/>\n<meta property=\"og:description\" content=\"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-18T14:00:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T21:07:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social-es.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Una Introducci\u00f3n a Los Estilos Globales - DreamHost","description":"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Decodificando WordPress: Una Introducci\u00f3n a Los Estilos Globales","og_description":"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-18T14:00:08+00:00","article_modified_time":"2025-01-16T21:07:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social-es.jpeg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Decodificando WordPress: Una Introducci\u00f3n a Los Estilos Globales","datePublished":"2022-03-18T14:00:08+00:00","dateModified":"2025-01-16T21:07:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/"},"wordCount":1924,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured.jpeg","articleSection":["Tutoriales","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/","name":"Una Introducci\u00f3n a Los Estilos Globales - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured.jpeg","datePublished":"2022-03-18T14:00:08+00:00","dateModified":"2025-01-16T21:07:47+00:00","description":"Los Estilos Globales te ayudan a controlar la apariencia de tu sitio WordPress sin editar p\u00e1ginas o bloques por separado. \u00a1Conoce c\u00f3mo!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured.jpeg","width":900,"height":598},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/estilos-globales-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Decodificando WordPress: Una Introducci\u00f3n a Los Estilos Globales"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"es","translations":{"es":33260,"en":33258,"pt":52864,"de":52868,"pl":54238,"uk":54247,"ru":54273,"it":68241,"fr":70068,"nl":70101},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=33260"}],"version-history":[{"count":9,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33260\/revisions"}],"predecessor-version":[{"id":63223,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33260\/revisions\/63223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33267"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}