C11. Builder - Tipos de bloques
Para añadir boque hacer clic en la zona central de la columna o clic en el botón de icono de engranaje opción del menú, "Añadir bloque".
Se pueden añadir múltiples bloques en cada columna.
a) Editor de texto
Dispone de una interfaz para dar formato, y estilos a los textos, múltiples tipos de encabezados, listas, colores de tipografías y textos enlazados.
Detalles interfaz de bloque tipo Texto.
| Elemento |
Funcionalidad |
|---|---|
| Selector de estilo (“Normal”) | Permite elegir el formato del texto (por ejemplo: Normal, Título, Subtítulo, etc.). Cambia el estilo del párrafo actual. A tener en cuenta que el título H1 solo se debe usar una vez por página. |
| B (Negrita) | Pone el texto seleccionado en negrita. |
| I (Cursiva) | Pone el texto seleccionado en cursiva. |
| U (Subrayado) | Subraya el texto seleccionado. |
| Tacha el texto seleccionado (útil para indicar información anulada o no válida). |
|
| Alineación (icono de líneas) | Cambia la alineación del texto (izquierda, centrado, derecha o justificado según la configuración del editor). |
| Enlace (icono de cadena) | Inserta o edita un enlace (URL) en el texto seleccionado. |
| Comillas (icono de “ ”) | Aplica formato de cita o bloque de cita al texto. |
| Texto/Color (icono “A”) | Permite cambiar el color del texto (y en algunos editores también el color de fondo/resaltado). |
| Lista numerada (icono 1,2,3) | Crea una lista ordenada (numerada). |
| Lista con viñetas (icono con puntos) | Crea una lista no ordenada (con viñetas). |
| Sangría izquierda (flecha hacia la izquierda) | Reduce la sangría del párrafo o del elemento de lista (mueve el texto hacia la izquierda). |
| Sangría derecha (flecha hacia la derecha) | Aumenta la sangría del párrafo o del elemento de lista (mueve el texto hacia la derecha). |
| Borrar formato (Tx) | Elimina estilos aplicados al texto seleccionado (negrita, cursiva, colores, etc.) y lo devuelve a formato normal. |
| Área de edición | Zona donde se escribe y edita el contenido del texto. |
| Mensaje “Los cambios se aplican automáticamente” | Indica que no hace falta guardar manualmente: los cambios se guardan solos. |
| Botón CERRAR | Cierra el editor y vuelve a la pantalla anterior sin necesidad de guardar (porque el guardado es automático). |
b) Imagen
Permite presentar una imagen, con campo para etiqueta alt, y campo para especificar url del enlace (opcional).
Interfaz de bloque de imagen
|
Elemento |
Funcionalidad |
|---|---|
| Vista previa de imagen (parte superior) | Muestra una previsualización de la imagen seleccionada o cargada para confirmar que es la correcta antes de guardar/cerrar. |
| Fondo cuadriculado (transparencia) | Indica zonas transparentes de la imagen (típico patrón de transparencia). |
| Campo SRC | Contiene la ruta o enlace de origen de la imagen. Es el archivo que se mostrará en el contenido. |
| Botón EXPLORAR |
Abre el explorador/gestor de archivos o biblioteca del sistema para seleccionar o cargar una imagen y rellenar automáticamente el campo SRC. |
| Campo ALT | Permite definir el texto alternativo de la imagen (descripción). Se usa para accesibilidad (lectores de pantalla) y cuando la imagen no carga. También ayuda al SEO. |
| Campo URL | Permite añadir un enlace asociado a la imagen. En algunos sistemas, al hacer clic en la imagen, el usuario será dirigido a esta URL. |
| Mensaje “Los cambios se aplican automáticamente” | Indica que cualquier cambio se guarda automáticamente sin necesidad de un botón “Guardar”. |
| Botón CERRAR | Cierra la ventana de edición y vuelve a la pantalla anterior. Los cambios quedan guardados automáticamente. |
Interfaz Explorador de imágenes
c) Lista de iconos
Permite crear una lista de enlaces con iconos.
La url del icono se puede dejar en blanco para desactivar. Se puede usar una url o emplear un nombre de icono de fontAwesome.
d) Producto
Permite presentar productos de la tienda. en modo tarjeta.
La interfaz para añadir producto es de tipo buscador. Los cambios se guardan automáticamente.
e) Categoría
Permite mostrar una categoría. Para seleccionar la categoría hacer clic en buscar para acceder al buscador.
Dispone de dos modos de presentar la categoría. Mostrar árbol completo y/o mostrar imágenes.
f) Editor de código HTML
Permite crear contenido con lenguajes de programación para diseño web. Los estilos han de aplicarse en línea.
g) Slider
Permite crear un slider.
Dispone de una interfaz de ajustes de opciones de modos de comportamiento del carrusel, velocidad de transición de diapositivas, dirección, e intervalo entre otros.
h) Marcas
Permite mostrar marcas en modo lista o slider. Permite añadir una marca de las creadas en la sección de Marcas de la aplicación.
Interfaz de ajustes abierta.
