# ¿Cuáles son las plantillas disponibles de la intergración de nuby con WordPress?

Dale una identidad única y profesional a tu portal inmobiliario. En esta guía aprenderás a explorar, seleccionar y aplicar las plantillas de diseño disponibles en el ecosistema **nuby** para personalizar la apariencia de tus inmuebles en tu sitio web.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-" inline-copy-host="">---

</div>## 🧠 Conceptos Clave

Antes de iniciar, es importante entender dos términos que usarás frecuentemente al configurar tu página:

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-plantilla%3A-es-un-dis" inline-copy-host="">- **Plantilla:** Es un diseño predefinido que determina cómo se visualizan los inmuebles, fotos y descripciones en tu sitio web. Cada plantilla tiene una estructura y estilo visual único (colores, distribución, tipografía).
- **Componentes:** Son los bloques funcionales de **nuby** que instalas en tu sitio de WordPress (como el *Buscador de Inmuebles*, *Carrusel de Destacados* o *Listado de Propiedades*). Estos componentes se insertan usualmente mediante **shortcodes** (códigos cortos).
- **Identificador (ID):** Es el código técnico (ej: `template1`) que debes copiar y pegar en la configuración de tus componentes para "activar" el diseño que elegiste.

---

</div>## 🚀 Pasos para Elegir tu Diseño

Sigue este flujo de trabajo para seleccionar la mejor opción para tu marca:

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-explora%3A-haz-clic-en" inline-copy-host="">1. **Explora:** Haz clic en los enlaces de "Previsualización" de la tabla inferior para ver cómo luce cada diseño en tiempo real.
    
    
    - *Tip UX:* Abre los enlaces en una nueva pestaña y verifica cómo se ven tanto en computadora como en celular.
2. **Elige:** Selecciona la plantilla que mejor se adapte a los colores y estilo de tu logotipo.
3. **Copia el ID:** Una vez decidido, toma nota del **Identificador** (columna derecha). Lo necesitarás para la configuración.
4. **Implementa:** Usa ese identificador dentro de los parámetros de tus shortcodes o plugins de nuby en WordPress.

---

</div>## 📂 Catálogo de Plantillas Disponibles

A continuación encontrarás el listado completo de diseños. Utiliza el **Identificador** para configurar tus componentes web.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%23-vista-previa-del-d" inline-copy-host=""><div class="horizontal-scroll-wrapper"><table data-path-to-node="15"><thead><tr><td>**\#**</td><td>**Vista Previa del Diseño**</td><td>**Identificador (ID) (Copiar este código)**</td></tr></thead><tbody><tr><td><span data-path-to-node="15,1,0,0">**01**</span></td><td><span data-path-to-node="15,1,1,0">[🌐 Ver demostración (Plantilla 1)](https://plantilla-1.arrendasoft.co/)</span></td><td><span data-path-to-node="15,1,2,0">`template1`</span></td></tr><tr><td><span data-path-to-node="15,2,0,0">**02**</span></td><td><span data-path-to-node="15,2,1,0">[🌐 Ver demostración (Plantilla 2)](https://plantilla-2.arrendasoft.co/)</span></td><td><span data-path-to-node="15,2,2,0">`template2`</span></td></tr><tr><td><span data-path-to-node="15,3,0,0">**03**</span></td><td><span data-path-to-node="15,3,1,0">[🌐 Ver demostración (Plantilla 3)](https://plantilla-3.arrendasoft.co/)</span></td><td><span data-path-to-node="15,3,2,0">`template3`</span></td></tr><tr><td><span data-path-to-node="15,4,0,0">**04**</span></td><td><span data-path-to-node="15,4,1,0">[🌐 Ver demostración (Plantilla 4)](https://plantilla-4.arrendasoft.co/)</span></td><td><span data-path-to-node="15,4,2,0">`template4`</span></td></tr><tr><td><span data-path-to-node="15,5,0,0">**05**</span></td><td><span data-path-to-node="15,5,1,0">[🌐 Ver demostración (Plantilla 5)](https://plantilla-5.arrendasoft.co/)</span></td><td><span data-path-to-node="15,5,2,0">`template5`</span></td></tr><tr><td><span data-path-to-node="15,6,0,0">**06**</span></td><td><span data-path-to-node="15,6,1,0">[🌐 Ver demostración (Plantilla 6)](https://plantilla-6.arrendasoft.co/)</span></td><td><span data-path-to-node="15,6,2,0">`template6`</span></td></tr><tr><td><span data-path-to-node="15,7,0,0">**07**</span></td><td><span data-path-to-node="15,7,1,0">[🌐 Ver demostración (Plantilla 7)](https://plantilla-7.arrendasoft.co/)</span></td><td><span data-path-to-node="15,7,2,0">`template7`</span></td></tr><tr><td><span data-path-to-node="15,8,0,0">**08**</span></td><td><span data-path-to-node="15,8,1,0">[🌐 Ver demostración (Plantilla 8)](https://plantilla-8.arrendasoft.co/)</span></td><td><span data-path-to-node="15,8,2,0">`template8`</span></td></tr><tr><td><span data-path-to-node="15,9,0,0">**09**</span></td><td><span data-path-to-node="15,9,1,0">[🌐 Ver demostración (Plantilla 9)](https://plantilla-9.arrendasoft.co/)</span></td><td><span data-path-to-node="15,9,2,0">`template9`</span></td></tr><tr><td><span data-path-to-node="15,10,0,0">**10**</span></td><td><span data-path-to-node="15,10,1,0">[🌐 Ver demostración (Plantilla 10)](https://plantilla-10.arrendasoft.co/)</span></td><td><span data-path-to-node="15,10,2,0">`template10`</span></td></tr><tr><td><span data-path-to-node="15,11,0,0">**11**</span></td><td><span data-path-to-node="15,11,1,0">[🌐 Ver demostración (Plantilla 11)](https://plantilla-11.arrendasoft.co/)</span></td><td><span data-path-to-node="15,11,2,0">`template11`</span></td></tr><tr><td><span data-path-to-node="15,12,0,0">**12**</span></td><td><span data-path-to-node="15,12,1,0">[🌐 Ver demostración (Plantilla 12)](https://plantilla-12.arrendasoft.co/)</span></td><td><span data-path-to-node="15,12,2,0">`template12`</span></td></tr><tr><td><span data-path-to-node="15,13,0,0">**13**</span></td><td><span data-path-to-node="15,13,1,0">[🌐 Ver demostración (Plantilla 13)](https://plantilla-13.arrendasoft.co/)</span></td><td><span data-path-to-node="15,13,2,0">`template13`</span></td></tr><tr><td><span data-path-to-node="15,14,0,0">**14**</span></td><td><span data-path-to-node="15,14,1,0">[🌐 Ver demostración (Plantilla 14)](https://plantilla-14.arrendasoft.co/)</span></td><td><span data-path-to-node="15,14,2,0">`template14`</span></td></tr><tr><td><span data-path-to-node="15,15,0,0">**15**</span></td><td><span data-path-to-node="15,15,1,0">[🌐 Ver demostración (Plantilla 15)](https://plantilla-15.arrendasoft.co/)</span></td><td><span data-path-to-node="15,15,2,0">`template15`</span></td></tr><tr><td><span data-path-to-node="15,16,0,0">**16**</span></td><td><span data-path-to-node="15,16,1,0">[🌐 Ver demostración (Plantilla 16)](https://plantilla-16.arrendasoft.co/)</span></td><td><span data-path-to-node="15,16,2,0">`template16`</span></td></tr><tr><td><span data-path-to-node="15,17,0,0">**17**</span></td><td><span data-path-to-node="15,17,1,0">[🌐 Ver demostración (Plantilla 17)](https://plantilla-17.arrendasoft.co/)</span></td><td><span data-path-to-node="15,17,2,0">`template17`</span></td></tr><tr><td><span data-path-to-node="15,18,0,0">**18**</span></td><td><span data-path-to-node="15,18,1,0">[🌐 Ver demostración (Plantilla 18)](https://plantilla-18.arrendasoft.co/)</span></td><td><span data-path-to-node="15,18,2,0">`template18`</span></td></tr></tbody></table>

</div>---

</div>## 🛠️ ¿Cómo aplicar el Identificador?

Una vez tengas tu `templateX`, debes ir a tu panel de administración de WordPress donde tienes instalado el plugin de **nuby**.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-identifica-la-p%C3%A1gina" inline-copy-host="">1. Identifica la página o sección donde está insertado el **shortcode** o componente de inmuebles.
2. Busca o agrega el atributo de configuración llamado `template`
3. Escribe el identificador tal cual aparece en la tabla (ej. `template5`).
4. Guarda los cambios y actualiza tu página para ver el nuevo diseño aplicado.

</div><p class="callout info">Nota: Para detalles técnicos específicos sobre dónde pegar este código, consulta la guía [¿Cómo puedo agregar componentes de la integración de nuby en WordPress?](https://docs.nuby.ai/books/portal-web/page/guia-de-integracion-plugins-de-nuby-para-wordpress)</p>