INSCRÍBETE
25 DE FEBRERO DE 2022
Clase CSS para bloques
Ahora puede asignar una clase CSS a los bloques en el panel Configuración. Esta función simplifica la edición de bloques: Puede definir una clase para el bloque y luego especificar su título en HTML.

A continuación encontrará algunos ejemplos y una guía paso a paso sobre cómo utilizar la nueva función.
Ejemplo nº 1
Títulos degradados
SOBRE NOSOTROS
Renner Yoga ofrece clases de yoga únicas para personas de todos los niveles. Le introduciremos en una nueva forma de vida y sensaciones.

Bloque AB501

Cómo hacerla
Primer paso
Añada un bloque con un encabezamiento, por ejemplo AB501.

Paso 2
  • Abra la configuración del bloque, seleccione Añadir nombre de clase CSS;
  • Establezca un nombre para el estilo, por ejemplo "uc-about".

Paso 3
  • Añade un bloque T123 ("Incrustar código HTML");
  • Copie el código siguiente y péguelo en el bloque T123.

<style>
.uc-about .t-title {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}
</style>
→ Guarda los cambios y publica la página.

¡Listo!
Ejemplo nº 2
Imágenes con esquinas redondeadas
Algunas palabras sobre nosotros
Somos un estudio de diseño de interiores con sede en Gales. Trabajamos en tres estilos de diseño contemporáneo: minimalismo funcional, eco y modernismo nouveau. Contamos con una base de datos de diseñadores y arquitectos internos y externos.

Bloque AB903

Cómo hacerla
Primer paso
Añade un bloque con la foto, por ejemplo AB903.

Paso 2
  • Abra la configuración del bloque, seleccione Añadir nombre de clase CSS;
  • Establezca un nombre para el estilo, por ejemplo "uc-about".

Paso 3
  • Añade un bloque T123 ("Incrustar código HTML");
  • Copie el código siguiente y péguelo en el bloque T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Guarda los cambios y publica la página.

¡Listo!
Ejemplo nº 3
Efecto Hover para botones
Ejemplo nº 3
Efecto Hover para botones
Sólo para versiones de escritorio
Pasar el ratón por encima del botón
Alta calidad
Somos una empresa líder en ofrecer calidad y valor a nuestros clientes. Cada miembro de nuestro equipo tiene al menos 5 años de experiencia legal. Nos gusta lo que hacemos.
Más información
Buen apoyo
Nuestros gestores están siempre dispuestos a responder a sus preguntas. Puede llamarnos durante los fines de semana y por la noche. También puede visitar nuestra oficina para una consulta personal.
Más información

Bloque FR301

Cómo hacerla
Primer paso
Añada un bloque con un botón, por ejemplo FR301.

Paso 2
  • Abra los ajustes del bloque, vaya a la pestaña "Botón";
  • Establezca el color inicial para el texto del botón en Color del texto. No es necesario especificar el color del borde y del fondo;
  • Haz clic en "Añadir nombre de clase CSS" y establece un nombre para el estilo, por ejemplo, "uc-about".

Paso 3
  • Añade un bloque T123 ("Incrustar código HTML");
  • Copie el código siguiente y péguelo en el bloque T123.

<style> 
.uc-features .t-btn { 
    box-shadow: inset 0 0 0 2px #1f5bff; 
    position: relative; 
    transition: color 0.25s; 
    box-sizing: border-box; 
} 
 
.uc-features .t-btn::before, 
.uc-features .t-btn::after { 
    content: ''; 
    position: absolute; 
    border: 2px solid transparent; 
    width: 0; 
    height: 0; 
    top: 0; 
    left: 0; 
    box-sizing: inherit; 
} 
 
.uc-features .t-btn:hover { 
    color: #60daaa !important; 
} 
 
.uc-features .t-btn:hover::before, 
.uc-features .t-btn:hover::after { 
    width: 100%; 
    height: 100%; 
} 
 
.uc-features .t-btn:hover::before { 
    border-top-color: #60daaa; 
    border-right-color: #60daaa; 
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; 
} 
 
.uc-features .t-btn:hover::after { 
    border-bottom-color: #60daaa; 
    border-left-color: #60daaa; 
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s; 
} 
</style>
→ Guarda los cambios y publica la página.

¡Listo!
Tenga en cuenta que la modificación del código sólo se recomienda a usuarios con experiencia en CSS. Tilda no ofrece soporte para problemas relacionados con código de terceros.
Hecho en
Tilda