Introducción
Uso de Sitely
Elementos
Cómo
Cuando pensamos en cajas, tendemos a imaginar esas formas cuadradas u oblongas que usamos para separar contenido en la página web. Pero las cajas son más de lo que aparentan. Son uno de los bloques de construcción esenciales del diseño web y, usadas de forma creativa, te ofrecen gran flexibilidad para presentar el mensaje de tu página. Echa un vistazo al encabezado de página del ejemplo de abajo. Está hecho casi por completo de cajas. Unas con esquinas redondeadas, otras rellenas con imágenes, otras con color sólido y texto superpuesto, y un par con solo iconos.
En Sitely tienes todas las herramientas de estilo que puedas desear para trabajar con cajas, y están convenientemente ubicadas en el panel Estilo, a la derecha de la interfaz de Sitely.
Thai Delights
Auténtica experiencia gastronómica asiática
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices
Botón
Botón
Consulta nuestro menú
El primer tipo de caja es la caja estándar sencilla: se ve así:
El segundo tipo de caja es la caja ancha (Wide), que se ve así:
La caja estándar está diseñada para crear cajas que se mantienen dentro de los márgenes izquierdo y derecho de tu página web, mientras que la caja ancha está pensada para extenderse más allá de los bordes izquierdo y derecho de la página hasta ocupar todo el ancho del navegador.
Cuando se añade una caja estándar al lienzo, puedes dimensionarla y posicionarla como quieras. Además, la caja se puede estilizar para crear justo el efecto que deseas. Estas son las opciones disponibles en el panel Estilo.
Si eliges la opción Degradado, se mostrará una barra de colores de degradado donde puedes seleccionar dos colores, así como un ángulo para el degradado. Solo haz clic en cada extremo de la barra de color para elegir tus colores y luego aplica un ángulo.
La primera opción es el Relleno. Aquí puedes seleccionar un color con el que rellenar tu caja. También tienes la opción de crear otros tipos de relleno desde el desplegable Contenido.
Si eliges la opción Imagen, puedes seleccionar una imagen de tu disco para rellenar la caja. Esto te dará otras opciones sobre si rellenar o ajustar la imagen dentro de la caja. Solo marca la casilla Estirar y haz tu elección. Rellenar la caja ampliará la imagen para que ocupe toda la caja (esto puede recortar parte de la imagen). Si eliges Ajustar la imagen, no se recortará: se ampliará o reducirá para que la imagen completa quepa dentro de la caja. Dependiendo de la relación de aspecto de la imagen, esta opción puede crear un efecto de bandas (letterbox), dejando espacio a ambos lados o arriba y abajo de la imagen. Cuando eliges la opción de rellenar, también podrás alinear la imagen dentro de la caja: a la izquierda, derecha o centrado; o arriba, abajo o en el centro.
La opción SVG es fantástica para diseñadores web. Son gráficos vectoriales escalables que pueden colocarse en el lienzo a cualquier tamaño, manteniendo su nitidez independientemente del grado de ampliación. Usamos gráficos SVG en el encabezado de ejemplo de arriba. Los tres iconos de estrella son en realidad el mismo icono, duplicado y colocado en la página a distintos tamaños. El icono original se ve así.
Observa que es negro. Esto resalta otra ventaja de usar gráficos SVG. Puedes cambiar el color/tono del gráfico utilizando la opción de superposición de color en el panel Estilo. Al marcar esta opción podrás seleccionar un color y aplicarlo al SVG. Nota: el SVG no tiene que estar contenido dentro de una caja para que esta opción funcione: puedes simplemente arrastrar el SVG al lienzo, donde se colocará como una imagen en lugar de como una caja.
La opción Imagen de stock funciona exactamente igual que la opción de imagen normal. La única diferencia es que seleccionarías una imagen de una de las bibliotecas de imágenes de stock compatibles con Sitely. Una vez que tu caja esté rellena con una imagen, todas las mismas opciones de estilo estarán disponibles.
Las opciones de patrón Integrado y Personalizado rellenarán tu caja con uno de los muchos patrones de relleno que ofrece Sitely. Estos patrones funcionan exactamente igual que cuando se usan como relleno de fondo de página. Puedes ajustar la escala del patrón para que se adapte mejor a tu diseño.
Independientemente de cómo elijas rellenar tus cajas, puedes añadir opciones de estilo adicionales.
Borde: Al seleccionar esta opción podrás aplicar un borde a tu caja. Puedes establecer el borde para que sea igual en todos los lados o definir un estilo/grosor/color diferente en cada lado de tu caja.
Redondeo: Esta opción añade redondeo de esquinas a tu caja. Puedes elegir redondear las cuatro esquinas de forma idéntica o seleccionar de manera específica cómo y qué esquinas se redondean. Si la caja es un cuadrado perfecto, añadir redondeo a las cuatro esquinas puede convertir tu caja en un círculo.
Sombra: Esta opción añade una sombra a tu caja. Puedes ajustar el efecto moviendo el pequeño punto dentro del círculo o, de forma más precisa, introduciendo dimensiones concretas. El color de la sombra se puede cambiar haciendo clic en el selector de color.
Opacidad: Aquí puedes reducir la opacidad de tu caja. Aunque podrías simplemente cambiar el color de tu caja para crear un tono más claro, la opción de opacidad puede ser preferible al crear ciertos tipos de efecto en los que los elementos subyacentes de la página deben verse a través de la caja.
Filtros de fondo: Estos filtros determinan qué ocurre cuando hay otros elementos de la página DETRÁS de tu caja. Mientras que la opción de opacidad permite que los elementos subyacentes se vean a través de tu caja, los filtros de fondo añaden cierto grado de distorsión a los elementos del fondo. Por ejemplo, al colocar una caja completamente transparente o parcialmente transparente sobre un elemento de fondo y aplicar un filtro de desenfoque de fondo, el efecto se asemeja al de una caja de vidrio esmerilado flotando sobre el fondo. Efectos como este son particularmente efectivos si tu caja tiene aplicada una animación de desplazamiento. A medida que la página se desplaza, tu caja podría flotar sobre otros elementos de la página, aportando un efecto más tridimensional.
Dado que las cajas son muy simples de crear, son el elemento ideal para usar al definir por primera vez el diseño de tu página (wireframing). Pueden emular imágenes, áreas de fondo, botones y campos de formulario para darte una vista rápida de cómo se verá tu página. Una vez que tengas tu diseño básico de wireframe y empieces a trabajar de verdad en tu contenido, estaría bien poder convertir tus cajas en algunos de los elementos más comunes sin tener que empezar desde cero. No te preocupes, Sitely te lo pone fácil. Puedes hacer clic con el botón derecho sobre una caja y elegir una de las opciones de conversión del menú contextual.
El menú contextual también tiene otra función útil que te permite copiar un estilo aplicado a un elemento y luego pegar ese estilo en otro elemento. Por ejemplo, podrías dar estilo a un botón en tu página, incluyendo sus estados al pasar el cursor (hover) y al hacer clic. Cuando quieras añadir otro botón más abajo en la página, puedes copiar el estilo del botón original y luego pegar el estilo en el botón nuevo. Esto mantiene tus diseños consistentes en toda la página.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
