Personalización de Sitio Web con Blocksy

Blocksy es el tema utilizado en Loftsite.pro, y es conocido por su gran flexibilidad y capacidad de personalización sin necesidad de escribir código. A continuación, te guiaré paso a paso sobre cómo ajustar los diferentes elementos de tu sitio web utilizando este potente tema, con detalles sobre cómo configurar los colores, tipografía, cabecera y pie de página, entre otros aspectos.

1. Configurar los Estilos Globales

Los Estilos Globales en Blocksy te permiten establecer la base de diseño de todo el sitio web, incluyendo colores, tipografía, márgenes, y más. Estos elementos globales son fundamentales porque aseguran coherencia visual en todas las páginas de tu sitio.

1.1. Acceso al personalizador de WordPress

1. Desde el panel de administración de WordPress, dirígete a Apariencia > Personalizar.
2. Esto abrirá el personalizador de temas, donde podrás ver una vista previa en tiempo real de los cambios que realices en el sitio.

1.2. Paleta de colores

El color es uno de los elementos más importantes en el diseño, ya que define el aspecto visual y transmite la identidad de tu marca.

1. En el personalizador, selecciona la opción Estilos Globales > Colores.
   • Blocksy te ofrece una paleta de colores predeterminada, pero puedes personalizarla completamente para que coincida con los colores de tu marca.
2. Selección de colores primarios y secundarios:
   • Elige un color primario que represente tu marca; este será el color más utilizado en botones, enlaces y elementos interactivos.
   • Define un color secundario para acentuar ciertos elementos, como banners o secciones especiales.
3. Colores del fondo y texto:
   • Ajusta el color de fondo de tu sitio, el cual puede ser blanco, gris, o un color personalizado según el estilo que desees transmitir.
   • El color del texto también debe seleccionarse cuidadosamente para garantizar la legibilidad y contraste adecuado en relación con el fondo.

Consejo: Usa una herramienta como Coolors.co para generar paletas de colores coherentes si no estás seguro de qué colores utilizar.

1.3. Tipografía

La tipografía que elijas afectará directamente la legibilidad y percepción de tu sitio web. Blocksy te permite seleccionar entre una amplia variedad de fuentes de Google Fonts.

1. Ve a Estilos Globales > Tipografía.

2. Elegir fuentes:

   • Puedes seleccionar fuentes diferentes para los encabezados y el cuerpo de texto. Para Loftsite, recomendamos seguir usando la fuente Space Grotesk por su modernidad y legibilidad.

3. Personalización de fuentes:

   • Ajusta el tamaño de las fuentes, espaciado entre líneas y peso de la fuente (por ejemplo, más gruesa o más delgada).
   • Blocksy también permite que definas diferentes tamaños de fuente para dispositivos móviles, lo cual es crucial para asegurar que tu sitio sea completamente responsive.

Consejo: Usa tipografías simples y claras para el texto del cuerpo, como Sans Serif, y guarda fuentes más estilizadas para los títulos o encabezados.

1.4. Diseño y márgenes

El diseño y los márgenes son esenciales para organizar el contenido de forma equilibrada y atractiva.

1. En Estilos Globales > Diseño, puedes ajustar el ancho de la página y configurar los márgenes entre las secciones para asegurarte de que el contenido no se vea amontonado.

2. Columnas y disposición:

   • Blocksy permite un diseño con múltiples columnas. Puedes ajustar cuántas columnas quieres usar y definir su ancho para garantizar que todo el contenido esté bien distribuido y sea fácil de leer.

Consejo: Para mejorar la navegabilidad, utiliza suficiente espacio en blanco entre elementos. Esto hará que el sitio web sea más agradable visualmente y mejorará la experiencia del usuario.

2. Configurar la Cabecera y el Pie de Página

La cabecera y el pie de página son dos de los elementos más visibles en tu sitio web. Blocksy ofrece herramientas de personalización avanzadas que te permiten ajustarlos según las necesidades de tu marca.

2.1. Cabecera

1. Desde el personalizador, selecciona la opción Cabecera.

2. Personalización de la cabecera:

   • Blocksy te permite arrastrar y soltar elementos dentro de la cabecera, como el logo, el menú de navegación y botones de llamada a la acción (CTA), como «Contáctanos» o «Comprar ahora».

3. Opciones de cabecera:

   • Cabecera Sticky: Si deseas que la cabecera sea fija al hacer scroll, selecciona la opción Sticky. Esto es útil si quieres mantener el menú de navegación siempre visible.
   • Cabecera Transparente: Ideal para páginas con imágenes de fondo grandes, como páginas de inicio.
   • Cabecera estándar: Esta opción te permitirá tener una cabecera clásica que desaparece al hacer scroll.

4. Estilo de la cabecera:

   • Ajusta el color de fondo, los bordes, y el espaciado de los elementos dentro de la cabecera para asegurar que el diseño sea coherente con el resto de tu sitio web.

2.2. Pie de página

El pie de página es crucial porque es la última parte que los visitantes verán antes de salir de tu página. Por eso, es importante que tenga información útil y bien estructurada.

1. En el personalizador, selecciona la opción Pie de página.

2. Diseño del pie de página:

   • Blocksy permite dividir el pie de página en varias columnas. Puedes tener entre una y cuatro columnas, donde podrás agregar información importante como enlaces rápidos, contacto, o íconos de redes sociales.

3. Añadir widgets:

   • Puedes insertar widgets como un formulario de suscripción, una galería de Instagram, o un mapa de la ubicación de tu negocio.

4. Estilo del pie de página:

   • Personaliza los colores, fuentes y márgenes de los widgets que insertes. Asegúrate de que los colores contrasten bien para mantener la legibilidad y la coherencia visual con el resto del sitio.

Consejo: Usa el pie de página para incluir enlaces útiles como políticas de privacidad, términos y condiciones, o enlaces rápidos a las principales secciones de tu sitio web.

3. Guardar y previsualizar los cambios

1. Una vez que hayas hecho todos los cambios en los Estilos Globales, la cabecera, y el pie de página, asegúrate de hacer clic en Publicar para que los cambios sean visibles en el sitio en vivo.

2. Puedes usar la función de Vista previa para ver cómo se verán tus cambios en diferentes dispositivos (ordenadores, tablets y móviles) antes de hacerlos definitivos.

Conclusión

Personalizar tu sitio web con Blocksy te brinda la flexibilidad necesaria para diseñar una página web profesional y atractiva sin necesidad de escribir código. Desde la configuración de colores y tipografías hasta la personalización de la cabecera y el pie de página, Blocksy ofrece herramientas intuitivas para que puedas controlar cada detalle del diseño y garantizar que tu sitio refleje la identidad de tu marca de manera coherente y visualmente impactante.