Estos con algunos trucos CSS en Elementor que he compartido en el live del grupo oficial de Elementor en Español.
Espero que te puedan ser de utilidad y si tienes algún otro que quieras que comparta, me puedes escribir en el formulario de contacto y será un placer sumarlo a esta lista de códigos Trucos CSS en Elementor.
En el video enseño cómo y donde puedes implementar cada uno de estos códigos y trucos CSS en Elementor.
Truco CSS N1:
Posición del ícono en versión mobile en el widget de la caja del ícono
@media only screen and (max-width: 600px) {
.elementor-icon-box-wrapper {
display: flex!important;
}
p.elementor-icon-box-title {
margin-left: 10px!important;
}
}
Ejemplo:
Este es el encabezado
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Eliminar el espacio inferior por defecto de los párrafos
.elementor-text-editor p:last-child{
margin-bottom:0px;
}
Ejemplo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Truco CSS N3:
bordes a los videos de fondo en las secciones
.elementor .elementor-background-video-container {
border-radius: 6px;
max-width: 300px;
}
Ejemplo
Truco CSS N4:
Rotación de imagen infinito
.image {
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
Ejemplo
Truco CSS N5:
Botón volver en html
<div style="text-align:right"><input type="button" value="Volver" onClick="history.go(-1);">
Ejemplo
Sobre el autor:
Sebastián echeverri Jaramillo - Sebasweb
Apasionado de WordPress, diseñador web y creador de contenido. Ayudo a emprendedores y negocios a construir su presencia online con sitios web funcionales y bien optimizados. Fundador de SEBASWEB, donde comparto tutoriales, guías y recursos sobre desarrollo web.
Enamorado de mis dos hijos y mi esposa, quienes son el motor de mi vida. Me encanta la fotografía y disfruto compartir conocimientos con profesionales de los sectores en los que trabajo. Siempre explorando nuevas herramientas digitales y tendencias del mundo web.
Sígueme en YouTube para más consejos sobre WordPress y desarrollo web.
Comparte este artículo
¿Que tal te pareció este artículo?
