Widget Listado Asesores

👀 Vista del componente #

Este widget muestra un listado en tarjetas (cards) de los asesores disponibles en la inmobiliaria, con su foto, nombre y accesos directos para contactarlos por teléfono, correo o WhatsApp.

📸 Ejemplo visual:

---

📝 Descripción #

El widget Listado Asesores se utiliza para mostrar de forma organizada el equipo de asesores inmobiliarios. Cada tarjeta incluye:

• Foto del asesor.
• Nombre (con enlace a la página de detalle del asesor).
• Botones de contacto directo:
  • 📱 Teléfono
  • ✉️ Correo
  • 💬 WhatsApp (con mensaje predefinido).

Su diseño se adapta al grid de Bootstrap (col-md-3), permitiendo mostrar hasta 4 asesores por fila en pantallas medianas y grandes.

---

⚙️ ¿Cómo funciona? #

<div class="row">
	<?php foreach ($asesores as $asesor) { ?>
		<div class="col-md-3">
			<div class="card card-asesor">
				<a href="<?php echo visualinmu_route_detalleAsesor($asesor->slug()) ?>" target="_blank"><img
						class="card-img-top" src="<?php echo $asesor->fotoUrl(); ?>" class="rounded"
						alt="<?php echo $asesor->nombre(); ?>"></a>
				<div class="card-body">

					<h5 class="text-center text-capitalize"><a
							href="<?php echo visualinmu_route_detalleAsesor($asesor->slug()) ?>"
							target="_blank"><?php echo $asesor->nombre(); ?></a></h5>
					<div class="row">
						<div class="col-md-6">
							<a href="tel:<?php echo $asesor->telefono(); ?>" class="text-center text-capitalize"><i
									class="fas fa-mobile-alt"></i> Teléfono</a>
						</div>
						<div class="col-md-6">
							<a href="mailto:<?php echo $asesor->email(); ?>" class="text-center text-capitalize"><i
									class="fas fa-envelope"></i> Correo</a>
						</div>
						<div class="col-md-12 mt-3">
							<a href="https://wa.me/<?php echo $asesor->telefono(); ?>?text=Hola estoy interesado acerca de un inmueble"
								class="text-center text-capitalize btn btn-primary btn-block btn-whatsapp-homlity"><i class="fab fa-whatsapp"></i> Whatsapp</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	<?php } ?>
</div>
<style>
	.card-asesor {
		font-size: var(--e-global-typography-e92d54e-font-size);
		font-family: var(--e-global-typography-e92d54e-font-family), Sans-serif;
	}
	.btn-whatsapp-homlity{
		background-color: var(--e-global-color-primary);
		color: #fff !important;
		border:none;
	}
	.card-asesor a {
		color: var(--e-global-color-primary);
	}
</style>

1. Recorrido de asesores
   • Se recorre el array $asesores y por cada asesor se genera una tarjeta (card).
   <?php foreach ($asesores as $asesor) { ?> ... <?php } ?>
2. Imagen y enlace al detalle
   • La imagen del asesor ($asesor->fotoUrl()) funciona como enlace a su página de detalle (visualinmu_route_detalleAsesor).
   <a href="<?php echo visualinmu_route_detalleAsesor($asesor->slug()) ?>" target="_blank"> <img src="<?php echo $asesor->fotoUrl(); ?>"> </a>
3. Nombre del asesor
   • Se muestra centrado y con enlace hacia el detalle del asesor.
   <h5 class="text-center text-capitalize"> <a href="<?php echo visualinmu_route_detalleAsesor($asesor->slug()) ?>"> <?php echo $asesor->nombre(); ?> </a> </h5>
4. Opciones de contacto
   • Teléfono: genera un enlace con tel: para realizar llamadas directas desde dispositivos móviles.
   • Correo: genera un enlace con mailto: para enviar correos electrónicos.
   • WhatsApp: enlace a wa.me con un mensaje predefinido.
   <a href="tel:<?php echo $asesor->telefono(); ?>">Teléfono</a> <a href="mailto:<?php echo $asesor->email(); ?>">Correo</a> <a href="https://wa.me/<?php echo $asesor->telefono(); ?>?text=Hola estoy interesado acerca de un inmueble">Whatsapp</a>
5. Estilos
   • .card-asesor: define tipografía y tamaño de texto (heredado de variables globales de Elementor).
   • .btn-whatsapp-homlity: personaliza el botón de WhatsApp con el color primario del tema.
   • .card-asesor a: los enlaces toman el color primario definido globalmente.

---

🎨 Personalización disponible #

El widget permite ajustes según necesidades:

1. Cantidad de asesores por fila
   • Controlada por col-md-3 (4 por fila).
   • Puede cambiarse a col-md-4 (3 por fila) o col-md-6 (2 por fila).
2. Texto del mensaje de WhatsApp
   • Actualmente: “Hola estoy interesado acerca de un inmueble”.
   • Se puede personalizar directamente en el href.
   ?text=Hola, quisiera más información
3. Estilos visuales
   • Colores y tipografía están ligados a variables globales de Elementor (--e-global-color-primary, --e-global-typography...).
   • Se pueden sobrescribir en CSS si se requiere personalización independiente.
4. Imagen del asesor
   • Si no hay foto cargada, podría configurarse un avatar por defecto en fotoUrl().
5. Iconos de contacto
   • Actualmente usa Font Awesome (fas, fab).
   • Se pueden cambiar por otro set de íconos o personalizarlos en CSS.