¡Bienvenido! En esta entrada, te enseñaremos cómo personalizar el estilo visual de los componentes del plugin Visual Inmueble. Es fundamental destacar que, dado que los componentes del plugin están construidos directamente con HTML y PHP, no se incluye un editor visual que facilite la edición de estilos como Elementor, divi o visual composer. Esta decisión se tomó para mantener el rendimiento del plugin y evitar que la página web se vuelva más lenta o pesada. Por lo tanto, necesitarás conocimientos básicos de HTML y CSS para realizar cualquier modificación en las plantillas.
Si también estás interesado en modificar el HTML del plugin y ajustar la estructura de los componentes, te invitamos a consultar la documentación del plugin disponible aquí. En caso de que no encuentres la información que necesitas, no dudes en dejarnos un comentario; estaremos encantados de desarrollar la documentación necesaria para resolver cualquier requerimiento.
Tabla de contenido
¿Dónde Editar el CSS?
Paso 1: Acceder al Editor de CSS
Primero, inicia sesión en tu página web y dirígete a la parte superior donde encontrarás la opción de “Personalizar” o “Customizar” la página web.
Paso 2: Abrir el Panel de Personalización
Al hacer clic en “Personalizar”, se abrirá un panel lateral con varias opciones relacionadas con la configuración de la página. Desplázate hacia abajo y busca la opción que dice “CSS personalizado” o “Custom CSS”. Una vez que ubiques esta sección, abre una nueva pestaña en tu navegador y dirígete al componente específico que deseas personalizar.
Personalizar los Resultados de Búsqueda
Paso 1: Inspeccionar el Componente
Para modificar un elemento específico en tu página web, haz clic derecho sobre el componente que deseas personalizar y selecciona la opción “Inspeccionar”. Esto abrirá un panel lateral que mostrará la estructura HTML de la página web. Al navegar por las etiquetas HTML en este panel, se presentará el código CSS correspondiente a cada una.
Paso 2: Modificar el CSS
A medida que explores el DOM de la página web, localiza la parte específica que deseas modificar. En el panel de CSS, puedes comenzar a introducir las reglas CSS necesarias para cambiar el estilo visual del componente.
Paso 3: Aplicar los Cambios en el CSS Personalizado
Una vez que tengas claro qué modificaciones deseas realizar, regresa a la pestaña donde tienes abierto el editor de “CSS personalizado”. Allí, utiliza las clases CSS correspondientes a los componentes que deseas modificar, e introduce las reglas CSS que hayas preparado.
Clases CSS Específicas del Plugin Visual Inmueble
El plugin Visual Inmueble utiliza clases CSS específicas para facilitar la personalización. Algunas de las clases que puedes utilizar son:
- “contenedor-visual-inmueble”
- “card-inmueble”
- “visualinmueble-detalle-inmueble”
Estas clases están diseñadas para que puedas anclar tu CSS personalizado y ajustar el diseño según tus necesidades.
Conclusión
En resumen, puedes personalizar completamente los estilos visuales de los componentes del plugin Visual Inmueble utilizando CSS. Esto te permitirá cambiar colores, tamaños, fuentes, espacios, y más, adaptando el diseño de tu página web inmobiliaria a tu gusto y necesidades.