Twenty Fifteen: vertical y eficaz

Esta entrada ofrece la información básica necesaria para la configuración de la plantilla Twenty Fifteen (2015), disponible en Hypotheses desde hace unos meses. Tras activar la plantilla en el menú Apariencia>Temas, la mayoría de las opciones de configuración se encontrarán en Apariencia>Personalizar.

Una plantilla que se adapta a todas las pantallas

Twenty Fifteen se basa en las últimas tecnologías en materia de experiencia de usuario y de la metodología Mobile first: el diseñador web desarrolla la plantilla desde la versión móvil, considerándola la más utilizada. Es por lo tanto una plantilla responsive, ya que se adapta perfectamente a todos los tipos y tamaños de pantalla.

responsive_mockup_tam020615

 

 

 

 

 

 

 

 

Una cabecera vertical

Twenty Fifteen pone el énfasis en la legibilidad de los contenidos y se diferencia de otras plantillas en la ausencia de cabecera horizontal. Todo sucede en la columna lateral izquierda, que muestra los menús, los widgets pero también el título y subtítulo del blog, convirtiendo este espacio en la verdadera cabecera del blog, aunque no esté situada en la parte superior del mismo.

Dos menús personalizables
Os habréis dado cuenta de que cuando os desplazáis hacia la parte inferior del blog, la columna lateral izquierda se mueve a la par. En esta columna se puede colocar, una vez creado, el menú de navegación del blog, que también será vertical. Para hacerlo hay que dirigirse a Apariencia>Menús y después pinchar en la pestaña Opciones de pantalla situada en la esquina superior derecha del blog. Marcamos la casilla “Descripción”. A partir de este momento, al mostrar las opciones de cualquier elemento de un menú (haciendo clic en la flecha invertida de la caja del menú) aparecerá un nuevo campo denominado “Descripción”. Aquí podemos incluir unas palabras o una frase que aclaren el contenido que el lector podrá encontrar dentro de esa sección.

menus

También existe la opción de crear un segundo menú con los iconos de nuestras redes sociales debajo del primero. Para hacerlo pinchamos en “crea un nuevo menú” y elegimos la opción Customs Links. Aquí introducimos el enlace a la red social que queramos y “Añadimos al menú”. Importante: No debemos olvidar marcar en Ubicación del tema: “Menú de enlaces sociales”. Podemos añadir varios enlaces con este procedimiento. Los iconos de las redes (Facebook, twitter, google plus, etc.) aparecen por defecto al introducir el enlace, no siendo necesario que configuremos nada.

social

Este menú solo funciona con las siguientes redes:

• CodePen
• Digg
• Dribbble
• Dropbox
• Email (mailto: links)
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Path
• Pinterest
• Pocket
• Polldaddy
• Reddit
• RSS Feed (URLs + /feed/)
• Spotify
• Skype
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• WordPress
• YouTube

 

La vie en rose….o en amarillo
Twenty Fifteen ofrece seis juegos de colores que se pueden seleccionar en el menú “Apariencia>Personalizar>Colores”. A partir de estas combinaciones básicas, se pueden ajustar los colores según se desee. Se puede modificar el color de:
• La zona principal de publicación del blog
• El texto de la columna izquierda (incluido el título y el subtítulo del blog)
• El fondo de la cabecera y la barra lateral ( considerando cabecera el espacio situado en la parte superior de la columna izquierda que comprende el título y el subtítulo).
• También se puede poner una imagen de cabecera (que ocupará toda la columna de la izquierda) al igual que una imagen para la zona principal de publicación. Para hacer esto hay que dirigirse a “Apariencia>Personalizar>Imagen de cabecera/ Imagen de fondo”.

colores

 

Importante: si se opta por colocar imágenes, se debe tener en cuenta el espacio disponible y ajustar su tamaño al mismo, especialmente la imagen de la columna izquierda, que debe ser estrecha y alargada. Por lo tanto, para que las imágenes no se deformen y su visualización sea la adecuada, lo recomendable sería elegir imágenes del mismo tamaño o superior al hueco disponible. La columna izquierda tiene 248 pixels de ancho y la zona de publicación 660. Además, es conveniente que las imágenes sean sobrias y que no interfieran con los elementos textuales para no perturbar la lectura.

Por último, no olvidéis hacer constar los créditos de las imágenes que utilicéis. Aquí os contamos trucos interesantes sobre cómo hacer esto y más cosas interesantes acerca de dónde buscar imágenes libres de derechos, etc. de insertar imágenes

Sacar el máximo partido de las imágenes de cabecera
Como otras plantillas, Twenty Fifteen permite colocar una imagen destacada en la parte superior de cada entrada. Para hacer esto, hay que situarse en el espacio de edición de la entrada que queramos, desplazarnos a la parte derecha inferior y añadir una imagen en “Imagen destacada”. Para que las imágenes se visualicen de manera óptima, se recomienda que estas tengan las siguientes dimensiones: 825 pixeles de ancho por 510 de alto. Igualmente recomendamos hacer constarlos créditos de esta imagen.
Para saber un poco más
Para aquellos que queráis profundizar más en las opciones de Twenty Fifeteen, os dejamos algunos tutoriales (en inglés):

Tutorial oficial de WordPress.org
Top 8 Features Of WordPress 4.1 Twenty Fifteen Theme (Reviewed)
Twenty Fifteen WordPress Theme Review: When Less Is More
How to Customize Twenty Fifteen to Make it Your Own

Recordad que si tenéis alguna duda sobre la configuración de esta plantilla o de vuestro blog en general, podéis escribir a la lista de distribución blogueros@openedition.org . Suerte con vuestra configuración.
Hasta pronto.

[Esta entrada es una versión en español de la entrada publicad originalmente en francés por Michel Tamarin en La maison des carnets.]


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *