Si su sitio web ha sido diseñado y/o es administrado en WORDPRESS, puedes descargar nuestro plug-in para instalar el widget en tu página.
Este Widget te permite ver tu sitio web asi:
Puedes personalizarlo como quieras, con tus colores, fondos, formas, alineación, tipo de letra, 100% responsive.
Paso 1. Instalar el plug-in de Kunas para Wordpress
Instale el plug-in de Kunas desde wordpress
Paso 2. Configurar el plug-in
Kunas Property ID: Puede encontrar el código de su propiedad en el módulo General, parte inferior izquierda.
Nota: Si esta configurando una página con un motor de reserva de multipropiedades, pregunte su código a [email protected] asunto: Código multipropiedades
URL to Show results: El URL que has configurador en tu administrador de dominio, suele ser un subdominio (CNAME) tipo book.tuempresa.com Para más información sobre tu subdominio personalizado te recomendamos la guía: ¿Como personalizar tu subdominio?
Type property: Si tienes un motor de reserva para multipropiedades, seleccione "Multuple", de lo contrario, para UNA sola propiedad seleccione "Single"
Show destination / Accomodation use of list: Puedes seleccionar si deseas el campo Destination = CIUDAD o por el nombre de los Alojamientos
Nota: Para multipropiedad es usual configurar Use of list con "Destination" y para las propiedades únicas, con "Accomodation"
Widget Title: Colocar un título como nombre del widget
Hide children: Si deseas ocultar la cantidad de niños en la consulta de la reserva que realiza el huésped
Enable vertical view: La forma como deseas mostrar las propiedades y/o alojamientos
Default lenguage: Seleccione el idioma por defecto. Te recomendamos la guía ¿Cómo configurar distintos idiomas?
Default currency: Seleccione la moneda por defecto que deseas mostrar en tu motor de reserva
Luego puedes configurar los colores, bordes, recuadros del widget
Tambien puedes configurar un reel de propiedades o alojamientos
Paso 3. Configurar el CSS
La personalización de CSS (Cascading Style Sheets) se hace para controlar la apariencia visual de un sitio web o aplicación. Aquí te explico por qué y para qué se personaliza CSS:
Diseño a medida
Permite adaptar el estilo del sitio a una identidad de marca específica:
Colores corporativos
Tipografías personalizadas
Logos y estilos visuales propios
Mejorar la experiencia del usuario (UX)
Un buen diseño visual mejora:
Legibilidad
Navegación
Jerarquía visual
Interacción con botones y formularios
Adaptación a distintos dispositivos (responsive design)
CSS permite que un sitio se vea bien en:
Celulares
Tablets
Computadores
Optimizar el rendimiento visual
Se pueden ocultar elementos innecesarios, minimizar cargas innecesarias o mejorar la fluidez visual de animaciones y transiciones.
Superar limitaciones de plantillas prediseñadas
Aunque muchas plataformas como WordPress o Shopify tienen temas prediseñados, a menudo es necesario modificar detalles como:
Márgenes y espaciados
Tamaños de fuente
Comportamiento al hacer scroll
Orden o visibilidad de elementos
Ejemplos prácticos:
Cambiar el color de fondo de una sección.
Alinear un botón que sale descuadrado.
Aplicar un efecto de “hover” al pasar el mouse.
Ocultar elementos en dispositivos móviles.
/* Botón de Enviar / Submit Button */
.booking-form .submit-btn {
font-family: 'Poppins', sans-serif !important;
font-size: 18px !important;
font-weight: 600;
background-color: #233559; /* Azul oscuro / Dark Blue */
color: #233559 !important;
border-radius: 6px;
padding: 12px 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
text-decoration: none;
transition: background-color 0.3s, box-shadow 0.3s;
}
.booking-form .submit-btn:hover {
background-color: #05F283; /* Verde neón / Neon Green */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
/* Flechas del Slider / Slider Arrows */
.kunas-slider .splide__arrow svg {
fill: #05F2F2; /* Celeste neón / Neon Blue */
transition: fill 0.3s;
}
.kunas-slider .splide__arrow:hover svg {
fill: #05F283; /* Verde neón / Neon Green */
}
/* Estilos del Slide con Flexbox / Slide Styles with Flexbox */
.kunas-slider-slide {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 16px;
transition: transform 0.3s, box-shadow 0.3s;
}
.kunas-slider-slide:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Imagen en el Slider / Slider Image */
.kunas-slider-image img {
border-radius: 12px;
object-fit: cover;
width: 100%;
}
/* Título de la Descripción / Description Title */
.kunas-slider-description h3 {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000000 !important; /* Celeste neón / Neon Blue */
line-height: 1.2;
margin: 10px 0;
text-align: left;
}
/* Descripción del Slider / Slider Description */
.kunas-slider-description p {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000000 !important; /* Azul oscuro / Dark Blue */
line-height: 1.8;
text-align: left;
margin: 8px 0;
flex-grow: 1;
}
/* Contenedor del Botón de Reserva / Booking Button Container */
.kunas-slider-button {
display: flex;
justify-content: center;
margin-top: 10px;
}
/* Botón de Reserva / Booking Button */
.kunas-slider-button .book-btn {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #ffffff !important;
background-color: #233559 !important; /* Azul oscuro / Dark Blue */
padding: 8px 16px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.kunas-slider-button .book-btn:hover {
background-color: #05F283 !important; /* Verde neón / Neon Green */
color: #ffffff;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}