Diseño y creación de estilos.

FUNCIONALIDADES DE DISEÑO

Crea experiencias web dinámicas para cada dimensión de la pantalla.

Start Creating

Diseño y creación de estilos

Interacciones y efectos

Recursos de diseño y multimedia

Breakpoints personalizados

Agrega múltiples breakpoints personalizados para diseñar y optimizar sitios en cualquier tamaño de pantalla que puedas imaginar.

resize handle
resize handle
resize handle
Imagen de una página web para una revista de diseño llamada Daylong mostrada en el breakpoint de tableta. Hay dos imágenes cuadradas alineadas horizontalmente con un texto blanco encima de cada una. La imagen de la izquierda es un colorido gradiente digital y la imagen central es de una mujer con un vestido rosa.
Imagen de una página web para una revista de diseño llamada Daylong mostrada en el breakpoint para móvil. Hay una imagen cuadrada de una mujer con un vestido rosa, con un texto blanco encima.
Imagen de un texto azul sobre un fondo blanco que dice, agregar breakpoint.
Imagen de una página web para una revista de diseño llamada Daylong mostrada en el breakpoint de escritorio. Hay tres imágenes cuadradas alineadas horizontalmente con un texto blanco encima de cada una. La imagen de la izquierda es un colorido gradiente digital. La imagen central es de una mujer con un vestido rosa, y la imagen de la derecha es un diseño pixelado multicolor.
Imagen de una página web para una revista de diseño llamada Daylong mostrada en el breakpoint de tableta. Hay dos imágenes cuadradas alineadas horizontalmente con un texto blanco encima de cada una. La imagen de la izquierda es un colorido gradiente digital y la imagen central es de una mujer con un vestido rosa.
Imagen de una página web para una revista de diseño llamada Daylong mostrada en el breakpoint para móvil. Hay una imagen cuadrada de una mujer con un vestido rosa, con un texto blanco encima.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
Imagen de una mujer sosteniendo unos auriculares en su cabeza sobre un fondo degradado rojo. Las unidades de medida del menú de medición están abiertas y Mín./Máx. está seleccionado.
Imagen de una mujer sosteniendo unos auriculares en su cabeza sobre un fondo degradado rojo. Las unidades de medida del menú de medición están abiertas y Mín./Máx. está seleccionado.
Imagen de una mujer sosteniendo unos auriculares en su cabeza sobre un fondo degradado rojo. Las unidades de medida del menú de medición están abiertas y Mín./Máx. está seleccionado.
Imagen de una mujer sosteniendo unos auriculares en su cabeza sobre un fondo degradado rojo. Las unidades de medida del menú de medición están abiertas y Mín./Máx. está seleccionado.

Cuadrícula CSS

Crea diseños complejos y solapados en un espacio bidimensional con un control preciso del posicionamiento de los elementos en cada uno de los breakpoints.

Dos imágenes solapadas una encima de la otra sobre un fondo degradado azul. La imagen de delante es de una página web de portafolio que muestra tres fotografías sobre un fondo amarillo. La imagen de detrás muestra el sistema de gestión de contenido de Editor X.
Dos imágenes solapadas una encima de la otra sobre un fondo degradado azul. La imagen de delante es de una página web de portafolio que muestra tres fotografías sobre un fondo amarillo. La imagen de detrás muestra el sistema de gestión de contenido de Editor X.

Repetidores

Utiliza esta herramienta de estilo flexible para mostrar contenido exclusivo en varias cajas con un diseño uniforme. Conecta los repetidores a un CMS integrado para diseñar sin problemas perfiles de equipo, listados de funciones o galerías de proyectos.

Creador de estilo

Diseña estilos modulares flexibles con cajas adaptables que se ajustan perfectamente a cada ventana gráfica. Puedes elegir desde una serie de marcos personalizables en blanco hasta obtener sugerencias de diseño completas.

Imagen de un hombre que lleva una chaqueta metalizada y una mochila. A la izquierda se ve la sección de acoplamiento y márgenes del panel de inspector de Editor X.
Imagen de un hombre que lleva una chaqueta metalizada y una mochila. A la izquierda se ve la sección de acoplamiento y márgenes del panel de inspector de Editor X.

Acoplamiento

Con el acoplamiento inteligente, los elementos se adhieren automáticamente a los bordes más cercanos de su contenedor principal. También puedes ajustar manualmente el acoplamiento para crear disposiciones precisas en cada ventana gráfica.

Imagen de un contenedor diseñado con texto y una captura de pantalla del panel capas a la izquierda, sobre un fondo de textura azul.

Capas

Utiliza el panel de Capas para ver y gestionar el orden de todos los elementos de una página y ver las relaciones de parentesco entre los mismos. También puedes cambiar el nombre de las capas para mantenerlas organizadas.

Escala del texto

Establece un tamaño de fuente mínimo y máximo para garantizar que el texto se adapte gradualmente al tamaño de la pantalla.

Más funciones de diseño y creación de estilos:

Imagen ampliada de la parte superior izquierda del lienzo con el encabezado resaltado en verde.

Masters

Guarda y reutiliza encabezados, secciones y pies de página en varias páginas. Para agilizar el flujo de creación, los cambios que realices en una página maestra se aplicarán en todas las páginas del sitio.

Tres vectores de estilo y una forma de botón sobre un fondo gris.

Recursos de diseño

Diseña y guarda secciones enteras como recursos de diseño, y reutilízalos en varios sitios. Puedes guardar los recursos de diseño localmente a nivel del sitio, o guardarlos en una biblioteca de diseño compartida para acceder a ellos en todos los sitios bajo la misma cuenta.

Imagen de dos títulos de encabezado sobre un fondo blanco y con un icono de lápiz junto a cada uno.

Gestor de temas

Mira y edita los tipos de tipografía y las paletas de color de un sitio. Podrás personalizar completamente los estilos de texto y las paletas de colores del sitio.

Imagen de iconos rectangulares y en forma de botón en blanco, alineados horizontalmente sobre un fondo gris.

Menús personalizados

Crea y gestiona múltiples menús específicos para cada página del sitio. Elige un diseño de menú, selecciona los elementos que aparecen en cada menú, enlázalos a varios destinos y personaliza cada menú por breakpoint.

Imagen de un cuadro gris con una medida azul de altura de viewport 100.

Altura de la ventana gráfica

Configura cualquier sección de un sitio al 100% de la altura de la ventana gráfica. De este modo, siempre ocuparás la altura completa de la pantalla, independientemente del dispositivo en el que se esté viendo.

Imagen de un conmutador que muestra Fijo y Fluido dentro de un contenedor, sobre un fondo gris.

Fijo, fluído y a escala

Controla cómo se comportan los elementos cuando la pantalla cambia de tamaño. Elige un tamaño fijo o fluido, o establece que las imágenes y el texto se escalen proporcionalmente a la ventana gráfica.

Imagen ampliada de la parte superior derecha del lienzo con un texto blanco encima de una forma cilíndrica gris.

Manijas redimensionables

Utiliza las manijas redimensionables en cada lado del lienzo para ver y diseñar un sitio en cualquier ancho de la ventana gráfica.

Imagen de un contenedor seleccionado con un diseño de estilo mostrado gráficamente.

Apilar

Mantén los márgenes verticales entre los elementos en cualquier ventana gráfica y evita el solapamiento en las pantallas más pequeñas.

Imagen de un contenedor seleccionado con un cuadro blanco rodeado por un fondo verde claro.

Relleno del contenedor

Agrega un espacio alrededor de los bordes de cualquier contenedor para que siempre se mantenga una distancia determinada con respecto al borde.

 Imagen de los iconos de escritorio, tableta y móvil azules alineados verticalmente con una flecha hacia abajo situada a la izquierda.

Regla de cascada

Cualquier cambio de estilo que hagas en un breakpoint se extenderá a los breakpoints más pequeños, pero no al revés.

Imagen de los iconos de escritorio, tableta y móvil alineados horizontalmente con el icono de escritorio seleccionado.

Copiar al breakpoint

Copia las propiedades de diseño y estilo de un elemento de un breakpoint a otro. Por ejemplo, puedes aplicar el estilo de un elemento en dispositivos móviles al mismo elemento en tabletas con solo unos clics.

Imagen de dos cuadros con diseños de estilo representados gráficamente sobre un fondo gris.

Copiar formato

Copia los atributos de diseño de un elemento a otro para aumentar la eficacia. Elige copiar el estilo de un elemento en un breakpoint específico o el estilo de todos los breakpoints.

Imagen de los iconos de página y ancla alineados verticalmente sobre un fondo blanco.

Anclas

Ayuda a los visitantes a navegar por un sitio con marcadores de posición invisibles. Convierte cualquier elemento en un ancla y vincúlalo a botones o elementos de menú en todo el sitio.

Imagen de líneas horizontales grises y un texto azul sobre un fondo blanco.

Subir fuentes

Sube tus propias fuentes y utilízalas en cualquier sitio.

Imagen de los iconos de unidades de medida de fracción, porcentaje y píxel alineados horizontalmente.

Unidades de medida

Dimensiona tus elementos en píxeles, porcentajes o según la altura o anchura de la ventana gráfica. También puedes dimensionar las columnas y filas de tu cuadrícula utilizando fr, calc y más.

Ver todos →

Y esto es sólo una fracción de lo que puedes hacer.

Explora más funciones avanzadas para crear, gestionar y lanzar sitios potentes en Editor X.

Trabajo en equipo optimizado

Optimiza tu flujo de trabajo y la colaboración en equipo con funciones y permisos avanzados, cuentas de equipo, bibliotecas de diseño compartidas y mucho más.

Desarrollo web

Crea aplicaciones web avanzadas utilizando JavaScript y APIs personalizadas en Velo, una plataforma de desarrollo abierta incorporada.

CMS sin programación

Utiliza las colecciones de datos para gestionar a la perfección el contenido dinámico entre bastidores de un sitio sin necesidad de tocar el diseño.

Marketing y SEO

Utiliza las integraciones avanzadas de marketing para medir las campañas en línea, dirigir el tráfico y recopilar información valiosa sobre los visitantes.

Soluciones para negocios

Responde a las necesidades de cualquier empresa con sólidas herramientas de eCommerce, desde potentes tiendas online hasta sistemas de suscripción y reserva.

resize handle
resize handle

Editor X

Crear está en tus manos