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

¿Sabía que WordPress incorpora un Personalizador de temas que le permite modificar fácilmente el diseño de su sitio web en tiempo real?

Aunque todos los temas tienen algún nivel de soporte para las opciones del Personalizador por defecto, muchos temas incluyen pestañas y opciones adicionales al Personalizador de temas de WordPress, para que pueda personalizar fácilmente su tema sin ningún conocimiento de código.

En este artículo, le guiaremos a través de los paneles por defecto y le mostraremos cómo utilizar 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 por defecto de WordPress, y forma parte de todos los sitios web de WordPress.

Puede acceder a él conectándose a su área de administrador de WordPress y yendo a Apariencia ” Personalizar desde la barra lateral izquierda de su panel de administrador 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 aunque no estén activos.

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

Para ello, dirígete a la página Apariencia ” Temas.

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

Cómo usar el Personalizador de temas de WordPress

Tras abrir el Personalizador de temas de WordPress, verá todos los ajustes de personalización en la parte izquierda de la pantalla, y la vista previa en directo de su sitio web en la parte derecha.

El Personalizador de temas de WordPress viene con un conjunto de paneles por defecto independientemente del tema que estés utilizando.

Tienes que hacer clic en cada uno de los paneles para modificarlos. También puede hacer clic en cualquiera de los iconos de lápiz azul de la parte derecha de la pantalla para abrir los ajustes de ese elemento / artículo en particular.

Nota: Los temas avanzados de WordPress añadirán paneles de ajustes adicionales para opciones de personalización extra (más sobre esto más adelante).

Echemos un vistazo a las opciones por defecto disponibles en el Personalizador de temas de WordPress.

Panel de identidad del sitio: Añadir título, logotipo y favicon

El panel Identidad del sitio del Personalizador de temas de WordPress le permite añadir o cambiar el título y la descripción corta de su sitio web.

Por defecto, WordPress añade “Sólo otro sitio WordPress” como descripción corta del sitio.

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

El panel Identidad del sitio del Personalizador de temas de WordPress también le permite añadir el logotipo de su sitio. Simplemente, haga clic en la opción Seleccionar logotipo para subir el logotipo de su sitio web.

¿Quieres añadir un favicon a tu sitio? Puedes hacerlo al hacer clic en la opción Seleccionar icono del 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: Cambie los colores de su sitio web

Los controles del panel Colores variarán principalmente en función del tema de WordPress que esté utilizando.

Por ejemplo, el tema Twenty Seventeen permite elegir el color del texto de la cabecera y seleccionar una combinación de colores para todo el sitio web.

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

Añadir 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 pestaña, encontrarás todos los menús de WordPress existentes que hayas creado anteriormente. Puedes hacer clic en el botón “Ver todas las ubicaciones” para comprobar las ubicaciones de menú disponibles que tu tema es compatible con.

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

A continuación, deberá asignar un nombre a su menú para poder gestionarlo más adelante. También puede seleccionar la ubicación del menú y, a continuación, 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 añadir enlaces personalizados, páginas, entradas, categorías y etiquetas como elementos del menú.

Para reordenar los elementos, puede hacer clic en el enlace Reordenar y, a continuación, utilizar los iconos de flecha para ajustar los elementos del menú.

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

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

Al hacer clic en él, se mostrarán las distintas ubicaciones en las que puedes añadir widgets. Esto variará en función del tema que estés utilizando.

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

Al hacer clic en cualquiera de ellos, verás los widgets que has añadido anteriormente a esa ubicación.

Para añadir un nuevo widget, tienes que hacer clic en el botón “Añadir un widget”. Se abrirá un nuevo panel en el que verás una ficha con todos los widgets disponibles.

Tienes que hacer clic en el que quieras añadir. También puedes hacer cambios en los widgets recién añadidos y ajustar su posición arrastrándolos hacia arriba o hacia abajo.

Panel de ajustes de la página de inicio en el Personalizador de temas

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

Sin embargo, para los sitios web de empresas, los usuarios prefieren utilizar una página de inicio personalizada. Te permite tener una página de destino adecuada que muestre tus 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 de ajustes de la página de inicio.

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

En caso de que no disponga de las páginas en su sitio, puede crear una nueva enlazando el enlace “+ Añadir nueva página” presente debajo del menú desplegable. Esto creará una página en blanco con el nombre de su elección.

Panel CSS adicional para añadir CSS personalizado

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

Los usuarios intermedios y avanzados de WordPress suelen personalizar sus sitios añadiendo código CSS directamente al archivo style.css de su tema. Esto añade pasos adicionales como tener acceso FTP a tu alojamiento 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 te permitirá hacer cambios en tu sitio y verlos en directo en la parte derecha de tu pantalla.

Cuando empiece a escribir código CSS, WordPress le sugerirá automáticamente atributos basándose en las letras que escriba. 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. Vamos a compartir tres opciones para principiantes que le permitirán personalizar fácilmente su tema e incluso crear un tema de WordPress personalizado.

Otras opciones del Personalizador de temas

Algunos temas gratuitos y premium ofrecen más opciones del Personalizador de temas.

Dependiendo del tema que utilices, podrás cambiar el estilo de letra, añadir una imagen de fondo, cambiar la estructura / disposición / diseño / plantilla, modificar los colores, añadir imágenes de cabecera aleatorias y mucho más.

También puede añadir características específicas a su Personalizador de temas con la ayuda de plugins. Por ejemplo, puedes añadir fuentes personalizadas en WordPress con el plugin Easy Google Fonts.

Vista previa de su sitio web en diferentes resoluciones de pantalla

Es importante que todos los propietarios de sitios web se aseguren de que su sitio web es adaptable a dispositivos móviles y se ve bien en todos los tamaños de pantalla.

Gracias al Personalizador de temas de WordPress, podrá comprobar fácilmente cómo se ve su sitio web en distintos 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 ordenadores de sobremesa, tabletas y dispositivos móviles.

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

Publique, guarde o programe los ajustes de su Personalizador

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

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

¿Y si necesitas más tiempo para finalizar tu nuevo diseño? En ese caso, puedes guardarlo como borrador e incluso compartir tu nuevo diseño con alguien sin darle acceso a tu área de administrador.

Para ello, debe hacer clic en el icono de engranaje situado justo al lado del botón Publicar. Se abrirá el panel Acción.

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

Debe seleccionar el botón de opción Guardar bor rador en el panel Acción y, a continuación, hacer clic en el botón Guardar borrador para guardar los cambios.

Ahora puede copiar el enlazar la vista previa y compartirlo con otros para obtener respuestas / comentarios / opiniones.

Por otro lado, la opción Programar le permite publicar sus cambios en una fecha y hora específicas. Puede utilizar esta opción para programar sus cambios de tema para que se publiquen 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 del panel Acción.

Vista previa de distintos temas sin activarlos

Hay ocasiones en las que quieres comprobar cómo quedaría un nuevo tema en tu sitio. Sin embargo, no quieres activarlos en tu sitio web en vivo.

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

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

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

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

También puede obtener una vista previa de los temas del 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. Puedes hacer clic en el botón “Instalar y vista previa” para comprobar el tema que te gusta.

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

Nota: Recomendamos utilizar un sitio web de prueba de WordPress para probar nuevos temas en lugar de utilizar el Personalizador en un sitio activo.

Importar o exportar ajustes del Personalizador de temas

¿Sabías que puedes importar y exportar los ajustes de tu Personalizador de temas?

Esto resulta muy útil cuando se realizan cambios en el tema en el servidor local o en un sitio de prueba. En lugar de copiar los ajustes manualmente a su sitio web en vivo, puede simplemente exportar los ajustes del Personalizador de temas para ahorrar tiempo.

Para obtener instrucciones detalladas, puede seguir nuestra guía sobre cómo importar y exportar ajustes del Personalizador de temas en WordPress.

Alternativas al Personalizador de temas de WordPress

Aunque el Personalizador de WordPress le permite realizar cambios en su sitio, el número de controles variará en función del tema que esté utilizando.

¿Y si le gusta su tema, pero le gustaría que tuviera más opciones de personalización?

En ese caso, la mejor solución es utilizar uno de los tres plugins de personalización que funcionan junto con el personalizador de temas de WordPress.

SeedProd

SeedProd es el mejor editor de arrastrar y soltar sitio web para WordPress. Puede utilizar SeedProd para crear fácilmente temas personalizados de WordPress y diseños de página sin necesidad de editar ningún código.

SeedProd ofrece cientos de diseños de página prefabricados para páginas de destino, páginas de ventas, páginas de registro en seminarios web, páginas próximas, páginas en modo de mantenimiento y mucho más.

Personalizar es fácil con bloques listos para usar como formularios de suscripción, perfiles sociales, botones, temporizadores de cuenta atrás, formularios de contacto y mucho más.

También puede establecer esquemas de color, guardar combinaciones de fuentes y reutilizar páginas y elementos de página para no tener que crearlos de nuevo.

Maquetador de temas de Thrive

Thrive Theme Builder es otro popular plugin editor de arrastrar y soltar tema para WordPress. Se puede utilizar para crear fácilmente un tema personalizado de WordPress, sin código obligatorio / requerido / necesario.

Viene empaquetado con cuatro plantillas de temas diferentes listas para empezar rápidamente. Cada plantilla de tema incluye una variedad de páginas prefabricadas que puede añadir a su sitio.

Puede editar cada parte de su tema, incluida la cabecera, el pie de página, las entradas del blog, las páginas de categorías, etc., simplemente señalando y haciendo clic.

Además, hay más de 100 elementos de diseño y creación de sitios que puede añadir rápidamente a su tema arrastrándolos y soltándolos en su sitio.

CSS Hero

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

¿Quieres personalizar la página de acceso de tu sitio WordPress? CSS Hero te permite hacerlo en pocos minutos.

También puede editar y previsualizar los cambios en la portada / vista pública para asegurarse de que su diseño se ve perfecto en todos los dispositivos.

Maquetador Beaver

Beaver Builder es otro de los mejores maquetadores de páginas para WordPress. Te permite construir páginas impresionantes para tu sitio usando una interfaz de arrastrar y soltar.

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

Beaver Builder es compatible con el uso de shortcodes y widgets. También ofrece diferentes tipos de módulos que puede utilizar para dar estilo fácilmente a su sitio web. Consulte nuestra guía sobre cómo crear disposiciones personalizadas en WordPress para obtener instrucciones detalladas.

Esperamos que esta guía te haya ayudado a aprender a utilizar el Personalizador de temas de WordPress como un profesional. Puede que también quieras ver nuestra guía sobre cómo crear una página personalizada en WordPress, o nuestra selección de los mejores plugins y herramientas de WordPress para tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.