Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Personalización del Diseño del Sitio Web | Crear un Sitio Web Completo Desde Cero
Crear un Sitio Web sin Código con WordPress

bookPersonalización del Diseño del Sitio Web

Después de instalar tu tema e importar una plantilla inicial, es momento de personalizar tu sitio web para que refleje tu marca y contenido.

Uso del Personalizador de WordPress
expand arrow

El Personalizador de WordPress permite editar el diseño de tu sitio en tiempo real y ver los cambios de inmediato.

Para acceder:

  • Ve a Apariencia → Personalizar desde el panel de WordPress;
  • El Personalizador se abrirá con una vista previa en vivo de tu sitio a la derecha y un menú de configuraciones a la izquierda.

Las opciones disponibles en el Personalizador varían según el tema activo. Al usar Astra con una Plantilla Inicial, normalmente están disponibles las siguientes opciones:

  • Configuraciones globales: ajustar fuentes, colores y ancho del contenedor;
  • Constructor de encabezado y pie de página: editar las áreas superior e inferior de tu sitio web;
  • Menús y widgets: gestionar la navegación y los elementos de la barra lateral.

No es necesario explorar todas las configuraciones ahora—solo concéntrate en lo básico.

Ajuste de Elementos Principales
expand arrow

Estos son los elementos principales a revisar al personalizar el diseño de tu sitio web:

1. Colores y Tipografía

  • Ve a Global → Colores para cambiar los colores de fondo, texto y enlaces;
  • Ve a Global → Tipografía para establecer fuentes y tamaños para los encabezados y el texto principal.

2. Encabezado y Pie de Página

  • Haz clic en Constructor de Encabezado o Constructor de Pie de Página en el Personalizador;
  • Verás un diseño visual donde puedes hacer clic en diferentes secciones (logo, menú, iconos sociales, etc.) para editarlas;
  • También puedes eliminar o reorganizar elementos arrastrándolos a nuevas posiciones.
Agregar un Logo y Favicon
expand arrow

Si no subiste tu logo al importar la plantilla inicial, puedes hacerlo ahora.

Para actualizar tu logo:

  1. Ve a Constructor de Encabezado → Título del Sitio y Logo;
  2. Haz clic en Seleccionar Logo y sube tu imagen (preferiblemente PNG con fondo transparente).

Para agregar un favicon (icono de pestaña del navegador):

  1. Ve a Configuraciones Generales → Identidad del Sitio;
  2. En Icono del Sitio, sube una imagen cuadrada (se recomienda 512x512 píxeles).
Guardar tus Cambios
expand arrow

Una vez que estés satisfecho con tus actualizaciones, haz clic en el botón Publicar en la parte superior del Personalizador para guardar todos los cambios.

question mark

¿Qué es un favicon en WordPress?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 7. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 3.45

bookPersonalización del Diseño del Sitio Web

Desliza para mostrar el menú

Después de instalar tu tema e importar una plantilla inicial, es momento de personalizar tu sitio web para que refleje tu marca y contenido.

Uso del Personalizador de WordPress
expand arrow

El Personalizador de WordPress permite editar el diseño de tu sitio en tiempo real y ver los cambios de inmediato.

Para acceder:

  • Ve a Apariencia → Personalizar desde el panel de WordPress;
  • El Personalizador se abrirá con una vista previa en vivo de tu sitio a la derecha y un menú de configuraciones a la izquierda.

Las opciones disponibles en el Personalizador varían según el tema activo. Al usar Astra con una Plantilla Inicial, normalmente están disponibles las siguientes opciones:

  • Configuraciones globales: ajustar fuentes, colores y ancho del contenedor;
  • Constructor de encabezado y pie de página: editar las áreas superior e inferior de tu sitio web;
  • Menús y widgets: gestionar la navegación y los elementos de la barra lateral.

No es necesario explorar todas las configuraciones ahora—solo concéntrate en lo básico.

Ajuste de Elementos Principales
expand arrow

Estos son los elementos principales a revisar al personalizar el diseño de tu sitio web:

1. Colores y Tipografía

  • Ve a Global → Colores para cambiar los colores de fondo, texto y enlaces;
  • Ve a Global → Tipografía para establecer fuentes y tamaños para los encabezados y el texto principal.

2. Encabezado y Pie de Página

  • Haz clic en Constructor de Encabezado o Constructor de Pie de Página en el Personalizador;
  • Verás un diseño visual donde puedes hacer clic en diferentes secciones (logo, menú, iconos sociales, etc.) para editarlas;
  • También puedes eliminar o reorganizar elementos arrastrándolos a nuevas posiciones.
Agregar un Logo y Favicon
expand arrow

Si no subiste tu logo al importar la plantilla inicial, puedes hacerlo ahora.

Para actualizar tu logo:

  1. Ve a Constructor de Encabezado → Título del Sitio y Logo;
  2. Haz clic en Seleccionar Logo y sube tu imagen (preferiblemente PNG con fondo transparente).

Para agregar un favicon (icono de pestaña del navegador):

  1. Ve a Configuraciones Generales → Identidad del Sitio;
  2. En Icono del Sitio, sube una imagen cuadrada (se recomienda 512x512 píxeles).
Guardar tus Cambios
expand arrow

Una vez que estés satisfecho con tus actualizaciones, haz clic en el botón Publicar en la parte superior del Personalizador para guardar todos los cambios.

question mark

¿Qué es un favicon en WordPress?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 7. Capítulo 2
some-alt