¡Bienvenido a la nueva experiencia Brandguide! Este artículo, así como Comenzando con una Brandguide y Personalización de una Brandguide usando CSS te ayudarán a migrar tu contenido. Las capacidades de edición de tu Brandguide actual desaparecerán el 1 de septiembre de 2023. A partir del 1 de diciembre de 2023, el editor de Brandguide anterior ya no estará disponible.
Este artículo te explicará cómo construir tu Brandguide usando páginas, secciones y bloques.
Páginas
El nivel de organización más alto de una guía de marca. Las páginas se agregan para hacer guías de marca.
Añadiendo páginas
- Navega a la opción Páginas en la barra lateral.
- Selecciona el botón Añadir página.
- Nombra la página y establezca el Slug.
- Selecciona Guardar y crear página.
Borrando páginas
Dentro de las páginas y secciones desplegadas, selecciona el icono de la papelera junto a la página que deseas eliminar. Si una página es eliminada, la acción no se puede deshacer y los bloques y secciones alojados dentro de la página tampoco se pueden recuperar.
Secciones
Las secciones son un nivel organizacional de una Guía de Marca que está anidado dentro de las páginas y consta de bloques.
Bloques
Los bloques están anidados dentro de secciones. Puedes localizar bloques en la barra lateral en el lado izquierdo. Los bloques son componentes de una Brandguide y pueden ser imágenes, texto, color y códigos que viven en el área del lienzo como contenido.
Agregando bloques
- Ve a la barra lateral izquierda y selecciona la opción bloque.
- Se abrirá un menú con opciones de bloques para imágenes, texto, código y color. El contenido que puedes añadir tendrá una línea punteada alrededor de ella.
- Selecciona el bloque y arrástralo al área del lienzo. Líneas moradas en el lienzo indican una zona donde se puede soltar el contenido.
- Suelta el clic para soltar el bloque en el lienzo.
Borrando bloques
- Selecciona el icono de basura en el bloque. Ten en cuenta que al eliminar un bloque, no se puede recuperar.
Reorganizando bloques
Tienes dos opciones
- Arrastra y suelta el bloque en otro lugar de la página.
- Usa la flecha en la derecha del contenido del bloque para mover el bloque hacia arriba y hacia abajo de la página.
Bloques de imágenes
Los bloques de imágenes te permiten añadir contenido de la biblioteca a tu guía de marca. Esto significa que si un recurso se actualiza en la Biblioteca, el activo se actualizará automáticamente en la Brandguide. Esta experiencia es alimentada por CDN. Para promover la consistencia de la marca no puedes subir imágenes directamente a una Brandguide. Deben venir de tu Biblioteca.
Tipos de imágenes soportados
- APNG
- AVIA
- GIF
- JPEG
- PNG
- SVG
- WebP
Añadiendo imágenes
- Selecciona el icono de imagen en la barra lateral de la izquierda.
- Aparecerá otro menú que accede a la Biblioteca. La Biblioteca o Colección que está asociada con tu Guía de Marca aparecerá por defecto.
- Para elegir otra Biblioteca o Colección selecciona la flecha negra en la parte superior del menú.
- Localiza la imagen que deseas usar y añádela de una de las siguientes maneras:
- Arrastra y suelta la imagen en el lienzo.
- Pasa el ratón sobre la imagen y selecciona el menú de elipses y luego haz clic en [+] Colocar.
- Pasa el cursor sobre la imagen y selecciona la elipsis, elige ver detalles y luego haz clic en [+] Colocar.
- Pasa el ratón sobre la imagen, selecciona la elipsis, elige ver detalles y luego arrastra y suelta la imagen.
Cambiar tamaño de imagen
- Desplázate sobre la imagen y selecciona la elipsis.
- Elige detalles de la vista.
- Abre las opciones de posicionamiento.
- Modifica el ancho y la altura de la imagen.
- Selecciona Colocar.
Nota: esta es la única forma de manipular el tamaño de la imagen.
Bloques de texto
Añadir texto a tu Guía de Marca se puede hacer arrastrando y soltando un bloque de texto sobre el lienzo.
Alterando estilos de texto
Cuando los estilos de texto se modifican en el nivel de configuración global, afectarán a todo en el nivel de Brandguide. Cuando se modifica en el nivel de bloque sólo afectarán a ese bloque específico.
Texto Preestablecido
- Navega a la configuración.
- Introduce tu código hexadecimal en el cuadro de color de texto.
Esto afectará a cualquier texto de la página, incluyendo bloques de texto.
Texto a nivel de bloque
- Desplázate sobre el bloque de texto.
- Un editor WYSIWYG aparecerá donde puedes alterar fuentes, tamaños, colores de texto y formateo, como añadir viñetas o enlaces al texto.
- Los cambios realizados aquí sólo afectarán al bloque seleccionado.
Tipografía
En este momento los usuarios no pueden subir o sincronizar fuentes desde una Biblioteca a la Guía de Marca. Las fuentes disponibles en el menú desplegable proceden de Google Webfonts. Los usuarios avanzados pueden añadir fuentes de terceros usando CSS. Para obtener más información, visite el artículo Personalización de una Brandguide. El equipo de soporte de la Biblioteca no podrá ayudarte a construir tu propio código.
Bloques de código
El bloque de código funciona con HTML / CSS estándar. El uso de este bloque sólo se recomienda si tiene conocimiento avanzado de CSS. La asistencia al cliente no podrá ayudarte cuando estés implementando tu propio código en Brandguide. Código será saneado en un esfuerzo para prevenir ataques XSS.
Editando bloques de código
Cuando se agrega un bloque HTML/CSS a la página puedes añadir código personalizado a la Guía de la Marca. HTML se añadirá a la ubicación particular de la página y CSS se aplicará a cualquier área del lienzo que se especifique. Una vez terminado con el código, selecciona el icono del ojo para ver los cambios.
CSS también puede editarse a nivel global en ajustes; es una buena práctica tener esos estilos en el nivel superior y que se trasladen hacia abajo.
Añadiendo vídeo usando HTML
El menú no soporta la adición de bloques de contenido de vídeo. Sin embargo, utilizando el código embebido del vídeo, el contenido se puede añadir a través de HTML personalizado desde la Biblioteca. La asistencia al cliente no podrá ayudarte cuando estés implementando tu propio código en Brandguide.
- Abre el menú del activo para el vídeo.
- Ve a la pestaña Insertar.
- Localiza el código de inserción de vídeo y selecciona Copiar enlace.
- Pega el código en el bloque HTML.
Saneando bloques de código
Algunos códigos y elementos dentro del bloque serán saneados con fines de seguridad contra ataques XSS.
Borrando bloques de código
Al eliminar el bloque de código se borrará el mismo y todo el código escrito dentro. CSS escrito en el nivel de configuración global permanecerá a menos que se edite en la configuración mostrada.
Moviendo bloques de código
Mover el bloque de código después de que se hayan escrito HTML y CSS tiene el potencial de romper el bloque o los efectos deseados del código. Para obtener mejores resultados, escriba el código después de que se haya establecido la posición de los bloques.
Añadir bloques de color a tu Guía de Marca se puede hacer arrastrando y soltando el color sobre el lienzo.
Fuentes de color
El bloque de color se origina en la Biblioteca o Colección asociada a la Guía de Marca. Si no aparece ningún color en la Brandguide, significa que no se ha añadido ningún color a la Biblioteca o Colección. Para añadir colores, añádelos como un activo en la Biblioteca.
Sincronizando colores
Cuando se hace un cambio en los colores a nivel de la Biblioteca, el cambio también se reflejará automáticamente dentro de la Guía de Marca. Si se hace un cambio en la Biblioteca y el cambio no se refleja en la Brandguide, puedes sincronizar manualmente seleccionando el botón circular de sincronización en la parte superior derecha del menú.
Modos de color
Puedes alterar los modos de color que aparecen tanto en el menú lateral como en el lienzo.
- Selecciona el ícono de ajustes en la esquina superior derecha del menú lateral de color.
- Selecciona las casillas para mostrar HEX, RGB, CMYK y haz clic en Guardar.
- Un icono de copia aparecerá junto al valor del color.