En este manual te explicaremos cómo personalizar la página de detalle de inmueble en el sitio web. Este práctico código permitirá cambiar toda la distribución de las secciones, iconos y textos dando mayor libertad a la hora de personalizar la página web, proporcionando a tus usuarios una rápida acción para encontrar el inmueble de sus sueños. A continuación, te explicaré los pasos para personalizar este widget:
- Crea una carpeta llamada “visualinmueble” en la raíz del tema que estás utilizando en tu página web.
- Dentro de la carpeta “visualinmueble”, crea otra carpeta llamada “templates”.
- Dentro de la carpeta “templates”, crea una nueva carpeta llamada “inmuebles”.
- Ahora, dentro de la carpeta “inmuebles”, crea un archivo llamado “detalleInmueble.php”. Este archivo reemplazará al archivo predeterminado del plugin que muestra el listado de barrios destacados.
- Abre el archivo “search-inmuebles.php” y encontrarás el siguiente código:
<div class="container visualinmueble-detalle-inmueble">
<div class="row">
<?php if (isset($inmueble)) : ?>
<div class="col-xl-9 col-lg-9 col-md-8">
<div class="row">
<div class="col-md-12 breadcrumbSection">
<!-- BREADCRUMB -->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/breadcrumb.php', ['page' => $page, 'nombre' => $inmueble->nombre()]); ?>
</div>
<div class="col-md-12">
<!-- TITULO -->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/titulo.php', ['codigo' => $inmueble->codigo(), 'barrio' => $inmueble->barrio()->nombre(), 'ciudad' => $inmueble->ciudad()->nombre(), 'departamento' => $inmueble->departamento()->nombre(), 'nombre' => $inmueble->nombre()]); ?>
<div class="tagsSection">
<!-- TAGS -->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/tags.php', ['tags' => $inmueble->tags()]); ?>
</div> <!-- TIPO DE GESTIÓN -->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/gestion.php', [
'gestion' => $inmueble->gestion(),
'valores' => [
'canon' => $inmueble->valorCanon(true),
'venta' => $inmueble->valorVenta(true),
'administracion_format' => $inmueble->valorAdmin(true),
'administracion' => $inmueble->valorAdmin(true),
],
'precioConAdmin' => $inmueble->precioConAdministracion(),
]); ?>
</div>
</div>
<div class="row">
<!-- SLIDERS-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/sliders.php', ['nombre' => $inmueble->nombre(), 'slider' => ['fotos' => $inmueble->imagenes(), 's360' => $inmueble->imagenes360(), 'video' => $inmueble->video(), 'video360' => $inmueble->video360()]]); ?>
</div>
<div class="row">
<div class="col-md-12">
<visualinmueble-narracion></visualinmueble-narracion>
<script type="text/javascript">
window.VISUALINMUEBLE_INMUEBLE = <?php echo $inmuebleJson; ?>;
</script>
<!-- REDES SOCIALES -->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/redesSociales.php', ['nombre' => $inmueble->nombre(), 'codigo' => $inmueble->codigo(), 'descripcion' => $inmueble->descripcion(), 'route' => visualinmu_route_detalleInmueble($inmueble->slug())]); ?>
</div>
<div class="col-md-12 sectionDescripcion">
<!-- DESCRIPCIÓN-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/descripcion.php', ['descripcion' => $inmueble->descripcion()]); ?>
</div>
<div class="col-md-12 sectionMapa">
<!-- UBICACIÓN-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/ubicacion.php', ['nombre' => $inmueble->nombre(), 'mapa' => ['latitud' => $inmueble->latitud(), 'longitud' => $inmueble->longitud(), 'propiedadesSimilares' => $similaresJson]]); ?>
</div>
<div class="col-md-12 sectionCarcateristicasPrincipales">
<!-- CARACTERÍSTICAS PRINCIPALES-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/caracteristicasPrincipales.php', ['nombre' => $inmueble->nombre(), 'caracteristicas' => ['areaLote' => $inmueble->areaLote(), 'areaConstruida' => $inmueble->areaConstruida(), 'banos' => $inmueble->nBaños(), 'alcobas' => $inmueble->nAlcobas(), 'garajes' => $inmueble->nGarajes(), 'estrato' => $inmueble->estrato(), 'edad' => $inmueble->edad()]]); ?>
</div>
<div class="col-md-12 sectionCaracaresticas">
<!-- CARACTERÍSTICAS-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/caracteristicas.php', ['nombre' => $inmueble->nombre(), 'inmueble' => $inmueble]); ?>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-4 barra-lateral-visual-inmueble">
<div class="row">
<div class="col-md-12">
<div class="card sectionPerfil" style="width: 100%;">
<div class="card-body">
<?php if ($inmueble->asesor() != null) : ?>
<!-- PERFIL ASESOR-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/perfilAsesor.php', ['asesor' => $inmueble->asesor(), 'nombre' => $inmueble->nombre(), 'codigo' => $inmueble->codigo(), 'slug' => $inmueble->slug(), 'route' => visualinmu_route_detalleInmueble($inmueble->slug())]); ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="col-md-12 d-block">
<!-- FORMULARIO DE LEADS-->
<?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/formularios-leads.php', ['codigo' => $inmueble->codigo()]); ?>
</div>
<div class="col-md-12">
<?php if (visualinmu_is_sidebar_active("lateral_pagina_detalle_visual_inmueble")): ?>
<?php dynamic_sidebar('lateral_pagina_detalle_visual_inmueble'); ?>
<?php endif; ?>
</div>
</div>
</div>
<?php if (isset($similares) && count($similares) > 0) : ?>
<div class="col-xl-12 col-md-12 section-propiedades-similares">
<!-- PROPIEDADES SIMILARES -->
<div class="row">
<div class="col-md-12">
<h2 class="visualinmueble-titulos-propiedades-similares h3">Inmuebles <span
style="text-transform: lowercase;">similares al <?php echo $inmueble->nombre(); ?></span></h2>
</div>
<?php if (count($similares) > 0) {
/** CARDS **/
visualinmu_load_template("inmuebles/componentes/search/cards.php", ["inmuebles" => $similares]);
} else { ?>
<label> Sin Resultados </label>
<?php } ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
Ahora, si deseas configurar los estilos visuales del detalle del inmueble desde cualquier apartado de edición de css podrás implementar los estilos con css a las clases que por defecto trae las etiquetas del detalle del inmueble o podrá implementar nuevas clases personalizadas según tus necesidades editanto el css.
