En WordPress, dentro del menú de «Apariencia» en el panel de administración, hay varias opciones para modificar la apariencia del sitio web. Estas opciones incluyen:
Menú de Apariencia
- Temas
Permite seleccionar, instalar y personalizar temas (plantillas) que determinan la apariencia general del sitio web. Desde aquí, puedes activar nuevos temas, previsualizar cómo se verían, y acceder a la opción de «Personalizar» para ajustes más específicos. - Personalizar
Ofrece una amplia gama de opciones para personalizar el tema activo. Esto incluye cambiar el logotipo del sitio, colores, tipografía, menús, widgets, configuración de la página de inicio, y opciones adicionales específicas del tema. - Widgets
Permite añadir y gestionar widgets, que son pequeños bloques de contenido que se pueden colocar en diferentes áreas del tema, como barras laterales o el pie de página. Los widgets pueden incluir menús de navegación, cuadros de búsqueda, listas de categorías, entre otros.
- Menús
Facilita la creación y gestión de menús de navegación. Puedes añadir páginas, enlaces personalizados, categorías, y más, organizándolos en el orden que prefieras. También puedes asignar estos menús a distintas ubicaciones que soporte tu tema, como el menú principal o el del pie de página. - Fondos y Cabeceras
Dependiendo del tema, puedes encontrar opciones para personalizar el fondo del sitio (color o imagen) y cambiar la imagen de la cabecera. - Editor de Archivos del Tema
Permite acceder directamente al código de los archivos del tema (PHP, CSS, JS) para realizar modificaciones avanzadas. Se debe tener cuidado al usar esta opción, ya que cualquier cambio incorrecto puede romper el sitio. - Instalación de Plugins de Personalización
Algunos temas o configuraciones permiten añadir plugins específicos que agregan más opciones de personalización a través de este menú.
Estas opciones te permiten personalizar la estética y funcionalidad de tu sitio web de WordPress para que se ajuste mejor a tus necesidades y preferencias.
Personalizar
Opciones del Menú «Personalizar» en el Tema Astra
Global
Colores: Ajusta los colores principales del sitio, incluidos el color del texto, los enlaces, y el fondo. También puedes establecer diferentes colores para encabezados, pies de página, botones, etc.
Tipografía: Cambia las fuentes globales del sitio, incluyendo tipos de letra, tamaños, pesos y estilos para los encabezados, cuerpo de texto, menús, y otros elementos.
Contenedor: Ajusta el ancho del contenedor principal, el layout de la página (ancho completo, en caja, con barras laterales, etc.), y la alineación del contenido.
Encabezado (Maquetador de cabezeras | Header Builder):
General: Cambia el diseño y estructura del encabezado utilizando un constructor de arrastrar y soltar (drag and drop).
Identidad del Sitio: Modifica el título del sitio, el eslogan, el logotipo, y el ícono del sitio (favicon).
Transparente: Configura una versión transparente del encabezado que se superpone a la imagen de fondo o al contenido de la página.
Menu Principal: Ajusta la ubicación, el diseño, el espaciado y los colores del menú principal de navegación.
Encabezado Móvil: Personaliza cómo se verá el encabezado en dispositivos móviles.
Elementos del Encabezado: Añade o edita elementos en el encabezado, como iconos de redes sociales, botones, textos personalizados, menús secundarios, etc.
Maquetador Pie de Página (Footer Builder)
General: Modifica la estructura del pie de página utilizando un constructor de arrastrar y soltar.
Widgets de Pie de Página: Añade widgets a las áreas del pie de página.
Barra Inferior del Pie de Página (Footer Bar): Personaliza la barra inferior del pie de página, incluyendo texto de copyright, enlaces adicionales, y alineación.
Blog
Entradas de Blog (Blog/Archive): Configura el diseño de las páginas de archivo de blog, el número de columnas, los metadatos mostrados (autor, fecha, etiquetas), el estilo de la imagen destacada, y más.
Entrada Individual (Single Post): Personaliza cómo se verá una entrada individual del blog, incluyendo el diseño de la imagen destacada, la posición del autor y metadatos, la navegación de publicaciones, y opciones de estilo de la barra lateral.
PX EM
Unidades absolutas
PX: los píxeles (px) se consideran unidades absolutas, aunque son relativas al DPI y la resolución del dispositivo de visualización. Pero en el dispositivo en sí, la unidad PX es fija y no cambia en función de ningún otro elemento. El uso de PX puede ser problemático para los sitios web responsivos, pero son útiles para mantener un tamaño consistente para algunos elementos. Si tienes elementos a los que no se les debe cambiar el tamaño, entonces usar PX es una buena opción.
Unidades relativas
EM: relativo al elemento padre
REM: relativo al elemento raíz (etiqueta HTML y en su defecto el tamaño que tenga configurado el navegador)
%: relativo al elemento padre
VW: relativo al ancho de la ventana gráfica
VH: relativo a la altura de la ventana gráfica
A diferencia de PX, las unidades relativas como %, EM y REM se adaptan mejor al diseño responsivo y también ayudan a cumplir con los estándares de accesibilidad. Las unidades relativas escalan mejor en diferentes dispositivos porque pueden escalar hacia arriba y hacia abajo según el tamaño de otro elemento.
Sidebar (Barra Lateral):
Configuración Global de la Barra Lateral: Define la ubicación de la barra lateral (derecha, izquierda, o sin barra lateral) para el sitio en general, y configura la barra lateral para tipos de páginas específicos (entradas de blog, páginas, archivos).
Widgets:
Añade, elimina y organiza widgets en las áreas de widgets disponibles, como la barra lateral y el pie de página.
Menús
Crea, edita y asigna menús de navegación a diferentes ubicaciones de tu sitio, como el menú principal, el menú de pie de página, y el menú móvil.
Configuración de la Página de Inicio:
Elige si deseas mostrar las últimas entradas de blog o una página estática como página de inicio.
CSS Adicional
Añade CSS personalizado para realizar modificaciones específicas en el diseño del sitio sin editar los archivos del tema.
Para reducir el ancho de las publicaciones en WordPress:
.single-post .site-content,
.page .site-content {
max-width: 1000px; /* Ajusta el ancho máximo de las publicaciones */
margin: 0 auto; /* Centra el contenido */
}Opciones de WooCommerce
(si WooCommerce está instalado):
Configura la apariencia y el diseño de las páginas de la tienda, como la página de productos, la página de carrito, y la página de pago. Personaliza la visualización de productos, los estilos de botones, el layout de la página de tienda, y más.
Configuración de Integración de Plugins:
Ajustes adicionales para plugins específicos, como LifterLMS o LearnDash (si están instalados), que permiten personalizar páginas de cursos, lecciones, y otros contenidos relacionados.
Performance (Rendimiento):
Activa o desactiva opciones de rendimiento como la optimización de archivos CSS/JS, carga diferida de imágenes, y otras configuraciones que pueden ayudar a mejorar la velocidad del sitio.
Botones de Redes Sociales:
Configura y personaliza los botones de redes sociales, añadiendo enlaces a tus perfiles y ajustando el diseño y estilo de los iconos.
404 Page:
Personaliza el diseño y contenido de la página de error 404.
Configuraciones de WooCommerce (si WooCommerce está instalado):
Modifica la apariencia y el diseño de las páginas de la tienda, como la página de productos, la página de carrito y la página de pago.