El bloque Lista de precios te permite crear una lista de artículos visualmente atractiva, acompañada de descripciones y precios. Ya sea que quieras mostrar el menú de un restaurante, paquetes de servicios u ofertas de productos, este bloque te ofrece una forma flexible y elegante de presentar tus artículos.
Cada elemento de la lista puede incluir un título, una descripción, un precio, un descuento opcional, una imagen y un enlace. Puedes controlar el diseño general, la posición de las imágenes y la alineación de los precios, y elegir entre plantillas prediseñadas para empezar rápidamente.
Añadir el bloque Lista de precios a tus páginas
Sigue estos pasos para añadir un bloque de lista de precios a tu página 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 Lista de precios para abrir su configuración. La pestaña Contenido está organizada en tres secciones: Elementos de la lista de precios, Diseño y Área de imagen.
Artículos de la lista de precios:
- Lista de elementos: cada elemento de la lista de precios aparece como una fila que se puede arrastrar. Arrastra los elementos para reordenarlos. Pasa el cursor por encima de un elemento para mostrar los botones de duplicar y eliminar. Haz clic en el título de un elemento para expandir su configuración individual.
- Título: Introduzca el nombre del elemento tal y como aparecerá en la lista.
- Descripción: Introduzca una descripción del artículo. Admite formato de texto enriquecido básico, incluyendo negrita, cursiva, subrayado y enlaces.
- Precio: Introduzca el precio que se muestra para el artículo (por ejemplo, 20 $).
- ¿Ofrece descuento?: Active esta opción para mostrar el precio con descuento junto al precio original. Cuando esté activada, introduzca el precio real en 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 elemento, o introduce directamente la URL de la imagen en el campo «Image Src ».
- Texto alternativo: Introduzca un texto alternativo descriptivo para la imagen del artículo con fines de accesibilidad y SEO.
- Enlace: Introduzca una URL para que este elemento sea clicable. Funciona junto con la configuración del cuadro «Enlace completo» en la sección «Diseño».
- Añadir nuevo elemento: Haga clic en el botón situado en la parte inferior de la lista de elementos para añadir una nueva entrada a la lista de precios.
Disposición:
- Posición de la imagen: Establece dónde aparecerán las imágenes de los elementos en relación con el contenido del texto: arriba, a la izquierda, a la derecha o ninguna (no se muestra ninguna imagen).
- Posición del precio: elija dónde aparecerá el precio: a la derecha del encabezado (el precio aparecerá en la misma línea que el título, separado por la línea separadora del título y el precio) o debajo del encabezado y la descripción (el precio aparecerá después del texto de la descripción). Nota: esta opción no está disponible cuando la posición de la imagen está configurada en «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 a la derecha del encabezado: sólida, punteada, discontinua o ninguna.
- Alineación general: Establece la alineación horizontal de todos los elementos: izquierda, centro o derecha.
- Alineación vertical: Establece cómo se alinean verticalmente la imagen y el contenido de texto dentro de cada fila: arriba, centrado o abajo. Disponible cuando la posición de la imagen no está establecida en arriba.
- Cuadro de enlace completo: Actívelo para que se pueda hacer clic en toda la fila del elemento utilizando la URL de enlace establecida para cada elemento, en lugar de solo en el título del elemento.
Área de imagen:
- Forma: elige la forma que se aplicará a todas las imágenes de los artículos: predeterminada (cuadrada), redondeada (ligeramente redondeada), circular (totalmente circular) o personalizada (establece tu propio radio de borde por esquina).
- Ancho: Establezca el ancho del área de la imagen entre 1 y 300 píxeles.
- Radio del borde de la imagen: cuando la forma está configurada como Personalizada, establezca el radio de cada esquina individualmente (superior izquierda, superior derecha, inferior derecha e inferior izquierda).
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puede seleccionar entre plantillas de diseño prediseñadas para configurar rápidamente el aspecto de su lista de precios.
- Plantillas disponibles: Elija entre 3 plantillas: plantilla con diseño a la izquierda (imagen a la izquierda), plantilla con diseño a la derecha (imagen a la derecha) y plantilla sin imagen (solo texto y precio, sin imágenes). Al hacer clic en una plantilla, se aplican instantáneamente sus ajustes de diseño y espaciado.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes ajustar la tipografía, los colores, los bordes y el fondo de tu bloque Lista de precios.
Estilos:
- Tipografía del título: Establezca la familia, el tamaño, el grosor y el estilo de la fuente para todos los títulos de los elementos.
- Descripción Tipografía: Establece la tipografía para todo el texto de la descripción del artículo.
- Tipografía de precios: Establezca la tipografía para todo el texto de los precios de los artículos.
- Color del título: Establece el color del texto del título del elemento.
- Descripción Color: Establece el color del texto de la descripción del artículo.
- Color del precio: Establece el color del texto del precio del artículo.
- Color del descuento: Establece el color del precio original tachado que se muestra cuando se habilita un descuento en un artículo.
- Sombra del texto: añade un efecto de sombra al texto; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande o 2X Grande.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Lista de precios (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el bloque y los elementos circundantes en la página.
- Relleno: Ajusta el espacio interior dentro del bloque Lista de precios (Arriba, Derecha, Abajo, Izquierda). Esto crea un espacio entre el contenido de la lista y los bordes del bloque.
Frontera:
- Estilo del borde: Establece el estilo del borde del bloque: continuo, punteado o discontinuo.
- Color del borde: Establece el color del borde del bloque.
- Ancho del borde: Establece el grosor del borde por cada lado (superior, derecho, inferior, izquierdo).
- Radio del borde: Establece el redondeo de las esquinas del bloque.
Antecedentes:
- Color de fondo: Establece un color de fondo sólido para todo el bloque Lista de precios.
- Imagen de fondo: Sube o selecciona una imagen de fondo para el bloque, con opciones para la posición, el tamaño y el comportamiento de repetición.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque Lista de precios. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque Lista de precios en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque Lista de precios en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque Lista de precios en dispositivos móviles.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Lista de precios y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de lista de precios a tu página! Úsalo para crear listados atractivos e informativos que faciliten a los visitantes la navegación por tus ofertas, la comparación de precios y la realización de acciones. Experimenta con diferentes diseños, formas de imágenes y estilos de plantillas para crear una lista de precios que se adapte perfectamente a tu marca.