Recientemente, uno de nuestros lectores que no tenía la versión Pro de Elementor nos desafió sobre cómo podría agregar CSS personalizado a su sitio web.

Dado que el problema es un poco más complejo, pensamos que varios usuarios podrían enfrentar este problema. Así que decidimos proporcionar un artículo detallado sobre cómo llegar allí.

En este artículo, le mostraremos cómo agregar fácilmente CSS personalizado a una página o sitio web de Elementor.

Las tres formas de agregar CSS personalizado a una página o sitio web de Elementor son las siguientes:

  • Agregue código CSS a través del elemento HTML.
  • A través del complemento Código de fragmento.
  • Usando el personalizador de temas de Elementor

Método 1: agregar código CSS del elemento HTML de Elementor

Utilice este método si desea agregar CSS solo a una sola página.

Paso 1: Arrastre y suelte el elemento HTML de Elementor

Puede colocar este elemento HTML en cualquier lugar de la página y funcionará bien.

Paso 2: haga clic en el icono Editar HTML

Haga clic en el ícono Editar HTML a la derecha del elemento HTML de Elementor. Al hacer clic en él, aparecerá una caja de herramientas de edición HTML en el lado izquierdo de la pantalla.

Paso 3: agregue su código CSS

  1. Click en la pestaña Contenido y abre la lista desplegable Código HTML.
  2. Coloque su código CSS en el balizas.

Método 2: CSS personalizado para Elementor a través del complemento Code Snippets

Beneficios de usar el complemento Code Snippets:

  • Si desea cambiar o actualizar su tema de WordPress, siempre se aplicará el CSS.
  • Esta es la forma más conveniente y eficiente de agregar código CSS porque puede habilitar o deshabilitar el código CSS como complementos.

Paso 1: abre el menú de extensiones en tu panel

Paso 2: agrega un nuevo complemento

Haga clic en el botón Añadir »Para acceder a la página para agregar nuevos complementos.

  1. Busque el complemento " Fragmentos de código ".
  2. Instálelo haciendo clic en el botón Instalar ahora una vez que los resultados de la investigación sean positivos.

Paso 3: activa el complemento

CSS personalizado en Elementor

Haga clic en el botón Activar »Una vez que se complete la instalación para activar el complemento Fragmentos de código.

Paso 4: abra la página del complemento y agregue un fragmento de código

  1. Abre el menu Extractos desde tu tablero
  2. Haga clic en el botón Nouveau para agregar un nuevo fragmento de código

Paso 5: crea un fragmento y actívalo

  1. Asigne un nombre a su fragmento de código.
  2. Dentro de la etiqueta, escribe tu código. Este código está disponible a continuación para copiar.
  3. Haga clic en el botón Guardar Cambios Para guardar el fragmento de código.
  4. Después de guardar el CSS, haga clic en " Activar Para activar el código CSS.

Copiar codigo

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Método 3: usar el personalizador de temas de Elementor

Nota: Tenga cuidado antes de usar este método porque si cambia el tema perderá este CSS personalizado.

Paso 1: abre el personalizador de temas

CSS personalizado en Elementor

Vaya a su sitio web y haga clic en la opción de personalizar en la barra de navegación superior. Esto abrirá una ventana de personalización del tema.

Paso 2: haga clic en la pestaña CSS adicional


Esto abrirá la página de entrada de CSS.

Paso 3: agregue su código CSS

CSS personalizado en Elementor

Bien ! Ahora sabe cómo agregar fácilmente CSS personalizado a una página o sitio web de Elementor. Esto hará que el diseño de páginas web únicas en Elementor Free sea más flexible.

¡Obtenga Elementor Pro ahora!

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. FileBird

pájaro de archivo

¿Alguna vez ha tenido problemas para administrar miles de archivos de imágenes, videos o documentos que cargó en su FTP de WordPress? si o no, no importa, lo importante es saber que el Plugin de WordPress FileBird lo ayudará a administrar sus archivos multimedia con facilidad y brindará más poder a su biblioteca.

Su interfaz de usuario sin interrupciones y su menú contextual permiten a los usuarios arrastrar y soltar archivos en carpetas o tienen los derechos necesarios para crear, renombrar o eliminar carpetas rápidamente de la misma manera que lo hace en su computadora.

Con este complemento en la mano, sus archivos multimedia se organizarán sistemáticamente y podrá seleccionar fácilmente una imagen para insertarla en una página o publicarla. Además, este complemento es totalmente compatible con los complementos más populares, especialmente con WooCommercey también admite una gran cantidad de idiomas.

Para obtener más información, visite Cómo gestionar archivos y carpetas de WordPress

Entonces, si quieres dar un impulso a la administrar su biblioteca de medios, Plugin de WordPress FileBird podría ser tu arma secreta.

DescargarDemo | alojamiento web

2. Últimas categorías expansibles de WooCommerce

Últimas categorías expandibles de woocommerce

Ce Plugin de WordPress le permite modificar fácilmente las largas listas de categorías aburridas de WooCommerce y reemplazarlas con diferentes niveles de subelementos en un menú de acordeón.

Sus principales funcionalidades son: la posibilidad de activarlo y finalmente que funcione automáticamente (¡no se requieren parámetros!), El soporte para múltiples niveles de categorías (categorías, subcategorías, etc.), el resaltado de la categoría activa, la apertura de todas las categorías principales si la categoría actual está dentro, la compatibilidad con cualquier Tema de WooCommerce, sensible al deseo, actualizaciones gratuitas y una atención al cliente muy activa.

Descargar | Demo | alojamiento web

3. WavePlayer

Como puedes adivinar por el nombre, WavePlayer es un complemento de reproductor de audio que toma la forma de onda del archivo de audio reproducido. Con este complemento, podrás alojar pistas o simplemente integrarlas con otros servicios.alojamiento en la nube, como SoundCloud.

Los complementos de wordpress premium de Waveplayer agregan reproductor de audio

También se puede utilizar con fines de podcasting y ofrece otras características como: soporte HTML5, diseño receptivo, integración de WooCommerce, etc.

También podrá crear visualmente una lista de reproducción antes de publicarla. Otra característica esencial es su rapidez y eficiencia.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

Conclusión

Listo ! Eso es todo por este tutorial, esperamos que te ayude a agregar CSS personalizado a Elementor de forma gratuita. No dude en comparte con tus amigos en tus redes sociales favoritas

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.

...