INSCRÍBETE

Clase CSS para elementos del sitio web

Una práctica herramienta para modificar elementos de diseño en Zero Block
Puede añadir un nombre de clase CSS para cualquier elemento del Bloque Cero desde el menú contextual. Esta función simplifica la edición de elementos: puedes definir una clase para el título, la imagen, la galería o cualquier otro elemento y, a continuación, especificar su nombre en HTML.

A continuación encontrarás algunos ejemplos y una guía paso a paso sobre cómo utilizar la nueva función.
EJEMPLO Nº 1
Títulos degradados
Nueva función
Casos
Equipo
Contactos
Desarrollamos servicios para ayudar a las personas a dirigir sus empresas y mejorar sus sistemas de gestión
Cómo hacerla
Primer paso
Crear un diseño en Bloque Cero

Paso 2
  • Haga clic con el botón derecho en el título, seleccione Añadir nombre de clase CSS
  • Establezca un nombre para el estilo, como "degradado", por ejemplo

Paso 3
  • Añadir el elemento HTML al bloque cero
  • Copie el código siguiente y péguelo en el elemento HTML utilizando el botón Editar código

<style>
.gradient {
        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);
}

.gradient .tn-atom {
    display: inline;
}
</style>
Guarde los cambios en Bloque Cero y publique la página

¡Hecho!
EJEMPLO Nº 2
Flechas de galería personalizadas
INTERIOR
DISEÑO
ESTUDIO
Hagamos de su hogar un lugar mejor
Cómo hacerla
Primer paso
Crear un diseño en Bloque Cero

Paso 2
  • Haga clic con el botón derecho en la galería, seleccione Añadir nombre de clase CSS
  • Establezca un nombre para el estilo, como "galería", por ejemplo

Paso 3
  • Añadir el elemento HTML al bloque cero
  • Copie el código siguiente y péguelo en el elemento HTML utilizando el botón Editar código

<style>
.gallery .t-null__slds-arrow {
 opacity: 0;
}

.gallery .t-slds__arrow-left {
  background: url('https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg');
}

.gallery .t-slds__arrow-right {
  background: url('https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg');
}

.gallery .t-slds__arrow {
    background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
 width: 75px !important;
    height: 75px !important;
   left: -40px !important;
}

@media (max-width: 480px) { 
 .t396__elem .t-slds__arrow {
    width: 40px !important;
     height: 40px !important;
    background-size: 30px 30px;
    left: -20px !important;
 }
}
</style>
Guarde los cambios en Bloque Cero y publique la página

¡Hecho!
Cómo subir tus propias flechas a la galería
Para subir sus propias flechas a la galería, añada los enlaces a las imágenes de las flechas izquierda y derecha como archivos SVG al código HTML. Para ello, suba las imágenes a cualquier servicio en la nube o a cualquier página de Tilda. A continuación, abra la imagen subida en una nueva pestaña y copie el enlace.

Ejemplo de los enlaces utilizados en el código anterior
Flecha izquierda: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Flecha derecha: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
EJEMPLO Nº 3
Añadir un efecto de desenfoque detrás del texto
TRIVIA
Casos
Equipo
Contactos
Un contenido impresionante empieza con tu propia experiencia, no sólo explorando los pensamientos de los demás
Piensa en el texto como punto de partida para tus propias palabras
Primer paso
Crear un diseño en Bloque Cero

Paso 2
  • Haga clic con el botón derecho en la forma, seleccione Añadir nombre de clase CSS
  • Establezca un nombre para el estilo, como "desenfoque", por ejemplo

Paso 3
  • Añadir el elemento HTML al bloque cero
  • Copie el código siguiente y péguelo en el elemento HTML utilizando el botón Editar código

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Guarde los cambios en Bloque Cero y publique la página

¡Hecho!
Hay varias formas de añadir código HTML a Tilda
Si desea añadir un código a una sola página, hágalo utilizando el elemento HTML o bloque T123. Si desea utilizar el código para todo el sitio web o varias páginas, añádalo a la cabecera.
Añade degradados complejos al título, modifica las flechas de la galería, los botones y mucho más. Tu creatividad no tiene límites.
Hecho en
Tilda