Las plantillas de diseño de Waclis te permiten definir la apariencia general de tu página web y adaptarla a la identidad visual de tu negocio sin necesidad de conocimientos de programación.

Puedes comenzar seleccionando uno de los diseños disponibles y luego personalizar aspectos como:

• Tipografía.

• Color principal.

• Color del header.

• Color de bordes y efectos hover.

• Color general de los textos.

• Color del footer.

• Color de los textos del footer.

• Colores relacionados con tu logo.

• Diseño de la ficha de producto.

Estas configuraciones funcionan como la base visual de tu página web. Si necesitas realizar modificaciones más específicas, Waclis también dispone del Editor de bloques, Editor CSS y Editor JS, que se explican en tutoriales independientes.

¿Dónde se configura el diseño de la plantilla?

1. Ingresa a tu panel de autogestión de Waclis.

2. Dirígete a:

Configuración > Editar sitio > Diseño > Plantillas

1. Desde allí puedes seleccionar una plantilla de diseño.

2. Para modificar sus colores, tipografías y otras características visuales, ingresa en:

Personaliza tu plantilla

Se abrirá el panel de Diseño personalizado.

1. Elegir una plantilla de diseño

Waclis dispone de diferentes plantillas prediseñadas que sirven como punto de partida para crear la apariencia de tu página web.

Cada plantilla posee una combinación inicial de:

• Tipografías.

• Colores.

• Distribución de elementos.

• Header.

• Footer.

• Fichas de productos.

• Estilos generales.

Al seleccionar una plantilla, estás eligiendo la estructura visual inicial del sitio.

La plantilla no reemplaza tus productos, imágenes, banners ni contenidos. Esos contenidos continúan siendo administrados desde las diferentes secciones de Waclis.

Antes de cambiar de plantilla

Si tu página web ya posee personalizaciones adicionales, especialmente mediante CSS, revisa posteriormente el resultado.

Un código CSS personalizado puede modificar o reemplazar algunos de los estilos definidos por la plantilla.

2. Abrir “Personaliza tu plantilla”

Una vez elegida la plantilla, ingresa en:

Configuración > Editar sitio > Diseño > Plantillas > Personaliza tu plantilla

Dentro de esta pantalla encontrarás los controles principales para adaptar la identidad visual del sitio.

No necesitas modificar código para utilizar estas opciones.

3. Seleccionar la tipografía

En el campo Tipografía puedes elegir el tipo de letra principal que utilizará tu página web.

La tipografía influye directamente en la personalidad visual del sitio y en la facilidad con la que los visitantes pueden leer el contenido.

Entre las tipografías disponibles pueden encontrarse opciones como:

• Indie Flower.

• Lato.

• Montserrat.

• Open Sans.

• Poppins.

• Potta One.

• Raleway.

• Roboto.

• Shadows Into Light.

• Yusei Magic.

La disponibilidad puede modificarse a medida que Waclis incorpore nuevas opciones.

¿Qué tipografía conviene utilizar?

Para textos generales suele ser recomendable utilizar tipografías claras y fáciles de leer, como:

• Roboto.

• Open Sans.

• Lato.

• Montserrat.

• Poppins.

• Raleway.

Las tipografías más decorativas pueden utilizarse cuando son coherentes con la identidad de la marca, pero debes comprobar que continúen siendo legibles.

Recomendación

Después de cambiar la tipografía, revisa distintas partes de tu página web:

• Menú.

• Títulos.

• Textos.

• Listados de productos.

• Fichas de productos.

• Botones.

• Footer.

Una tipografía puede verse correctamente en un título pero resultar difícil de leer en textos más largos.

4. Personalizar los colores de la plantilla

Debajo de la tipografía encontrarás diferentes campos de color.

Cada uno controla una parte diferente del diseño.

Los campos utilizan códigos de color web, por ejemplo:

• #000000 → negro.

• #FFFFFF → blanco.

• #929292 → gris.

• #EC1895 → rosa.

Según el selector disponible, puedes elegir visualmente el color o introducir directamente su código hexadecimal.

Si tu marca ya posee un manual de identidad visual, lo ideal es utilizar los códigos exactos establecidos en ese manual.

Color primario

El Color primario representa uno de los colores principales de identidad de la plantilla.

Puede intervenir en diferentes elementos destacados del sitio, según el diseño seleccionado.

Por ejemplo:

• Botones.

• Elementos activos.

• Detalles visuales.

• Enlaces.

• Indicadores.

• Elementos destacados de la interfaz.

La utilización exacta puede variar entre una plantilla y otra.

Recomendación

Utiliza normalmente uno de los colores principales de tu marca.

Debe diferenciarse correctamente del fondo para que los elementos importantes sean fáciles de identificar.

5. Color del header

El header es la parte superior de la página web.

Generalmente contiene elementos como:

• Logo.

• Menú principal.

• Buscador.

• Accesos de usuario.

• Carrito.

• Otros elementos de navegación, dependiendo de la plantilla.

La opción Color del header permite definir el color utilizado como fondo de esta zona.

Por ejemplo:

#FFFFFF

genera un fondo blanco.

Ten en cuenta el logo

Si utilizas un logo oscuro, suele funcionar bien sobre un fondo claro.

Si utilizas un logo blanco o muy claro, posiblemente necesites un fondo más oscuro para que pueda distinguirse correctamente.

Después de cambiar este color, revisa también la legibilidad del menú y de los demás elementos del encabezado.

6. Color de bordes y hovers

La opción Color de bordes y hovers se utiliza para diferentes elementos secundarios de la plantilla.

Puede intervenir en:

• Líneas.

• Bordes.

• Separadores.

• Controles.

• Botones.

• Enlaces.

• Elementos que cambian cuando posicionas el cursor sobre ellos.

¿Qué significa “hover”?

El hover es el cambio visual que se produce al colocar el cursor del mouse sobre determinados elementos interactivos.

Por ejemplo, un botón puede cambiar de color cuando el visitante coloca el cursor encima.

Esto ayuda al usuario a reconocer que puede interactuar con ese elemento.

En dispositivos móviles este comportamiento puede no apreciarse de la misma manera, ya que no existe un cursor permanente.

7. Color de fuente

La opción Color de fuente establece el color general utilizado por distintos textos de la página web.

Por ejemplo:

#929292

produce un color gris.

Es importante mantener buen contraste

El texto debe poder distinguirse claramente del fondo.

Evita combinaciones como:

• Gris muy claro sobre blanco.

• Amarillo claro sobre blanco.

• Negro sobre fondos muy oscuros.

• Colores similares entre texto y fondo.

La estética es importante, pero la legibilidad debe mantenerse siempre.

8. Color del footer

El footer es el pie de página que se encuentra en la parte inferior del sitio.

Según la plantilla y la configuración de tu página web, puede contener:

• Datos del negocio.

• Información de contacto.

• Menús.

• Redes sociales.

• Métodos de pago.

• Información legal.

• Enlaces adicionales.

La opción Color del footer controla el color de fondo de esta sección.

Por ejemplo:

#000000

establece un footer negro.

9. Color de fuente del footer

Esta configuración controla el color de los textos que aparecen dentro del footer.

Debe seleccionarse teniendo en cuenta el Color del footer configurado anteriormente.

Por ejemplo:

Footer oscuro

Puedes utilizar una tipografía:

• Blanca.

• Gris clara.

Footer claro

Puedes utilizar:

• Negro.

• Gris oscuro.

• Otro color que mantenga suficiente contraste.

No analices ambos colores por separado: deben funcionar correctamente como una combinación.

10. Extraer colores de tu logo

En la parte derecha de Diseño personalizado encontrarás la herramienta:

Extraer color de su logo

Esta función está pensada para ayudarte a encontrar colores relacionados con la identidad visual de tu marca.

¿Cómo utilizarla?

1. Haz clic sobre el área destinada a la imagen.

2. Selecciona el archivo de tu logo.

3. Waclis analizará los colores presentes en la imagen.

4. Utiliza los colores obtenidos como referencia para configurar la paleta de tu plantilla.

5. Revisa los colores establecidos antes de guardar.

Esta herramienta resulta especialmente útil si tienes un logo pero no conoces los códigos exactos de sus colores.

Para obtener mejores resultados

Utiliza preferentemente:

• El logo original de tu empresa.

• Una imagen de buena calidad.

• Una versión que conserve los colores originales.

• Un archivo sin filtros o modificaciones de color.

Si tu empresa posee un manual de marca con códigos oficiales, utiliza esos valores en lugar de depender únicamente de la extracción automática.

11. Diseño de ficha de producto

En la parte inferior de esta pantalla encontrarás:

Diseño de ficha de producto

Actualmente puedes seleccionar entre las alternativas disponibles, como:

• Plantilla 1

• Plantilla 2

Cada opción posee una miniatura que permite identificar cómo se organizará visualmente la información de los productos.

La ficha de producto es la página que ve el visitante cuando ingresa a un producto determinado.

Dentro de ella pueden aparecer elementos como:

• Imagen principal.

• Galería de imágenes.

• Nombre.

• Precio.

• Código.

• Stock.

• Variantes.

• Cantidades.

• Botón principal.

• Descripción.

• Productos relacionados.

• Otros datos configurados para el producto.

Plantilla 1 o Plantilla 2: ¿cuál elegir?

No existe una opción correcta para todos los sitios.

Selecciona la alternativa que mejor presente los productos de tu catálogo.

Observa las miniaturas disponibles para comparar principalmente:

• Distribución de la galería.

• Posición de la información.

• Jerarquía visual.

• Espacio destinado a las imágenes.

• Ubicación de las acciones principales.

• Forma general de recorrer la ficha.

Haz clic en el selector circular correspondiente a la plantilla que deseas utilizar.

La selección determina la estructura general que utilizarán las fichas de producto de tu página web.

12. Guardar los cambios

Cuando termines de personalizar el diseño:

1. Revisa la tipografía.

2. Comprueba los colores.

3. Verifica el contraste entre textos y fondos.

4. Confirma el diseño seleccionado para la ficha de producto.

5. Haz clic en Guardar.

Los cambios quedarán aplicados a la plantilla de tu página web.

13. Revisar el resultado en tu página web

Después de guardar, abre tu página web pública y revisa el resultado.

No compruebes únicamente la página de inicio.

Revisa también:

• Página de inicio.

• Menú.

• Categorías.

• Listado de productos.

• Ficha de producto.

• Botones.

• Footer.

• Formularios.

• Carrito, si corresponde.

También es recomendable comprobar el sitio en diferentes tamaños de pantalla:

• Computadora.

• Tablet.

• Teléfono móvil.

De esta forma podrás detectar problemas de contraste, tamaño de textos o combinaciones de colores.

¿Qué sucede si utilizas CSS personalizado?

Los valores definidos desde Personaliza tu plantilla establecen los estilos generales proporcionados por Waclis.

Sin embargo, si posteriormente utilizas CSS personalizado, ese código puede modificar algunos de estos estilos.

Por ejemplo, mediante CSS es posible cambiar específicamente:

• Colores.

• Tipografías.

• Tamaños.

• Espaciados.

• Bordes.

• Botones.

• Header.

• Footer.

• Comportamiento responsive.

• Otros elementos específicos.

Si realizas un cambio desde Personaliza tu plantilla y no observas el resultado esperado, comprueba si existe CSS personalizado modificando ese mismo elemento.

La utilización del Editor CSS se explica en un tutorial independiente.

¿Y el Editor JS?

En la parte superior de esta misma pantalla también encontrarás el botón Editor JS.

Esta herramienta se utiliza para incorporar JavaScript, scripts e integraciones que necesitan ejecutarse dentro de la página web.

No forma parte de la personalización básica explicada en este tutorial y su utilización requiere mayores conocimientos técnicos.

Consulta el tutorial específico de JavaScript personalizado antes de utilizarlo.

Recomendaciones para obtener un diseño profesional

Antes de comenzar, intenta definir una pequeña identidad visual para tu negocio:

• Un color principal.

• Uno o dos colores secundarios.

• Un color de fondo.

• Un color para textos.

• Una tipografía principal.

Evita utilizar una gran cantidad de colores diferentes solamente porque están disponibles.

Una página web suele resultar más profesional cuando mantiene coherencia en:

• Colores.

• Tipografías.

• Botones.

• Espacios.

• Imágenes.

• Jerarquías visuales.

Si ya cuentas con una identidad de marca, intenta reproducirla en Waclis utilizando los colores exactos de tu logo o manual de marca.

Diferentes niveles de personalización en Waclis

Puedes personalizar progresivamente tu página web utilizando diferentes herramientas.

Personalización básica

Plantillas + Personaliza tu plantilla

Ideal para:

• Seleccionar estilos generales.

• Elegir tipografía.

• Configurar colores.

• Elegir el diseño de la ficha de producto.

No requiere conocimientos técnicos.

Personalización mediante Editor de bloques

Permite construir y modificar secciones de contenido utilizando componentes visuales.

Es recomendable cuando necesitas modificar la composición de diferentes páginas sin programar todo desde cero.

Personalización avanzada

Mediante:

• Editor CSS

• Editor JS

Está destinada a personalizaciones que exceden las opciones visuales disponibles en el panel.

Estas herramientas poseen sus propios tutoriales y no se desarrollan en esta guía.

¿Necesitas más ayuda?

Si realizaste cambios y no obtienes el resultado esperado, comprueba primero:

1. Que hayas hecho clic en Guardar.

2. Que estés revisando la página web actualizada.

3. Que los colores tengan suficiente contraste.

4. Que no exista CSS personalizado reemplazando el estilo.

5. Que estés visualizando el resultado tanto en escritorio como en dispositivos móviles.

Si todavía necesitas asistencia, puedes comunicarte con el equipo de soporte de Waclis.