El bloque de Lista de Precios te permite crear una lista visualmente atractiva de artículos acompañada de descripciones y precios. Ya sea que estés mostrando el menú de un restaurante, paquetes de servicios u ofertas de productos, este bloque te ofrece una forma flexible y pulida de presentar tus artículos.
Cada artículo de la lista puede incluir un título, descripción, precio, precio de oferta opcional, imagen y un enlace. Puedes controlar el diseño general, la posición de la imagen, la alineación del precio y elegir entre plantillas prediseñadas para empezar rápidamente.
Añadir el Bloque de Lista de Precios a tus Páginas
Sigue estos pasos para añadir un bloque de Lista de Precios a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Lista de Precios en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Lista de Precios para abrir su configuración. La pestaña Contenido está organizada en tres secciones: Artículos de la Lista de Precios, Diseño y Área de Imagen.
Artículos de la Lista de Precios:
- Lista de artículos: Cada artículo de la lista de precios aparece como una fila arrastrable. Arrastra los artículos para reordenarlos. Pasa el ratón sobre un artículo para revelar los botones de duplicar y eliminar. Haz clic en el título de un artículo para expandir su configuración individual.
- Título: Introduce el nombre del artículo tal como aparecerá en la lista.
- Descripción: Introduce una descripción para el artículo. Admite formato básico de texto enriquecido, incluyendo negrita, cursiva, subrayado y enlaces.
- Precio: Introduce el precio que se mostrará para el artículo (por ejemplo, 20 €).
- ¿Ofreciendo un descuento?: Activa esta opción para mostrar un precio con descuento junto al original. Cuando esté activada, introduce el campo Precio Real — este se convertirá en el precio original tachado, mientras que el campo Precio mostrará el importe con descuento.
- Imagen: Sube o selecciona una imagen para mostrar junto a este artículo, o introduce una URL de imagen directamente en el campo URL de Imagen.
- Texto alternativo: Introduce texto alternativo descriptivo para la imagen del artículo para accesibilidad y SEO.
- Enlace: Introduce una URL para hacer que este artículo sea enlazable. Funciona junto con la configuración de Caja de Enlace Completa en la sección Diseño.
- Añadir Nuevo Artículo: Haz clic en el botón en la parte inferior de la lista de artículos para añadir una nueva entrada de lista de precios.
Diseño:
- Posición de la Imagen: Establece dónde aparecen las imágenes de los artículos en relación con el contenido de texto: Arriba, Izquierda, Derecha o Ninguna (no se muestra imagen).
- Posición del Precio: Elige dónde aparece el precio: A la derecha del encabezado (el precio aparece en la misma línea que el título, separado por la línea separadora de título-precio) o Debajo del encabezado y la descripción (el precio aparece después del texto de la descripción). Nota: esta opción no está disponible cuando la Posición de la Imagen está configurada como Arriba.
- Separador de título y precio: Elija el estilo de la línea divisoria entre el título del artículo y el precio cuando la Posición del precio esté configurada en Derecha del encabezado: Sólida, Punteada, Discontinua o Ninguna.
- Alineación general: Establezca la alineación horizontal de todos los artículos: Izquierda, Centro o Derecha.
- Alineación vertical: Establezca cómo se alinean verticalmente la imagen y el contenido de texto dentro de cada fila: Arriba, Centro o Abajo. Disponible cuando la Posición de la imagen no está configurada en Arriba.
- Recuadro de enlace completo: Actívelo para que toda la fila del artículo sea enlazable utilizando la URL de enlace establecida para cada artículo, en lugar de solo el título del artículo.
Área de imagen:
- Forma: Elija la forma que se aplica a todas las imágenes de los artículos: Predeterminada (cuadrada), Redondeada (ligero redondeo), Círculo (completamente circular) o Personalizada (establezca su propio radio de borde por esquina).
- Ancho: Establezca el ancho del área de la imagen de 1 a 300 px.
- Radio del borde de la imagen: Cuando la Forma esté configurada en Personalizada, establezca el radio de la esquina individualmente para cada esquina (Superior izquierda, Superior derecha, Inferior derecha, Inferior izquierda).
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puede seleccionar entre plantillas de diseño prediseñadas para configurar rápidamente la apariencia de su Lista de precios.
- Plantillas disponibles: Elija entre 3 plantillas: Plantilla de diseño izquierdo (imagen a la izquierda), Plantilla de diseño derecho (imagen a la derecha) y Plantilla sin imagen (solo texto y precio, sin imágenes). Hacer clic en una plantilla aplica instantáneamente su diseño y configuración de espaciado.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puede ajustar la tipografía, los colores, los bordes y el fondo de su bloque de Lista de precios.
Estilos:
- Tipografía del título: Establezca la familia de fuentes, el tamaño, el peso y el estilo de todos los títulos de los artículos.
- Tipografía de la descripción: Establezca la tipografía de todo el texto de la descripción de los artículos.
- Tipografía del precio: Establezca la tipografía de todo el texto del precio de los artículos.
- Color del título: Establezca el color del texto del título del artículo.
- Color de la descripción: Establezca el color del texto de la descripción del artículo.
- Color del precio: Establezca el color del texto del precio del artículo.
- Color del descuento: Establezca el color del precio original tachado que se muestra cuando se habilita un descuento en un artículo.
- Sombra de Texto: Añade un efecto de sombra al texto; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Muy Grande o Extra Grande.
Espaciado:
- Margen: Controle el espaciado exterior alrededor de su bloque de Lista de precios (Arriba, Derecha, Abajo, Izquierda). Esto determina cuánto espacio aparece entre el bloque y los elementos circundantes de la página.
- Relleno: Ajuste el espaciado interior dentro de su bloque de Lista de precios (Arriba, Derecha, Abajo, Izquierda). Esto crea espacio entre el contenido de la lista y los bordes del bloque.
Borde:
- Estilo del borde: Establece el estilo del borde del bloque: Sólido, Punteado o Discontinuo.
- Color del borde: Establece el color del borde del bloque.
- Ancho del borde: Establece el grosor del borde por lado (Superior, Derecho, Inferior, Izquierdo).
- Radio del borde: Establezca el redondeo de las esquinas del bloque.
Fondo:
- Color de fondo: Establezca un color de fondo sólido para todo el bloque de Lista de precios.
- Imagen de fondo: Cargue o seleccione una imagen de fondo para el bloque, con opciones de posición, tamaño y comportamiento de repetición.
Atributos:
- ID de CSS: Muestra el identificador único autogenerado para tu bloque de Lista de Precios. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de Lista de Precios en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de Lista de Precios en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque de Lista de Precios en dispositivos móviles.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Lista de Precios y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Lista de Precios a tu página! Úsalo para crear listados atractivos e informativos que faciliten a los visitantes la consulta de tus ofertas, la comparación de precios y la toma de decisiones. Experimenta con diferentes diseños, formas de imágenes y estilos de plantillas para crear una lista de precios que se ajuste perfectamente a tu marca.