Nosso novo construtor de páginas introduz uma experiência moderna de edição de conteúdo baseada em blocos no Workvivo. Permite aos administradores criar páginas profissionais, otimizadas para dispositivos móveis, usando uma interface de arrastar e soltar com blocos de conteúdo flexíveis, layouts estruturados e visualização em tempo real.
Essa melhoria aumenta significativamente a usabilidade, a flexibilidade e a escalabilidade das Páginas para administradores e criadores de conteúdo.
Vamos dar uma olhada nos novos componentes que permitirão a criação de Páginas com facilidade e apelo visual. Vamos dar uma olhada nos Blocos de Componentes e no Editor Markdown.
Guia de Blocos de Componentes
Esses blocos ficam na barra lateral esquerda e aparecem quando você clica na opção Componentes . Eles são usados para dar mais controle ao design ou um layout mais avançado.
📐 Layout
- 2 colunas: Divide o conteúdo em duas colunas verticais.
- 3 colunas: Divide o conteúdo em três colunas verticais.
📝 Conteúdo básico
- Parágrafo: Bloco de texto padrão
- Título 1: Título principal da seção
- Título 2: Título da subseção
- Título 3: Título de seção aninhada
- Título 4: Título de subseção secundária
- Lista (numerada): Lista ordenada com números
- Lista com marcadores: Lista não ordenada com marcadores
🧱 Componentes Estruturados e Visuais
| Componente | Detalhe | Caso de uso |
|---|---|---|
| Incorporar | Incorpora conteúdo externo (documentos, painéis, Figma, formulários) | Utilize ao fazer referência a recursos ao vivo ou interativos. |
| Cartão | Exibe o conteúdo em formato de cartão visual. | Utilize para navegação ou para destacar recursos importantes. |
| Chamar | Bloco de conteúdo destacado para dar ênfase. | Bloco de conteúdo destacado para dar ênfase. |
| Mesa | Linhas e colunas estruturadas para dados organizados | Utilize para comparações ou informações estruturadas. |
| Imagem | Insere uma imagem na página. | Utilize para suporte visual ou exemplos. |
| Acordeão | Seção de conteúdo expansível/recolhível | Seção de conteúdo expansível/recolhível |
| Vídeo | Incorpora ou carrega um vídeo | Linha horizontal separando seções |
| Botão | Elemento de ação clicável | Utilize para chamadas à ação (CTAs) ou para vincular fluxos de trabalho importantes. |
| Divisor | Linha horizontal separando seções | Utilize para dividir visualmente as seções em páginas mais longas e melhorar a legibilidade. |
Guia do Editor Markdown
Este editor oferece uma maneira simples e eficaz de escrever e editar texto. Algumas opções de formatação existem tanto no Editor Markdown quanto nos Blocos de Componentes.
🔄 Edição
- Desfazer: Reverte a alteração mais recente.
- Refazer: Restaura a alteração desfeita mais recentemente.
🧾 Menu suspenso de estilo de texto (Menu de texto normal)
- Título grande: Título principal da seção
- Título pequeno: Título da subseção
- Lista com marcadores: Lista não ordenada com marcadores
- Lista numerada: Lista ordenada com números
- Citação: Citação recuada ou bloco de texto destacado (Use para destacar notas importantes ou texto referenciado)
- Bloco de código: Bloco formatado para exibir código ou texto técnico (Use para trechos de código ou conteúdo técnico estruturado)
✍️ Formatação de texto
- Negrito: Destaca o texto com maior peso.
- Itálico: Adiciona uma ênfase sutil ao texto.
- Tachado: Indica que o texto foi removido ou concluído.
- Código embutido (</>): Formata o texto como código embutido (Use ao referenciar comandos, variáveis, nomes de arquivos ou pequenos trechos técnicos dentro de uma frase)
📐 Alinhamento e Recuo
- Alinhar à esquerda / ao centro / à direita: Alinha o texto à esquerda / horizontalmente / à direita
- Justificar: Alinha o texto uniformemente ao longo da linha.
- Recuar à direita: Recua o conteúdo para criar hierarquia.
- Recuar à esquerda: Move o conteúdo recuado de volta ao alinhamento padrão.
➕ Encartes e Extras
- Inserir (+): Abre a biblioteca de componentes
- Link: Adiciona um hiperlink ao texto selecionado (Use para recursos externos ou navegação interna)
- Emoji: Insere emojis no conteúdo (Use para dicas visuais ou tom)
- Traduzir: Traduz conteúdo para outro idioma (Use para conteúdo global ou multilíngue)
- Pré-visualização para dispositivos móveis: Exibe como o conteúdo aparece em dispositivos móveis (Use para confirmar a legibilidade e o layout em dispositivos móveis).
- <->: Oferece opções para ajustar a largura da página, desde a largura padrão até a largura média ou total.