Construye y diseña una guía de marca

Páginas

El nivel organizativo más alto de una guía de marca. Las páginas se suman para hacer guías de marca.

Agregar páginas

1. Navega hasta la opción Páginas en la barra lateral.
2. Seleccione el Botón Agregar página.
3. Asigne un nombre a la página y defina el Slug. 
4. Seleccionar, Guardar y crear páginaNo. 

Supresión de páginas

Seleccione el icono de papelera junto a la página que desea eliminar en el floyout Páginas y secciones. Si se elimina una página, no se puede deshacer la acción y no se pueden recuperar los bloques y secciones alojados en la página. 

Secciones

Las secciones son un nivel organizativo de una guía de marca que está anidada dentro de las páginas y consta de bloques. 

Las opciones de la barra de navegación fija y las secciones de página colapsadas se activan automáticamente para tu guía de marca. Puede ajustarlos dentro de la configuración de Páginas y secciones hacia la parte inferior. 

Bloques

Los bloques están anidados dentro de las secciones. Puede localizar bloques en el desvío del bloque en el lado izquierdo. Los bloques son componentes de Brandguide como imágenes, texto, color y código que viven en el área del lienzo como contenido.

Adición de bloques

1. Navegar hasta el Barra lateral izquierda y seleccione el opción de bloqueoNo.
2. Esto producirá un desplazamiento con imágenes, texto, código y opciones de bloques de color. El contenido que puedes agregar tendrá una línea de puntos a su alrededor. 
3. Selecciona el bloque y arrástralo al lienzo área. Líneas moradas En el lienzo, indique una zona de caída aprobada. 
4. Suelte el clic para dejar caer el bloque en el lienzo. 

Supresión de bloques

1. Seleccione el icono de papelera en la cuadra. Cuando se elimina un bloque, no se puede recuperar. 

Reorganización de bloques 

Tienes dos opciones:

1. Arrastrar y soltar Bloquee el bloque en otro lugar de la página.
2. Utilice el flecha a la derecha del contenido del bloque para mover el bloque hacia arriba y hacia abajo en la página.  

Bloques de imagen

Los bloques de imagen te permiten agregar contenido de Brandfolder a tu guía de marca sin problemas. Esto significa que si un recurso se actualiza en Brandfolder, también se actualizará automáticamente en la Guía de marca. CDN potencia esta experiencia. Para promover la consistencia de la marca, no puedes subir imágenes externas directamente a Brandguide. 

Tipos de imagen compatibles

• APNG
• AVIF
• GIF
• JPEG
• PNG
• SVG
• WebP
• PDF
• MP4
• Documentos de Microsoft Word
• Microsoft PowerPoints
• Archivos de Microsoft Excel

Adición de imágenes

1. Seleccione el icono de imagen en el flyout de la izquierda.
2. Aparecerá otro desvío con una experiencia de Brandfolder. El Brandfolder o la colección asociada con tu guía de marca aparecerá de forma predeterminada. 
3. Para elegir otro Brandfolder o Colección, seleccione La flecha negra en la parte superior del desvío.
4. Busque la imagen que desea usar y agréguela de una de las siguientes maneras:
   • Arrastrar y soltar Coloca la imagen en el lienzo. 
   • Pase el cursor sobre la imagen, seleccione el menú de elipses y elija [+] LugarNo.
   • Pase el cursor por encima de la imagen, seleccione los puntos suspensivos, elija Ver detalles y a continuación, seleccione [+] LugarNo.
   • Pase el cursor por encima de la imagen, seleccione los puntos suspensivos, elija Ver detalles y Luego arrastre y suelte la imagen. 

Cambiar el tamaño de la imagen

1. Hover sobre la imagen y Seleccione los puntos suspensivosNo.
2. Elija ver detalles.
3. Abre el Opciones de colocaciónNo.
4. Alterar el ancho y el alto de la imagen.
5. Seleccionar lugarNo. 

Esta es actualmente la única manera de manipular el tamaño de la imagen. 

Bloques de texto 

Agregar texto a tu guía de marca se puede hacer arrastrando y soltando un bloque de texto en el lienzo.

Modificación de 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 guía de marca. Cuando se modifican a nivel de bloque, solo afectarán a ese bloque específico.

Texto predeterminado

1. Vaya a la configuración.
2. Introduzca su código hexadecimal en el cuadro de color del texto.

Esto afectará a cualquier texto de la página, incluidos los bloques de texto.

Texto a nivel de bloque 

1. Coloca el cursor sobre el bloque de texto.
2. Un editor WYSIWYG aparecerá para alterar fuentes, tamaños, colores de texto y formato, como agregar viñetas o enlaces al texto.
3. Los cambios realizados aquí solo afectarán al bloque seleccionado.

Tipografía

Actualmente, los usuarios no pueden Sube o sincroniza fuentes con un Brandfolder a Brandguide. Las fuentes disponibles en el menú desplegable proceden de Google Webfonts. Los usuarios avanzados pueden agregar fuentes de terceros utilizando CSS. Para obtener más información, visite el Guía de marca Personalización Usando CSS artículoNo. El equipo de soporte técnico de Brandfolder no podrá ayudarte a crear tu código.

Bloques de código

El bloque de código funciona con HTML / CSS estándar. El uso de este bloque solo se recomienda si tiene conocimientos avanzados de CSS. El servicio de atención al cliente no puede ayudarte a implementar tu código en Brandguide. Cualquier código se desinfectará para evitar ataques XSS. Tenga en cuenta que nuestros desarrolladores pueden realizar cambios en nuestro código de guía de marca en cualquier momento que tengan el potencial de afectar su CSS y HTML.

Edición de bloques de código

Cuando se agrega un bloque HTML/CSS a la página, puede agregar código personalizado a la Guía de marca. HTML se agregará a la ubicación particular de la página y CSS se aplicará a cualquier área del lienzo que se especifique que afecte. Una vez terminado con el código, Seleccione el icono de ojo para ver los cambios. 

CSS también se puede editar globalmente en configuración, ya que es una buena práctica tener esos estilos establecidos en el nivel superior y en cascada hacia abajo. 

Agregar vídeo mediante HTML

El bloque de imagen desplazable no admite la adición de bloques de contenido de vídeo. Sin embargo, utilizando el código de incrustación de video, el video se puede agregar a través de recursos HTML y de video personalizados desde Brandfolder. El servicio de atención al cliente no puede ayudarte a implementar tu código en Brandguide.

1. Abra el modo activo para el vídeo.
2. Navegar hasta el Incrustar pestañaNo. 
3. Localice el código de inserción de vídeo y seleccione Copiar vínculoNo. 
4. Pega el código en el bloque HTML. 

Desinfección de bloques de código

Algunos códigos y elementos dentro de él se desinfectarán por motivos de seguridad contra ataques XSS.

Javascript no está permitido. 

Supresión de bloques de código 

Al eliminar bloques de código se eliminará el bloque y todo el código escrito dentro del bloque. El CSS escrito en el nivel de configuración global permanecerá a menos que se edite en el control flotante de configuración.

Mover bloques de código

Mover el bloque de código después de que HTML y CSS han sido escritos tiene el potencial de romper el bloque o los efectos previstos del código. Para obtener mejores resultados, escriba el código después de que se haya establecido la posición de los bloques. 

Bloques de color

Añadir bloques de color a tu guía de marca se puede hacer arrastrando y soltando el color en el lienzo.

Fuentes de color

El bloque de color se obtiene del Brandfolder o de la colección asociada a la guía de marca. Si no aparece ningún color en la Guía de marca, no se ha añadido ninguno a la Brandfolder o a la colección. Para agregar colores, agréguelos como un recurso en el Brandfolder.

Sincronización de colores

Cuando se realiza un cambio en los colores a nivel de Brandfolder, el cambio también se reflejará automáticamente dentro de la Guía de marca. Si se realiza un cambio en Brandfolder y la diferencia no se refleja en Brandguide, puede sincronizar manualmente seleccionando el Botón de sincronización circular en la parte superior derecha de la pantalla desplegable de color.

Modos de color

Puede modificar los modos de color que aparecen tanto en el control flotante como en el lienzo.

1. Seleccione el icono de configuración en la esquina superior derecha del control flotante de color.
2. Seleccione el casillas de verificación para mostrar HEX, RGB y CMYK, y seleccione GuardarNo. 
3. Aparecerá un icono de copia junto al valor de color.