{"id":54484,"date":"2022-07-18T10:39:03","date_gmt":"2022-07-18T08:39:03","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=54484&preview=true&preview_id=54484"},"modified":"2025-01-20T11:06:02","modified_gmt":"2025-01-20T10:06:02","slug":"css-personalizado-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/","title":{"rendered":"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)"},"content":{"rendered":"

Una de las mayores ventajas de utilizar constructores de p\u00e1ginas<\/a> como Elementor es que tienes acceso a elementos de p\u00e1gina pre-construidos, o \u00abwidgets\u00bb. Los widgets de Elementor incluyen muchas opciones de personalizaci\u00f3n y estilo. Sin embargo, a veces la \u00fanica manera de aplicar un estilo concreto es con Hojas de Estilo en Cascada (CSS)<\/a>.<\/p>\n

El CSS te proporciona un grado de control asombroso sobre todos los componentes de tu sitio web. A\u00f1adirlo a WordPress es sencillo si est\u00e1s familiarizado con el lenguaje. Elementor tambi\u00e9n ofrece varias opciones para a\u00f1adir CSS personalizado.<\/p>\n

En este art\u00edculo, hablaremos de lo que es el CSS y de c\u00f3mo puedes a\u00f1adir estilos personalizados a Elementor<\/a>. Por \u00faltimo, hablaremos de algunas de las mejores pr\u00e1cticas para utilizar CSS en WordPress. \u00a1Empecemos!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es el CSS?<\/h2>\n

CSS es lo que llamamos un lenguaje de \u00abhojas de estilo\u00bb. Puedes utilizar las hojas de estilo CSS para a\u00f1adir un estilo personalizado a los documentos HTML o XML<\/a>. Utilizando CSS, puedes transformar una p\u00e1gina HTML b\u00e1sica en una p\u00e1gina con un dise\u00f1o de aspecto moderno<\/a>.<\/p>\n

Piensa en CSS como un lenguaje que describe c\u00f3mo deben aparecer los elementos en un navegador. Funciona en todos los navegadores y es uno de los lenguajes fundamentales de Internet.<\/p>\n

Por ejemplo, este es el c\u00f3digo CSS que utilizar\u00edas para asignar un color de fondo al cuerpo de un documento HTML:<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
Puedes utilizar CSS para aplicar estilos a componentes, clases e identificadores espec\u00edficos en HTML. Por ejemplo, el siguiente fragmento aplicar\u00eda un color de texto y una alineaci\u00f3n espec\u00edficos a todos los H2 de una p\u00e1gina:<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
Normalmente, cuando cargas una p\u00e1gina HTML, tambi\u00e9n se carga una hoja de estilos independiente que incluye todo el c\u00f3digo CSS. Esto significa que puedes reutilizar las hojas de estilo en varias p\u00e1ginas.<\/p>\n
Eres libre de aplicar el c\u00f3digo CSS directamente a cualquier p\u00e1gina HTML<\/a>. Tambi\u00e9n puedes utilizarlo \u00abinline\u00bb. Este es un t\u00e9rmino que se refiere al c\u00f3digo CSS que se aplica a un solo elemento HTML y reside dentro de ese archivo.<\/p>\n
Aqu\u00ed tienes un ejemplo de CSS inline para una cabecera H2 espec\u00edfica:<\/p>\n
<h2 style=\"color:black;text-align:center;\">Aqu\u00ed es donde va el texto del encabezado<\/h1><\/code><\/pre>\n
Se considera una buena pr\u00e1ctica a\u00f1adir el CSS<\/a> a una hoja de estilos separada. Sin embargo, una de las muchas ventajas de utilizar WordPress y Elementor<\/a> es que puedes a\u00f1adir CSS sin tener que editar los archivos manualmente. Veamos con m\u00e1s detalle c\u00f3mo funciona.<\/p>\n\n
Opciones CSS Personalizadas en Elementor<\/h2>\n
Si est\u00e1s familiarizado con Elementor, sabr\u00e1s que el constructor utiliza secciones, columnas y widgets para ayudarte a crear p\u00e1ginas. Las secciones contienen una o varias columnas, y cada columna puede tener varios m\u00f3dulos:<\/p>\n
\"Columnas
Columnas y m\u00f3dulos en Elementor<\/figcaption><\/figure>\n
Una de las mejores partes de usar Elementor es que puedes a\u00f1adir c\u00f3digo CSS por separado a nivel de secci\u00f3n, columna y widget. Cuando pasas el rat\u00f3n por encima de una secci\u00f3n, puedes seleccionar el icono de seis puntos para abrir el men\u00fa Editar Secci\u00f3n <\/strong>en la parte izquierda de la pantalla:<\/p>\n
\"A\u00f1ade
A\u00f1ade c\u00f3digo CSS por separado a nivel de secci\u00f3n, columna y widget.<\/figcaption><\/figure>\n
Si te desplazas a la pesta\u00f1a Avanzado <\/strong>dentro del men\u00fa Editar Secci\u00f3n <\/strong>, ver\u00e1s una secci\u00f3n de CSS personalizado <\/strong>. Dentro, encontrar\u00e1s un campo que te permite a\u00f1adir c\u00f3digo para esa secci\u00f3n espec\u00edfica:<\/p>\n
\"Encuentra
La opci\u00f3n de CSS personalizado se encuentra en la pesta\u00f1a \u00abAvanzado\u00bb<\/figcaption><\/figure>\n
Cuando edites columnas y widgets, ver\u00e1s que tienes acceso a las mismas tres pesta\u00f1as en sus respectivos men\u00fas de configuraci\u00f3n. Tanto las secciones como las columnas y los widgets incluyen ajustes de dise\u00f1o, estilo y avanzados.<\/p>\n
Para a\u00f1adir CSS personalizado a una columna, pasa el rat\u00f3n por encima de ella y selecciona el icono de dos columnas en la esquina superior derecha del elemento. A continuaci\u00f3n, ve a la opci\u00f3n Avanzado <\/strong>y abre la secci\u00f3n CSS<\/strong> personalizado <\/strong>:<\/p>\n
\"A\u00f1adir
A\u00f1adir CSS personalizado a una sola columna<\/figcaption><\/figure>\n
Puedes seguir el mismo proceso para a\u00f1adir CSS personalizado a un widget de Elementor. Simplemente selecciona el widget que quieras personalizar y ve directamente a la pesta\u00f1a Avanzado > CSS personalizado<\/strong>:<\/p>\n
\"A\u00f1adir
Tambi\u00e9n puedes a\u00f1adir CSS a un widget<\/figcaption><\/figure>\n
A\u00f1adir CSS personalizado a elementos espec\u00edficos dentro del constructor de p\u00e1ginas de Elementor es muy sencillo. Sin embargo, ten en cuenta que el estilo s\u00f3lo se aplicar\u00e1 a esos elementos. Si quieres a\u00f1adir CSS personalizado que afecte a todo tu sitio, tendr\u00e1s que utilizar un enfoque diferente.<\/p>\n
C\u00f3mo A\u00f1adir CSS Personalizado con Elementor (5 M\u00e9todos)<\/h2>\n
En esta secci\u00f3n, exploraremos otras formas de a\u00f1adir CSS personalizado en Elementor. Analizaremos los m\u00e9todos que aplican el CSS a todo tu sitio web, a p\u00e1ginas espec\u00edficas y a los widgets de Elementor.<\/p>\n
M\u00e9todo 1: Usar el Widget HTML de Elementor<\/h3>\n
Elementor te permite a\u00f1adir CSS personalizado a cualquiera de sus widgets. Sin embargo, en algunos casos, es posible que quieras a\u00f1adir elementos manualmente utilizando HTML<\/a> y CSS. En esos casos, tendr\u00e1s que utilizar el widget HTML <\/strong>:<\/p>\n
\"Utilizar
Utilizar el widget HTML<\/figcaption><\/figure>\n
El widget HTML <\/strong>puede analizar HTML, CSS y JavaScript<\/a>. Puedes a\u00f1adir el c\u00f3digo que quieras dentro del campo C\u00f3digo HTML<\/strong> y, si es v\u00e1lido, Elementor lo mostrar\u00e1 como un widget:<\/p>\n
\"A\u00f1ade
A\u00f1ade cualquier c\u00f3digo dentro del widget<\/figcaption><\/figure>\n
El widget HTML <\/strong>admite tanto el CSS inline como el independiente. Cualquier c\u00f3digo que a\u00f1adas utilizando el widget s\u00f3lo afectar\u00e1 a ese \u00fanico elemento.<\/p>\n
M\u00e9todo 2: Utiliza el Men\u00fa de Configuraci\u00f3n del Sitio de Elementor<\/h3>\n
Elementor incluye una colecci\u00f3n de ajustes generales que se parecen a las opciones que puedes encontrar en el Personalizador de WordPress. Para acceder al men\u00fa de Ajustes del Sitio<\/strong> de Elementor, abre el editor y haz clic en el men\u00fa hamburguesa de la esquina superior izquierda de la pantalla:<\/p>\n
\"Haz
Haz clic en el men\u00fa hamburguesa disponible<\/figcaption><\/figure>\n
En la siguiente p\u00e1gina, selecciona la opci\u00f3n Configuraci\u00f3n del Sitio <\/strong>:<\/p>\n
\"Elige
Haz clic en la opci\u00f3n \u00abConfiguraci\u00f3n del sitio\u00bb<\/figcaption><\/figure>\n
En su interior ver\u00e1s una colecci\u00f3n de ajustes que te permiten personalizar el estilo de tu sitio. Cualquier cambio que realices en este men\u00fa se aplicar\u00e1 a todo tu sitio, aunque t\u00e9cnicamente est\u00e9s editando una sola p\u00e1gina.<\/p>\n
Puedes leer c\u00f3mo  utilizar el men\u00fa de Configuraci\u00f3n del Sitio <\/strong><\/a> para personalizar tu p\u00e1gina en el sitio oficial de Elementor. Por ahora, el \u00fanico apartado que nos interesa es la pesta\u00f1a de CSS personalizado <\/strong>. \u00c1brela y ver\u00e1s un campo que se parece a las opciones de CSS personalizado para secciones, widgets y columnas:<\/p>\n
\"A\u00f1adir
A\u00f1adir CSS personalizado aqu\u00ed afectar\u00e1 a todo el sitio<\/figcaption><\/figure>\n
Cualquier CSS personalizado que a\u00f1adas aqu\u00ed afectar\u00e1 a todo tu sitio web. Si s\u00f3lo pretendes personalizar elementos espec\u00edficos, te recomendamos que utilices un enfoque m\u00e1s espec\u00edfico (como a\u00f1adir CSS directamente a un widget).<\/p>\n
M\u00e9todo 3: Usar el Personalizador de WordPress<\/h3>\n
El Personalizador de WordPress tambi\u00e9n te permite a\u00f1adir CSS personalizado en todo el sitio. Para ello, ve a Apariencia > Personalizar <\/strong>y selecciona la opci\u00f3n CSS adicional <\/strong>en el men\u00fa de la izquierda:<\/p>\n
\"A\u00f1adir
Utiliza el Personalizador de WordPress para a\u00f1adir CSS<\/figcaption><\/figure>\n
Sin embargo, cabe destacar que los campos de c\u00f3digo de Elementor son m\u00e1s f\u00e1ciles de usar que los disponibles en el Personalizador. Si ya est\u00e1s utilizando Elementor para la creaci\u00f3n de sitios, no hay raz\u00f3n para a\u00f1adir CSS personalizado a trav\u00e9s del Personalizador.<\/p>\n
M\u00e9todo 4: Poner en Cola los Archivos CSS Personalizados<\/h3>\n
Si te sientes c\u00f3modo editando archivos de WordPress y accediendo a tu sitio web a trav\u00e9s de un cliente de Protocolo de Transferencia de Archivos (FTP)<\/a>, puedes poner en cola una hoja de estilos CSS para cargarla con Elementor. Este m\u00e9todo requiere que a\u00f1adas c\u00f3digo al archivo functions. php<\/strong> de WordPress.<\/p>\n
Para acceder al archivo functions. php <\/strong>, con\u00e9ctate a tu sitio web mediante FTP y ve a la carpeta root<\/strong>\u00a0<\/strong>de WordPress. Abre la carpeta, busca el archivo functions.php <\/strong>y ed\u00edtalo.<\/p>\n
Aqu\u00ed hay un ejemplo del c\u00f3digo que se quiere a\u00f1adir al archivo:<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Ese c\u00f3digo utiliza el hook before_enqueue_scripts <\/strong>para cargar una hoja de estilos llamada custom-stylesheet<\/strong>.<\/em> Tambi\u00e9n utilizamos la funci\u00f3n get_stylesheet_urifunction <\/strong>para se\u00f1alar la ubicaci\u00f3n de la hoja de estilos en el servidor.<\/p>\n
Lo ideal es que a\u00f1adas la hoja de estilos personalizada dentro del directorio de tu tema hijo o en la propia carpeta Themes<\/strong>. La hoja de estilos puede contener cualquier c\u00f3digo CSS de Elementor que desees. El fragmento que has a\u00f1adido a functions.php <\/strong>garantiza que el c\u00f3digo s\u00f3lo se cargue cuando Elementor est\u00e9 activo en tu sitio web.<\/p>\n
M\u00e9todo 5: Utilizar un Plugin CSS<\/h3>\n
Hay varios plugins que te permiten a\u00f1adir CSS personalizado a tu sitio web sin usar el Personalizador o los constructores de p\u00e1ginas<\/a>. Una de nuestras herramientas favoritas para este trabajo se llama Simple Custom CSS and JS<\/a>:<\/p>\n
\"Plugin
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Con el plugin Simple Custom CSS and JS, tienes la opci\u00f3n de a\u00f1adir c\u00f3digo directamente a los elementos de la cabecera y el pie de p\u00e1gina de tu tema. Para empezar, ve a CSS y JS personalizados > A\u00f1adir CSS personalizado <\/strong>y haz clic en A\u00f1adir c\u00f3digo CSS.<\/strong><\/p>\n
A la izquierda aparecer\u00e1 un editor de CSS b\u00e1sico. A la derecha, puedes configurar si quieres cargar el c\u00f3digo CSS en una hoja de estilos externa<\/a> o internamente. Tambi\u00e9n puedes decidir si el c\u00f3digo debe ir en la cabecera o en el pie de p\u00e1gina:<\/p>\n
\"Cargar
Cargar el c\u00f3digo en una hoja de estilo externa<\/figcaption><\/figure>\n
Cuando hayas terminado de editar el c\u00f3digo CSS, pulsa el bot\u00f3n Publicar <\/strong>. Es posible que tengas que cambiar a una vista frontal para ver el c\u00f3digo en acci\u00f3n.<\/p>\n
Mejores Pr\u00e1cticas para Crear CSS Personalizado con Elementor<\/h2>\n
Siempre que est\u00e9s trabajando con CSS personalizado o a\u00f1adiendo cualquier tipo de c\u00f3digo a tu sitio web, te conviene tener en cuenta las siguientes pr\u00e1cticas recomendadas. Comencemos con el uso de un tema hijo.<\/p>\n
Utiliza un Tema Hijo de WordPress<\/h3>\n
Si quieres cambiar cualquier parte del estilo de tu tema<\/a> utilizando CSS, te recomendamos que utilices un tema hijo<\/a>. Un tema \u00abhijo\u00bb es una plantilla que hereda todos los estilos de un tema concreto.<\/p>\n
De este modo, si haces alg\u00fan cambio en el tema original, no afectar\u00e1 a las personalizaciones que a\u00f1adas al tema hijo. Adem\u00e1s, cuando actualices el tema, conservar\u00e1 estos cambios.<\/p>\n
Utiliza un Preprocesador de C\u00f3digo para Facilitar la Escritura<\/h3>\n
Uno de los mayores retos de a\u00f1adir c\u00f3digo dentro de WordPress o utilizando Elementor es que no tienes acceso a toda la funcionalidad que ofrecen los editores de c\u00f3digo modernos. En lugar de pelearte con el c\u00f3digo utilizando editores b\u00e1sicos in situ, te recomendamos que utilices tu preprocesador favorito<\/a>. Luego, simplemente puedes copiar y pegar tu c\u00f3digo en WordPress.<\/p>\n
Considera Utilizar un Sitio Staging<\/h3>\n
Siempre que planees hacer grandes cambios en WordPress, te recomendamos que utilices un sitio staging. Los sitios staging te permiten probar los cambios de estilo y funcionalidad sin el riesgo de romper nada en tu sitio real.<\/p>\n
Algunos alojamientos web te proporcionan acceso a la funcionalidad de staging desde su panel de control. Si utilizas Kinsta, puedes seleccionar tu sitio web mediante el panel de control de MyKinsta<\/a> y alternar entre los entornos en producci\u00f3n y de staging:<\/p>\n
\"El<\/a>
El entorno de staging en MyKinsta<\/figcaption><\/figure>\n
Si tu alojamiento web no ofrece la funci\u00f3n de Staging<\/a>, puedes utilizar un entorno de desarrollo local de WordPress, como DevKinsta<\/a>, para realizar pruebas. Tambi\u00e9n puedes considerar la posibilidad de cambiar de proveedor de alojamiento.<\/p>\n\n
Resumen<\/h2>\n
A\u00f1adir CSS personalizado en Elementor es m\u00e1s f\u00e1cil de lo que imaginas. El constructor de p\u00e1ginas ofrece varios m\u00e9todos para a\u00f1adir c\u00f3digo a secciones, columnas, widgets y para todo tu sitio web.<\/p>\n
Para recapitular, aqu\u00ed tienes las cinco principales formas de a\u00f1adir CSS personalizado a Elementor (o a tu sitio web en general):<\/p>\n
    \n
  1. Utiliza el Widget HTML de Elementor.<\/li>\n
  2. Utiliza el men\u00fa de configuraci\u00f3n del sitio de Elementor.<\/li>\n
  3. Utiliza el personalizador de WordPress.<\/li>\n
  4. Pon en cola los archivos CSS personalizados.<\/li>\n
  5. Utiliza un plugin de CSS.<\/li>\n<\/ol>\n
    En Kinsta, nuestros planes est\u00e1n dise\u00f1ados para ayudarte a construir el sitio de tus sue\u00f1os con constructores de p\u00e1ginas como Elementor. Echa un vistazo a nuestros planes<\/a> o habla con ventas para encontrar el plan m\u00e1s adecuado para ti.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Una de las mayores ventajas de utilizar constructores de p\u00e1ginas como Elementor es que tienes acceso a elementos de p\u00e1gina pre-construidos, o \u00abwidgets\u00bb. Los widgets de …<\/p>\n","protected":false},"author":117,"featured_media":54485,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[81,795,270],"topic":[1345],"class_list":["post-54484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-desarrollo-wordpress"],"yoast_head":"\nC\u00f3mo A\u00f1adir CSS Personalizado a Elementor (5 M\u00e9todos)<\/title>\n<meta name=\"description\" content=\"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)\" \/>\n<meta property=\"og:description\" content=\"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T08:39:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T10:06:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)\",\"datePublished\":\"2022-07-18T08:39:03+00:00\",\"dateModified\":\"2025-01-20T10:06:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\"},\"wordCount\":2332,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\",\"name\":\"C\u00f3mo A\u00f1adir CSS Personalizado a Elementor (5 M\u00e9todos)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\",\"datePublished\":\"2022-07-18T08:39:03+00:00\",\"dateModified\":\"2025-01-20T10:06:02+00:00\",\"description\":\"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730,\"caption\":\"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo A\u00f1adir CSS Personalizado a Elementor (5 M\u00e9todos)","description":"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.","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:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)","og_description":"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.","og_url":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-07-18T08:39:03+00:00","article_modified_time":"2025-01-20T10:06:02+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)","datePublished":"2022-07-18T08:39:03+00:00","dateModified":"2025-01-20T10:06:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/"},"wordCount":2332,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/","url":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/","name":"C\u00f3mo A\u00f1adir CSS Personalizado a Elementor (5 M\u00e9todos)","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","datePublished":"2022-07-18T08:39:03+00:00","dateModified":"2025-01-20T10:06:02+00:00","description":"\u00bfNo est\u00e1s seguro de d\u00f3nde a\u00f1adir el CSS personalizado de Elementor? Aprende c\u00f3mo a\u00f1adir CSS personalizado a Elementor y ayuda a que tu sitio destaque.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/07\/elementor-custom-css.jpg","width":1460,"height":730,"caption":"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/css-personalizado-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo A\u00f1adir CSS Personalizado en Elementor (5 M\u00e9todos)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/54484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=54484"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/54484\/revisions"}],"predecessor-version":[{"id":57416,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/54484\/revisions\/57416"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/54484\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/54485"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=54484"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=54484"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=54484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}