Cómo establecer un tamaño para el icono del botónElementor ? En este tutorial, le mostraremos cómo lograr esto con CSS personalizado.
Todos deberían estar contentos si tienen la libertad/flexibilidad para crear algo porque más flexibilidad significa más productividad. Hablando de flexibilidad, en este artículo le mostraremos cómo configurar un tamaño personalizado en el icono del botón. Elementor.
Descubre Cómo instalar Elementor en WordPress
De forma predeterminada, el widget del botón Elementor Puede personalizar el tamaño del icono. Pero esta elección se limita a cinco tamaños de opciones fijas (extrapequeño, pequeño, mediano, grande y extragrande). No sólo se limita a cinco opciones seleccionadas, sino que la configuración no es individual. Esto significa que cuando quieras establecer el tamaño, afectará a dos elementos del botón (icono y texto).
Tal vez se esté preguntando: “¿Es posible establecer un tamaño personalizado para el icono del botón de Elementor? ”. Bueno, todo es posible con Elementor. Sin la ayuda de complementos, puede hacerlo fácilmente.
Cómo establecer el tamaño del icono personalizado del botón Elementor
Antes de comenzar este tutorial, queremos informarle que este tutorial funcionará con el CSS personalizado de Elementor. La funcionalidad CSS personalizada solo está disponible en Elementor Pro.
Bueno, ¡comencemos!
Ve a tu editor de Elementor. Vamos a empezar todo desde cero, así que crea una sección con una sola columna. A continuación, seleccione el widget de botón del panel de widgets, luego arrástrelo y suéltelo en el área de edición.
Lea también: Elementor: Cómo crear formas personalizadas
Una vez que haya agregado el widget de botón, puede editar y diseñar el widget según sus preferencias. Como agregar un icono, color de fondo de texto, etc.
Como puede ver en la imagen de arriba, los tamaños de icono y texto son los mismos. Cuando desee cambiar el tamaño del ícono solo configurándolo en la opción Tamaño de la configuración del widget, también afectará el texto.
Bien, ahora resolveremos este problema. En la configuración del widget, navegue a la pestaña Avanzado -> CSS personalizado.
Copie el fragmento de CSS a continuación y luego péguelo en el campo CSS personalizado.
selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}
Puede personalizar el tamaño del icono cambiando el valor del fragmento de CSS (vea la imagen a continuación).
¡Listo!. No olvides guardar o publicar tu proyecto si lo deseas.
¡Consigue Elementor Pro ahora!
Conclusión
Este artículo le muestra cómo configurar el tamaño personalizado del ícono del botón de Elementor usando CSS personalizado. Pero, si desea una forma más fácil de personalizar el tamaño del icono de su botón porque no le gusta trabajar con códigos, le sugerimos que utilice un Complemento Elementor.
El complemento de Elementor que recomendamos encarecidamente es JetElements de Crocoblock. JetElements tiene más de 40 widgets de Elementor. Encontrará un widget de botón que le permite personalizar el tamaño del icono del botón.
Con el widget Bouton de JetElements, personalizar el tamaño del ícono del botón es muy simple y sin problemas.
Listo ! Eso es todo por este artículo que le muestra cómo establecer un tamaño para el icono del botón de Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros 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 o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
