![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/15-3-1024x548.jpg\")
<\/figure><\/div>M\u00e9todo 1: Utilizar la funci\u00f3n CSS personalizada incorporada en WordPress<\/h3>
WordPress tiene una opci\u00f3n integrada para a\u00f1adir CSS personalizado directamente en el panel de control. Es ideal para peque\u00f1os retoques y f\u00e1cil de usar para principiantes.<\/p>
- Acceder al personalizador<\/strong>
- Con\u00e9ctese y vaya a Apariencia > Personalizar<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-524.png\")
<\/figure><\/div>- Seleccione \"CSS adicional\"<\/strong>
- En la barra lateral izquierda, pulse CSS adicional<\/strong>. Aparecer\u00e1 un cuadro de texto en el que podr\u00e1 introducir su c\u00f3digo CSS.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-526.png\")
<\/figure><\/div>- A\u00f1ada su CSS personalizado<\/strong>
- Escriba su c\u00f3digo. Por ejemplo:<\/li><\/ul><\/li><\/ol>
- Previsualizar y publicar<\/strong>
- Ver\u00e1 una vista previa en directo de los cambios. Cuando est\u00e9 satisfecho, haga clic en Publique<\/strong>.<\/li><\/ul><\/li><\/ol>
Lo mejor para<\/strong>: Ajustes sencillos, no es necesario editar el archivo del tema.<\/p>
M\u00e9todo 2: Utilizar el archivo Style.css del tema hijo<\/h3>
Es mejor utilizar un tema hijo de style.css<\/strong> para cambios m\u00e1s significativos. De este modo, sus ediciones permanecer\u00e1n seguras incluso tras las actualizaciones del tema.<\/p>
- Habilitar un tema hijo<\/strong>
- Si a\u00fan as\u00ed necesita empezar a utilizar uno, cree o instale un tema hijo. Plugins como Configurador de temas infantiles<\/strong> h\u00e1galo f\u00e1cil.<\/li><\/ul><\/li><\/ol>
<\/figure>
- Acceda al archivo Style.css<\/strong>
- En Apariencia > Editor de archivos de temas<\/strong>seleccione el tema hijo style.css<\/mark> archivo.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-533.png\")
<\/figure><\/div>- A\u00f1ada su CSS<\/strong>
- A\u00f1ada su CSS personalizado en el fondo<\/strong> del archivo. Ejemplo:<\/li><\/ul><\/li><\/ol>
.custom-header { color de fondo: #2c3e50; color: #ffff; }\n.custom-button { background-color: #e74c3c; color: #ffff; padding: 10px 20px; border-radius: 5px; }<\/code><\/pre>- Guardar cambios<\/strong>
- Haga clic en Actualizar archivo<\/strong> para ahorrar.<\/li><\/ul><\/li><\/ol>
Lo mejor para<\/strong>: Grandes cambios de estilo que deber\u00edan mantenerse tras las actualizaciones.<\/p>
M\u00e9todo 3: A\u00f1adir CSS personalizado con un plugin<\/h3>
Si prefiere evitar la edici\u00f3n de archivos o temas hijo, los plugins pueden gestionar el CSS personalizado. Esto es estupendo para gestionar CSS en varias p\u00e1ginas.<\/p>
- CSS y JS personalizados sencillos<\/a><\/strong>: Ligero y f\u00e1cil de a\u00f1adir CSS y JavaScript.<\/li>\n\n
- WPCode<\/a><\/strong>: A\u00f1ade CSS en todo el sitio o por p\u00e1gina.<\/li>\n\n
- SiteOrigin CSS<\/a><\/strong>: Editor visual para principiantes.<\/li><\/ul>
Ejemplo utilizando WPCode:<\/h4>
- Instalar WPCode<\/strong>
- Ir a Plugins > A\u00f1adir nuevo<\/strong> Plugin<\/strong>, busque WPCode<\/mark>, instalar y activar.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-535.png\")
<\/figure><\/div>- Crear un Nuevo fragmento CSS<\/mark><\/strong>
- Dir\u00edjase a Fragmentos de c\u00f3digo > A\u00f1adir fragmento<\/strong>. Elija Fragmento CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-536.png\")
<\/figure><\/div>- Elija la colocaci\u00f3n<\/strong>
- Para que el CSS funcione en todo el sitio, seleccione Cabecera del sitio<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-537-1024x514.png\")
<\/figure><\/div>Lo mejor para<\/strong>: F\u00e1cil gesti\u00f3n de CSS sin tocar los archivos del tema.<\/p>
M\u00e9todo 4: A\u00f1adir CSS personalizado a trav\u00e9s de Page Builders (Elementor, Divi)<\/h3>
Los constructores de p\u00e1ginas como Elementor y Divi suelen tener opciones CSS integradas, lo que simplifica la gesti\u00f3n de estilos.<\/p>
En Elementor:<\/h4>
- Seleccionar elemento y acceso Avanzado<\/mark> Ajustes<\/strong>
- En Elementor, seleccione un elemento, vaya a Avanzado<\/strong> ajustes, y encuentre CSS personalizado<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-539.png\")
<\/figure><\/div>- Introduzca el c\u00f3digo CSS<\/strong>
- Utilice la palabra clave selector para apuntar al elemento. Ejemplo:<\/li><\/ul><\/li><\/ol>
selector { background-color: #333; color: #fff; }<\/code><\/pre>En Divi:<\/h4>
- Ir a Opciones del tema<\/strong>
- Navegue hasta Divi > Opciones de tema > CSS personalizado<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/1730364592936.png\")
<\/figure>- Introduzca y guarde el c\u00f3digo CSS<\/strong>
- A\u00f1ada su CSS personalizado y guarde.<\/li><\/ul><\/li><\/ol>
Lo mejor para<\/strong> Los que ya utilizan constructores de p\u00e1ginas con f\u00e1cil acceso a CSS personalizado.<\/p>
M\u00e9todo 5: A\u00f1adir directamente CSS a trav\u00e9s de FTP o Editor de C\u00f3digo<\/h3>
Si est\u00e1 familiarizado con el FTP y desea un control total, puede editar los archivos CSS directamente en el servidor.<\/p>
Pasos:<\/h4>
- Conectar v\u00eda FTP<\/strong>
- Utilice un cliente FTP (como FileZilla) para conectarse a su sitio.<\/li><\/ul><\/li>\n\n
- Navegue hasta la carpeta de temas<\/strong>
- Vaya a wp-content\/themes\/your-child-theme\/ y abra style.css.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-542.png\")
<\/figure><\/div>- Editar y cargar<\/strong>
- A\u00f1ada su CSS personalizado, gu\u00e1rdelo y c\u00e1rguelo.<\/li><\/ul><\/li><\/ol>
Lo mejor para<\/strong>: Usuarios avanzados que necesitan un control total.<\/p>
Preguntas frecuentes<\/h3>
1. \u00bfPor qu\u00e9 no funciona mi CSS personalizado?<\/strong><\/p>
Borre su navegador cach\u00e9<\/strong> o cualquier plugin de cach\u00e9 del sitio, ya que el cach\u00e9 podr\u00eda estar bloqueando las actualizaciones.<\/p>
2. \u00bfC\u00f3mo evito que el CSS se pierda durante las actualizaciones?<\/strong><\/p>
Utilice un tema infantil<\/mark><\/strong> o plugin para almacenar CSS en lugar de modificar los archivos del tema padre.<\/p>","protected":false},"excerpt":{"rendered":"
El CSS personalizado le da el control sobre el estilo de su sitio WordPress, permiti\u00e9ndole ajustar todo, desde fuentes y colores hasta dise\u00f1os. Aqu\u00ed tiene una gu\u00eda sobre c\u00f3mo...<\/p>","protected":false},"author":10,"featured_media":5197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,85],"tags":[425,253],"class_list":["post-5165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-extensions","category-customized-content-type-cpt","tag-css-for-beginners","tag-wordpress-customization",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/comments?post=5165"}],"version-history":[{"count":1,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5165\/revisions"}],"predecessor-version":[{"id":5198,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5165\/revisions\/5198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media\/5197"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media?parent=5165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/categories?post=5165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/tags?post=5165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- A\u00f1ada su CSS personalizado, gu\u00e1rdelo y c\u00e1rguelo.<\/li><\/ul><\/li><\/ol>
- Editar y cargar<\/strong>
- Vaya a wp-content\/themes\/your-child-theme\/ y abra style.css.<\/li><\/ul><\/li><\/ol>
- Conectar v\u00eda FTP<\/strong>
- A\u00f1ada su CSS personalizado y guarde.<\/li><\/ul><\/li><\/ol>
- Introduzca y guarde el c\u00f3digo CSS<\/strong>
- Navegue hasta Divi > Opciones de tema > CSS personalizado<\/strong>.<\/li><\/ul><\/li><\/ol>
- Ir a Opciones del tema<\/strong>
- Utilice la palabra clave selector para apuntar al elemento. Ejemplo:<\/li><\/ul><\/li><\/ol>
- Introduzca el c\u00f3digo CSS<\/strong>
- En Elementor, seleccione un elemento, vaya a Avanzado<\/strong> ajustes, y encuentre CSS personalizado<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
- Seleccionar elemento y acceso Avanzado<\/mark> Ajustes<\/strong>
- Para que el CSS funcione en todo el sitio, seleccione Cabecera del sitio<\/strong>.<\/li><\/ul><\/li><\/ol>
- Elija la colocaci\u00f3n<\/strong>
- Dir\u00edjase a Fragmentos de c\u00f3digo > A\u00f1adir fragmento<\/strong>. Elija Fragmento CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
- Crear un Nuevo fragmento CSS<\/mark><\/strong>
- Ir a Plugins > A\u00f1adir nuevo<\/strong> Plugin<\/strong>, busque WPCode<\/mark>, instalar y activar.<\/li><\/ul><\/li><\/ol>
- WPCode<\/a><\/strong>: A\u00f1ade CSS en todo el sitio o por p\u00e1gina.<\/li>\n\n
- CSS y JS personalizados sencillos<\/a><\/strong>: Ligero y f\u00e1cil de a\u00f1adir CSS y JavaScript.<\/li>\n\n
- Haga clic en Actualizar archivo<\/strong> para ahorrar.<\/li><\/ul><\/li><\/ol>
- Guardar cambios<\/strong>
- A\u00f1ada su CSS personalizado en el fondo<\/strong> del archivo. Ejemplo:<\/li><\/ul><\/li><\/ol>
- A\u00f1ada su CSS<\/strong>
- En Apariencia > Editor de archivos de temas<\/strong>seleccione el tema hijo style.css<\/mark> archivo.<\/li><\/ul><\/li><\/ol>
- Acceda al archivo Style.css<\/strong>
- Si a\u00fan as\u00ed necesita empezar a utilizar uno, cree o instale un tema hijo. Plugins como Configurador de temas infantiles<\/strong> h\u00e1galo f\u00e1cil.<\/li><\/ul><\/li><\/ol>
- Habilitar un tema hijo<\/strong>
- Ver\u00e1 una vista previa en directo de los cambios. Cuando est\u00e9 satisfecho, haga clic en Publique<\/strong>.<\/li><\/ul><\/li><\/ol>
- Previsualizar y publicar<\/strong>
- Escriba su c\u00f3digo. Por ejemplo:<\/li><\/ul><\/li><\/ol>
- A\u00f1ada su CSS personalizado<\/strong>
- En la barra lateral izquierda, pulse CSS adicional<\/strong>. Aparecer\u00e1 un cuadro de texto en el que podr\u00e1 introducir su c\u00f3digo CSS.<\/li><\/ul><\/li><\/ol>
- Seleccione \"CSS adicional\"<\/strong>
- Con\u00e9ctese y vaya a Apariencia > Personalizar<\/strong>.<\/li><\/ul><\/li><\/ol>