Como funciona o Creative Studio

Quando você criar e editar páginas no seu console, você encontrará a aba de edições do creative studio no canto direito da página. É por lá que você poderá adicionar ou editar os conteúdos na sua página. Vamos lá? 

Barra superior

No canto superior do creative studio, você verá uma barra com botões cuja a funcionalidade é de navegar, editar e utilizar a função proof pelo seu creative.

No lado esquerdo dessa barra, você encontrará alguns links de navegação que podem ser utilizados para acessar a aba de gerenciamento do creative, da campaign ou mesmo do portfolio em que ele se encontra.

Já no lado direito da barra, você poderá conferir o status da página, se ela já está no ar, por exemplo, e também acessar algumas operações comuns rapidamente.

Da esquerda para a direita, o primeiro desses ícones é o que indica se o creative está no ar, onde estará escrito "Live" em verde claro. Se você já adicionou uma URL ao creative, você o verá, mas se ainda não, a tela não contará o ícone.

O próximo ícone, a caixa com linhas brancas, permitirá que você use a função toggle, exibindo e escondendo os seus containers na visão que você preferir.

Você pode também explorar a visão em telas com tamanhos distintos de dispositivos eletrônicos com os próximos ícones: LG, MD, SM e XS do maior para o menor, sendo representados por um monitor, um tablet, um celular em modo panorâmico e outro em modo autorretrato, respectivamente. Essa função pode ser de grande ajuda quando você estiver publicando páginas que serão acessadas pode vários tipos diferentes de dispositivo.

Em seguida, você encontrará os botões "Undo" e "Redo", que permitem que você desfaça alterações ou as faça novamente de acordo com a versão que você preferir do seu creative.

Finalmente, a barra superior também permite que você abra as funções de "Proof" e "Preview" em uma nova aba 

Traffic

O botão escrito "Traffic" poderá te mostrar quais URLs foram adicionadas ao seu creative e a performance delas em somente um clique. Você poderá também clicar nos links dessas URLs para acessar diretamente a aba de gerenciamento das URLs caso queira fazer edições ou conferir mais métricas. 

Aba de paletas

A aba de paletas é onde você encontrará os ícones para adicionar conteúdo à sua página, todos eles organizados em categorias de fácil identificação para que você possa criar e editar.

Você confere os detalhes ao passar o cursor do seu mouse sobre esses ícones. Além disso, você encontrará também uma seta no canto direito inferior de cada uma dessas categorias quando você estiver fazendo isso para fixar as ferramentas da categoria quando você estiver editando.

Para começar a criar e editar, é só você arrastar um desses ícones dentro das categorias até a página! 

Layout

A categoria Layout inclui ícones para a estrutura da sua página. É aqui que você encontrará o item responsive grid que poderá ser adicionado em qualquer container. Aqui, você pode também utilizar grids para adicionar uma estrutura de colunas, onde você poderá publicar conteúdo dentro.

Essa categoria também inclui ícones que podem ser utilizados para adicionar fileiras e colunas adicionais, rows e columns respectivamente. Você também encontrará um ícone de container ao final da categoria para caso você precise adicionar um container à sua página antes de começar com os grids. 

Basic e Forms

Nas categorias Basic e Form se encontram ícones com os quais você poderá adicionar textos, imagens, links, formulários e seus campos, code block para inserir HTML e também um componente para iFrame. Você pode arrastar esses ícones para a sua página e então publicar todo tipo de conteúdo na sua página.

Interactive

A categoria Interactive inclui componentes construídos de acordo com funcionalidades requisitadas para conteúdos interativos, como tabbed content, accordions, rotating images/content, layered content, lightboxes, vídeo, custom widgets (da Widget Library) e Flash (da Flash Library).

Social

A categoria Social é onde você encontrará componentes para marketing nas redes sociais, como inserir botões de compartilhamento para Facebook, Twitter, LinkedIn, E-mail e mais.

Edit

A aba de edição, Edit, é onde você poderá editar elementos da sua página!

Quando você clicar em algum elemento dentro da página, aparecerão opções de edição nessa aba. Já ao clicar duas vezes, se abrirá uma janela para edição direta do elemento.

Além disso, você poderá também remover um elemento o salvá-lo diretamente a partir dessa aba!

Textos - apenas clique e edite

Para editar textos, você pode simplesmente clicar duas vezes nele para abrir o editor e fazer mudanças que aparecerão imediatamente na página.

Ao clicar no botão CSS da aba de edições, você poderá optar por adicionar CSS ao seu texto também!

Imagens - faça o upload diretamente

Ao clicar duas vezes em uma imagem, você terá acesso a biblioteca de imagens, a Image Library. A partir daí, você poderá procurar por categorias e imagens até encontrar a que você preferir.

Para adicionar uma nova imagem, você poderá fazer o upload dela diretamente no editor de imagens. Você só precisará arrastar imagens do seu desktop para o editor de imagens em sua página.

Assim que a sua imagem estiver na página, você poderá também configurar ações e regras avançadas, além dos editores de CSS inline que estão sempre disponíveis em Edit para atribuir um link à sua imagem, aplicar lógica condicional ou então customizar o estilo padrão com CSS inline.

Links

Quando você clicar duas vezes em um link, o editor será aberto em uma pequena janela e nela você poderá incluir o texto que você gostaria de usar no seu link. Em seguida, você poderá voltar para a aba de edições e lá aplicar ações, regras avançadas e CSS inline também.

List

A aba List mostrará todos os elementos que estão sendo utilizados na sua página. Eles ficam agrupados em containers dentro dos quais foram publicados e se você passar o cursor do mouse sobre a lista de elementos, você verá uma sombra azul indicando o que se encontra dentro deles.

Você pode clicar duas vezes em um elemento da lista para editá-lo na aba de edições. Além disso, você pode também selecionar e arrastar elementos da lista para movê-los na sua página. 

Você também encontrará ícones a direita de cada um dos elementos da lista. Eles são usados para identificar o que foi aplicado em cada elemento, além do tipo de elemento que ele é. Por exemplo, um texto com um micro-theme aplicado terá um círculo roxo com um ícone 'A' ao lado. Você poderá também ver o que cada cor representa ao passar o mouse sobre qualquer um dos círculos.

Page

A aba page mostra informações importantes como o título da página que você está editando, assim como o status dela. Aqui você também poderá ver todas as regras e scripts aplicados. Para tal, apenas clique no botão "Rules" para abrir o editor de regras, onde você poderá adicionar o editar regras a serem executadas. Você poderá também adicionar scripts a página clicando no botão "+ Scripts". 

As Meta tags também são adicionadas na aba Page e você poderá configurá-las clicando no botão "+ Meta tags" aqui.

Por fim, você encontrará também informações sobre o layout e o tema, theme, aplicados no fim dessa aba.

Creative

A aba Creative mostra uma prévia de cada uma das páginas que fazem parte do creative. Para editar uma outra página, basta clicar na sua prévia e então comece a edição.

Além disso, você poderá adicionar outra página ao creative apenas clicando no ícone de "+" logo abaixo das prévias!