Diseño: personalizar la interfaz de las publicaciones

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.

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.

Para fijar los cambios, haz clic en el botón GUARDAR de la esquina superior derecha.

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.

Desde TU LOGO podrás añadir el logotipo de tu marca para reemplazar el de Webpublication en la barra superior:

• Haz clic en el botón Ver para añadir un logotipo. En el pop-up selecciona una imagen previamente cargada o busca en tu ordenador haciendo clic en el botón IMPORTAR DESDE EL ESCRITORIO.

Puedes utilizar archivos JPG, PNG o SVG. Añade margen a la imagen para que el logo respire en la barra.

Si deseas que se abra la web de tu marca al hacer clic en el logotipo, escribe la URL en el campo URL DEL LOGO.

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.

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.

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.

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.

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.

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.

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.

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. Dispones de dos pestañas, Todas las páginas y Página actual, comienza por Todas las páginas para personalizar la apariencia general de la interfaz del proyecto: