Breadcrumbs

Imagens Interativas

v7 v8 extra

Se tem no seu website/loja online a funcionalidade de imagens interativas, deverá saber que estas consistem em imagens com "bullets" informacionais.

Estas imagens interativas funcionam através da geração de um link. Abaixo encontrará todos os passos a seguir para poder criar uma imagem interativa e o respetivo link.


Para começar a usar as imagens interativas poderá utilizar os estilos já criados. Para isso, pode começar por:

Aceder ao campo "Atributos" de uma publicação já existente e copiar o link apresentado:

image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252F4ObvUuswnfDHipMVi77M%252F1.%2520copiar.png%3Falt%3Dmedia%26token%3Dd01c45fe-d946-487f-a9d8-c00267


Aceder ao Menu de backoffice Marketing > Imagens Interativas (aconselhamos abrir num novo separador):


image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FFqDnYsff5Kgj70sSQLVm%252F2.%2520acesso.png%3Falt%3Dmedia%26token%3Df81d4f5a-f0e8-43c9-a5c0-423054

Ao abrir este menu, deverá deparar-se com este interface:

image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FOGxPW1zFYsEsre9SPcYc%252F3.%2520imagens%2520interativas.png%3Falt%3Dmedia%26token%3D768ea6fe-b5e6

O interface irá apresentar-lhe um Guia de Uso na primeira utilização, que poderá seguir para mais dicas.

Para começar a criar a sua Imagem Interativa, deverá:

  1. Clicar na opção "Import" e, com a opção Image Map Pro Code selecionada, colar o link copiado inicialmente

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FSHDqoK5BQWoZltIm9enJ%252F4.%2520import.png%3Falt%3Dmedia%26token%3D2e064a95-d54b-4dcf-b8ee-d04ebc
    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FI4jMwiZOEWfQ9U6gCMHO%252F5.%2520colar%2520link.png%3Falt%3Dmedia%26token%3D8d92529e-47e9-4e67-a2b
  2. Após colar o link, clique em "Import"

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FMerMA3iuFJLKkL2xDuvn%252F6.%2520import.png%3Falt%3Dmedia%26token%3D659ca26b-f318-4890-ba31-3bd413

Agora poderá ver a arte copiada e começar a editar para criar uma nova.

Como editar a imagem de fundo da minha arte?

  • Clicar em Settings

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252F08pxazNa6jqDav0mP3Pk%252F7.%2520settings.png%3Falt%3Dmedia%26token%3D79f7b380-ef62-4fa3-973d-729e
  • image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FWqkU78h2HwnpNtI0OpfG%252F8.%2520image.png%3Falt%3Dmedia%26token%3D81ffbb13-9e15-4916-8eb1-348b2b8

    Selecione a tab "Image" - aqui tem acesso ao campo onde poderá alterar a imagem de fundo

  • image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252F0kalsVOQU5bajLfmaTRW%252F9.%2520gestor.png%3Falt%3Dmedia%26token%3Dd6d04014-c67a-4be6-b7a3-9da17d

    Para alterar a imagem, terá que primeiro carregar no site a imagem pretendida, acedendo ao menu Gestor de Ficheiros (aconselhamos abrir num novo separador)

  • Dentro de uma das pastas do Gestor de Ficheiros, faça upload da nova imagem.

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FMPVqoif2PxoF7aD17G0a%252F10.%2520upload.png%3Falt%3Dmedia%26token%3D3f932c7a-23c6-42df-bc2c-c4d17
  • Depois de fazer upload da imagem, encontre-a na sua galeria do Gestor de Ficheiros e selecione o icon da roda dentada no seu canto superior direito. De seguida selecione a oplão "Ver URL".

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FfwJScd3k86cM8ThOqQWf%252F11.%2520ver%2520url.png%3Falt%3Dmedia%26token%3D19abd1c9-2f69-4570-a875-
  • Copie o link da nova imagem a partir de /zArchives...

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FGOmv93gUxIYcSA1lgNWv%252F12.%2520copiar%2520url.png%3Falt%3Dmedia%26token%3D9db25a41-c29c-4a00-b2
  • Volte à página de criação das Imagens Interativas e cole o link da nova imagem no campo Image URL e faça Enter

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FEgszXLBsKyDRA3fqKMFK%252F13.%2520colcar%2520link.png%3Falt%3Dmedia%26token%3Dd8721bd6-9bdf-47a0-b

Agora deverá ter uma nova imagem de fundo na arte da sua Imagem Interativa, e podera alterar os "Bullets".

Como alterar os bullets da minha imagem interativa?

  1. Poderá duplicar e editar os bullets existentes para facilitar o processo

  • Para editar, clique sobre qualquer um dos bullets existentes e selecione as opções apresentadas para o editar:

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252Fy29HfwAbau1yvkLUWElm%252F14.%2520editar%2520bullets.png%3Falt%3Dmedia%26token%3Dd1857559-9e99-4a9
  • Para duplicar, clique sobre qualquer um dos bullets, e no menu à direita, selecioneao a opção Duplicar:

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FX5bDEXu4wjy2Kuw70VqU%252F15.%2520duplicar.png%3Falt%3Dmedia%26token%3D3fe91bb6-4001-42de-aaa7-545
  1. Arraste os bullets para a zona da imagem pretendida, conforme necessário, até estar satisfeito com o resultado.


Agora poderá exportar a sua imagem interativa e inseri-la na sua publicação.

  1. Quando finalizar a Imagem Interativa, selecione "Export" e copie o link gerado:

    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252F3x7QjsOhyShZIvPoWuPo%252FCaptura%2520de%2520ecra%25CC%2583%25202022-11-11%252C%2520a%25CC%2580s%2
    image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252FlLx4MsET0NaN1Rl4IsDG%252FCaptura%2520de%2520ecra%25CC%2583%25202022-11-11%252C%2520a%25CC%2580s%2
  2. Volte ao campo "Atributos" da publicação onde pretende inserir a Imagem Interativa, cole o link e selecione "Guardar".

image?url=https%3A%2F%2F3104397731-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MG91YgJwhRtpVIgjMsJ%252Fuploads%252F8SCphHogpYyJsl0Ob0Ll%252FCaptura%2520de%2520ecra%25CC%2583%25202022-11-11%252C%2520a%25CC%2580s%2

Está publicada a sua imagem!