Cómo personalizar la imagen de tu sitio web mediante las plantillas de diseño o templates

Aprenderás a elegir una plantilla de diseño y personalizar colores, tipografías y estilos básicos para que tu sitio web refleje correctamente la identidad de tu marca.

Las plantillas de diseño te permiten definir la apariencia visual de tu sitio web sin conocimientos técnicos, logrando un diseño profesional alineado con tu rubro y tu logo.

1. Plantillas de diseño disponibles en Waclis

Waclis ofrece 15 templates de diseño prediseñados, pensados para distintos estilos de negocio y rubros. Cada plantilla define una combinación visual inicial de colores, tipografías y estructura general.

¿Cómo funciona la selección de una plantilla?

1. Ingresa al panel de administración de tu sitio.

2. Ve a Configuración > Editar sitio > Diseño.

3. Verás el listado de templates disponibles.

4. Al hacer clic sobre una plantilla:

   • Se abre una vista previa en imagen que muestra cómo se vería el sitio.

   • Debajo encontrarás el botón “Seleccionar”.

5. Al seleccionar una plantilla:

   • Se aplican los colores y estilos visuales que ves en la imagen.

   • No se aplican imágenes ni contenidos.

   • El contenido (textos, productos, banners e imágenes) debe ser cargado por el usuario.

Nombres de las 15 plantillas disponibles

• Camelot

• Valinor

• Utopía

• Liliput

• Zenda

• Tierra Media

• Macondo

• Fantasía

• Arlan

• Legolin

• Nuxvar

• Pran

• Saker

• Warren

• Carran

Aclaración importante: niveles de personalización del diseño en Waclis

En Waclis, la personalización del diseño de tu sitio web se organiza en tres niveles de dificultad, pensados para adaptarse a distintos perfiles de usuario y necesidades.

Este tutorial corresponde al nivel más básico, ideal para comenzar.

Nivel 1 · Personalización básica (este tutorial)

Este es el nivel más simple y accesible.

No requiere conocimientos técnicos ni experiencia en diseño.

Desde aquí puedes:

• Elegir una plantilla prediseñada

• Cambiar colores generales del sitio

• Seleccionar tipografías

• Ajustar estilos básicos

Es la opción recomendada si deseas un diseño profesional rápido, sin complicaciones.

Nivel 2 · Personalización intermedia con el Editor de bloques

Este nivel te permite un control mucho mayor sobre la estructura y el contenido visual del sitio.

A través del Editor de bloques, puedes:

• Crear y reorganizar secciones

• Agregar bloques de contenido personalizados

• Ajustar diseños por página

• Combinar distintos tipos de bloques visuales

👉 Para aprender este nivel, consulta el tutorial: Editor de bloques

Nivel 3 · Personalización avanzada con código

Este es el nivel más avanzado y ofrece control total sobre el diseño y el comportamiento del sitio web.

Está pensado para usuarios con conocimientos técnicos o desarrolladores.

Desde este nivel puedes:

• Modificar completamente el diseño con CSS personalizado

• Agregar funcionalidades avanzadas con JavaScript personalizado

• Ajustar estilos específicos que no están disponibles en los niveles anteriores

👉 Tutoriales relacionados:

• CSS personalizado

• JavaScript personalizado

  
  

Recomendación

Puedes comenzar con el nivel básico y avanzar progresivamente hacia los niveles intermedio o avanzado según crezcan las necesidades de tu negocio.

Los tres niveles son complementarios y pueden usarse en conjunto.

2. ¿Cómo personalizar el diseño básico de tu plantilla?

Una vez seleccionada la plantilla, puedes ajustarla según tu marca.

Ruta de acceso:

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

Desde este menú podrás modificar los aspectos visuales principales de tu sitio web, con una vista previa en tiempo real que se muestra a la derecha de la pantalla.

3. Tipografía (tipo de letra)

Puedes seleccionar la tipografía principal de tu sitio web. Actualmente tienes disponibles:

• Indie Flower
• Lato
• Montserrat
• Open Sans
• Poppins
• Potta One
• Raleway
• Roboto
• Shadows Into Light
• Yusei Magic

Recomendaciones:

• Usa tipografías simples y legibles.

• Evita fuentes muy decorativas para textos largos.

• Mantén coherencia con la identidad de tu marca.

Colores del sitio web

Personalizar los colores es clave para reflejar tu identidad visual.

Opciones disponibles:

1. Color primario

   Define el color principal del sitio. Se aplica a botones, barras y elementos destacados.

2. Color del encabezado (header)

   Modifica el color de la parte superior del sitio, donde suelen mostrarse el logo y el menú.

3. Color de bordes y hover

   Ajusta el color de líneas, bordes y el efecto visual al pasar el cursor sobre botones o enlaces.

4. Color de fuente

   Cambia el color general del texto. Debe contrastar correctamente con el fondo para facilitar la lectura.

5. Color del footer

   Define el fondo del pie de página del sitio.

6. Color de tipografía del footer

   Ajusta el color del texto del pie de página para que sea legible y armonioso.

Extraer colores desde tu logo

Puedes subir tu logo para que el sistema extraiga automáticamente una paleta de colores y la aplique a la plantilla.

Ventajas:

• Mantienes coherencia visual con tu marca.

• No necesitas conocimientos de diseño.

• Obtienes combinaciones de colores equilibradas.

Plantillas para la ficha de productos

Puedes elegir entre dos diseños distintos para la ficha de producto, lo que te permite adaptar la presentación según el tipo de producto o estilo visual que prefieras.

4. Guardar los cambios

Una vez finalizada la personalización, haz clic en “Guardar” para aplicar los cambios a tu sitio.