{"id":148598,"date":"2025-05-19T15:53:36","date_gmt":"2025-05-19T12:53:36","guid":{"rendered":"https:\/\/elementor.com\/help\/clases-en-elementor-2\/"},"modified":"2025-05-19T15:53:36","modified_gmt":"2025-05-19T12:53:36","slug":"clases-en-elementor-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/","title":{"rendered":"Clases en Elementor"},"content":{"rendered":"\n<p>El editor de Elementor est\u00e1 dise\u00f1ado para ayudar a los creadores web a trabajar de forma r\u00e1pida y eficiente. Como parte de esa misi\u00f3n, el editor adopta los principios del dise\u00f1o at\u00f3mico. Este sistema se basa en la idea de crear elementos peque\u00f1os y reutilizables. En Elementor, estos elementos se denominan clases. Esto est\u00e1 en consonancia con el vocabulario utilizado por CSS.    <\/p>\n\n\n\n<p>Como beneficio adicional, el uso adecuado de las clases tambi\u00e9n puede mejorar el rendimiento de su sitio web.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Crear una clase<\/h2>\n\n\n\n<p>La creaci\u00f3n de clases se realiza autom\u00e1ticamente. Lo hace cada vez que a\u00f1ade un <a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\">elemento al lienzo<\/a>. Cuando a\u00f1ade un elemento al lienzo, las opciones del elemento aparecen en el panel izquierdo. En la parte superior de la pesta\u00f1a <strong>Estilo<\/strong>, ver\u00e1 el campo <strong>Clase<\/strong> con la clase <strong>local<\/strong> ya rellenada. Ahora puede a\u00f1adir nuevas clases al elemento siguiendo este proceso:    <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Introduzca un nombre de clase en el cuadro de texto.<br>Aparecer\u00e1 un men\u00fa desplegable.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"580\" height=\"296\" class=\"wp-image-57382\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png 1468w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-300x153.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-1024x522.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-768x391.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Seleccione el nombre de la clase en <strong>A\u00f1adir nueva clase global<\/strong>.&nbsp;<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Editar una clase<\/h2>\n\n\n\n<p>Despu\u00e9s de crear una clase, necesita editarla para establecer sus propiedades.<\/p>\n\n\n\n<p><strong>Para editar una clase<\/strong>:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cree la clase.<br><img decoding=\"async\" width=\"680\" height=\"350\" class=\"wp-image-57383\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1024x527.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-768x396.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1536x791.png 1536w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Compruebe el campo de clases de CSS. La clase que est\u00e1 editando ser\u00e1 rosa si es una clase local. De lo contrario, ser\u00e1 verde. Cuando la clase es rosa o verde, est\u00e1 editando esa clase.   <\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es una clase?<\/h2>\n\n\n\n<p>Una clase es b\u00e1sicamente una colecci\u00f3n de caracter\u00edsticas de estilo compartidas. Por ejemplo, si est\u00e1 creando un sitio web y quiere que el texto est\u00e1ndar de todo el sitio utilice la fuente Arial de 12 puntos, puede crear una clase llamada <strong>Texto principal<\/strong> con estas caracter\u00edsticas. De este modo, cada elemento que tuviera la clase <strong>Texto principal<\/strong>, utilizar\u00eda Arial de 12 puntos como fuente.  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La clase local<\/h3>\n\n\n\n<p>En Elementor, cada elemento tiene al menos una clase: la clase <strong>local<\/strong>. Esta clase define el elemento particular con el que est\u00e1 trabajando. Es importante tener en cuenta que, aunque todos los elementos tienen una clase local, la clase <strong>local<\/strong> puede ser diferente para cada elemento. Por ejemplo, puede tener un widget de texto que utilice la fuente Arial en su clase <strong>local<\/strong> y otro widget de texto que utilice Calibri en su clase <strong>local<\/strong>.   &nbsp;<br><img decoding=\"async\" width=\"280\" height=\"188\" class=\"wp-image-57385\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-the-local-class.png\" alt=\"\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jerarqu\u00eda de clases<\/h3>\n\n\n\n<p>La otra cosa importante a tener en cuenta sobre las clases, es que funcionan por jerarqu\u00edas. Si las clases se contradicen entre s\u00ed, el Editor sabe qu\u00e9 caracter\u00edsticas tienen prioridad. Por ejemplo, si un elemento contiene dos clases, una que establece la fuente en Arial y otra que establece la clase en Calibri, el editor necesita determinar cu\u00e1l tiene prioridad. Esta prioridad se establece en el administrador de clases. Sin embargo, la clase local siempre tiene la m\u00e1xima prioridad. Por lo tanto, en el caso anterior, si la clase <strong>local<\/strong> establece la fuente en New Time Roman, el elemento usar\u00eda la fuente New Times Roman.     <\/p>\n\n\n\n<p>[callout type=\u00bbtip\u00bb]Lo mejor es crear las clases de forma que haya el menor n\u00famero posible de conflictos. Estos conflictos no solo pueden hacerle perder tiempo, sino que tambi\u00e9n pueden ralentizar su sitio. &nbsp;[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplo de construcci\u00f3n de clases<\/h2>\n\n\n\n<p>En este ejemplo, veremos c\u00f3mo crear un sitio web que incluir\u00e1 varios botones. Para ahorrar tiempo y mejorar el rendimiento, crearemos dos clases: una para definir los botones importantes y otra para definir los botones secundarios. &nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Crea una p\u00e1gina en el Editor de Elementor.<\/li>\n\n\n\n<li>Arrastre un <strong>widget de bot\u00f3n<\/strong> al lienzo.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57386\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Las opciones aparecen en el panel.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57387\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>En el panel, haga clic en la pesta\u00f1a <strong>Estilo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"175\" class=\"wp-image-57389\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png 270w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class-257x300.png 257w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/li>\n\n\n\n<li>En el cuadro de texto <strong>Clases<\/strong>, junto a <strong>local<\/strong>, introduzca <strong>Main_button<\/strong>.<\/li>\n\n\n\n<li>En el men\u00fa desplegable, seleccione <strong>Crear nuevo \u201cMain_button\u201d<\/strong>.<br><strong>Bot\u00f3n principal<\/strong> aparece en el cuadro de texto <strong>Clases<\/strong>.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"239\" class=\"wp-image-57390\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/6-Main-button-is-in-green.png\" alt=\"\"><br>Tenga en cuenta que el texto <strong>Main_button<\/strong> est\u00e1 en verde. Eso significa que est\u00e1 editando esa clase. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"383\" class=\"wp-image-57391\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field-219x300.png 219w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Abre el campo <strong>Tama\u00f1o<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"289\" class=\"wp-image-57393\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-300x127.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-1024x435.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-768x326.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>D\u00e9 al bot\u00f3n una anchura de 200 PX y una altura de 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"523\" class=\"wp-image-57394\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background-160x300.png 160w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Abra el campo <strong>Fondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"468\" class=\"wp-image-57395\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png 693w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color-244x300.png 244w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Seleccione un color para el bot\u00f3n. Para obtener m\u00e1s informaci\u00f3n, consulte <a href=\"https:\/\/elementor.com\/help\/es\/pestana-estilo-fondo\/\">Pesta\u00f1a Estilo &#8211; Fondo<\/a>. <br>Ahora vamos a crear una clase para los botones secundarios. <br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"142\" class=\"wp-image-57396\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png 1344w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-300x63.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-1024x213.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-768x160.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>En el cuadro de texto <strong>Clases<\/strong>, borre <strong>Main_button<\/strong>.<br>Tenga en cuenta que el bot\u00f3n vuelve a su configuraci\u00f3n predeterminada.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"314\" class=\"wp-image-57397\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/12-create-secondary-button.png\" alt=\"\"><\/li>\n\n\n\n<li>En el cuadro de texto <strong>Clases<\/strong>, introduzca <strong>Secondary_button<\/strong>.<\/li>\n\n\n\n<li>En el men\u00fa desplegable, seleccione <strong>Crear nuevo \u201cSecondary_button\u201d<\/strong>.<br>Tenga en cuenta que el texto est\u00e1 en verde, lo que significa que est\u00e1 editando la clase.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"385\" class=\"wp-image-57398\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary-218x300.png 218w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Abre el campo <strong>Tama\u00f1o<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"409\" class=\"wp-image-57402\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png 869w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-300x212.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-768x542.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>D\u00e9 al bot\u00f3n una anchura de 100 PX y una altura de 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"618\" class=\"wp-image-57400\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography-136x300.png 136w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>&nbsp;Abra el campo <strong>Tipograf\u00eda<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"483\" class=\"wp-image-57403\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png 942w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-300x250.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-768x639.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Establezca el <strong>tama\u00f1o de la fuente<\/strong> en 12.&nbsp;<\/li>\n\n\n\n<li>Abra el campo <strong>Fondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"385\" class=\"wp-image-57404\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png 844w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-296x300.png 296w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-768x777.png 768w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Seleccione un color para el fondo. Aseg\u00farese de que sea diferente al fondo de <strong>Main_button<\/strong>.<br>Ahora pruebe los resultados. <\/li>\n\n\n\n<li>A\u00f1ada un nuevo elemento de bot\u00f3n al lienzo.<\/li>\n\n\n\n<li>Abra la pesta\u00f1a <strong>Estilo<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57409\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/22-select-Main-button-2-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Haga clic en el cuadro de texto <strong>Clases<\/strong> y seleccione <strong>Main_button <\/strong>en el men\u00fa desplegable.<br><img decoding=\"async\" class=\"wp-image-57413\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/23-Main-button-entered-2-scaled.png\" alt=\"\"><br>El bot\u00f3n deber\u00eda adoptar las caracter\u00edsticas de la clase Main_button.<br><img decoding=\"async\" class=\"wp-image-57416\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/24-Main-and-secondary-1-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Haga clic en el cuadro <strong>Clases<\/strong> y seleccione <strong>Bot\u00f3n secundario <\/strong>en el men\u00fa desplegable.<br>El bot\u00f3n tendr\u00e1 la mayor\u00eda de las caracter\u00edsticas de la clase <strong>Bot\u00f3n principal<\/strong>. Esto se debe a que la clase Bot\u00f3n principal est\u00e1 m\u00e1s arriba en la jerarqu\u00eda de clases. Sin embargo, la fuente del bot\u00f3n adopta el estilo de la clase Bot\u00f3n secundario. Esto se debe a que nunca definimos la tipograf\u00eda del <strong>Bot\u00f3n principal<\/strong>, por lo que la clase <strong>Bot\u00f3n secundario<\/strong> determina el estilo de la fuente.   &nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"505\" class=\"wp-image-57417\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png 608w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-166x300.png 166w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-568x1024.png 568w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>En el cuadro <strong>Clases<\/strong>, haga clic en los tres puntos junto a <strong>Secondary_button<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Seleccione <strong>Eliminar<\/strong> en el men\u00fa desplegable.<br>El cuadro Clases de CSS ahora deber\u00eda contener solo las clases <strong>local<\/strong> y <strong>Main_button<\/strong>. Observe que el tama\u00f1o de la fuente vuelve al tama\u00f1o predeterminado porque la clase Secondary_button ya no est\u00e1.<br>Ahora digamos que queremos personalizar este bot\u00f3n para que parezca un bot\u00f3n principal, pero que tenga una caracter\u00edstica adicional: cambia de color cuando los visitantes lo sobrevuelan.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"583\" class=\"wp-image-57423\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png 295w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1-144x300.png 144w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Haga clic en los tres puntos junto a la clase <strong>local<\/strong> y seleccione Hover en el men\u00fa desplegable.<br>Al editar la clase <strong>local<\/strong>, podemos cambiar el estilo de este bot\u00f3n sin cambiar otros botones con la clase <strong>Bot\u00f3n principal<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"246\" class=\"wp-image-57424\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/27-The-hover-state.png\" alt=\"\"><br>Hover es lo que se llama un estado. Cuando lo selecciona, determina el aspecto que tendr\u00e1 el bot\u00f3n cuando los visitantes pasen el rat\u00f3n por encima. Para obtener m\u00e1s informaci\u00f3n, consulte <a href=\"https:\/\/elementor.com\/help\/element-states\/\">Estados de los elementos<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"591\" class=\"wp-image-57426\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png 299w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background-142x300.png 142w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Abra el campo <strong>Fondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"671\" class=\"wp-image-57427\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png 305w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background-125x300.png 125w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Seleccione un color de fondo diferente.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"274\" class=\"wp-image-57428\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/30-see-the-hover-effect.gif\" alt=\"\"><br>Observe que cuando mueve el cursor sobre el bot\u00f3n, cambia de color.&nbsp;<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>El editor de Elementor est\u00e1 dise\u00f1ado para ayudar a los creadores web a trabajar de forma r\u00e1pida y eficiente. Como parte de esa misi\u00f3n, el editor adopta los principios del dise\u00f1o at\u00f3mico. Este sistema se basa en la idea de crear elementos peque\u00f1os y reutilizables. En Elementor, estos elementos se denominan clases. Esto est\u00e1 en [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1604],"tags":[1699],"class_list":["post-148598","post","type-post","status-publish","format-standard","hentry","category-features-es","tag-v4-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Clases en Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Clases en Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Clases en Elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Clases en Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1468\" \/>\n\t<meta property=\"og:image:height\" content=\"748\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Clases en Elementor\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\"},\"wordCount\":1183,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\",\"url\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\",\"name\":\"Clases en Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"description\":\"Learn everything about Clases en Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sin categor\u00eda\",\"item\":\"https:\/\/elementor.com\/help\/es\/sin-categoria\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Clases en Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#website\",\"url\":\"https:\/\/elementor.com\/help\/es\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/es\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Clases en Elementor | Elementor","description":"Learn everything about Clases en Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/","og_locale":"es_ES","og_type":"article","og_title":"Clases en Elementor | Elementor","og_description":"Learn everything about Clases en Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:36+00:00","og_image":[{"width":1468,"height":748,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Cliff Churgin","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Clases en Elementor","datePublished":"2025-05-19T12:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/"},"wordCount":1183,"publisher":{"@id":"https:\/\/elementor.com\/help\/es\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/","url":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/","name":"Clases en Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","datePublished":"2025-05-19T12:53:36+00:00","description":"Learn everything about Clases en Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/es\/clases-en-elementor-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/es\/"},{"@type":"ListItem","position":2,"name":"Sin categor\u00eda","item":"https:\/\/elementor.com\/help\/es\/sin-categoria\/"},{"@type":"ListItem","position":3,"name":"Clases en Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/es\/#website","url":"https:\/\/elementor.com\/help\/es\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/es\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/help\/es\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/help\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/posts\/148598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/comments?post=148598"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/posts\/148598\/revisions"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/media?parent=148598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/categories?post=148598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/es\/wp-json\/wp\/v2\/tags?post=148598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}