Dibujar círculos en Elementor

Hola, soy Alberto Perojo, desarrollador freelance WordPress.

Con este primer post comienzo una serie de vídeo tutoriales sobre Elementor en los que iré explicando cómo resolver ciertas situaciones que se me plantean en el día a día del desarrollo y maquetación de páginas web.

Estos vídeos van destinados principalmente a gente que esté trabajando actualmente con Elementor y tenga cierta soltura con la herramienta. Aunque soy consciente de que es un editor puramente visual, en ciertas ocasiones necesitaremos algo de código (normalmente sólo CSS) para conseguir el resultado esperado.

Este primer vídeo trata sobre cómo dibujar círculos sólidos en Elementor.

A día de hoy no es sencillo hacer una forma de círculo con Elementor. Es cierto que se puede conseguir jugando con el padding y la opción de border-radius, sin embargo, os voy a comentar una forma más directa de hacerlo con una simple clase de CSS.
El efecto que queremos lograr es poner un círculo en el fondo de una columna para poner uno o varios elemento de texto encima.

Os dejo algunos ejemplos gráficos de cómo puede quedar:


Código:

.circulo .elementor-column-wrap {
width: 150px !important;
height: 150px;
border-radius: 50%;
background-color: white;
margin: 0 auto;
}

Si te ha gustado, comparte!

WhatsApp
Facebook
Twitter

2 Responses

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *