¿Cómo usar el editor de plantillas para personalizar tus diseños?

El editor de plantillas ofrece una variedad de bloques predefinidos para que puedas crear tus diseños de manera rápida y sencilla. Estos bloques están organizados en categorías, cada una con elementos específicos que se ajustan a diferentes necesidades de diseño.

Categoría Secciones

Esta categoría contiene bloques de tabla que permiten dividir el área de diseño en diferentes columnas. Son ideales para organizar el contenido en varias secciones.

• Sección 1:

  • Descripción: Una tabla con una sola columna que abarca todo el ancho de la plantilla.
  • Uso: Perfecta para encabezados, párrafos largos o imágenes que deben ocupar todo el espacio disponible.

• Sección 1/2:

  • Descripción: Una tabla con dos columnas, cada una del 50% del ancho.
  • Uso: Útil para colocar dos elementos paralelos, como texto e imagen o dos secciones de contenido que deben tener el mismo tamaño.

• Sección 1/3:

  • Descripción: Una tabla con tres columnas, cada una del 33.3% del ancho.
  • Uso: Ideal para dividir el contenido en tres partes iguales, por ejemplo, al mostrar una lista de características o servicios.

• Sección 3/7:

  • Descripción: Una tabla con dos columnas, la primera ocupa el 30% y la segunda el 70%.
  • Uso: Perfecta para situaciones en las que necesitas que un elemento (como una imagen pequeña) acompañe a un texto o contenido más amplio.

Categoría Componentes

Los componentes son bloques individuales que permiten añadir contenido específico como texto, botones, imágenes, y más.

• Sección de Texto:

  • Descripción: Un bloque que incluye un título y un párrafo de texto.
  • Uso: Ideal para encabezados y descripciones breves en cualquier parte del diseño.

• Texto:

  • Descripción: Un simple párrafo de texto.
  • Uso: Útil para agregar descripciones, información adicional o contenido más detallado en cualquier sección.

• Separador:

  • Descripción: Un bloque que agrega una línea horizontal para dividir secciones.
  • Uso: Facilita la separación visual entre diferentes contenidos, creando una estructura más organizada.

• Botón:

  • Descripción: Un botón interactivo.
  • Uso: Se utiliza para agregar llamados a la acción, como "Enviar", "Descargar", "Leer más", entre otros.

• Cita:

  • Descripción: Un bloque de texto estilo cita, diseñado para resaltar comentarios o citas relevantes.
  • Uso: Perfecto para destacar testimonios, frases célebres o cualquier contenido que deba resaltarse visualmente.

• Enlace:

  • Descripción: Un bloque que permite insertar un enlace de texto.
  • Uso: Útil para redirigir a otros recursos, páginas o documentos relacionados con el contenido.

• Imagen:

  • Descripción: Un bloque que permite insertar imágenes desde el administrador de multimedia o a través de un enlace.
  • Uso: Ideal para añadir imágenes relevantes, como logotipos, gráficos o fotos, en cualquier parte del diseño.

• Token (Comodín):

  • Descripción: Un bloque que abre un selector para insertar tokens (comodines) o datos dinámicos.
  • Uso: Perfecto para personalizar plantillas con información dinámica, como nombres de terceros, valores o cualquier otro dato del sistema.

Categoría Bloques Predefinidos

Esta categoría contiene bloques más complejos que ya incluyen varios elementos, como texto, imágenes y tablas.

• Cuadrícula:

  • Descripción: Un bloque que incluye una tabla con dos tarjetas, cada una ocupando el 50% del ancho. Cada tarjeta contiene una imagen, un título y un párrafo.
  • Uso: Ideal para destacar dos elementos en paralelo, como productos o servicios, con una estructura visual clara y atractiva.

• Lista:

  • Descripción: Un bloque que contiene una tabla con dos filas del 100% del ancho. Cada fila incluye una imagen, un título y un párrafo.
  • Uso: Útil para presentar una lista de elementos, como características, ventajas, o testimonios, con un diseño sencillo y bien organizado.

En el editor de plantillas, las configuraciones te permiten personalizar los elementos que seleccionas en el área de diseño. Estas configuraciones están divididas en dos secciones principales: Estilos y Atributos. A continuación, te presentamos una descripción detallada de cada categoría de estilos y traits disponibles:

Sección de Estilos

La sección de Estilos ofrece un conjunto de opciones para modificar la apariencia visual de los elementos, las cuales están basadas en CSS, un lenguaje que se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. Estas configuraciones están organizadas en categorías, lo que te permite personalizar cada aspecto del diseño.

1. Categoría General:

   • Vista (display): Define cómo se mostrará el elemento (bloque, en línea, flex, etc.).
   • Flotar (float): Permite que el elemento flote a la izquierda o derecha de su contenedor.
   • Posición (position): Controla la posición del elemento (relativa, absoluta, fija).
   • Posición superior (top): Establece la distancia desde el borde superior del contenedor.
   • Posición inferior (bottom): Establece la distancia desde el borde inferior del contenedor.
   • Posición derecha (right): Establece la distancia desde el borde derecho del contenedor.
   • Posición izquierda (left): Establece la distancia desde el borde izquierdo del contenedor.

1. Categoría Dimensión:

   • Ancho (width): Ajusta el ancho del elemento.
   • Altura (height): Ajusta la altura del elemento.
   • Máx. ancho (max-width): Define el ancho máximo del elemento.
   • Mín. altura (min-height): Define la altura mínima del elemento.
   • Margen
     • Superior (margin-top): Controla el espacio externo en la parte superior del elemento.
     • Inferior (margin-bottom): Controla el espacio externo en la parte inferior del elemento.
     • Derecho (margin-right): Controla el espacio externo en la parte derecha del elemento.
     • Izquierdo (margin-left): Controla el espacio externo en la parte izquierda del elemento.
   • Espaciado interno
     • Superior (padding-top): Define el espacio interno en la parte superior del elemento.
     • Inferior (padding-bottom): Define el espacio interno en la parte inferior del elemento.
     • Derecho (padding-right): Define el espacio interno en la parte derecha del elemento.
     • Izquierdo (padding-left): Define el espacio interno en la parte izquierda del elemento.

1. Categoría Tipografía:

   • Tipo de letra (font-family): Selecciona la fuente tipográfica del texto.
   • Tamaño de fuente (font-size): Ajusta el tamaño del texto.
   • Espesor (font-weight): Controla el grosor de la fuente (ligera, normal, negrita).
   • Espacio entre letras (letter-spacing): Ajusta el espacio entre los caracteres del texto.
   • Color (color): Define el color del texto.
   • Interlineado (line-height): Controla el espacio entre líneas de texto.
   • Alineación de texto (text-align): Ajusta la posición del texto (izquierda, centro, derecha, justificado).
   • Sombra de texto (text-shadow): Aplica sombras al texto, ajustando su dirección, difuminado y color.
     • Sombra horizontal
     • Sombra vertical
     • Desenfoque
     • Color

1. Categoría Decoraciones:

   • Color de fondo (background-color): Ajusta el color de fondo del elemento.
   • Borde redondeado (border-radius): Redondea las esquinas del elemento.
   • Bordes 
     • Grosor (border-width): Controla el grosor de los bordes del elemento.
     • Estilo (border-style): Define el estilo del borde (sólido, punteado, doble).
     • Color (border-color): Cambia el color de los bordes.
   • Sombra de caja (box-shadow): Aplica sombras alrededor del borde del elemento.
     • Sombra horizontal
     • Sombra vertical
     • Desenfoque
     • Extensión
     • Color
     • Tipo
   • Fondo
     • Imagen (background-image): Permite agregar una imagen de fondo.
     • Repetir (background-repeat): Controla si la imagen de fondo se repite o no.
     • Posición (background-position): Ajusta la posición de la imagen de fondo (centro, superior, inferior, etc.).
     • Plugin (background-attachment): Controla si el fondo se desplaza con el scroll o permanece fijo.
     • Tamaño (background-size): Ajusta el tamaño de la imagen de fondo (cubrir, contener, etc.).

1. Categoría Extras:

   • Opacidad (opacity): Ajusta la transparencia del elemento.
   • Transición
     • Propiedad (transition-property): Define las propiedades que cambiarán suavemente (color, tamaño, etc.).
     • Duración (transition-duration): Controla cuánto tiempo toma la transición.
     • Función de tiempo (transition-timing-function): Establece la curva de velocidad de la transición (lineal, ease-in, ease-out).
   • Transformación
     • Transformación tipo (translate, scale, etc.): Permite mover, escalar o rotar el elemento.
     • Transformación valor: Ajusta el valor de la transformación (p.ej., traducir en píxeles o escalar en porcentaje).

Sección de Atributos

Los atributos son características configurables que varían según el tipo de elemento seleccionado. Estas opciones permiten ajustar detalles funcionales, como etiquetas o propiedades específicas.

• Títulos alterno (para imágenes): Especifica el texto alternativo que se mostrará cuando la imagen no pueda cargarse.
• Título (para cualquier elemento): Permite establecer un título que aparece cuando el usuario coloca el cursor sobre el elemento.
• Enlace (para links): Establece la URL que se abrirá cuando se haga clic en el enlace.
• Abrir en (para links): Define si el enlace se abrirá en la misma pestaña o en una nueva ventana del navegador.
• Identificador (para cualquier elemento): Permite asignar un identificador único al elemento, útil para personalizar su estilo o comportamiento con código adicional.