Personalizar el diseño de tu blog

En la barra lateral izquierda, haz clic en Diseño para empezar a personalizar el aspecto y la apariencia de tu blog.

En la barra lateral izquierda, haz clic en Diseño para empezar a personalizar el aspecto y la apariencia de tu blog.

Header

• Logo

  • Sube tu logo y establece una URL de destino para los clics en el logo.
  • Tamaño recomendado: 250×150 o 400×200

• Botón del encabezado

  • Elige entre dos tipos de botón:
    • Subscribe Form
      • "Muestra un formulario de captación de leads cuando se hace clic en el botón".
      • El contenido y la configuración del formulario se pueden configurar en la pestaña Form.
    • Ir a la URL introducida
      • Enlaza el botón a cualquier URL interna o externa.

• Barra de navegación

  • Navegación principal
    • Establece una barra de menú estática en la parte superior de tu blog.
  • Menú desplegable
    • Configura los elementos del menú desplegable que aparecen al hacer clic en un elemento del menú.

• Código personalizado

  • También puedes inyectar CSS o HTML personalizado para que todo coincida por completo con las pautas de marca de tu sitio web.

Banner

• Título y descripción del blog

  • Personaliza el texto del título y la descripción que se muestran en la página de inicio de tu blog.

• Color del texto

  • Establece el color del texto de tu banner.

• Diseño del banner

  • Elige la alineación del texto: Alineado a la izquierda o Centrado.

• Fondo (color o imagen)

  • Personaliza el fondo del banner:
    • Establece un color de fondo sólido
    • O sube una imagen de fondo
      • Tamaños recomendados: 1680×450 para escritorio / 390×300 para móvil

• Código personalizado

  • También puedes inyectar CSS o HTML personalizado para que todo coincida por completo con las pautas de marca de tu sitio web.

Layout

• inblog ofrece tres diseños de publicación predeterminados entre los que elegir.

• También puedes aplicar personalización visual adicional mediante código personalizado.

  • Código personalizado: usa HTML/CSS para diseños totalmente a medida.

Pie de página

• Añade la información de tu empresa en la sección del pie de página.

• Al igual que otras áreas, el pie de página también se puede personalizar con código.

Introducir y guardar código personalizado

Si los campos de código no están visibles o no se pueden editar, comprueba primero el plan de tu blog. La configuración de código personalizado está bloqueada en el plan Free. Si el código personalizado está disponible para tu blog, abre Diseño → Común y activa el interruptor de Encabezado personalizado, Código de banner personalizado o Código de pie de página personalizado para el área que deseas cambiar. Con el interruptor desactivado, la página muestra un mensaje Switch ON to insert custom ... code. en lugar del editor. Para el diseño de la lista de publicaciones, activa su configuración de código personalizado en la sección Layout.

Las áreas de Custom Code debajo de Header, Banner, Layout y Footer utilizan el mismo editor. Tiene una casilla de HTML arriba y una casilla de CSS de estilo abajo. Introduce las reglas CSS directamente o envuélvelas en etiquetas <style> como se muestra a continuación. Las reglas CSS nuevas o editadas se envuelven automáticamente en etiquetas <style> cuando aplicas el código.

<style>
  h2 {
    font-size: 20px;
  }
</style>

El CSS guardado sin cambios se conserva. Editar otros ajustes o únicamente el HTML no convierte el CSS existente. Para activar el CSS guardado anteriormente sin etiquetas, revísalo y envuélvelo explícitamente en etiquetas <style>. Comprueba el diseño en la vista previa antes de guardar. Las reglas CSS o bloques <style> incompletos, así como nombres preestablecidos como cover, generan un error en texto rojo. No añadas HTML ni scripts al campo CSS. Si un campo existente ya los contiene, puedes editar su contenido CSS dejando intactos el resto del código, los atributos de estilo y el orden.

Tu código se aplica al blog solo después de realizar ambos pasos:

1. Haz clic en Aplicar código. El código se valida y se refleja en la vista previa dentro del editor. Aún no se ha guardado.
2. Haz clic en Guardar, fijado en la parte superior del panel de configuración. Solo después de este paso el cambio se publica en tu blog.

Si haces clic en Aplicar código y luego sales de la pantalla de Diseño sin guardar, tus cambios se perderán. Aparecerá un cuadro de diálogo de confirmación cuando intentes salir con cambios sin guardar.

• El código personalizado se almacena por pantalla y por área. Las pestañas Común, Inicio / Categoría, Publicación, Autor y 404 en la parte superior de la pantalla de Diseño conservan cada una su propio código, y dentro de Común, el encabezado, el banner y el pie de página también son casillas independientes. Introduce tu código en la pestaña correspondiente a la pantalla que deseas modificar; por ejemplo, ajusta el espaciado del cuerpo de una publicación en la pestaña Publicación.
• Los selectores CSS amplios como a o button pueden afectar a todo tu blog. En ese caso, el editor muestra una advertencia; reduce el alcance del selector si deseas que la regla se aplique solo a un área específica.

Página de error 404

• Puedes configurar una página de error 404 personalizada para cuando un usuario llegue a una URL inexistente.

Compatibilidad con la vista previa móvil

• "El diseño de tu blog es totalmente adaptable". Previsualiza cómo se ve tu blog tanto en la vista de escritorio como en móvil directamente desde el editor.

Última actualización 2026-10-14