Cómo usar el Personalizador de Temas de WordPress como un Profesional (Guía Ultimate)

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

Aunque cada tema tiene cierto nivel de soporte para las opciones predeterminadas del personalizador, 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 necesidad de tener conocimientos de codificación.

En este artículo, le 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 acceder al Personalizador de Temas de WordPress

El personalizador de temas es una característica predeterminada de WordPress, y forma parte de todos los sitios web de WordPress.

Puede acceder a él iniciando sesión en 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.

También puede utilizar 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 realizar cambios antes de activarlo.

Para ello, debe dirigirse a la página Apariencia » Temas .

A continuación, pase el puntero del ratón por encima de cualquier tema instalado y haga clic en el botón Vista previa en directo para abrir la página del personalizador de temas de WordPress.

Cómo usar el Personalizador de Temas de WordPress

Después de abrir el personalizador de temas de WordPress, verás todos los ajustes de personalización en el lado izquierdo de la pantalla, y la vista previa en vivo de tu sitio web en el lado derecho.

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

Necesita hacer clic en los paneles individuales para hacer cambios en ellos. También puede hacer clic en cualquiera de los iconos 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 añadirán paneles de configuración adicionales para opciones de personalización adicionales (más información 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

El panel Site Identity en el personalizador de temas de WordPress le permite añadir o cambiar el título y el eslogan de su sitio web.

Por defecto, WordPress añade «Just Another WordPress Site» como lema del sitio.

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

El panel de identidad del sitio en el personalizador de temas de WordPress también le permite agregar el logotipo de su sitio. Simplemente, haga clic en la opción Seleccionar logotipo para cargar el logotipo de su sitio web.

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

Personalizador de temas de WordPress: Cambiar colores en su sitio web

Los controles del panel Colors variarán en su mayoría dependiendo del tema de WordPress que esté usando.

Por ejemplo, el tema Veintisiete le permite elegir el color del texto del encabezado y seleccionar una combinación de colores para todo su sitio web.

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

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

El panel Menús le permite crear menús de navegación y controlar su ubicación en su sitio web.

En esta tabla, encontrarás todos los menús existentes de WordPress que hayas creado previamente. Puede hacer clic en el botón «Ver todas las ubicaciones» para comprobar las ubicaciones de menú disponibles que admite su tema.

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

Después de eso, tendrá que dar un nombre a su menú, para que pueda manejarlo fácilmente más tarde. También puede seleccionar la ubicación del menú y luego hacer clic en Siguiente para continuar.

Para añadir elementos a este menú, debe hacer clic en el botón Añadir elementos para abrir un nuevo panel. Ahora puede agregar enlaces, páginas, publicaciones, categorías y etiquetas personalizadas como elementos del menú.

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

Controle los widgets de su sitio web en el Personalizador de temas

El panel Widgets le permite añadir y gestionar los widgets de su sitio.

Al hacer clic en él se le mostrarán las diferentes ubicaciones en las que puede añadir widgets. Esto variará dependiendo del tema que estés usando.

Por ejemplo, el tema Veintisiete ofrece 3 ubicaciones de widgets, mientras que el tema Veintisiete viene con una sola ubicación.

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

Para añadir un nuevo widget, haga clic en el botón «Añadir un widget». Esto abrirá un nuevo panel donde verá una lista de todos los widgets disponibles.

Tienes que hacer clic en el que quieras añadir. También puede realizar cambios en los widgets recién añadidos 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 entradas del blog en tu página principal.

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

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

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

En caso de no tener las páginas en su sitio, puede crear una nueva haciendo clic en el enlace «+ Añadir 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 de CSS adicional para agregar CSS personalizado

¿Quieres añadir código CSS personalizado para darle estilo a tu sitio web? Puede hacerlo en el panel CSS adicional .

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

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

Cuando empieces a escribir código CSS, WordPress te sugerirá automáticamente atributos basados en las letras que escribas. También mostrará mensajes de error si no ha escrito una declaración CSS adecuada.

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

Otras opciones del Personalizador de temas

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

Dependiendo del tema que utilice, podrá cambiar el estilo de fuente, añadir una imagen de fondo, cambiar el diseño, modificar los colores, añadir imágenes de encabezado aleatorias y mucho más.

También puede agregar funciones específicas al personalizador de temas con la ayuda de los complementos. Por ejemplo, puedes añadir fuentes personalizadas en WordPress utilizando el plugin Easy Google Fonts.

Previsualice su sitio web en diferentes resoluciones de pantalla

Es importante que todos los propietarios de sitios web se aseguren de que su sitio web sea móvil y se vea bien en todos los tamaños de pantalla.

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

En la parte inferior del panel Personalizador de temas, encontrará tres iconos y el enlace «Ocultar controles».

Estos iconos le permiten probar su sitio en diferentes resoluciones de pantalla como escritorio, tableta y dispositivos móviles.

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

Publicar, guardar o programar los ajustes de su personalizador

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

Haga clic en el botón Publicar para aplicar los cambios. Una vez hecho esto, puede hacer clic en el botón de cerrar, presente en la esquina superior izquierda de la pantalla, para salir del personalizador de temas.

¿Qué pasa 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 ello, debe hacer clic en el icono del engranaje junto al botón Publicar . Esto abrirá el panel de acción.

Aquí encontrará tres opciones: Publicar, guardar borrador y programar.

Debe seleccionar el botón de opción Guardar borrador en el panel Acción y luego hacer clic en el botón Guardar borrador para guardar los cambios.

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

Por otro lado, la opción Schedule le permite publicar sus cambios en una fecha y hora específicas. Puede utilizar esta opción para programar los cambios de tema para que se pongan en marcha en el momento en que reciba menos tráfico.

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

Previsualizar diferentes temas sin salir al aire

Hay momentos en los que desea comprobar 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 necesidad de estar en vivo.

En el panel Personalizador, encontrará el nombre del tema activo y el botón Cambiar .

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

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

También puede previsualizar temas desde el Repositorio de Temas de WordPress. Para ello, debe seleccionar la casilla de verificación «Temas de WordPress.org» en el panel izquierdo.

Esto mostrará temas del directorio WordPress.org. Puede hacer clic en el botón «Instalar y previsualizar» para comprobar el tema que le gusta.

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

Nota: recomendamos usar un sitio web de preparación de WordPress para probar nuevos temas en lugar de usar el personalizador en un sitio en vivo.

Importar o exportar la configuración del Personalizador de temas

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

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

Para obtener instrucciones detalladas, puedes seguir nuestra guía sobre cómo importar y exportar la configuración del personalizador de temas en WordPress.

Alternativas del Personalizador de Temas de WordPress

Aunque el Personalizador de WordPress te permite hacer cambios en tu sitio, el número de controles variará dependiendo del tema que estés usando.

¿Qué pasa si te gusta tu tema, pero deseas que tenga opciones adicionales de personalización?

En ese caso, la mejor solución es usar uno de los dos plugins de personalización que funciona junto con el customizador de temas de WordPress.

Héroe de CSS

CSS Hero es un plugin de WordPress que te permite personalizar tu sitio sin tener que escribir una sola línea de código. Usted tiene la libertad de estilizar cada elemento de su sitio sin ningún tipo de molestias.

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

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

Constructor de castores

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

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

Beaver Builder soporta el uso de atajos y widgets. También ofrece diferentes tipos de módulos que puede utilizar 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 puedes usar Beaver Builder para crear un tema de WordPress completamente personalizado sin escribir ningún código.

Esperamos que esta guía le haya ayudado a aprender a utilizar el Personalizador de Temas de WordPress como un profesional. También puede ver nuestra guía sobre los mejores plugins y herramientas de WordPress para su sitio web.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para obtener más tutoriales en vídeo de WordPress. También puedes seguirnos en Twitter y Facebook.

Deja un comentario