Grupos

Sitely permite crear grupos de elementos en el lienzo. Esto no solo facilita reorganizar los elementos en la página, sino que además ayuda a mantener tu estructura de capas bien organizada y documentada..

Los grupos se crean esencialmente cuando dos o más elementos se combinan en un único elemento. Por ejemplo, el elemento de navegación que se muestra a continuación es en realidad un grupo compuesto por dos cajas anchas para el fondo; un menú, para la navegación propiamente dicha; un número de teléfono; un icono; y un logotipo. Cuando todos los elementos se agrupan, toda la barra de navegación se convierte en un único elemento que puede colocarse en cualquier parte del lienzo.

En el panel de capas, verás que al grupo se le ha asignado un nombre —«Barra de navegación» en este ejemplo— y que todos los elementos individuales se han organizado bajo el encabezado del grupo. Si el grupo está contraído, solo veremos el nombre del grupo, Barra de navegación, lo que facilita localizarlo y seleccionarlo.

Para crear el grupo, simplemente selecciona todos los elementos que van a incluirse en él. Puedes hacerlo haciendo clic y arrastrando sobre los elementos hasta seleccionarlos todos, o pulsando Shift o usando Cmd + clic para seleccionar cada elemento por turno. Una vez seleccionados, haz clic derecho y elige «Agrupar» en el menú contextual.

Alternativamente, puedes elegir agrupar desde el menú «Organizar» de Sitely. Puedes desagrupar los elementos seleccionando el grupo y eligiendo la opción «Desagrupar» desde el menú contextual o el menú Organizar. Incluso cuando los elementos se han agrupado, aún puedes seleccionarlos individualmente para editarlos. Puedes seleccionarlos desde el panel de capas, o hacer clic una vez en el grupo para seleccionar todo el grupo y luego volver a hacer clic para seleccionar un elemento individual dentro del grupo.

Una vez creado un grupo, puedes aplicar efectos de desplazamiento personalizados. Estos se muestran en el panel de estilos cuando se selecciona un grupo de elementos en el lienzo.

La opción «Fijar a la parte superior de la página» hará que el grupo se mantenga pegado a la parte superior de la página, manteniéndolo visible en todo momento. Esto se usa más comúnmente para barras de navegación, como la ilustrada arriba. Todo el contenido restante de la página se desplazará por detrás de la barra de navegación. NOTA: es importante asegurarse de que dicho grupo de barra de navegación sea el elemento situado más arriba en el panel de capas para que funcione correctamente. Si no es la capa superior, el contenido de la página se desplazará POR ENCIMA de la barra.

Si tienes varios grupos, cada uno puede tener su propia función de desplazamiento personalizada. Por ejemplo, si el siguiente grupo en tu página fuera una sección hero, podrías configurarla en «Apilar». Con esta opción seleccionada, la sección hero llegaría hasta la barra de navegación y se detendría, dejando que el resto de la página se desplace por detrás. Si se configurara en «Superponer», la sección hero se superpondría a la barra de navegación antes de permanecer en la parte superior de la página. Si la opción estuviera configurada en «El último empuja al anterior», cada grupo empujaría al anterior fuera de la parte superior de la página.

Los grupos también pueden tener acciones «al hacer clic» aplicadas como si fueran elementos individuales. También se pueden aplicar efectos de desplazamiento animados a grupos completos.

Color y degradados