Diseño: personalizar la interfaz de las publicaciones

Categoría:
Diseño, Editar

En este artículo:

Tiempo de lectura: 7 minutos
Añade el logotipo de tu marca, personaliza el look & feel, crea un menú o un índice. Esto y más es posible en cada publicación que realices: es hora de personalizarla.

Anatomía de una publicación

#anatomia

Toda publicación cuenta con 3 partes claramente definidas y que puedes personalizar según tus necesidades:

  1. Barra de opciones, también conocida como barra de herramientas o barra de menú.
  2. Flechas de navegación.
  3. Fondo.

Para personalizar la interfaz, lo primero que debes hacer es iniciar sesión en el Drive de Webpublication. Luego ir a tu publicación y hacer clic en Editar > Diseño.

A la izquierda de esta pantalla tendrás una vista previa de tu publicación y a la derecha las opciones de personalización. Conforme hagas cambios verás cómo quedan en tiempo real.

Crear o seleccionar un tema

#tema

En SELECCIONAR TEMA se almacenan los temas que guardes y cada tema almacena logotipo, colores y configuración de la barra de opciones de la publicación.

Si es tu primera publicación solo estará disponible el tema “Por defecto”.

Una vez personalices tu primera publicación podrás volver a este apartado y hacer clic en Guardar como para crear un tema que podrás usar en futuras publicaciones:

  • Al hacer clic en CREAR NUEVO MODELO > Guardar como, asigna un nombre en el pop-up y presiona CREAR para sumar tu nuevo tema a la lista.

Personalizar la barra de herramientas

#barra

Desde el apartado GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS podrás establecer qué funcionalidades aparecen en la barra superior del proyecto, el orden y en qué pantallas se pueden ver (desktop, tablet, mobile):

  1. Para comenzar haz clic en Administrar.
  2. En el pop-up que se abre encontrarás una columna llamada ARRASTRAR ELEMENTOS con las funciones disponibles.
    Cada caja es una función que puedes añadir a la barra de tu publicación: a la izquierda, centro, derecha o en un menú burger.
  3. Selecciona la función y arrástrala hasta el lugar donde quieres que aparezca. Luego haz clic en GUARDAR.
    Si quieres ver cómo queda, haz clic en el icono de previsualizar en la esquina superior derecha.
  4. Luego repite el mismo proceso para configurar la barra en tablets y móviles, haciendo clic en el desplegable MENÚ DE ESCRITORIO. Lo ideal es mover la mayor cantidad de funciones al MENÚ BURGER porque todas las funciones no entraran en la barra de pantallas pequeñas.
MENÚ BURGER

Las funciones que agregues en el menú burger se agruparán en un icono de tres rallas , que el usuario podrá ver al hacer tap.

Personalizar el icono de una función

#personalizaricono

Desde el apartado GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS luego que has establecido qué funcionalidades aparecerán en la barra superior del proyecto, podrás modificar el icono que representa esta función por uno propio:

  1. Selecciona la función que has arrastrado a la barra. Luego haz clic en el icono de engranaje que aparece en la función y activa la casilla «Personalizar».
  2. TOOLTIP TEXT: modifica el texto de la descripción del botón.
  3. ICONO DE IMPORTACIÓN: agrega el icono PNG, JPG o SVG que preparaste para esta nueva función.

Vincular una galería con la publicación

#conectargaleria

  1. En tu publicación, accede a la pantalla Diseño > GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS > Administrar.
  2. Arrastra y suelta el botón Galería/Aplicación en la ubicación deseada (izquierda, centro o derecha) para que se muestre en la barra de menú.
  3. Haz clic en el icono del engranaje del botón y selecciona tu galería (previamente creada) haciendo clic en el botón VER.

Crear un botón personalizado

#botonpersonalizado

Puedes añadir a la barra un botón personalizado para ejecutar funciones tales como:

  • Abrir en pop-up, una hemeroteca o galería creada con Webpublication.
  • Dirigir al usuario a un enlace externo: redes sociales, e-commerce, formulario de contacto, encuesta, etc.
  • Ir a una página específica de la publicación, como la de sumario/índice.
  • Permitir al usuario descargar un archivo PDF.
  • Ir a la misma publicación en otro idioma, entre otras.

Primero que nada diseña un icono que represente la función en formato PNG, JPG o SVG (añade margen al icono para que respire en la barra y una altura mínima de 300px), luego:

  1. En tu publicación, accede a la pantalla Diseño > GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS > Administrar.
  2. En la columna ARRASTRAR ELEMENTOS, coge el Botón personalizado y arrástralo hasta la parte de la barra donde quieres que se vea: izquierda, centro o derecha.
  3. Despliega las opciones haciendo clic en el icono del engranaje y completa cada campo:
    • TOOLTIP TEXT: una descripción corta sobre la función del botón.
    • ICONO DE IMPORTACIÓN: agrega el icono PNG, JPG o SVG que preparaste para esta nueva función.
    • ACTION: establece la función del botón:
      1. URL: abrir un link externo.
      2. Drive’s asset: abre un componente creado en Webpublication (publicación, galería, pop-up, etc.).
      3. Ir a la página: permite ir a una página específica de la publicación, ej. Sumario.
      4. Dynamic contact: permite añadir un acceso rápido a los datos de contacto de un usuario Webpublication.
    • OPEN LINK INTO: establece cómo se abrirá el contenido de este botón, en la misma pestaña, nueva pestaña o en un pop-up.
  4. Haz clic en GUARDAR y luego decide la ubicación del icono en el Menú tablet y Menú móvil.
PLANTILLA ICONO

Si lo deseas puedes descargar este archivo que contiene un icono de ejemplo editable (con guías y fondo incluidos). Reemplázalo por tu icono y generar un nuevo archivo SVG (recomendado), PNG o JPG.

MENÚ BURGER

Los botones personalizados no deben ubicarse en el MENÚ BURGER.

Crear un índice

#indice

Puedes crear un índice accesible desde la barra para que el usuario pueda ir rápidamente de un tema/artículo/capítulo a otro de la publicación.

  1. En tu publicación, accede a la pantalla Diseño > GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS > Administrar.
  2. En la columna ARRASTRAR ELEMENTOS, coge Índice y arrástralo hasta la parte de la barra donde quieres que se vea: izquierda, centro o derecha.
  3. Despliega las opciones haciendo clic en el icono del engranaje, personaliza el icono (opcional) y haz clic en EDITAR ÍNDICE.
  4. En la ventana que aparece a continuación coge el botón Capítulo o Página y arrástralo a la zona en blanco de la ventana:
    • Rellena el campo Título y la página.
    • Repite el mismo proceso para cada tema/artículo/capítulo que desees agregar al índice.
    • Haz clic en GUARDAR.
  5. Cuando vuelvas a la pantalla Administrador de menús haz clic en GUARDAR y luego decide la ubicación del icono en el Menú tablet y Menú móvil.
Subapartados

Cuando quieras añadir un subapartado o subcapítulo en el índice, solo debes mover un poco más adentro el elemento. El superior será el elemento padre o apartado/capítulo principal.

Crear un menú con el Tab manager

#tabmanager

Puedes agregar un menú en la barra para que el usuario pueda ir rápidamente de una sección a otra.

  1. En tu publicación, accede a la pantalla Diseño > GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS > Administrar.
  2. En la columna ARRASTRAR ELEMENTOS, coge Tab manager y arrástralo hasta la parte de la barra donde quieres que se vea: izquierda, centro (recomendado) o derecha.
  3. Despliega las opciones haciendo clic en el icono del engranaje luego en EDIT TABS.
  4. En la ventana que aparece a continuación coge el botón Tab y arrástralo a la zona en blanco de la ventana y completa cada campo:
    • En Tab 1 título de la sección
    • Página a la que irá al hacer clic
    • Tamaño y color de la tipografía
    • En Underline establece el tamaño y color del subrayado que aparecerá al pasar el cursor sobre la pestaña
  5. Luego coge el botón Space y arrastrando ubícalo después de Tab 1. Establece el tamaño en px de la separación entre pestaña y pestaña.
  6. Repite el mismo proceso para cada nueva pestaña que desees agregar al menú de navegación.
  7. Haz clic en GUARDAR.
  8. Cuando vuelvas al Administrador de menús haz clic en GUARDAR y luego decide la ubicación del icono en el Menú tablet y Menú móvil.
UX tips

Tu barra contará con logo e iconos de funciones, por lo que quedará poco espacio para usuarios con pantallas pequeñas. Por eso te recomendamos:

  • No recargues el menú, define secciones claves
  • Establece textos cortos
  • No uses el menú en móvil, en su lugar configura un índice

Cargar un PDF personalizado

#pdfpersonalizado

Dentro de las funciones disponible en GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS se encuentra Descargar PDF, que permite al usuario descargar la versión en PDF de la publicación digital.

Este PDF es una captura de las páginas del digital, sin interactividades y sin contenido de segundo nivel. Si lo deseas puedes añadir un PDF a medida de tu publicación o la versión print. Para ello:

  1. En tu publicación, accede a la pantalla Diseño > GESTIONA TUS MENÚS, ICONOS Y BOTONES PERSONALIZADOS > Administrar.
  2. En la columna ARRASTRAR ELEMENTOS, coge Descargar PDF y arrástralo hasta la parte de la barra donde quieres que se vea: izquierda, centro o derecha (recomendado) .
  3. Despliega las opciones haciendo clic en el icono del engranaje. Tendrás dos disponibles en el desplegable TIPO DE PDF:
    • PDF personalizado: úsalo para subir una versión PDF de la publicación digital que tengan el mismo número de páginas que ésta. Así en el momento de realizar la descarga el usuario podrá elegir bajar una página en particular o todo el PDF.
    • PDF completo: sube la versión PDF del print original de tu publicación o uno creado a medida, para que el usuario lo pueda descargar.
  4. En el botón VER busca el PDF en el ordenador (espera a que se realice la carga).
  5. Haz clic en GUARDAR.
  6. De vuelta en Administrador de menús haz clic en GUARDAR y luego decide la ubicación del icono en el Menú tablet y Menú móvil.

Personalizar los colores de la interfaz

#coloresinterfaz

Puedes cambiar los colores de todos los elementos de la barra (fondo, iconos, tooltips), flechas de navegación y el fondo.

Para cambiar los colores en tu publicación, haz clic en Editar > Diseño y baja hasta la sección Definir para todas las páginas.

Modifica los colores y la opacidad para:

  • Barra de menú superior
  • Página
  • Flechas
  • Enlaces
  • Tooltip
  • Estilo del pop-up

Verás los cambios aplicados en la vista previa de la publicación a la izquierda.

También podrías hacer que cada pliego luzca diferente. Para ello:

  1. Haz clic en la pestaña Definir para la página actual.
  2. Desde la vista previa a la izquierda avanza hasta la página que quieres modificar
  3. Modifica los colores y la opacidad para:
    • Barra de menú superior
    • Página
    • Flechas
  4. Realiza el mismo proceso para el resto de páginas que deseas personalizar.

Cuando termines de personalizar tu publicación haz clic en GUARDAR en la esquina superior derecha. Luego podrás avanzar hasta Enriquecimiento (solo publicaciones simples) e Integración para finalizar.