# Conteúdo de pop-up da Web
O **conteúdo de pop-up da Web** é o layout visual que os visitantes veem quando um pop-up da Web aparece em seu site. Crie-o em **Conteúdo** e, em seguida, anexe-o a uma [campanha de pop-up da Web](/pt/product/messaging-channels/web-popups/create-web-popups-campaigns/).
## Criar conteúdo de pop-up da Web
1. Vá para **Conteúdo** → **Conteúdo de pop-up da Web**.
2. Clique em **Criar conteúdo de pop-up da Web**.
3. Escolha um modelo inicial na galeria.
4. Depois de escolher um modelo, personalize o pop-up no editor.
### Nomear o pop-up
Clique no nome do pop-up na barra superior para editá-lo. O nome identifica este conteúdo dentro do Pushwoosh, na lista de conteúdo e no assistente de campanha. Os visitantes do site não o veem.
### Editar configurações do pop-up
Ajuste a aparência e a posição do pop-up no painel de configurações à esquerda da tela de edição:
#### Imagens
Se o layout incluir uma ou mais imagens, cada uma terá seu próprio bloco na parte superior do painel com uma pré-visualização e controles.
Clique em **Alterar imagem** para escolher um arquivo da [Loja de Mídia](/pt/product/content/media-store/) do seu projeto.
Abaixo da pré-visualização:
- **Ajuste:** como a imagem preenche seu quadro: **Natural**, **Cobrir** ou **Conter**. Não é exibido para uma imagem de fundo, que sempre cobre sua área.
- **Desfoque:** suaviza a imagem, de 0 a 20 px.
- **Escurecer:** apenas para imagens de fundo. Adiciona uma camada escura sobre a foto para que o texto colocado sobre ela permaneça legível, de 0 a 100%.
Alguns layouts também adicionam uma seção de **Layout** com configurações de posicionamento de imagem:
- **Largura da imagem:** parte da largura do pop-up, como uma porcentagem.
- **Posição da imagem:** **Esquerda** ou **Direita**, para layouts com uma imagem ao lado do texto.
A seção **Layout** só aparece quando o layout atual tem configurações como estas. Em um layout de barra inferior, ela oferece **Largura dos botões** em vez de controles de imagem.
#### Tamanho e estilo do pop-up
Na seção **Pop-up**:
- **Largura, Altura (vazio = automático):** deixe ambos vazios para um pop-up que se ajusta ao seu conteúdo, ou defina um tamanho fixo em pixels. Em um pop-up com várias páginas, cada página tem seu próprio tamanho.
- **Raio do canto, Sombra:** o arredondamento dos cantos e a sombra projetada do pop-up.
- **Animação:** como o pop-up aparece: **Nenhuma**, **Esmaecer** ou **Deslizar**.
#### Cores
Clique em **Cores** para expandir a paleta de cores do pop-up:
- **Fundo, Destaque (botões):** o fundo do pop-up e a cor de destaque aplicada aos botões.
- **Texto, Texto secundário:** a cor do corpo do texto e do texto secundário, como legendas e títulos auxiliares.
- **Texto sobre imagem:** exibido apenas para layouts com texto sobre uma imagem de fundo. Define a cor usada para esse texto.
#### Posicionamento e sobreposição
Na seção **POSICIONAMENTO**:
- **Posição:** escolha onde o pop-up se ancora na página usando a grade 3×3.
- **Deslocamento da borda:** defina a distância em pixels da borda selecionada.
Na seção **SOBREPOSIÇÃO**:
- **Escurecer a página atrás:** ative para escurecer o resto da página enquanto o pop-up é exibido.
- **Cor, Opacidade:** defina a cor e a opacidade da sobreposição de 0 a 1.
### Editar texto
Clique em qualquer bloco de texto no pop-up para editá-lo diretamente. Uma barra de ferramentas aparecerá acima dele:
- Aplicar formatação em **negrito**, *itálico* ou sublinhado.
- Adicionar ou remover um link.
- Definir alinhamento à esquerda, centro ou direita.
- Escolher um estilo de texto: **Ícone**, **Título auxiliar**, **Título 1–3**, **Corpo** ou **Legenda**.
### Editar botões
Clique em um botão para abrir sua barra de ferramentas:
- Escolha o estilo do botão: **Primário** ou **Secundário**.
- Escolha o que o botão faz:
- **Abrir um link:** insira a URL de destino.
- **Fechar o pop-up**.
- **Ir para a página:** escolha outra página do pop-up para a qual alternar. Esta opção aparece quando o pop-up tem mais de uma página. Veja [Trabalhar com várias páginas](#work-with-multiple-pages).
## Trabalhar com várias páginas
Um pop-up da Web pode ter mais de uma página, por exemplo, para guiar os visitantes através de uma oferta curta de várias etapas.
### Adicionar uma página
Clique em **+ Adicionar página** para abrir o menu de adição de página:
- **Duplicar página atual:** copia a página ativa, incluindo quaisquer edições que você tenha feito, como uma nova página.
- Escolha um dos layouts de página única para adicionar uma nova página com o conteúdo de demonstração desse layout. A nova página é independente das outras, então pode usar um layout diferente.
Cada aba é uma página. Clique em uma aba para alternar para ela.
### Definir a página inicial
A aba marcada com ★ é a **página inicial**, a página que os visitantes veem primeiro. Para alterá-la, abra outra aba e clique em ☆ nessa aba.
### Excluir uma página
Na aba ativa, clique em **✕**. Uma caixa de diálogo de confirmação será aberta. Clique em **Excluir** para remover a página. Isso não pode ser desfeito.
## Salvar o conteúdo
Revise o conteúdo, as imagens e as ações dos botões. Quando terminar, clique em **Salvar** na barra superior.
## Usar o conteúdo em uma campanha
Depois de salvar, o conteúdo aparece em **Conteúdo** → **Conteúdo de pop-up da Web**. Abra-o na lista para continuar editando.
Para exibi-lo no site, vá para **Campanhas** → **Pop-ups da Web**, crie ou edite uma campanha e escolha este conteúdo na etapa **Conteúdo**.
Em seguida, configure o público, as configurações de exibição, a frequência e as opções de lançamento. Para o fluxo completo, consulte [Criar campanhas de pop-up da Web](/pt/product/messaging-channels/web-popups/create-web-popups-campaigns/).
4. Depois de escolher um modelo, personalize o pop-up no editor.
### Nomear o pop-up
Clique no nome do pop-up na barra superior para editá-lo. O nome identifica este conteúdo dentro do Pushwoosh, na lista de conteúdo e no assistente de campanha. Os visitantes do site não o veem.
### Editar configurações do pop-up
Ajuste a aparência e a posição do pop-up no painel de configurações à esquerda da tela de edição:
#### Imagens
Se o layout incluir uma ou mais imagens, cada uma terá seu próprio bloco na parte superior do painel com uma pré-visualização e controles.
Clique em **Alterar imagem** para escolher um arquivo da [Loja de Mídia](/pt/product/content/media-store/) do seu projeto.
Abaixo da pré-visualização:
- **Ajuste:** como a imagem preenche seu quadro: **Natural**, **Cobrir** ou **Conter**. Não é exibido para uma imagem de fundo, que sempre cobre sua área.
- **Desfoque:** suaviza a imagem, de 0 a 20 px.
- **Escurecer:** apenas para imagens de fundo. Adiciona uma camada escura sobre a foto para que o texto colocado sobre ela permaneça legível, de 0 a 100%.
Alguns layouts também adicionam uma seção de **Layout** com configurações de posicionamento de imagem:
- **Largura da imagem:** parte da largura do pop-up, como uma porcentagem.
- **Posição da imagem:** **Esquerda** ou **Direita**, para layouts com uma imagem ao lado do texto.
A seção **Layout** só aparece quando o layout atual tem configurações como estas. Em um layout de barra inferior, ela oferece **Largura dos botões** em vez de controles de imagem.
#### Tamanho e estilo do pop-up
Na seção **Pop-up**:
- **Largura, Altura (vazio = automático):** deixe ambos vazios para um pop-up que se ajusta ao seu conteúdo, ou defina um tamanho fixo em pixels. Em um pop-up com várias páginas, cada página tem seu próprio tamanho.
- **Raio do canto, Sombra:** o arredondamento dos cantos e a sombra projetada do pop-up.
- **Animação:** como o pop-up aparece: **Nenhuma**, **Esmaecer** ou **Deslizar**.
#### Cores
Clique em **Cores** para expandir a paleta de cores do pop-up:
- **Fundo, Destaque (botões):** o fundo do pop-up e a cor de destaque aplicada aos botões.
- **Texto, Texto secundário:** a cor do corpo do texto e do texto secundário, como legendas e títulos auxiliares.
- **Texto sobre imagem:** exibido apenas para layouts com texto sobre uma imagem de fundo. Define a cor usada para esse texto.
#### Posicionamento e sobreposição
Na seção **POSICIONAMENTO**:
- **Posição:** escolha onde o pop-up se ancora na página usando a grade 3×3.
- **Deslocamento da borda:** defina a distância em pixels da borda selecionada.
Na seção **SOBREPOSIÇÃO**:
- **Escurecer a página atrás:** ative para escurecer o resto da página enquanto o pop-up é exibido.
- **Cor, Opacidade:** defina a cor e a opacidade da sobreposição de 0 a 1.
### Editar texto
Clique em qualquer bloco de texto no pop-up para editá-lo diretamente. Uma barra de ferramentas aparecerá acima dele:
- Aplicar formatação em **negrito**, *itálico* ou sublinhado.
- Adicionar ou remover um link.
- Definir alinhamento à esquerda, centro ou direita.
- Escolher um estilo de texto: **Ícone**, **Título auxiliar**, **Título 1–3**, **Corpo** ou **Legenda**.
### Editar botões
Clique em um botão para abrir sua barra de ferramentas:
- Escolha o estilo do botão: **Primário** ou **Secundário**.
- Escolha o que o botão faz:
- **Abrir um link:** insira a URL de destino.
- **Fechar o pop-up**.
- **Ir para a página:** escolha outra página do pop-up para a qual alternar. Esta opção aparece quando o pop-up tem mais de uma página. Veja [Trabalhar com várias páginas](#work-with-multiple-pages).
## Trabalhar com várias páginas
Um pop-up da Web pode ter mais de uma página, por exemplo, para guiar os visitantes através de uma oferta curta de várias etapas.
### Adicionar uma página
Clique em **+ Adicionar página** para abrir o menu de adição de página:
- **Duplicar página atual:** copia a página ativa, incluindo quaisquer edições que você tenha feito, como uma nova página.
- Escolha um dos layouts de página única para adicionar uma nova página com o conteúdo de demonstração desse layout. A nova página é independente das outras, então pode usar um layout diferente.
Cada aba é uma página. Clique em uma aba para alternar para ela.
### Definir a página inicial
A aba marcada com ★ é a **página inicial**, a página que os visitantes veem primeiro. Para alterá-la, abra outra aba e clique em ☆ nessa aba.
### Excluir uma página
Na aba ativa, clique em **✕**. Uma caixa de diálogo de confirmação será aberta. Clique em **Excluir** para remover a página. Isso não pode ser desfeito.
## Salvar o conteúdo
Revise o conteúdo, as imagens e as ações dos botões. Quando terminar, clique em **Salvar** na barra superior.
## Usar o conteúdo em uma campanha
Depois de salvar, o conteúdo aparece em **Conteúdo** → **Conteúdo de pop-up da Web**. Abra-o na lista para continuar editando.
Para exibi-lo no site, vá para **Campanhas** → **Pop-ups da Web**, crie ou edite uma campanha e escolha este conteúdo na etapa **Conteúdo**.
Em seguida, configure o público, as configurações de exibição, a frequência e as opções de lançamento. Para o fluxo completo, consulte [Criar campanhas de pop-up da Web](/pt/product/messaging-channels/web-popups/create-web-popups-campaigns/).