Componente Share
O bloco Share foi pensado para introduzir uma área de partilha social dentro da página, acompanhada por texto editorial de contexto. Permite definir a apresentação visual do bloco, personalizar a aparência dos botões e ajustar alinhamento, espaçamentos, cor de fundo e offset conforme a composição.
Informações gerais
O bloco Share é uma solução direta para reforçar a distribuição de conteúdo, campanhas ou páginas institucionais através de botões de partilha social apresentados com enquadramento editorial próprio. Em vez de depender apenas de ícones soltos, o bloco permite criar uma zona de partilha mais clara, com texto de apoio e controlo visual sobre o aspeto final.
Este bloco pode incluir:
- um campo de Texto para introdução ou incentivo à partilha
- controlo estrutural através de Skin, Disabled block, Offset e Block ID
- ajustes visuais com Extra Class e Background color
- personalização dos botões via Buttons color, Buttons color hover, Button align, Space e Font size
- controlo de encaixe no layout com Margin e Padding
Utiliza este componente quando a partilha é uma ação relevante no percurso do utilizador e quando faz sentido dar-lhe presença própria no layout. É especialmente útil em artigos, páginas editoriais, landing pages, campanhas, estudos de caso ou conteúdos que beneficiam de circulação orgânica.
Exemplos visuais do bloco
3 formas de apresentar a partilha
O bloco Share pode ganhar leituras visuais diferentes consoante o contexto editorial, o alinhamento dos botões, a cor de fundo, o espaçamento entre ações e o texto de apoio definido no editor. Os três exemplos abaixo mostram variações frequentes sem sair da lógica base do componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para reforçar a circulação de artigos, notícias, campanhas ou páginas institucionais
- Quando a partilha precisa de contexto textual e não apenas de ícones soltos
- Para criar uma zona de recomendação no fim do conteúdo ou entre secções
- Quando faz sentido alinhar a aparência dos botões com a identidade visual da página
Quando evitar
- Quando a página já tem um sistema global de partilha e não convém duplicar a ação
- Quando o objetivo principal da secção é outro e a partilha iria dispersar a atenção
- Quando o conteúdo não tem utilidade real de recomendação, difusão ou circulação externa
Como usar na prática
Sequência de trabalho recomendada
Definir a mensagem
- Escrever um convite curto e claro que explique por que motivo vale a pena partilhar a página
- Ajustar o tom ao contexto: editorial, institucional, promocional ou de campanha
Ajustar a estrutura
- Escolher a Skin mais adequada e definir Offset apenas quando a partilha precisa de maior autonomia visual
- Usar Block ID, Extra Class e Background color de acordo com a composição da página
Personalizar os botões
- Definir Buttons color e Buttons color hover com contraste suficiente
- Ajustar Button align, Space e Font size para garantir leitura e ritmo visual
Validar no preview
- Confirmar que o texto não compete com os botões e que a hierarquia visual continua clara
- Verificar espaçamentos, contraste, equilíbrio no mobile e alinhamento com o resto do layout
Boas práticas de conteúdo
Clareza, relevância e coerência visual
Texto de apoio
- Escreve uma mensagem simples, direta e coerente com o valor do conteúdo que está a ser partilhado
- Evita fórmulas genéricas e chamadas demasiado vagas, como “partilha isto” sem contexto adicional
- Se o bloco surgir no fim da página, usa-o como continuação natural da leitura e não como quebra brusca
Botões e aparência
- Garante contraste suficiente entre botões, hover e fundo para manter legibilidade e acessibilidade
- Escolhe o alinhamento dos botões de acordo com a composição: esquerda para leitura linear, centro para áreas mais promocionais
- Usa o espaçamento com moderação para que a partilha pareça integrada e não visualmente solta
Configurações avançadas do componente Share
Estrutura, botões e composição
Estas opções controlam a presença visual do bloco, a sua posição na página e a forma como os botões de partilha são apresentados.
Estrutura base
- Skin define a variante visual base do componente
- Disabled block permite desativar o bloco sem o remover
- Block ID ajuda em âncoras, navegação interna e referência técnica
- Extra Class permite acrescentar uma classe adicional para ajustes específicos
Composição do bloco
- Offset afasta o bloco do fluxo normal quando a partilha precisa de maior destaque
- Background color cria uma área própria para o conteúdo e para os botões
- Estas decisões ajudam a integrar o Share no ritmo editorial sem o tornar visualmente solto
Botões e ritmo
- Buttons color e Buttons color hover controlam o estado normal e o hover dos botões
- Button align, Space e Font size ajustam leitura, hierarquia e conforto visual
- Margin e Padding afinam a relação do bloco com o restante layout
Configuração do conteúdo principal
Editor de texto e enquadramento da partilha
Na configuração principal do bloco existe um campo de Texto. É aí que defines a mensagem editorial que apresenta e enquadra a ação de partilha.
Campo Texto
- O campo Texto recebe a introdução, o convite ou a pequena mensagem de apoio à partilha
- Podes usar formatação simples para destacar uma frase, uma chamada ou uma pequena hierarquia editorial
- Quanto mais curta e clara for a mensagem, mais natural será a leitura antes da ação
Tom e intenção
- A mensagem deve explicar por que motivo a partilha faz sentido naquele momento do percurso
- O tom pode ser mais editorial, mais institucional ou mais promocional, conforme o contexto da página
- Na revisão final, confirma que o texto e os botões formam uma unidade clara e equilibrada
Blocos relacionados
Guias que podem complementar este componente