Añadir HTML y CSS personalizados en Sitebuilder

Sitebuilder ofrece amplias posibilidades de personalización, pero a veces quieres más. Con HTML y CSS personalizados puedes añadir funciones únicas y perfeccionar tu diseño hasta el último detalle. Esta guía te muestra cómo añadir tu propio código de forma segura y eficaz.

Cuándo usar código personalizado

El código personalizado resulta útil en diversas situaciones:

  • Efectos visuales y animaciones únicos
  • Integrar widgets y herramientas externos
  • Hacer ajustes de estilo específicos
  • Añadir píxeles de seguimiento para marketing
  • Implementar animaciones avanzadas
  • Funciones que Sitebuilder no ofrece de serie
  • Integrar widgets de chat de terceros
  • Usar fuentes personalizadas

Añadir un bloque HTML

Colocar el elemento HTML

Añadir un bloque HTML es sencillo:

  1. Abre la página en el editor
  2. Haz clic en el icono del signo más para añadir un elemento
  3. Busca HTML o Código en la biblioteca de elementos
  4. Arrastra el bloque HTML a la posición que quieras de tu página

Introducir el código

Después de colocar el bloque:

  1. Haz clic en el bloque HTML para seleccionarlo
  2. Haz clic en Editar código para abrir el editor
  3. Pega o escribe tu código HTML en el campo de texto
  4. Haz clic en Guardar para aplicar los cambios
  5. Verás el resultado de inmediato en la vista previa

Ejemplos de uso de HTML

Puedes usar HTML con distintos fines. Por ejemplo, para insertar widgets externos, crear estructuras personalizadas con divs y clases o añadir elementos interactivos que Sitebuilder no ofrece de serie.

Añadir CSS

Método 1: CSS para todo el sitio

Añade CSS que funcione en todas las páginas:

  1. Ve a Ajustes en el panel
  2. Haz clic en Custom Code o Avanzado
  3. Busca la sección Custom CSS
  4. Añade tu código CSS
  5. Haz clic en Guardar para confirmar

Este CSS se carga en todas las páginas de tu sitio web.

Método 2: CSS para una página concreta

CSS que solo funciona en una página concreta:

  1. Abre la página que quieres modificar
  2. Ve a Ajustes de página
  3. Busca la sección Custom CSS o Head code
  4. Añade tu CSS con etiquetas style
  5. Guarda la página

Método 3: estilos en línea

Directamente en un elemento en HTML:

  1. Añade un bloque HTML
  2. Usa estilos en línea en tus elementos HTML
  3. Esto resulta útil para ajustes puntuales

Conceptos básicos de CSS

Entender los selectores

Los selectores CSS determinan a qué elementos das estilo:

Seleccionar por elemento: da estilo a todos los elementos de un tipo, como todos los encabezados h2 o todos los párrafos.

Seleccionar por clase: da estilo a los elementos con un nombre de clase específico. Las clases empiezan por un punto y puedes reutilizarlas.

Seleccionar por ID: da estilo a un elemento específico con un ID único. Los ID empiezan por una almohadilla y son únicos en cada página.

Propiedades CSS más usadas

Colores y fondos: ajusta los colores del texto, del fondo y de los bordes para personalizar tu diseño.

Espaciado y márgenes: determina el espacio dentro de los elementos (padding) y fuera de los elementos (margin) para lograr una buena maquetación.

Tipografía: ajusta el tamaño de la letra, el grosor, la altura de línea y la alineación para que el texto sea legible.

Propiedades de maquetación: usa display, flexbox y grid para maquetaciones y posicionamientos complejos.

Técnicas avanzadas de CSS

Crear efectos hover

Los efectos hover hacen que tu sitio web sea interactivo. Cuando los visitantes pasan el ratón por encima de un elemento, el estilo puede cambiar. Piensa en cambios de color, efectos de sombra o movimientos sutiles.

Añadir transiciones

Las transiciones hacen que los efectos hover sean fluidos. En lugar de cambios bruscos, obtienes animaciones suaves. Define la duración y el tipo de animación para lograr un resultado profesional.

Implementar animaciones

Con las animaciones keyframe puedes crear movimientos más complejos. Los elementos pueden aparecer con un fundido, deslizarse o girar. Empieza con algo sencillo y ve avanzando poco a poco.

Estilos adaptables

Adapta tus estilos a cada tamaño de pantalla con media queries. Define puntos de ruptura para móvil, tableta y ordenador. Asegúrate de que tus estilos personalizados se vean bien en todos los dispositivos.

Añadir JavaScript

Colocar scripts en el head

Para scripts que deben cargarse pronto:

  1. Ve a Ajustes y selecciona Custom Code
  2. Busca la sección Head
  3. Añade tu script
  4. Atención: esto puede afectar al tiempo de carga

Colocar scripts en el body

Para scripts que pueden cargarse más tarde:

  1. Ve a Custom Code
  2. Busca la sección Body o footer
  3. Añade tu script
  4. Esto suele ser mejor para el rendimiento

Scripts habituales

Entre los scripts más usados que puedes añadir están Google Tag Manager para analítica y marketing, Facebook Pixel para el seguimiento de anuncios y los widgets de chat de proveedores como Zendesk o Intercom.

Seguir las buenas prácticas

Organización del código

Mantén tu código organizado:

  • Usa comentarios claros para marcar las secciones
  • Agrupa el CSS relacionado
  • Usa nombres de clase descriptivos que expliquen su función
  • Haz copias de seguridad de tu código personalizado

Aspectos de rendimiento

Mantén tu sitio web rápido:

  • Reduce al mínimo la cantidad de código personalizado
  • Carga los scripts de forma asíncrona siempre que puedas
  • Comprueba el efecto en el tiempo de carga después de cada cambio
  • Elimina el código que no uses

Planificar el mantenimiento

Piensa en el futuro:

  • Documenta lo que hace tu código
  • Comprueba tras las actualizaciones de Sitebuilder si todo sigue funcionando
  • Haz copias de seguridad de tu código personalizado
  • Lleva un registro de cambios

Casos de uso habituales

Integrar fuentes personalizadas

Usa Google Fonts u otras fuentes web añadiendo la importación de la fuente a tu CSS y aplicándola después a tus elementos de texto.

Crear animaciones al desplazarse

Haz que los elementos se animen cuando entren en pantalla al desplazarse. Combina animaciones CSS con la detección de desplazamiento en JavaScript para lograr efectos modernos.

Dar estilo a botones personalizados

Crea botones llamativos con degradados, sombras y efectos hover. Adapta los colores a tu identidad corporativa para lograr un diseño coherente.

Añadir tooltips

Añade tooltips informativos que aparezcan al pasar el ratón. Son útiles para dar más explicaciones sobre temas o productos complejos.

Consejos para resolver problemas

El CSS no funciona

Si tu CSS no funciona, comprueba lo siguiente:

  • ¿Están bien escritos los selectores?
  • ¿Hay CSS del tema que entre en conflicto?
  • Prueba la declaración !important como último recurso
  • Comprueba si el CSS se carga realmente

Resolver errores de JavaScript

Si tienes problemas con JavaScript:

  • Consulta la consola del navegador con F12
  • Comprueba si se han cargado las bibliotecas necesarias
  • Prueba en modo incógnito sin extensiones
  • Comprueba el orden de carga de los scripts

Depurar problemas de maquetación

Si tienes problemas de maquetación:

  • Inspecciona con las DevTools del navegador
  • Comprueba los ajustes de box-sizing
  • Comprueba las propiedades del elemento padre
  • Busca márgenes que entren en conflicto

¿Necesitas ayuda?

Estamos a tu disposición. ¿Te has encontrado con algún problema o tienes preguntas? Nuestro equipo de soporte te ayuda encantado de forma personal. Envíanos un mensaje a través del sistema de tickets: solemos responder en unas horas y buscamos contigo la mejor solución.

¿Buscas una dirección de correo electrónico? Consulta nuestra oferta.