Cuando desea impulsar un producto, una sola carta llamativa supera la cuadrícula completa de una tienda. El Producto destacado widget adentro Complementos maestros para Elementor construye esa tarjeta: una imagen, un título, un precio con un precio original de tachado opcional, una calificación, una cinta de esquina y un botón de llamada a la acción, todo configurado desde el panel Elementor.
Usted escribe los detalles usted mismo, por lo que funciona en cualquier página con o sin WooCommerce. Eso lo hace útil para un bloque de promoción, una selección de afiliado, un anuncio de lanzamiento o una oferta que desee al frente y al centro. Esta guía cubre todos los entornos, desde los tres diseños de diseño hasta la cinta y los controles de calificación.
¿Prefieres verlo primero? Este breve tutorial recorre el widget del producto destacado de un extremo a otro:
Qué hace el widget de Producto destacado #
El widget genera una tarjeta de producto independiente. Le das una imagen, un nombre, una descripción o lista de características, un precio y un botón, y los presenta en uno de los tres diseños ya preparados. Una cinta y una calificación de estrellas se encuentran en la parte superior para llamar la atención.
Aquí no se extrae nada de su catálogo de WooCommerce. Ingresas el contenido a mano, lo que significa que puedes presentar un producto, un servicio, un paquete o una oferta externa sin configurar primero una tienda.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una imagen del producto y los detalles que desea mostrar (nombre, precio, enlace del botón).
Cómo agregar el widget de Producto destacado #
En el editor Elementor, abra el Elementos panel y búsqueda Producto destacado, o desplácese hasta la sección Addones maestros. Arrástrelo a su página y aparecerá una tarjeta de muestra de inmediato, para que la edite desde un punto de partida funcional en lugar de uno en blanco.
Complete los detalles del producto #
Abre el Contenido pestaña y el General la sección contiene los campos principales. Aquí es donde la tarjeta obtiene su contenido.
- Disposiciones: elija Diseño 1, Diseño 2 o Diseño 3. Más sobre estos a continuación.
- Imagen: elija la imagen del producto de la biblioteca multimedia.
- Título: el nombre del producto. Admite etiquetas dinámicas si desea extraerlas de un campo.
- Tipo de contenido: cambiar entre una llanura Descripción y a Lista de características.
- Precio y Precio Original: el precio actual más un precio original opcional que se muestra tachado, que se lee como descuento.
- Texto y enlace del botón: la etiqueta de llamada a la acción y dónde envía personas. El diseño 2 utiliza un icono de botón en lugar de texto.
Descripción o lista de características #
Conjunto Tipo de contenido a Lista y el cuadro de descripción se convierte en un repetidor. Elige un ícono de lista (una marca de verificación de forma predeterminada) y agrega tantas líneas de funciones como desee, cada una con un control duplicado y eliminado. Es una forma rápida de convertir una tarjeta en un mini argumento de venta con beneficios de viñetas.
Elija un diseño de diseño #
El widget viene con tres diseños y al cambiar entre ellos se reorganiza el mismo contenido sin que usted rehaga nada.
Diseño 2 apila la imagen en la parte superior, luego coloca una insignia de ícono junto al título y la descripción, con la calificación y el precio en una fila. El botón se muestra como un icono aquí.
Diseño 3 lidera con la imagen, luego centra el título, la descripción, la calificación, el precio y un botón de ancho completo debajo. Es el más limpio de los tres para una promoción sencilla.
El diseño 1 (el valor predeterminado) coloca la calificación y el título en la parte superior, el precio debajo, luego la imagen, la descripción y un botón de ancho completo en la parte inferior.
Agregue una cinta y una calificación #
Desplácese más allá del campo Enlace y llegará al Cinta y Calificación controles. La cinta es el banner de la esquina que dice “NUEVO” o “CALIENTE” y la calificación es la fila de estrellas.
- Cinta (Mostrar): enciende o apaga el banner de la esquina.
- Tipul de cinta: elija un estilo de cinta. Los estilos cambian la forma y la posición, de una esquina diagonal a una bandera o etiqueta de cotización.
- Texto de cinta e icono de cinta: la etiqueta (como NUEVO o CALIENTE) y un ícono opcional como el trofeo.
- Calificación: establezca el valor de la estrella, por ejemplo 4,5, y la tarjeta muestre estrellas parciales para que coincidan.
Estila la tarjeta #
El Estilo la pestaña se divide en secciones que coinciden con las partes de la tarjeta: Caja, Título, Contenido, Precio, Botón, Calificación, Cinta, y Patrones (una opción profesional).
- Caja: fondo, borde, radio y sombra para toda la carta.
- Titlu, Conținut, Preț: color, tipografía, alineación y espaciado para cada bloque de texto.
- Botón: colores, tipografía, relleno y estado de desplazamiento para el llamado a la acción.
- Calificación y Cinta: color estrella y color y estilo de texto de la cinta.
El resultado en la página #
Publica o previsualiza y la tarjeta se representa con todo en su lugar: la cinta en la esquina, la calificación, el precio con su original tachado, tu imagen y el botón vinculado donde la configuraste. A continuación se muestra el mismo widget en dos de sus diseños.
Casos de uso comunes #
- Bloques promocionales resaltar un producto en una página de destino.
- Selecciones de afiliados con calificación, precio y enlace de compra saliente.
- Lanzamiento o llamadas de acuerdo usando la cinta NUEVA o CALIENTE.
- Paquetes de servicio con el tipo de contenido de la Lista mostrando lo que se incluye.
- Artículo destacado junto a a tabla de precios o una sección de llamada a la acción.
Consejos para trabajar con el widget de Producto destacado #
- Establezca un precio original para mostrar un descuento. El número tachado junto al precio actual se lee como una oferta de un vistazo.
- Utilice el tipo de contenido de la Lista para obtener beneficios. Las líneas de funciones cortas se convierten mejor que un párrafo en una tarjeta promocional.
- Mantenga el texto de la cinta en una palabra. NUEVO, CALIENTE o EN VENTA coloque el banner de esquina sin envolverlo.
- Haga coincidir el diseño con el diseño que lo rodea. El diseño 3 se adapta a una rejilla limpia; El diseño 1 llena bien una barra lateral o una columna estrecha.
- Apunta el botón a algún lugar real. Configure el enlace a la caja, la página del producto o la URL del afiliado antes de publicar.
Preguntas frecuentes #
¿cuál es el widget de Producto destacado en los complementos maestros?
Es un widget de Elementor que crea una única tarjeta de producto con una imagen, título, precio, calificación, cinta y un botón de llamada a la acción. Ingresas los detalles a mano y eliges uno de los tres diseños de diseño. Funciona en cualquier página, con o sin WooCommerce.
¿el widget de Producto destacado necesita WooCommerce?
No. El widget no se extrae de un catálogo de WooCommerce. Usted mismo escribe el nombre del producto, el precio, la imagen y el enlace del botón, para poder presentar un producto, servicio u oferta externa en cualquier página sin ejecutar una tienda.
¿cuántos diseños tiene el widget Producto destacado?
Tres. El Diseño 1 lidera con la clasificación y el título encima de la imagen, el Diseño 2 coloca una insignia de ícono al lado del título con un botón de ícono y el Diseño 3 centra el contenido debajo de una imagen superior. Cambiar de diseño reorganiza el mismo contenido automáticamente.
¿Cómo muestro un precio de descuento en la tarjeta?
Complete los campos Precio y Precio original en la sección General. El precio actual se muestra en el color de acento y el precio original aparece junto a él con un tachado, lo que indica un descuento para los visitantes.
¿Puedo mostrar una lista de características en lugar de una descripción?
Sí. Establezca el tipo de contenido en la Lista en la sección General. El cuadro de descripción se convierte en un repetidor donde agrega líneas de funciones, cada una con un ícono de lista. Úselo para convertir la tarjeta en una lista de beneficios corta y escaneable.
Envolviendo #
El widget Producto destacado convierte algunos detalles en una tarjeta de producto Elementor pulida: elija un diseño, agregue una imagen y un precio, active una cinta y una calificación y vincule el botón. Como nada depende de WooCommerce, aparece en cualquier página como promoción o bloque de afiliados. Emparejarlo con el Widget de tabla de precios o un Llamado a la acción sección, navega por completo Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.
