Un diseño ordenado se ve más profesional y los clientes confían más en él. Esta guía te muestra cómo alinear elementos, espaciarlos de forma uniforme, ordenar una fila o una columna y voltear un solo elemento en el Design Studio. Es para cualquiera que construya o edite una plantilla de producto y quiera una colocación limpia y deliberada en lugar de hacerlo a ojo.
Alinear elementos
Alinear coloca dos o más elementos a lo largo de un borde o un centro compartido. Elige una de seis opciones: alinear a la izquierda, centrar horizontalmente, alinear a la derecha, alinear arriba, centrar verticalmente o alinear abajo.
Puedes acceder a los controles de alineación en tres sitios: el panel Propiedades de la barra lateral, la lista desplegable Alinear de la barra de herramientas flotante sobre el lienzo, y el menú contextual del lienzo. Hacen lo mismo, así que usa el que te quede más cerca.
Selecciona dos o más elementos
Haz clic en el primer elemento. Luego haz clic con Mayús en cada uno de los demás que quieras incluir. También puedes arrastrar un recuadro de selección sobre el lienzo para tomar varios a la vez. Alinear necesita al menos dos elementos seleccionados.
Abre los controles de alineación
Cuando hay dos o más elementos seleccionados, los controles de alineación aparecen en el panel Propiedades. También están en la lista desplegable Alinear de la barra de herramientas flotante y en el menú contextual del lienzo.
Elige un borde o un centro
Elige alinear a la izquierda, a la derecha, arriba o abajo para ajustar los elementos a ese borde compartido. Elige centrar horizontalmente o centrar verticalmente para alinearlos en un centro compartido. Los elementos se colocan de golpe.
Distribuir y ordenar
Distribuir reparte los elementos para que los huecos entre ellos sean iguales. Es útil cuando has colocado varios elementos más o menos y quieres un espaciado limpio e igual.
Hay dos formas de distribuir:
- Igualar los espacios. Necesita tres o más elementos. Deja los dos extremos en su sitio y espacia todo lo que hay entre ellos para que cada hueco sea idéntico. En el menú contextual son Distribuir horizontalmente y Distribuir verticalmente.
- Fijar un espaciado exacto. Haz clic en la flecha junto a un botón de distribuir para abrir la ventana de espaciado personalizado. Escribe un hueco en píxeles y los elementos se colocan con exactamente esa distancia entre ellos. Funciona con dos o más elementos, así que puedes usarlo incluso cuando igualar no está disponible.
Distribuye de forma uniforme
Selecciona tres o más elementos y luego elige distribuir horizontal o verticalmente. Los huecos entre ellos pasan a ser iguales.
O fija un hueco personalizado
Haz clic en la flecha junto a un botón de distribuir. Introduce el espaciado exacto en píxeles que quieras, y los elementos se espacian para coincidir.
Ordena una fila o una columna
Selecciona los elementos y elige Ordenar. Composerie interpreta tu selección como una fila o una columna, iguala los huecos a lo largo de ese eje principal y centra los elementos en el otro eje. Es una forma de un solo clic de limpiar una línea de elementos.
Para recentrar toda tu selección en el lienzo, usa Centrar en la página en el menú contextual. Centra la selección en la mesa de trabajo sin cambiar el espaciado interno.
Guías de ajuste y volteo
Mientras arrastras un elemento por el lienzo, Composerie muestra guías para ayudarte a colocarlo. No tienes que hacer clic en nada. Las guías aparecen solas mientras te mueves.
Verás tres tipos de guía:
- Las Guías de borde violetas aparecen cuando un borde o un centro se alinea con otro elemento. Suelta mientras se muestra la guía y el elemento se ajusta a la alineación.
- Las Guías de espaciado discontinuas con una etiqueta de píxeles muestran la distancia entre elementos, para que puedas igualar los huecos a ojo.
- Las Guías de línea base te ayudan a alinear el texto a lo largo de su línea base tipográfica.
Para voltear un solo elemento, haz clic derecho en él en el lienzo y elige Voltear horizontal o Voltear vertical. Esto refleja el elemento en su sitio. Voltear está disponible para un solo elemento que no sea texto, como una imagen o una forma. No aparece para el texto ni cuando hay más de un elemento seleccionado.
Preguntas frecuentes
¿Por qué no aparecen los controles de alineación?
Alinear necesita dos o más elementos. Selecciona un segundo elemento con Mayús y clic, y aparecerán los controles.
¿Por qué distribuir aparece atenuado?
La distribución que iguala necesita tres o más elementos. Con dos seleccionados, usa la flecha para fijar un espaciado exacto.
¿Dónde ha ido la opción de voltear?
Voltear solo aparece para un único elemento que no sea texto. Está oculta para el texto y para las selecciones de varios elementos.
¿Cambian alinear y distribuir el diseño de un cliente?
No. Estas herramientas ordenan los elementos de tu plantilla. No bloquean nada para los clientes. El comportamiento editable por el cliente se define aparte.
Siguiente
Cuando tus elementos estén donde quieres, organízalos y reordénalos con el panel de capas.