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).
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.
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.
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.
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.
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).
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.
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.
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.
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ú.
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.
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.
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.
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.
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.
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.
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.
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.
Cabecera (o más conocido como logo)
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.
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.
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í.
Tu Take-Away para hoy
- Mejora la apariencia de tu web explorando los diferentes Widgets
- Crea una Squeeze page, o página optimizada para captar suscriptores (ejemplo aquí), y pon un enlace a esta página en tu menú.
- Mejora la cabecera de tu web, con tu logo o imagen preferida.
