[Manual de WP] – Modificar la Apariencia de WordPress

Llega un momento de tu vida «WordPressera» en la que te gustaría mejorar la apariencia de WordPress y con eso, el diseño de tu web.

Al fin y al cabo, es lo que te entra por los ojos.

Es la forma de mostrar tu información, y que tu web tiene para enseñar al mundo.

Y por tanto, una parte importantísima que debes controlar.

Los diversos menús de Apariencia te permiten cambiar la forma en como tu web se ve y se comporta.

Y aunque una parte importante que debes conocer, es probable, que si tu web la ha diseñado un desarrollador profesional, no necesites tocar ninguna de estas opciones. ¡Pero el saber no ocupa lugar!

Dependiendo del tema que estés usando su sitio, puede ser que no encuentres todas las opciones del menú listadas aquí, o que aparezcan algunas diferentes.

Esto es porque ciertas opciones de la sección Apariencia se basan en el Tema en uso.

Por ejemplo, el tema predeterminado, Twenty Sixteen, te permite configurar varias opciones para ajustar la apariencia del tema. Pero no todos los temas tendrán estas páginas de opciones, y si las tienen, puede que estén dentro de un menú diferente.

Pero como no puedo hablar de todos los temas, me ceñiré a lo estándar (que además coincide bastante con lo que se muestra, si usas un Child Theme basado en Genesis Framework).

¿Sabes cómo modificar la apariencia de tu WordPress? Te lo enseño paso a paso aquí Clic para tuitear

Mejora la apariencia de WordPress (o mejor su diseño) con los temas

Seleccionar un tema

La apariencia general de un sitio en WordPress está controlada por el Tema.

Aunque existe un tema predeterminado que viene instalado con WordPress, la mayoría de las personas o bien descargan un tema nuevo, lo compran o mandan a diseñar uno personalizado.

Existen cientos de sitios donde se pueden descargar temas gratuitos o comprarlos por un precio muy bajo. Uno de los mejores lugares para comenzar a buscar temas es el Directorio de Temas del sitio oficial de WordPress.

Si por el contrario, quieres optar a un tema premium, mucho más profesional y atractivo, ya sabes que mi recomendación número 1 son los temas basados en Genesis Framework. Para eso, solo tienes que elegir y comprar alguno de StudioPress o de desarrolladores externos como Restored316 (tienes que comprar Genesis Framework aparte, ya que solo te venden el Child Theme).

Si tienes dudas, cobre como elegir un Child Theme de Genesis, haz clic aquí.

Al hacer clic en la opción del menú Apariencia se mostrará la pantalla predeterminada de los Temas.

El tema que está activo actualmente se muestra en la parte superior izquierda de la pantalla. Los demás temas están instalados, pero actualmente no están en uso.

Te recomiendo que no tengas temas instalados que no estén en uso. Elimina todo tema que no estés usando y solo deja el tema activo, o en todo caso el Child Theme activo y su tema padre.

Para observar una vista previa del sitio con otro tema (que no está activo actualmente), puedes hacer clic en el botón Vista previa asociado a cada tema.

Mientras se muestra la pantalla de la vista previa, tendrás la posibilidad de visitar las distintas páginas en el diseño del tema seleccionado, así como también hacer varios cambios en el tema.

Para elegir otro Tema, desplaza el puntero del ratón sobre la imagen del tema que deseas activar y haz clic en el botón Activar que aparecerá debajo. Como alternativa, si la ventana de la vista previa lo muestra, puedes hacer clic en el botón Guardar y activar en la esquina superior izquierda de la ventana para activar el tema.

Para ver más detalles sobre un tema en particular, pon el puntero del ratón sobre la miniatura de un tema y haz clic en Detalles del tema. Aparecerá una ventana emergente que muestra una imagen más grande junto con la descripción del tema y otros detalles.

Al hacer clic en el botón Añadir nuevo de la parte superior de la página, podrás buscar nuevos temas en el Directorio de Temas de WordPress, así como también instalarlos directamente desde el Escritorio.

Opciones de temas en el menú apariencia

Previsualizar y personalizar un tema

Igual que puedes previsualizar un tema, también puedes actualizar varias opciones mientras visualizas los cambios en tiempo real.

Las opciones que puede modificar dependerán del tema individual.

Para el tema actual activo, un clic en el botón Personalizar te permite actualizar varias opciones mientras visualiza los cambios. Hasta que hagas clic en el botón Guardar y publicar, solo se actualizará la ventana de previsualización y no el tema que ves en tu web.

Para todos los demás temas que no están actualmente activados, haga clic en el botón Vista previa para previsualizar el tema, actualiza sus opciones y actívalo. Hasta que hagas clic en el botón Guardar y activar, solo se actualizará la ventana de previsualización y no el tema que estas viendo en la web.

Como ves, es una excelente forma de ir haciendo cambios, y previsualizándolos, sin que se estén haciendo en realidad, hasta que no pulses Guardar y publicar.

Personalizando la apariencia de WordPress

De nuevo recuerda, que las opciones que aparezcan en personalizar, pueden depender del tema, o incluso de algun plugin que este instalado.

Agregar un nuevo tema

Tienes la posibilidad de añadir nuevos temas a tu sitio desde el Escritorio de WordPress. En la parte superior de la pantalla Temas está el botón Añadir nuevo.

Haz clic en este botón para buscar y agregar nuevos temas en tu sitio web.

Luego de hacer clic en el botón Añadir nuevo, se mostrará la pantalla Añadir temas.

Debería verse similar a la imagen mostrada abajo.

Añadiendo temas en Apariencia para WordPress

La pantalla Añadir temas le permite buscar e instalar temas directamente del Directorio de Temas oficial de WordPress. Por defecto, la pantalla mostrará una lista de temas destacados.

Puedes usar los enlaces de la parte superior de la página para filtrar los resultados y ver los temas Destacados, Populares o Novedosos. Haz clic en el enlace Filtrar por características para filtrar los resultados basados en las etiquetas que especifique. Hay etiquetas para Colores, Diseño de pantalla, Características y Asunto.

Como alternativa, haz clic en el campo de entrada de texto Buscar temas… e ingresa el texto para buscar un tema específico.

Al poner el puntero del ratón sobre cada miniatura del tema, se mostrarán botones extra.

Para ver los detalles de un tema junto con la vista previa, haz clic en el botón grande Detalles y vista previa o en el botón más pequeño Vista previa. Si haces clic en el botón Instalar, se descargará e instalará el tema en tu web. Cuando el tema este instalado, se te dará la opción de ver una Vista previa, Activar inmediatamente el tema o Volver al instalador de temas.

Mi recomendación número 1 son los temas basados en Genesis Framework. Elige y compra alguno de StudioPress o de desarrolladores externos como Restored316 (tienes que comprar Genesis Framework aparte, ya que solo te venden el Child Theme).

Si tienes dudas, sobre como elegir un Child Theme de Genesis, haz clic aquí.

Veamos más a fondo cómo personalizar tu sitio web

Al usar el Personalizador puedes modificar ciertas partes de tu web con WordPress. Cuando haces clic en la opción del menú Personalizar, se mostrarán varias opciones del tema que puedes cambiar.

Dependiendo del tema en uso, puedes ver más o menos opciones que las que se muestran en la siguiente imagen (incluso algunos plugins pueden añadir funciones).

Personalizando la apariencia de WordPress
Si, lo se. Esta imagen te suena de algo… ¿Será que la has visto más arriba?

Al hacer clic en las pequeñas flechas se abren y cierran los paneles, dándote acceso a las distintas opciones. Verás que algunas de las opciones en la pantalla Personalizar también están disponibles desde otras opciones del menú. Por ejemplo, puedes cambiar el Título del sitio y la Descripción corta usando la opción General dentro del menú Ajustes.

Al mismo tiempo que haces cambios en la parte izquierda de la pantalla Personalizar, la vista previa del tema en la parte derecha se actualiza automáticamente.

Hasta que hagas clic en el botón Guardar y publicar, solo se actualizará la vista previa y no el tema en tu sitio público (lo que ven tus visitas).

Para ayudarte a probar su sitio en varios dispositivos, el Personalizador también te permite previsualizar el sitio en vistas para teléfono móvil, tablet y equipos de escritorio. En la parte inferior del panel del Personalizador, haz clic en uno de los iconos de visualización para cambiar la vista previa del sitio y así tener una idea de cómo se mostrará en un equipo normal de escritorio, en una tablet o en un teléfono móvil.

Widgets

Los widgets son secciones independientes del contenido que se ubican en un área para widgets provista por el Tema.

Aunque estas áreas para widgets se llaman comúnmente ‘Sidebars’ (Barras laterales) y con frecuencia están situadas en la columna izquierda o derecha, también pueden aparecer en cualquier lugar del sitio y son completamente dependientes del actual tema en uso, en cuanto a su ubicación.

Por ejemplo, los temas basados en Genesis Framework, son famosos por tener su Home o página de inicio formada por áreas de Widgets, para que puedas crearte la home que realmente quieres como si fuera un puzzle, o incluso te he enseñado como añadir nuevas áreas de Widgets a Genesis.

Otro sitio clásico para un área de widget, o varios, es en los footers o pie de página.

Existen numerosos widgets disponibles de manera predeterminada, que le permiten agregar contenido extra a su sitio, tales como Comentarios recientes, Listas de Categorías o Menús Personalizados, por solo nombrar algunos.

Los nuevos widgets también se instalan a través de plugins y dependiendo del uso que se dará al plugin, tendrás la posibilidad de mostrar una funcionalidad adicional en el sitio.

Jugando con los Widgets para mejorar la apariencia de WordPress

La sección Widgets disponibles contiene todos los widgets que puedes elegir.

Para llenar una de las barras laterales, arrastra y suelta el widget a la ubicación deseada. Una vez que el widget es arrastrado a una Barra lateral, el widget se abrirá para que puedas configurar las opciones. Haz clic en el botón Guardar del widget para guardar los ajustes.

Si deseas eliminar un widget de la Barra lateral pero guardar las opciones para uso futuro, simplemente arrástralo a la sección de Widgets inactivos.

Si deseas eliminar un widget de la Barra lateral, para siempre, haz clic en el enlace Borrar del widget.

La pequeña flecha junto al título de la Barra lateral intercambiará el estado de la barra entre abierto y cerrado. Si arrastras y sueltas un widget sobre una barra lateral cerrada, ésta se abrirá automáticamente al mismo tiempo que el widget.

Facilita la navegación por tu web gracias a los menús

Actualizar el menú

Si tu Tema soporta menús personalizados, puedes hacer las modificaciones que necesites desde la opción Menús.

Los Menús pueden contener enlaces a Páginas, Entradas, Categorías, Enlaces Personalizados u otro tipo de contenidos.

Elementos que pueden formar un menú en WordPress

Agregar un nuevo menú

Dependiendo del Tema que uses, tu sitio puede utilizar más de un menú de navegación (el desarrollador previo distintos sitios en los que pueda aparecer un menú).

Algunas veces puede haber varios menús en el encabezado del sitio, otras veces puede haber menús en las barras laterales o en los pies de página.

Para agregar un menú nuevo, desplaza el puntero del ratón hasta la opción Apariencia del menú de navegación de la parte izquierda y en el menú emergente haz clic en el enlace Menús.

Como alternativa, haz clic en la opción Apariencia y luego haz clic en el enlace Menús que aparece debajo.

En la pantalla que se muestra, haz clic en el enlace crea un nuevo menú.

Se mostrará una pantalla similar a la de abajo. Pon un nombre para el menú en el campo Nombre del menú. Haz clic en el botón Crear menú para crear el nuevo menú.

Creando un nuevo menú en WordPress

Editar un elemento existente en el menú

La lista actual de los elementos del menú se encuentra en la columna derecha de la pantalla.

Si hay varios menús en tu web, habrá una lista desplegable en la parte superior de la pantalla, que te permite seleccionar el menú que deseas editar.

Simplemente selecciona el menú que quieres editar de la lista desplegable Elige el menú que quieras editar y luego haz clic en el botón Elegir.

Los elementos del menú para el menú seleccionado se mostrarán a continuación.

Editando elementos del menú

Los elementos en esta columna derecha son los mismos que los elementos (enlaces) del menú que se muestra en tu web.

Al hacer clic en la flecha hacia abajo situada a la derecha de cada título del elemento del menú, aparecerá un panel con opciones para ese elemento en particular.

En este panel de opciones hay varios elementos que pueden ser actualizados.

Puedes mostrar u ocultar campos extra tales como Destino del enlace, Clases CSS, Relación con el enlace (XFN) o Descripción usando la pestaña Opciones de pantalla ubicada en la parte superior derecha de la página.

  • URL – solo se muestra para los Enlaces Personalizados, y contendrá la dirección a la cual acceder al hacer clic en el elemento del menú.
  • Etiqueta de navegación – Este es el título que se mostrará dentro del menú actual de tu sitio web.
  • Atributos del título – Esta es la descripción emergente que se muestra al pasar el puntero del ratón sobre el elemento del menú.
  • Abrir enlace en una nueva ventana/pestaña – (Oculto por defecto) Puede elegir que el enlace del elemento del menú se abra en la misma ventana/pestaña del navegador (opción por defecto) o en una nueva ventana/pestaña. Esta configuración se hace visible si selecciona la opción Destino del enlace en el panel Opciones de pantalla.
  • Clases CSS – (Oculto por defecto) Clases CSS opcionales para agregar al elemento del menú. Esta configuración se hace visible si selecciona la opción Clases CSS en el panel Opciones de pantalla.
  • Relación con el enlace (XFN) – (Oculto por defecto) Permite la generación de atributos XFN de manera que pueda mostrar su relación con los autores/dueños del sitio al cual enlaza. Esta configuración se hace visible si selecciona la opción Relación con el enlace (XFN) en el panel Opciones de pantalla.
  • Descripción – (Oculto por defecto) La descripción para el enlace. Esta puede o no aparecer, dependiendo del Tema. Esta configuración se hace visible si selecciona la opción Descripción en el panel Opciones de pantalla.

Cada elemento del menú puede ser movido a una nueva ubicación en la jerarquía del menú, utilizando los enlaces debajo del campo Etiqueta de navegación o haciendo clic en el área del título del elemento del menú y arrastrando y soltando el menú en la nueva ubicación.

Si eliges la opción ‘arrastrar y soltar’, el puntero del ratón se transformará en una cruz de flechas al pasarlo sobre el área correcta.

Luego de hacer las modificaciones necesarias en los elementos del menú, haz clic en el botón Guardar menú de la parte superior o inferior de la pantalla.

Agregar un elemento nuevo al menú

Por defecto, solo se muestran los paneles de las Páginas, Enlaces y Categorías.

Si deseas agregar Entradas, Etiquetas o Formatos de Entrada como elementos del menú, simplemente usa la pestaña Opciones de pantalla ubicada en la parte superior derecha de la página para habilitar estos paneles.

Para agregar una Página nueva como elemento del menú, selecciona las casillas del panel de Páginas, ubicadas junto al título de cada una de las Páginas que quiere agregar.

Puedes seleccionar una o varias Páginas a la vez. Luego de seleccionar las Páginas, haz clic en el botón Añadir al menú. Los nuevos elementos del menú aparecerán debajo de la lista de elementos actuales.

El título del elemento del menú será por defecto el título de la Página. Para cambiarlo, simplemente haz clic en la flecha hacia abajo situada a la derecha del título del elemento del menú para ver el panel de opciones y entonces actualizar la Etiqueta de navegación al nombre deseado.

Luego de hacer las correspondientes ediciones, haz clic en el botón Guardar Menú de la parte superior o inferior de la pantalla.

Los pasos para agregar una Entrada, Categoría o Etiqueta como elementos del menú son exactamente los mismos que para agregar una Página.

Agregando elementos al menú de WordPres

Para cambiar el orden en que aparecen los elementos del menú, simplemente pon el puntero del ratón en el área del título del menú que deseas mover. Cuando el puntero cambia a una cruz de flechas haz clic en el elemento del menú y arrástralo a la nueva ubicación.

De acuerdo con la configuración del menú dentro del Tema, hasta es posible crear los niveles múltiples de jerarquía que se requiere en los menús desplegables.

Luego de mover los elementos del menú, no olvides hacer clic en el botón Guardar menú de la parte superior o inferior de la pantalla para guardar los cambios.

Agregar un enlace personalizado al menú

Utiliza el panel Enlaces para agregar al menú cualquier enlace a elección, como por ejemplo el enlace a un sitio web externo.

Simplemente escribe la dirección del sitio en el campo URL y el nombre del elemento en el campo Enlace de texto.

Por último, haz clic en el botón Añadir al menú.

Usa los mismos pasos descriptos precedentemente para ajustar el orden de los elementos del menú y haz clic en el botón Guardar menú de la parte superior o inferior de la pantalla para guardar los cambios.

Enlaces personalizados en el menú de WordPress

Eliminar un elemento del menú

Para eliminar un elemento del menú haz clic en la flecha hacia abajo situada a la derecha de cada título del elemento del menú para ver el panel de opciones para ese elemento y luego haz clic en el enlace Eliminar.

Después de efectuar los cambios correspondientes, haz clic en el botón Guardar menú de la parte superior o inferior de la pantalla.

Eliminar un elemento de menú en WordPress

Gestionar lugares del menú

Luego de crear un menú, también puedes decirle a WordPress dónde usarlo. Aquí entra en juego la pestaña Gestionar lugares de la página de Menús.

Después de hacer clic en la pestaña Gestionar lugares de la página de Menús, se mostrará una página similar a la imagen de más abajo, con una lista de las distintas ubicaciones del menú usado por el Tema.

Puedes tener una única ubicación del menú, o puedes tener varias, dependiendo del Tema en uso. La ubicación del menú tampoco se llamará necesariamente ‘Menú principal’, como se muestra debajo. Ese nombre dependerá exclusivamente del Tema.

Gestiona donde aparecerá tu menú en WordPress

Asigna un menú existente que hayas creado a la ubicación que corresponda, seleccionándolo de la lista desplegable. Haz clic en el botón Guardar cambios para guardar los cambios.

Como alternativa, puedes elegir crear un menú nuevo y automáticamente asignarlo a la ubicación haciendo clic en el enlace Utilizar menú nuevo.

La opción del menú Cabecera solo estará disponible si el Tema actual hace uso de ella.

Por ejemplo la mayoria de Child Themes modernos basados en Genesis Framework traen esta opción.

Te permite elegir una imagen para mostrar en el área del encabezado de tu web. Normalmente se usa para mostrar tu logo.

Al hacer clic en la opción del menú Cabecera se te presenta la opción Imagen de Cabecera en el Personalizador.

Puedes seleccionar una de las imágenes que hayas subido previamente, o puedes subir una imagen nueva haciendo clic en el botón Añadir nueva imagen.

Para guardar los cambios, haz clic en el botón Guardar y publicar de la parte superior de la página.

Sube tu logo o cabecera a tu web wordpress con esta opción

Te recuerdo que, dependiendo del Tema en uso, puede que no cuentes con esta opción.

Fondo

La opción del menú Fondo es otro menú específico del Tema en uso.

Te permite elegir una imagen de fondo para su sitio.

Al hacer clic en la opción del menú Fondo se te presenta la opción Imagen de fondo en el Personalizador.

Puedes seleccionar una de las imágenes que hayas subido previamente, o puedes subir una imagen nueva haciendo clic en el botón Selecciona imagen.

Para guardar los cambios, haz clic en el botón Guardar y publicar de la parte superior de la página.

Tambien puedes configurar una imagen de fondo si el tema cuenta con esta opción

Te recuerdo que, dependiendo del Tema en uso, puede que no cuentes con esta opción.

Editor

El menú Editor te permite editar los archivos CSS y PHP que componen el Tema.

Por lo general, una vez que el Tema está instalado y configurado, no hay necesidad de hacer ningún cambio aquí, e incluso recomiendo hacerlo por FTP.

Debes tener extremo cuidado al usar estas opciones para evitar hacer cambios a archivos que puedan afectar el funcionamiento del sitio.

Si los archivos se modifican de manera incorrecta, tu web puede sufrir cambios indeseados en la apariencia, o peor aún, dejar de funcionar. Ten extrema precaución si intentas hacer algún cambio aquí.

Se hace hincapié en el peligro que conlleva esta opción si no tienes conocimientos sobre HTML, CSS o PHP. Modificar los archivos del Tema puede ocasionar cambios drásticos en su apariencia, y en el peor de los casos, interrumpir el funcionamiento del sitio.

Tu Take-Away para hoy

  1. Mejora la apariencia de tu web explorando los diferentes Widgets
  2. Crea una Squeeze page, o página optimizada para captar suscriptores (ejemplo aquí), y pon un enlace a esta página en tu menú.
  3. Mejora la cabecera de tu web, con tu logo o imagen preferida.

Descubre lo que
necesitas ahora
para vender más

Realiza el Quiz ahora y conocerás el resultado al instante

¿Quieres saber qué herramientas uso en mi negocio, cuáles recomiendo a mis clientes y cuál necesitas tú ahora mismo, en el momento actual en el que te encuentras, para vender más o mejor en tu negocio digital?

Realiza ahora mismo el quiz tecnológico que he preparado, para determinar tu fase actual, y decirte en el instante en que deberías enfocarte ahora mismo para vender más o de la mejor forma posible

Mockup escritorio herramientas
Ir arriba