Cómo usar la pestaña Estilos en tu página web de Houzz
A medida que trabajas en tu página web de Houzz, hay muchas funciones importantes de la barra de herramientas que debes conocer. Este artículo explicará la pestaña Estilos, que se encuentra en la barra de herramientas de la izquierda. Para obtener una visión más general de las barras de herramientas del editor de páginas web, lee Cómo usar el menú del editor de páginas web de Houzz.
La pestaña Estilos es tu centro principal para controlar la apariencia visual de varios elementos de tu página. Los cambios que realices aquí se aplicarán de forma universal en toda la página web.
Para acceder, busca y haz clic en la pestaña Estilos en el lado izquierdo de la pantalla.
Panel de colores
El panel de colores es donde defines y controlas los colores de marca de tu página web. Al igual que otros ajustes en el panel de estilos, los cambios realizados aquí son universales. Esto significa que al actualizar un color, se actualizarán automáticamente todos los elementos de tu página que usen ese color específico.
Para ajustar los colores globales de tu página web, haz clic en Colores en la pestaña Estilos. En el panel de colores, verás Colores del sitio.
Aquí encontrarás seis muestras de color que establecen la identidad cromática de tu página web.
Cambiar muestra de color
Para cambiar cualquiera de las muestras de color, haz clic en una muestra para abrir el selector de color.
Aquí puedes:
- Ajustar el tono: mueve el control deslizante inferior para cambiar el color en sí.
- Ajustar la saturación: arrastra el selector de color a la izquierda o derecha para controlar la intensidad del color.
- Ajustar el brillo: arrastra el selector hacia arriba o hacia abajo dentro del panel principal de color para hacerlo más claro u oscuro.
- Usar un código hex: si tienes un color de marca específico, puedes pegar su código hex en el cuadro correspondiente.
Cuando termines de hacer cambios, simplemente haz clic fuera del selector de color para guardar. Verás de inmediato que cualquier sección o bloque de tu página web que usaba el color actualizado reflejará la nueva elección.
Uso de preajustes de color
Los preajustes de color son combinaciones predefinidas de colores que se aplican a varios elementos de tu página web, como texto, botones, fondos y más. Ayudan a mantener la coherencia del diseño y permiten realizar cambios globales de estilo de forma rápida. Estos preajustes pueden aplicarse fácilmente a secciones, tarjetas, encabezado y pie de página.
Tu página web incluye tres preajustes de color. Todos estos preajustes son completamente personalizables.
Editar preajuste de color
Para modificar un preajuste de color existente, haz clic en el preajuste que deseas editar para abrir la ventana de preajuste de color. Aparecerá una nueva pantalla.
En la columna izquierda, verás varias categorías de elementos. En la columna central, encontrarás las muestras de color asignadas a cada elemento dentro de esa categoría. En la columna derecha, una vista previa te mostrará cómo se ven esas combinaciones de colores juntas.
Haz clic en una muestra de color para abrir el selector de color.
En la parte inferior del selector de color, verás las muestras de color principales de tu sitio. Si una está resaltada en negro, significa que el color de este elemento está vinculado a ese color global del sitio. Los cambios en la muestra de color principal del sitio actualizarán automáticamente el color de este elemento en el preajuste.
Desde el selector de color, también puedes seleccionar un color manualmente. Esto hace que la elección del color sea independiente y ya no esté conectada a los colores globales de tu sitio.
Aplicar preajustes de color
Los preajustes de color se pueden aplicar a las secciones, tarjetas, encabezado y pie de página de tu sitio web.
Sección
Para hacerlo en una sección, haz clic en la sección deseada en la vista previa del editor de sitios. En el lado derecho, junto al botón Editar sección, verás un pequeño ícono de pincel.
Haz clic en el ícono del pincel y selecciona uno de tus preajustes de color. Los colores de la sección se actualizarán al instante en la vista previa.
Tarjeta
Puede que notes que una tarjeta dentro de una sección no siempre cambia de color cuando aplicas un preajuste a la sección. Esto se debe a que las tarjetas pueden tener sus propios preajustes de color independientes.
Si quieres ajustar el preajuste de color de una tarjeta, selecciona la tarjeta que deseas modificar y luego haz clic en el ícono de pincel junto al ícono de lápiz.
Elige un preajuste de color para aplicarlo.
Por favor, ten en cuenta: las tarjetas también tienen una cuarta opción, que les permite heredar el preajuste de color aplicado a la sección en la que se encuentran. Esto asegura consistencia visual si así se desea.
Encabezado y pie de página
El encabezado y el pie de página también pueden tener preajustes de color, al igual que cualquier otra sección.
Para actualizar, haz clic en el encabezado o pie de página, luego haz clic en el ícono de pincel junto al botón de editar. Elige un preajuste de color para aplicarlo.
Panel de tipografía
El panel de tipografía es donde defines y controlas todas las fuentes de tu sitio web.
Para ajustar tus fuentes, haz clic en Tipografía dentro de la pestaña Estilos. Verás una lista con todos los ajustes de fuentes. Puedes desplazarte hacia abajo para ver la lista completa.
Seleccionar preajustes de tipografía
Si quieres seleccionar rápidamente un nuevo conjunto de opciones de tipografía para tu sitio, puedes hacerlo mediante el botón de preajustes de tipografía.
Ten en cuenta: Elegir un preajuste de tipografía reemplazará cualquier elección de fuente que hayas hecho previamente.
Selecciona un preajuste diferente para aplicarlo a todo el sitio. Asegúrate de hacer clic en Guardar. Todas las opciones de fuente se actualizarán para reflejar el nuevo preajuste.
Ajuste de estilos de texto
Puedes ajustar la tipografía de los elementos de texto en todo el sitio, como encabezados, párrafos y botones.
Para cambiar una fuente, haz clic en la fuente que deseas modificar. Luego, haz clic en el menú desplegable Familia de fuentes para elegir una nueva fuente.
Nuestro creador de sitios utiliza la biblioteca completa de Google Fonts, que contiene más de mil fuentes únicas. Desplázate por la lista de fuentes populares o haz clic en más fuentes para buscar en toda la biblioteca.
También puedes ajustar el tamaño, el grosor, el espaciado entre letras y la altura de línea para cada configuración de fuente. Por ejemplo, aumentar el tamaño de los encabezados los hace resaltar, y ajustar el espaciado de los párrafos puede mejorar la legibilidad.
Configuraciones adicionales de estilo
Más allá de los colores y la tipografía, el panel de estilos ofrece otras configuraciones para ayudarte a personalizar aún más el aspecto de tu sitio web. Estas incluyen opciones para la navegación, el pie de página, botones y enlaces, íconos, divisores, formularios, reseñas y proyectos. Aunque no detallaremos cada configuración aquí, lee Cómo editar la página de proyectos para aprender más sobre las configuraciones de visualización de tus proyectos.
Más recursos de servicios para páginas web:
¿Cómo puedo editar mi página web de Houzz?
Cómo usar la pestaña de páginas para tu web de Houzz
Cómo usar la pestaña de Configuración para tu página web de Houzz
Cómo editar la página de proyectos en tu página web de Houzz
Cómo configurar un dominio y publicar tu página web de Houzz
Cómo editar el formulario de contacto en tu página web de Houzz