El código personalizado funciona en todos los planes de pago (excepto en el plan archivado Creator). Con un plan gratuito, puedes ver el código de trabajo en el modo de vista previa, pero no en un proyecto publicado.
Degradado de fondo
Puedes agregar un degradado al fondo de diferentes widgets, como por ejemplo, en los widgets de Forma (Shape), Botones (Button), Texto (Text). A continuación, un ejemplo con el widget de forma:
- Añade un nuevo widgter de forma (Shape).
- Busca el ID de tu widget de forma, como se muestra aquí.
- Abre el Editor de Código y pega este código en la pestaña CSS. No olvides reemplazar el fragmento
"PASTE WIDGET ID HERE"con el ID de tu widget del paso 2.
[data-id="PASTE WIDGET ID HERE"] {
background: linear-gradient(90deg, #EFC4C4 0%, #94BBE9 100%);
}
4 Publica (o vuelve a publicar) tu proyecto: los cambios no serán visibles en el editor, pero aparecerán en el modo de vista previa y en la versión publicada.
Acá te mostramos el proceso:
Parámetros variables
linear-gradient: para que el degradado irradie hacia fuera desde un punto determinado, cambia este parámetro porradial-gradient. No olvides borrar90deg (u otros atributos deg) de tu código.
90deg: cámbialo por45degpara que el degradado comience en la esquina inferior izquierda o elimínalo por completo para que el degradado comience en la parte superior de tu forma.
#EFC4C4: indica el código de color. Puedes encontrar fácilmente el código de color que necesitas en la paleta de colores del widget.
Encuentra más información sobre las propiedades de degradado acá.
Degradado para el texto
El texto también puede tener un degradado, en lugar de mostrarse con un color sólido. El principio básico es el mismo, pero hay que añadir parámetros que conviertan el texto en una máscara. El código final se verá así:
[data-id="PASTE WIDGET ID HERE"] > div {
background: -webkit-linear-gradient(45deg, #EFC4C4 0%, #94BBE9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Así es como aparece en el proyecto publicado:
Degradado para el fondo del texto
Puedes añadir un degradado al fondo del texto un texto. Para ello, sigue estos pasos:
- Añade un nuevo widget de texto (Text).
- Encuentra el ID de tu widget de texto como se muestra aquí.
- Añade un widget de código y abre la pestaña CSS en él.
- Abre el Code Editor y pega este código en la pestaña CSS. No olvides sustituir el fragmento
"PASTE WIDGET ID HERE"por el ID de tu widget del paso 2.
[data-id="PASTE WIDGET ID HERE"] {
background-image: linear-gradient(red, yellow);
}
El resultado:
