Agregar texto e imágenes

Los editores del sitio pueden agregar imágenes y texto a un sitio utilizando las siguientes tarjetas:

• Tarjeta Fila: se trata de los pilares de su sitio. Cada tarjeta debe estar anidada dentro de una tarjeta de fila. Puede agregar imágenes y colores de fondo a las tarjetas Fila.
• Tarjeta de texto: agregue texto en cualquier lugar del sitio arrastrando esta tarjeta sobre una tarjeta de fila. También puede usar esta tarjeta para agregar botones, listas, tablas y código personalizado a su sitio.
• Tarjeta de imagen: agregue imágenes independientes a cualquier tarjeta de fila, en cualquier parte de su sitio.

Agregar texto y formatearlo

Se puede agregar texto a su sitio en cualquier lugar donde haya una tarjeta de fila.

Para agregar y dar formato al texto, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. En el panel Personalizar, seleccione Diseño.
3. Arrastre una tarjeta Texto a una fila del diseño.
4. Seleccione cualquier texto que desee formatear. Entre las opciones están el estilo (Normal, Código, Encabezados, etc.), negrita, cursiva y vínculos.
5. Para ajustar el tamaño del texto, seleccione el botón Estilo y elija un tamaño de encabezado.
6. Para ajustar la alineación del texto, seleccione las opciones de párrafo y elija una. Para mover una línea de texto, elija la opción de párrafo y seleccione Anular sangría o Sangría.

   Sugerencia:

   Si comete un error, pulse Comando+Z o Ctrl + Z en el teclado para revertir los cambios.

7. Seleccione Guardar.

Cambiar color de texto

Para aplicar el mismo color a todo el texto de su sitio, cambie el color del texto utilizando la configuración Tema de su sitio. También puede ajustar el color del texto utilizando la configuración de fila.

Para cambiar el color del texto, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Para definir un color para todo el texto de su sitio o página, abra el panel lateral y expanda el menú Tema. Para obtener más información sobre los temas, consulte Implementar imagen de marca en un sitio con opciones de encabezado y tema.
3. Para definir un color para una fila concreta, seleccione el lápiz de edición de la fila.
4. Cambie el color introduciendo un código de color hexadecimal o eligiendo un color.

   Sugerencia:

   Los códigos hexadecimales son útiles para garantizar una imagen de marca coherente en todos los recursos de su organización. Si no está seguro de los detalles relacionados con la imagen de marca de su organización, consulte si proporciona alguna documentación o directrices de marca.

5. Seleccione Guardar.

Cambiar fuentes

Puede cambiar la fuente de los encabezados de texto y del texto base con Google Fonts. El texto base engloba todo el texto del diseño de su sitio. Esta fuente también se aplica a cualquier página que se haya agregado a su sitio, a las páginas de detalles de elementos a las que se acceda mediante búsquedas en el sitio y a las vistas de eventos.

Agregue una lista con viñetas o números

Cree una lista siguiendo estos pasos.

Para cambiar el color del texto, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Texto a una fila.
3. Agregue texto o seleccione texto existente.
4. Seleccione Lista desordenada para crear una lista con viñetas o Lista ordenada para crear una lista numerada.
5. Seleccione Guardar.

Agregar una imagen independiente

Puede agregar imágenes independientes a cualquier tarjeta de fila.

Para agregar una imagen independiente, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Arrastre una tarjeta Imagen sobre una fila del diseño.
3. En Imagen, elija el origen de la imagen. Ambas opciones admiten JPG, JPEG, PNG, etc.
   • Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
   • Para cargar un archivo, elija Cargar imagen. Arrastre el archivo a la casilla o seleccione Buscar imagen para agregar su imagen (el tamaño máximo de archivo es de 3 MB).
4. Para personalizar una imagen cargada, seleccione el botón Recortar imagen y arrastre un manipulador para cambiar el tamaño del marco de recorte. Para reposicionar el marco de recorte, seleccione y arrastre por la línea de puntos. Para ajustar el zoom, use el control deslizante situado debajo la imagen.
5. En el menú Opciones, proporcione un texto alternativo de imagen para ayudar a los usuarios invidentes y mejorar la accesibilidad de su sitio.
6. Si procede, proporcione un hipervínculo de imagen y configure el vínculo para que se abra en la misma pestaña o en una nueva.

   Nota:

   Las pautas de accesibilidad (en Entrada 3.2.2 y técnica G201) recomiendan no abrir vínculos en nuevas pestañas o ventanas a menos que se proporcione una advertencia avanzada.

7. Proporcione texto para Título de la imagen y seleccione la alineación del texto.
8. Si lo desea, seleccione Escalar imagen para rellenar para establecer un punto focal para la imagen. El punto focal garantizará que la imagen permanezca enfocada donde sea necesario a medida que se redimensiona para diferentes pantallas.
9. Seleccione Guardar.

Agregar imágenes y color de fondo

Puede agregar imágenes detrás de otras tarjetas con una tarjeta de fila.

Sugerencia:

Para mostrar texto o contenido sobre una imagen, elija un color de fondo que contraste. Por ejemplo, si va a usar texto de color claro o mostrar un mapa de color claro, elija un color de fondo oscuro, como el negro, para asegurarse de que su texto siga siendo claro. A continuación, ajuste la transparencia del color para que la imagen siga siendo visible.

Para agregar imágenes de fondo y color, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Fila al diseño y formatee en Apariencia.
3. En Imagen de fondo, elija el origen de la imagen. Ambas opciones admiten JPG, JPEG, PNG, etc.
   • Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
   • Para cargar un archivo, elija Cargar imagen. Arrastre el archivo a la casilla o seleccione Buscar imagen para agregar su imagen (el tamaño máximo de archivo es de 3 MB).
4. Seleccione un Color de fondo introduciendo un código hexadecimal o eligiendo un color.

   Nota:

   Solo las tarjetas de fila admiten colores de fondo.

5. Para ajustar Transparencia de imagen, utilice el control deslizante o introduzca un valor en el campo de porcentaje. Con ello se aclara o atenúa el color de fondo y puede ayudar a garantizar que la imagen y el texto sigan siendo accesibles para los usuarios invidentes.
6. Seleccione Guardar.

Elegir un diseño de imagen en una tarjeta de fila

Cada tarjeta de fila tiene dos opciones de diseño para determinar cómo se mostrará su imagen.

Para elegir un diseño de imagen, siga estos pasos:

1. Después de agregar una imagen a una tarjeta de fila, puede elegir un diseño ancho o fijo para la imagen y cualquier contenido que se muestre en la tarjeta.
   • Elija Cuadro si desea que la imagen permanezca fija.
   • Elija Ancho si desea que la imagen abarque el ancho de su sitio.
2. Establezca Punto focal de imagen para garantizar que la imagen permanezca enfocada donde sea necesario a medida que se redimensiona para diferentes pantallas.
3. Seleccione Guardar.

Agregar un botón

Un botón con un vínculo a otra ubicación, como una sección o página, es una útil herramienta de navegación. Los botones también pueden incluir llamadas a la acción, que incitan a las personas a hacer algo, como registrarse, obtener más información o participar en una encuesta. Los botones utilizarán el color del vínculo del cuerpo y el color de fondo del cuerpo para garantizar que los botones sean accesibles para todo tipo de usuarios. Encontrará más información en Actualizar a colores de tema de los botones Hub.

Para agregar un botón, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Seleccione el botón Insertar y elija Botón.
4. Seleccione </> Editar en HTML.
5. En la etiqueta 'href', introduzca la URL en lugar de '#' y el texto del vínculo en lugar de 'Botón' (orientación del componente de Calcite).
6. Seleccione Aplicar y Guardar.

Agregar un menú de panel lateral expandible

Agregue un menú contraíble, una opción útil a la hora de agregar preguntas frecuentes.

Para agregar un menú de panel lateral expandible, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Seleccione el botón Insertar y elija Panel lateral expandible.
4. Seleccione </> Editar en HTML para agregar y dar formato al texto (orientación del componente Calcite).
5. Seleccione Aplicar y Guardar.

Ver los componentes admitidos de Calcite

La tarjeta Texto admite los siguientes componentes del sistema de diseño de Calcite. Consulte un catálogo de todos los componentes de Calcite que incluye descripciones, usos óptimos, ejemplos y más.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Configurar texto con HTML

Personalice su texto con HTML utilizando los elementos y atributos que se indican a continuación.

Para configurar texto con HTML, siga estos pasos:

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Seleccione </> Editar en HTML para agregar y dar formato al texto (orientación del componente Calcite).
4. Es posible utilizar la etiqueta <a> para crear un vínculo a una página. Pegue la indicación de la página entre el atributo href="" de la etiqueta <a>, por ejemplo, <a href="/pages/target-page">Visit the linked page</a>.

Sugerencia:

Si utiliza una ruta relativa en la etiqueta <a> en lugar de la ruta absoluta, puede evitar que se refresque toda la página al seleccionar el vínculo. Para abrir el vínculo en una nueva pestaña, incorpore target="_blank" directamente tras su atributo href en la etiqueta <a>.

5. Seleccione Aplicar y Guardar.

Precaución:

Por motivos de seguridad, las tarjetas Texto no admiten JavaScript integrado. Se ignoran las etiquetas de script.

Elementos HTML permitidos

'a' 'abbr' 'acronym' 'address' 'article' 'audio' 'b' 'bdi' 'bdo' 'big' 'blockquote' 'br' 'caption' 'center' 'cite' 'code' 'col'

'colgroup' 'datalist' 'dd' 'del' 'details' 'dfn' 'div' 'dl' 'dt' 'em' 'embed' 'fieldset' 'figcaption' 'figure' 'font' ''footer' 'frameset'

'h1' 'h2' 'h3' 'h4' 'h5' 'h6' ''head' ''header' 'hgroup' 'hr' 'i' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' 'p' 'param' 'pre' ''progress' 'q'

'rp' 'rt' 'ruby' 's' 'samp' 'section' 'small' 'source' 'span' 'strike' 'strong' 'style' 'sub' 'summary' 'sup' 'table' 'tbody'

'td' 'tfoot' 'textarea' 'th' 'thead' 'time' 'title' 'tr' 'track' 'tt' 'u' 'ul'

Se permiten los siguientes atributos para esos elementos. Todos los elementos HTML admitidos permiten: ['class', 'style'].

• 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
• 'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload']
• 'blockquote': ['cite']
• 'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
• 'col' : ['span', 'width']
• 'colgroup' : ['span', 'width']
• 'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
• 'font': ['size', 'color', 'style']
• 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
• 'ol' : ['align', 'start', 'type']
• 'p' : ['style']
• 'q' : ['cite']
• 'source' : ['media', 'src', 'type']
• 'span' : [style]
• 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
• 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'tr' : [alignt, 'height', style', valign']
• 'ul' : ['type']