En esta ocasión te traemos 5 Códigos CSS para Elementor que Solucionan Errores, facilitándote la vida, y ampliando las posibilidades del diseño web. Porque, aunque la serie de productos de Elementor para crear páginas web en WordPress es una de las más populares, flexibles y eficientes del mercado, sin embargo, no es perfecta.
Lo cierto es que Elementor desde hace muchos años tiene ciertas carencias que no se han tratado nunca, pero que pueden solventarse con unas cuantas líneas de CSS ¡Ven que te las enseñamos!
¿Dónde colocar los 5 Códigos CSS para Elementor?
El mejor lugar para colocar estos códigos es en el apartado de CSS Personalizado dentro del panel Ajustes del Sitio que nos da Elementor. Para poder acceder a dicho panel necesitarás Elementor Pro, y el mejor momento para colocar los Códigos CSS para Elementor PRO, es durante el proceso de creación de la Style Guide para ti o tu clientes.
1/5 Códigos CSS para Elementor
p{
margin-bottom: 0;
}De todos los Códigos CSS para Elementor que veremos a continuación, este es sin duda el más sencillo de todos, pero uno que ataca uno de los “defectos” de fábrica más molestos que tiene Elementor. Se trata del gap que existe debajo del texto cuando utilizamos el Widget de Texto de Elementor.
Como ya lo habrás notado, Elementor, por defecto, agrega 20px de margin, padding, gap a los elementos según su criterio propio. Y, honestamente, esta configuración por defecto, al menos en el Widget de Texto, es realmente molesta.
Esto se debe a que nunca podemos alinear horizontalmente y de forma correcta, cualquier texto con respecto a otro widget, y todo se debe a este gap que viene configurado desde un inicio.
Pero aquí es donde brilla nuestro código CCS para Elementor.
p{
margin-bottom: 0;
}Gracias a esta simple instrucción CSS, eliminaremos ese molesto espacio debajo de cada linea de texto, permitiéndonos controlar todo más según nuestro criterio y las exigencias del diseño en el que estamos trabajando.
Código CSS para Elementor 2/5
html, body{
width: 100%;
overflow-x: hidden;
}El scroll horizontal en las páginas web, especialmente en los dispositivos móviles, es una factor que arruina por completo la experiencia de usuario, y es muy fácil para los usuarios tener que lidiar con ello, pues un desliz del dedo es más que suficiente para quedar atrapado en una pantalla mitad blanca, mitad espacio efectivo de la web.
Recuerda, una mala usabilidad es uno de los peores errores de SEO que puedes cometer como diseñador si trabajas con Elementor, ¿tiene solución? afortunadamente sí.
Con la nueva tecnología de Containers de Elementor, una de las cosas que nos permiten controlar más fácilmente que antes es el overflow.
Colocar hidden el overflow nos permitirá evitar ese scroll horizontal tan molesto.
Sin embargo, esta acción es algo que debemos hacer para cada container que colocamos, uno a uno ala vez. Por lo que entra en la categoría de trabajar “duro”.
Además, esta acción no sólo bloque el scroll en el eje X sino que también lo bloquea en el eje Y, algo que, para la mayoría de diseños, es contraproducente.
Para solventar todo de manera inteligente y eficiente tenemos nuestros códigos CCS para Elementor.
html, body{
width: 100%;
overflow-x: hidden;
}Gracias a este código, de manera global evitarás el scroll en el eje X sin necesidad de colocarlo en cada contenedor cada vez que lo arrastres dentro de la web, y al mismo tiempo no entorpecerás el eje Y, así que podrás hacer overflow con ciertos elementos cuando quieras que luzcan “apilados” unos sobre los otros.
Código CSS para Elementor número 3
selector .elementor-field-option{
display:flex;
gap: 10px;
padding-top: 2px;
align-items:center;
accent-color:#fbd506;
}Ahora abordaremos uno de los problemas de estéticas y usabilidad que tiene Elementor y que, a pesar de tantos años, aún no han solucionado:
La alineación y colores del checkbox, aceptación y selectores del widget formulario de Elementor.
Como puedes ver, este formulario ha sido personalizado utilizando todas las herramientas de diseño que nos brinda Elementor en la sección de STYLE dentro del widget.
Desafortunadamente, no existe dentro del widget la opción de modificar los colores de esos elementos azules que ves allí, y que constantemente son utilizados, especialmente cuando se trata de formularios dirigidos a clientes potenciales o Newsletters.
¿Por qué conformarnos con este azul que ni siquiera forma parte de los colores de Elementor cuando podemos modificarlos con CSS?
Allí es donde entra la magia de nuestro código CSS que, a diferencia del resto de códigos CSS de esta lista, deberás colocarlo directamente en el panel de CSS del formulario, ya que estamos utilizando la llamada Selector de Elementor para llamar a esos componentes dentro del formulario.
selector .elementor-field-option{
display:flex;
gap: 10px;
padding-top: 2px;
align-items:center;
accent-color:#fbd506;
}Para la línea accent-color te dejamos el HEX perteneciente a nuestra marca, pero recuerda que debes modificarlo para que el accent-color sea el tuyo o el del cliente para quien estás construyendo la página web.
Personalizar la Barra de Scroll en Elementor con CSS
body::-webkit-scrollbar{
width: 10px;
}
body::-webkit-scrollbar-track{
background: #312c2c;
}
body::-webkit-scrollbar-thumb{
background: #f1aba9;
}Siguiendo en la temática de un diseño ON-Brand, el siguiente código te permitirá modificar en su totalidad el look-and-feel de la barra de scroll.
Especialmente para lanzamientos o Landing Pages donde el impacto de los colores es muy importante para captar la atención de las personas y sumergirlos en el storytelling, modificar la scroll bar es un plus muy bueno.
Personalizar el color al “Resaltar” el texto
Una vez más nos enfocamos en un diseño ON-Brand, el siguiente código te permitirá modificar el color del texto y del sombreado que aparece al seleccionar un texto para toda la web.
¿Es necesaria una función como esta? La respuesta real es DEPENDE.
Depende de qué tan ON-Brand quieras estar, depende de si las personas, a nivel de experiencia de usuario y usabilidad, estarán constantemente seleccionando texto de tu web para copiarlo y pegarlo.
En el caso de On Viral Agency, ya te has dado cuenta que muchos de nuestros post de blog están pensados para que, efectivamente, copies y pegues, en este caso, los códigos.
Por eso, aquí te dejamos el CSS para copiarlo y pegarlo en el Elementor, en el apartado de CSS personalizado del Site Settings.
Este código CSS comienza con una asterisco para indicar que afecte a todos los elementos que se seleccionen.
*::selection{
color: #fbd506
background-color: #0c0c05
}
