Cómo usar el Personalizador de temas de WordPress como un profesional (Guía definitiva)

¿Sabía que WordPress viene con un personalizador de temas incorporado que le permite realizar fácilmente cambios en el diseño de su sitio web en tiempo real?.


Si bien cada tema tiene cierto nivel de soporte para las opciones de personalización predeterminadas, muchos temas incluyen pestañas y opciones adicionales para el personalizador de temas de WordPress, por lo que puede personalizar fácilmente su tema sin ningún conocimiento de codificación.

En este artículo, lo guiaremos a través de los paneles predeterminados y le mostraremos cómo usar el personalizador de temas de WordPress como un profesional.

Cómo usar la Guía definitiva de WordPress Theme Customizer

Cómo acceder al Personalizador de temas de WordPress

El personalizador de temas es una función predeterminada de WordPress y forma parte de cada sitio web de WordPress.

Puede acceder ingresando a su área de administración de WordPress y luego yendo a Apariencia »» Personalizar desde la barra lateral izquierda de su panel de administración de WordPress. Esto abrirá la interfaz del Personalizador con su tema actual.

Cómo acceder al Personalizador de WordPress

También puede usar la página del personalizador de temas de WordPress para cualquiera de los temas instalados en su sitio web, incluso cuando no están activos.

Esto le permite ver una vista previa en vivo de ese tema y hacer cambios antes de activarlo.

Para hacer eso, debes dirigirte a Apariencia »» Temas página.

A continuación, desplace el cursor del mouse sobre cualquier tema instalado y haga clic en el Vista previa en vivo botón para abrir la página de personalización del tema de WordPress.

Opción de vista previa en vivo del tema de WordPress

Cómo usar el Personalizador de temas de WordPress

Después de abrir el personalizador de temas de WordPress, verá todas las configuraciones de personalización en el lado izquierdo de su pantalla y la vista previa en vivo de su sitio web en el lado derecho.

WordPress Theme Customizer

El personalizador de temas de WordPress viene con un conjunto de paneles predeterminados independientemente del tema que esté utilizando.

Debe hacer clic en los paneles individuales para realizar cambios. También puede hacer clic en cualquiera de los íconos de lápiz azul en el lado derecho de la pantalla para abrir la configuración de ese elemento en particular.

Nota: Los temas avanzados de WordPress agregarán paneles de configuración adicionales para opciones de personalización adicionales (más sobre esto más adelante).

Echemos un vistazo a las opciones predeterminadas disponibles en el personalizador de temas de WordPress.

Panel de identidad del sitio: Agregar título, logotipo y favicon

los Identidad del sitio panel en el personalizador de temas de WordPress le permite agregar o cambiar el título y el eslogan de su sitio web.

Por defecto, WordPress agrega “Just Another WordPress Site” como el eslogan del sitio.

Se recomienda cambiarlo después de instalar WordPress en su sitio. También puede mantenerlo en blanco si lo desea.

Configuración de identidad del sitio para cambiar el título, el lema, el logotipo y el favicon del sitio

El panel Identidad del sitio en el personalizador de temas de WordPress también le permite agregar el logotipo de su sitio. Simplemente haga clic en el Seleccionar logo opción de subir el logo de su sitio web.

¿Quieres agregar un favicon a tu sitio? Puede hacerlo haciendo clic en el Seleccionar icono del sitio opción. Para obtener instrucciones detalladas, puede seguir nuestra guía sobre cómo crear y agregar un favicon a su sitio.

WordPress Theme Customizer: cambie los colores en su sitio web

Los controles en el Colores el panel variará principalmente según el tema de WordPress que estés usando.

Por ejemplo, el tema Twenty Seventeen le permite elegir el color del texto del encabezado y seleccionar un esquema de color para todo su sitio web.

Cambiar colores en su sitio web

Otros temas de WordPress pueden ofrecer diferentes opciones de color para elementos del sitio como: encabezados, enlaces, texto del cuerpo, fondo de su sitio web, etc..

Agregar menús de navegación en el Personalizador de temas

los Menus el panel le permite crear menús de navegación y controlar su ubicación en su sitio web.

En este tabl, encontrará todos los menús de WordPress existentes que haya creado anteriormente. Puede hacer clic en el botón “Ver todas las ubicaciones” para verificar las ubicaciones de menú disponibles que admite su tema.

Panel de menús en el Personalizador de temas

Para crear un nuevo menú, debe hacer clic en el Crear nuevo menú botón.

Después de eso, deberá asignar un nombre a su menú, para que pueda administrarlo fácilmente más adelante. También puede seleccionar la ubicación del menú y luego hacer clic en próximo para proceder.

Crea un nuevo menú de navegación

Para agregar elementos a este menú, debe hacer clic en Agregar artículos botón para abrir un nuevo panel. Ahora puede agregar enlaces personalizados, páginas, publicaciones, categorías y etiquetas como elementos de menú.

Agregar elementos al menú de navegación

Para reordenar los elementos, puede hacer clic en Reordenar enlace y luego use los iconos de flecha para ajustar los elementos del menú.

Controle los widgets en su sitio web en Theme Customizer

los Widgets el panel le permite agregar y administrar los widgets en su sitio.

Al hacer clic en él, se mostrarán las diferentes ubicaciones donde puede agregar widgets. Esto variará según el tema que esté utilizando.

Por ejemplo, el tema Twenty Seventeen ofrece 3 ubicaciones de widgets, mientras que el tema Twenty Nineteen viene con solo una ubicación.

Panel de widgets

Cuando haces clic en cualquiera de ellos, verás los widgets que has agregado previamente a esa ubicación.

Para agregar un nuevo widget, debe hacer clic en el botón “Agregar un widget”. Esto abrirá un nuevo panel donde verás una lista de todos los widgets disponibles.

Agregue widgets a su sitio

Debe hacer clic en el que desea agregar. También puede realizar cambios en los widgets recién agregados y ajustar su posición arrastrándolos hacia arriba o hacia abajo.

Panel de configuración de la página de inicio en el Personalizador de temas

Por defecto, WordPress muestra las últimas publicaciones de blog en su página de inicio.

Sin embargo, para los sitios web de negocios, los usuarios prefieren usar una página de inicio personalizada. Le permite tener una página de destino adecuada que muestra sus productos y servicios..

Para usar una página de inicio personalizada, debe seleccionar el botón de opción “Una página estática” en el Configuración de la página de inicio panel.

Configuración de la página de inicio en el personalizador de temas

Esto abrirá dos nuevos menús desplegables que puede usar para seleccionar una página para su página de inicio y otra para mostrar sus publicaciones de blog.

En caso de que no tenga las páginas en su sitio, puede crear una nueva haciendo clic en el enlace “+ Agregar nueva página” que se encuentra debajo del menú desplegable. Esto creará una página en blanco con el nombre de su elección..

Panel CSS adicional para agregar CSS personalizado

¿Desea agregar un código CSS personalizado para diseñar su sitio web? Puedes hacer eso en el CSS adicional panel.

Los usuarios de WordPress intermedios y avanzados a menudo personalizan su sitio agregando código CSS directamente al archivo style.css de su tema. Esto agrega pasos adicionales como tener acceso FTP a su alojamiento de WordPress, modificar archivos de temas, etc..

Una solución más fácil para principiantes es agregar su código CSS personalizado al panel CSS adicional en el personalizador de temas de WordPress. Esto le permitirá realizar cambios en su sitio y verlos en vivo en el lado derecho de su pantalla.

Agregar código CSS personalizado al panel CSS adicional;

Cuando comience a escribir algún código CSS, WordPress le sugerirá automáticamente atributos basados ​​en las letras que escriba. También mostrará mensajes de error si no ha escrito una declaración CSS adecuada.

Nota: Si desea personalizar su sitio web sin escribir ningún código, siga leyendo. Compartiremos dos opciones amigables para principiantes que le permitirán personalizar fácilmente su tema e incluso crear un tema personalizado de WordPress.

Otras opciones de personalización de temas

Algunos temas gratuitos y premium ofrecen más opciones de personalización de temas..

Dependiendo del tema que esté utilizando, es posible que pueda cambiar el estilo de fuente, agregar una imagen de fondo, cambiar el diseño, modificar colores, agregar imágenes de encabezado al azar y mucho más.

También puede agregar funciones específicas a su personalizador de temas con la ayuda de complementos. Por ejemplo, puede agregar fuentes personalizadas en WordPress usando el complemento Easy Google Fonts.

Obtenga una vista previa de su sitio web en diferentes resoluciones de pantalla

Es importante que cada propietario de un sitio web se asegure de que su sitio web responda a dispositivos móviles y se vea bien en todos los tamaños de pantalla.

Gracias al personalizador de temas de WordPress, puede verificar fácilmente cómo se ve su sitio web en diferentes tamaños de pantalla.

En la parte inferior del panel Personalizador de temas, encontrará tres íconos y el enlace “Ocultar controles”.

Vista previa del sitio web en diferentes resoluciones de pantalla

Estos íconos le permiten probar su sitio en diferentes resoluciones de pantalla como computadoras de escritorio, tabletas y dispositivos móviles.

los Ocultar controles El enlace es útil para ocultar el panel Personalizador de WordPress para que pueda ver su sitio correctamente en el modo de escritorio.

Publique, guarde o programe su configuración de personalizador

Una vez que haya realizado los cambios necesarios, debe aplicarlos a su sitio. De lo contrario, todo su trabajo duro se perderá..

Siga adelante y haga clic en el Publicar botón para aplicar los cambios. Una vez hecho esto, puede hacer clic en el botón Cerrar, presente en la esquina superior izquierda de su pantalla, para salir del personalizador de temas.

Publicar la configuración del Personalizador de WordPress

¿Qué sucede si necesita más tiempo para finalizar su nuevo diseño? En ese caso, puede guardarlo como borrador e incluso compartir su nuevo diseño con alguien sin darle acceso a su área de administración.

Para hacer eso, debe hacer clic en el ícono de ajustes justo al lado del Publicar botón. Esto abrirá el panel de Acción.

Opción Guardar borrador del personalizador de WordPress

Aquí encontrará tres opciones: Publicar, Guardar borrador y Programar.

Necesitas seleccionar el Guardar borrador botón de opción en el panel Acción y luego haga clic en el Guardar borrador botón para almacenar sus cambios.

Ahora puede copiar el enlace de vista previa y compartirlo con otros para obtener comentarios.

Por otro lado, el Calendario La opción le permite publicar sus cambios en una fecha y hora específicas. Puede usar esta opción para programar los cambios de su tema para que se activen en el momento en que reciba el menor tráfico.

Programe la configuración del personalizador en una fecha específica

Por último, si desea restablecer los cambios no publicados, puede hacer clic en el Descartar los cambios enlace en el panel Acción.

Vista previa de diferentes temas sin salir en vivo

Hay momentos en los que desea verificar cómo se vería un nuevo tema en su sitio. Sin embargo, no desea activarlos en su sitio web en vivo.

En ese caso, puede abrir el Personalizador de WordPress para probar nuevos temas sin activarlo..

En el panel Personalizador, encontrará el nombre de su tema activo y el Cambio botón.

Cambiar el tema de WordPress desde el Personalizador

Si hace clic en ese botón, WordPress mostrará todos los temas instalados en el lado derecho de la página.

Para verificar un tema en particular, debe hacer clic en el Vista previa en vivo botón.

Vista previa de los temas instalados en el Personalizador de temas

También puede obtener una vista previa de los temas desde el repositorio de temas de WordPress. Para hacer eso, debe seleccionar la casilla de verificación “Temas de WordPress.org” en el panel izquierdo.

Esto mostrará temas del directorio de WordPress.org. Puede hacer clic en “Instalar & Vista previa “para ver el tema que te gusta.

Directorio de temas de WordPress

También puede filtrar los temas haciendo clic en el Filtrar temas botón presente en la esquina superior derecha de la pantalla.

Nota: Recomendamos usar un sitio web provisional de WordPress para probar nuevos temas en lugar de usar el personalizador en un sitio en vivo.

Importar o exportar configuraciones del personalizador de temas

¿Sabía que puede importar y exportar la configuración del personalizador de su tema??

Esto es extremadamente útil cuando realiza cambios en su tema en su servidor local o en un sitio de preparación. En lugar de copiar la configuración manualmente en su sitio web en vivo, simplemente puede exportar la configuración del personalizador de temas para ahorrar tiempo.

Para obtener instrucciones detalladas, puede seguir nuestra guía sobre cómo importar y exportar configuraciones de personalización de temas en WordPress.

Alternativas del personalizador de temas de WordPress

Aunque WordPress Customizer le permite realizar cambios en su sitio, la cantidad de controles variará según el tema que esté utilizando.

¿Qué pasa si le gusta su tema, pero desea que tenga opciones de personalización adicionales??

En ese caso, la mejor solución es usar uno de los dos complementos de personalización que funcionan junto con el personalizador de temas de WordPress.

CSS Hero

Complemento CSS Hero

CSS Hero es un complemento de WordPress que le permite personalizar su sitio sin escribir una sola línea de código. Usted tiene la libertad de diseñar cada elemento de su sitio sin problemas.

¿Desea personalizar la página de inicio de sesión de su sitio de WordPress? CSS Hero te permite hacer eso en unos minutos.

También puede editar y obtener una vista previa de los cambios en la interfaz para asegurarse de que su diseño se vea perfecto en cada dispositivo.

Beaver Builder

Complemento Beaver Builder

Beaver Builder es uno de los mejores complementos del creador de páginas de WordPress en el mercado. Le permite crear páginas impresionantes para su sitio utilizando una interfaz de arrastrar y soltar.

La mejor parte es que Beaver Builder funciona con casi todos los temas de WordPress. Esto le permite usarlo con su tema actual.

Beaver Builder admite el uso de códigos cortos y widgets. También ofrece diferentes tipos de módulos que puede usar para diseñar fácilmente su sitio web. Consulte nuestra guía sobre cómo crear diseños personalizados en WordPress para obtener instrucciones detalladas.

También puede usar Beaver Builder para crear un tema de WordPress completamente personalizado sin escribir ningún código.

Esperamos que esta guía lo haya ayudado a aprender cómo usar el Personalizador de temas de WordPress como un profesional. También puede consultar nuestra guía sobre los mejores complementos y herramientas de WordPress para su sitio web.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me