Video de como hacer círculos con elementor
Hacer Círculos con Elementor
Elementor es un plugin increíble ya que no necesitas saber código (HTML, CSS, JS) para crear diseño espectaculares.
Pero a pesar de todas sus funcionalidades hay cosas que no se pueden hacer, por ejemplo crear círculos o figuras geométricas.
Así que, hoy te voy a enseñar como hacer circulos y ademas algunos ejemplos para su uso.
Esto hará que tu pagina se vea diferente a todas las demas hechas con elementor.
Para este tutorial vamos a necesitar usar un poco de código CSS, que es con el que vamos a hacer el círculo con elementor.
Si quieres aprender mas sobre elementor tengo un curso gratis de Elementor que te puede ayudar a crear paginas web de una forma muy facily rapidos
Antes de comenzar, si aun no me conoces soy Fernando Abitia y en mi sitio encontraras cursos que ayudaran para tu proyecto web. Elementor, SEO, Marketing Digital y mas.
Tambien me pongo a tus ordenes con mis servicios de SEO, Marketing Digital y diseño Web.
Ahora si, despues de mi presentación vamos al lio.
Como hacer círculos con elementor y CSS
Te dejo el codigo para Hacer Círculos con Elementor
Aqui te dejo el codigo solo pegalo en tu hoja de estilo.
.circulo .elementor-column-wrap{
width: 500px !important;
height: 500px;
border-radius: 50%;
background-color: aquamarine;
margin: 0px auto;
padding-top:20px;
}
Empezamos con las siguientes clases:
Clase: .circulo .elementor-column-wrap
.Circulo es la clase que le da la forma al círculo.
.elementor-column-wrap esta clase es de Elementor y afecta al contenedor don de vamos a poner el circulo.
Por ejemplo si usamos solo la clase circulo, este queda dentro del contenedor, pero si le agregamos la clase elementor-column-wrap el círculo abarca el contenedor.
Haz pruebas para que veas ambos resultados.
El width y el height son las medidas del circulo.
En el ejemplo cree dos clases .circulo cuyas medidas de ambas son 500px
Y la clase circulochico cuyas medidas son de 150px
.circulochico .elementor-column-wrap{
width: 150px !important;
height: 150px;
border-radius: 50%;
background-color: rgba(76, 175, 80, 0.3);
margin: 0 auto; }
El border Radius es el que le da la forma al círculo si el border radius fuera un rectángulo.
Background-color es el color del círculo.
Margin es el margen al poner 0 auto se centra en el contenedor.
Padding es para ajustar la posición del círculo.
Te en cuenta que tal vez los cambios que hagas no se van a ver bien en el movil, asi que vas a tener que estar testeando o crear un media query, para las resoluciones de movil.
Herramientas:
Remove.bg Elimina el fondo de la imagen.
Pixabay: Imágenes libres de derechos
Hay un plugin para elementor con el que se pueden agregar mas funcionalidades, por ejemplo puedes crear círculos y figuras si usar el código CSS, además de facilitar el flujo de trabajo.
Tener una pagina web en google es muy importante, tu web debe ser rentable ya que es una sucursal de tu negocio, asi que debe traer trafico ya seas organicamente (SEO) o pagando (SEM) asi que te invito a suscribirte a mis cursos de marketing digital en cual aprenderas a llevar trafico a tu sitio web por medio de anuncios y por Inbound Marketing.
No te pierdas mis últimos post
¡Vaya! No tenía ni idea de que se pudieran hacer círculos con Elementor. Definitivamente tengo que intentarlo.
¡Wow! ¡Qué genial poder hacer círculos con Elementor! ¡Me encanta esta herramienta!
No entiendo por qué hacer círculos con Elementor es tan complicado. ¡Parece una tarea sencilla!
Pues, amigo, si no entiendes cómo hacer círculos con Elementor, tal vez deberías reconsiderar tus habilidades informáticas. No todo el mundo encuentra las cosas tan fáciles como tú. ¡Sigue practicando y deja de quejarte!
¡Increíble! No sabía que Elementor permitiera crear círculos de forma tan sencilla. Definitivamente lo probaré.
¡Vaya, qué interesante! Nunca había pensado en hacer círculos con Elementor. Definitivamente lo probaré.
¡Qué interesante! Me encantaría aprender cómo hacer círculos con Elementor. ¿Alguien ha probado el código?
¡Wow, nunca pensé que se pudieran hacer círculos con Elementor! ¡Increíble descubrimiento!
¡Me encanta cómo Elementor hace que sea tan fácil crear círculos increíbles! ¿Alguien ha probado ya el código?
¡Interesante! Me pregunto si hacer círculos con Elementor es realmente útil o solo una moda pasajera.
¡Claro que es útil! Hacer círculos con Elementor no es una moda pasajera, es una herramienta creativa que permite destacar elementos de diseño. No te quedes atrás, ¡pruébalo!
¡Wow, me encanta cómo se ven los círculos con Elementor! Definitivamente le daré una oportunidad.
No entiendo por qué alguien querría hacer círculos con Elementor. ¿No es más fácil hacer cuadrados?
¡Vaya comentario! Los círculos pueden ser más atractivos visualmente y transmitir un mensaje diferente. Además, con Elementor puedes crearlos fácilmente, así que no veo por qué no aprovechar todas las opciones que nos ofrece esta herramienta. ¡Cada quien tiene sus preferencias!
¡Wow, esto de hacer círculos con Elementor suena genial! ¿Alguien ha probado el código?
¡Me parece genial! Los círculos pueden agregar un toque interesante a cualquier diseño. ¡Vamos a probarlo!
¡Wow, me encantó este artículo sobre cómo hacer círculos con Elementor! ¡Definitivamente lo intentaré en mi próximo proyecto! 🌀🔥
Me parece genial el tutorial, pero ¿qué pasa si quiero hacer triángulos en lugar de círculos? 🤔