Introducción
Uso de Sitely
Elementos
Cómo
Hay dos tutoriales en video disponibles para este tema Haz clic aquí para verlos
El texto es uno de los elementos principales en el diseño de páginas web. No solo cuenta tu historia, también ayuda a crear una jerarquía visual y para motores de búsqueda en tus páginas. En Sitely, crear texto es simple y directo. Solo tienes que añadir un marco de texto a tu página y comenzar a escribir como lo harías en una aplicación de procesamiento de textos. Puedes dar estilo a tu texto como quieras, todo desde la comodidad del panel de estilos de Sitely. Cuando agregas por primera vez un marco de texto (o Cuadro de texto, como se conoce en Sitely), verás un marco predeterminado en la página que se ve así::
El propio marco se coloca en el tamaño óptimo para contenido de texto en una página. En una cuadrícula de 12 columnas, el marco de texto predeterminado abarcará 6 columnas. Aunque puedes ajustar el ancho y la altura del marco de texto al tamaño que desees, el texto de cuerpo o de párrafo se entrega mejor en spans de entre 6 y 8 columnas para facilitar su lectura.
Cuando el marco de texto se coloca por primera vez en el lienzo, contiene texto simulado, lo cual es ideal mientras estás maquetando el diseño de tu página. Para reemplazar el texto, simplemente haz clic dentro del marco y empieza a escribir. El texto simulado desaparecerá y será reemplazado por tu contenido. Si no tienes listo tu contenido, puedes optar por rellenar el marco de texto con texto de marcador de posición real que puedes estilizar para representar mejor cómo quieres que se vea el texto en la página. Esto se hace seleccionando el marco y haciendo clic en el botón ‘Insertar Lorem Ipsum…’ en el panel de estilos.
En edición y diseño gráfico, Lorem ipsum es un texto de marcador de posición que se usa comúnmente para mostrar la forma visual de un documento o de una tipografía sin depender de contenido con significado.
Todo el contenido de texto, cuando se añade por primera vez a una página en Sitely, se estilizará como texto de ‘Cuerpo’ de forma predeterminada. Este es el estilo de texto más común en las páginas web, por lo que tiene todo el sentido usarlo como predeterminado. Sitely incluye una variedad de estilos predefinidos que pueden verse en la sección de estilos del panel de estilos. Los estilos de texto son en realidad una forma de herramienta de ‘productividad’ que ayuda a mantener la coherencia, y es una característica común en la mayoría de las aplicaciones de edición de texto, como el software de procesamiento de textos. Sitely ha adoptado este método familiar para estilizar el texto para que puedas concentrarte en maquetar tu contenido de forma visual, en lugar de tener que depender de código CSS para crear el aspecto deseado de tu texto. De hecho, los estilos son tan importantes que merece la pena dedicar un poco de tiempo a explorarlos con más detalle.
Los estilos son un poco como notas adhesivas invisibles que solo pueden leer los navegadores web. Cuando un navegador ve una de estas notas, sabe que el texto debe mostrarse en una fuente particular, a un tamaño concreto y en un color específico. Las notas también contienen otra información, como la alineación del texto, el interlineado, atributos de espaciado y, no menos importante, cómo deben tratar los motores de búsqueda ese contenido de texto. Es mucha información para aplicar a muchas cajas de texto en un sitio web. Por lo tanto, usar ‘estilos’ es una forma muy eficiente de proporcionar este detalle de manera consistente en todas tus páginas web. Además, si decides cambiar algún aspecto de un estilo en particular —quizá su color o fuente—, simplemente cambias el estilo y se aplicará en todo tu sitio web donde se haya usado ese estilo.
Hacer cambios a un estilo no podría ser más sencillo. Solo selecciona un fragmento de texto con tu estilo existente, cambia el formato de ese texto en el panel de estilos y luego actualiza el estilo. Por ejemplo, para cambiar el estilo del texto de cuerpo, selecciona una caja de texto con estilo de cuerpo y realiza tus cambios en el lienzo. Aplica una fuente diferente, cambia el tamaño del texto, el color u otros atributos. Cuando hagas estos cambios verás que aparece un asterisco junto al nombre del estilo en el panel de estilos.
Esta es la manera que tiene Sitely de informarte de que has realizado cambios en el estilo, y te da la opción de actualizar tu estilo haciendo clic en el botón ‘Aplicar cambios’, o descartar tus cambios y volver al estilo original haciendo clic en el botón ‘Revertir al estilo’. Al aplicar los cambios, se actualizarán al instante todos los elementos de texto de cuerpo en tus páginas para reflejar tu nuevo estilo. Si ignoras esta opción, tus cambios SOLO se aplicarán al texto en el que estabas trabajando; todo lo demás de tu sitio permanecerá sin cambios.
A veces puede que quieras crear un estilo completamente nuevo, en lugar de cambiar uno existente. Puedes añadir un estilo nuevo haciendo clic en el icono ‘+’ en la parte superior del desplegable de estilos. Esto creará un nuevo estilo al final de la lista que podrás nombrar como quieras. De forma predeterminada, el nuevo estilo tendrá todos los atributos de tu estilo estándar de ‘cuerpo’. Para definir los nuevos atributos, simplemente crea una caja de texto y añade algo de contenido. Aplica tu nuevo estilo a la caja. Luego, usando el panel de estilos, realiza todos los cambios de atributos que necesites para tu nuevo estilo. Cuando veas el asterisco junto al nombre de tu nuevo estilo en el panel de estilos, aplica los cambios. Tu nuevo estilo ya está listo y puede aplicarse en cualquier lugar de tu sitio web.
Es importante tener en cuenta que los estilos se aplican a marcos de texto completos. Así que, si tienes una situación en la que puede haber una mezcla de atributos de texto dentro de un mismo marco —por ejemplo, una caja de texto con estilo de cuerpo y, dentro de esa misma caja, creas selectivamente subtítulos en negrita con un tamaño de fuente mayor—, cualquier cambio posterior que hagas al estilo de cuerpo asociado a ese marco cambiará tus encabezados al estilo de todo el marco. Por esta razón, a menudo es mejor mantener los encabezados y subtítulos como marcos de texto separados en tus páginas y asignarles diferentes estilos.
Ahora que tienes una mejor comprensión de los ‘Estilos’, podemos pasar a ver los distintos atributos que se pueden aplicar al contenido de texto. Muchos te resultarán familiares si alguna vez has usado una aplicación de procesamiento de textos, pero aquí va un breve recordatorio.
La primera sección del panel de estilos es la sección Fuente.
Aquí puedes seleccionar una fuente de la lista desplegable de fuentes disponibles en tu sistema. También puedes elegir entre una lista de atributos de fuente, como normal, ligera o negrita. La lista de atributos disponibles variará según la fuente que elijas. Algunos de los atributos más comunes también se muestran como iconos, como Negrita, Cursiva y Subrayado. Algunas opciones pueden aparecer deshabilitadas si tu fuente no admite esos atributos. Después, puedes seleccionar un tamaño para tu texto y también introducir algo de tracking (espaciado entre letras). Este es el espacio entre letras individuales. Algunas fuentes tienen un tracking muy cerrado, lo que a veces dificulta la lectura, especialmente en tamaños pequeños. La opción de tracking te permite añadir espacio adicional entre las letras.
También habrás notado el icono de engranaje junto a los iconos de atributos. Aquí puedes configurar opciones avanzadas como capitalización, subíndice y superíndice, color de fondo del texto o añadir un efecto de sombra al texto. Por último, tienes una muestra de color donde puedes seleccionar un color para tu texto. Al hacer clic en la muestra se abrirá el panel de color de Sitely para que puedas seleccionar un color de la paleta de tu sitio web.
A continuación está la sección Párrafo.
Aquí puedes elegir atributos que se aplican a párrafos completos. Las primeras opciones son la alineación del texto. Permiten alinear el texto a la izquierda, centrado, a la derecha o justificado. El icono de doble flecha se usa principalmente al introducir texto en idiomas que se leen de derecha a izquierda en lugar de izquierda a derecha. También puede usarse como un simple interruptor para cambiar de texto alineado a la izquierda a alineado a la derecha.
La siguiente opción es el interlineado. Determina el espacio entre líneas de texto. En diseño web, lo ideal es configurarlo entre 1,2 y 1,4. No obstante, el espaciado final dependerá de la fuente y el tamaño del texto que estés creando. A menudo es mejor definir el interlineado de forma visual para que resulte fácil de leer.
La opción ‘primera línea’ te permite establecer una sangría de primera línea en cada párrafo. Aunque es una característica común en la edición de libros para ayudar a separar párrafos, también puede usarse, con menos frecuencia, en páginas web. Puede ser útil especialmente si estás configurando una gran cantidad de texto donde la separación adicional de párrafos pueda ser importante. Las opciones ‘espacio antes’ y ‘espacio después’ sirven para establecer el espaciado antes y después de un párrafo. Esta es la forma más común de separar párrafos en páginas web, pero, en última instancia, es cuestión de preferencia personal.
La opción final es la etiqueta HTML. Es una especie de identificador que los motores de búsqueda utilizan para determinar la importancia del contenido de texto en tu página. Aunque a menudo se correlaciona con la jerarquía visual creada por los encabezados, subencabezados y texto de cuerpo, no tiene por qué ser así. En el mundo de los sitios web, puedes designar texto como texto de encabezado (denotado por H1 hasta H6), o denotarlo con la letra ‘p’, que significa texto de párrafo. En términos generales, H1 es el elemento más importante de la página para que los motores de búsqueda establezcan de qué trata la página. Cada nivel de encabezado después de ese (H2 - H6) disminuye en importancia. El texto de párrafo es el contenido principal de la página para los motores de búsqueda. Es el texto que con mayor probabilidad indexarán para establecer la relevancia de tu página con respecto a las consultas. Como regla general, deberías tener solo una etiqueta H1 en una página, aunque puedes tener tantas de las demás como quieras.
Tras los ajustes más generales de párrafo, tenemos opciones adicionales en forma de casillas de verificación. Se utilizan para aplicar un formato especial a los párrafos.
Esta opción sangra un párrafo tanto a la izquierda como a la derecha. Puedes establecer la sangría/margen con las opciones que aparecen cuando se selecciona la casilla de Cita.
Esta opción crea efectos especiales en el texto seleccionado, como rellenarlo con una imagen, un degradado o un patrón. Aquí tienes un ejemplo de la opción Recortar al texto, en la que el texto se ha rellenado con una imagen.
TEXTO DE MUESTRA
En el ejemplo siguiente, se ha aplicado el Efecto Knockout. El efecto Knockout es básicamente una opción que permite mezclar un color de fondo con un color de texto en primer plano para crear distintos efectos. Esta opción está pensada para quienes provienen del mundo del diseño gráfico y entienden mejor los ‘modos de fusión’. Para la mayoría de los usuarios, sería igual de sencillo colocar texto encima de una caja de color y aplicar estilos a cada elemento por separado.
TEXTO DE MUESTRA
Esta opción convierte tu marco de texto en una caja desplazable para que pueda contener más texto del que se ve en la página. Al verlo en un navegador, los usuarios podrán desplazarse hacia arriba o hacia abajo para revelar el texto. Este marco de texto es un ejemplo de esta función en acción. Desplaza esta caja para revelar el texto adicional de ‘Lorem Ipsum’ a continuación.
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 dapibus. Phasellus eu ultrices turpis. Vivamus non mollis lacus, non ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet scelerisque ipsum. Morbi nulla dolor, adipiscing non convallis rhoncus, ornare sed risus.
Sed adipiscing eget nibh at convallis. Curabitur eu gravida mauris, sit amet dictum metus. Sed a elementum arcu. Proin consectetur eros vitae odio sagittis, vitae dignissim justo sollicitudin. Phasellus non varius lacus, aliquet feugiat mauris. Phasellus fringilla commodo sem vel pellentesque. Ut porttitor tincidunt risus a pharetra. Cras nec vestibulum massa. Mauris sagittis leo a libero convallis accumsan. Aenean ut mollis ipsum. Donec aliquam egestas convallis. Fusce dapibus, neque sed mattis consectetur, erat nibh vulputate sapien, ac accumsan arcu sem quis nibh. Etiam et mi sed mauris commodo tristique. Proin mollis elementum purus, a porta quam vehicula et.
Las opciones finales son Insertar ‘Campo inteligente…’ e ‘Insertar icono…’. La opción de campo inteligente te permite añadir un campo que calcule a partir de una fórmula o muestre información generada dentro del sitio web. Las muchas opciones se muestran a continuación, pero tenemos toda una sección en nuestra documentación que explica estas opciones con mayor detalle.
La opción ‘Insertar icono…’ te permite insertar un icono en tu texto. Al hacer clic en esta opción, se mostrará un panel emergente donde puedes seleccionar los iconos que desees incluir. Una vez colocados en tu caja de texto, puedes usar otras opciones de estilo para darles color y hacerlos más grandes. Así es como se ve el panel: solo haz clic en un icono para añadirlo a tu caja de texto.
Aquí tienes algunos ejemplos
Consejo útil: Si quieres crear iconos tipo botón, simplemente añade un botón a tu lienzo. Dale estilo y tamaño como quieras. Luego selecciona la etiqueta del botón y usa la opción Insertar icono para añadir un icono al botón. Puedes cambiar el tamaño del icono ajustando el tamaño de fuente del botón en el inspector de estilos. Este es un ejemplo de un botón creado de esta manera, junto con la configuración del botón.
Al comenzar un nuevo proyecto de sitio web, es mejor configurar tus estilos de texto desde el principio. Esto puede ahorrarte mucho tiempo a medida que empiezas a trabajar en tu proyecto. Para ayudarte a configurar tus estilos, hemos creado una plantilla que facilita cambiar el estilo de texto predeterminado por otros de tu preferencia. Como extra, la misma plantilla puede usarse para configurar una paleta de colores personalizada para tus proyectos. Ten en cuenta que el uso de la plantilla no cambia ninguno de los estilos o colores predeterminados de Sitely: cualquier cambio que hagas usando la plantilla solo se aplicará al documento en el que estás trabajando. Cualquier proyecto nuevo que inicies tendrá todos los valores predeterminados de Sitely. Haz clic en el enlace de abajo para descargar la plantilla; se incluyen instrucciones completas en la plantilla.
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.
