Adicionar um elemento de ligações sociais.

Aprender DXPR BuilderCriar páginasAdicionar conteúdosMarketing

Obtém uma fila de ícones de marcas com ligação aos seus perfis de redes sociais. Utilize-a num rodapé, numa barra lateral ou numa secção de contactos para que os visitantes o encontrem e sigam.

Elemento de ligações sociais a mostrar ícones de LinkedIn, GitHub e Drupal no estilo Circle com cores das marcas

Abra a sua página com sessão iniciada: os controlos do construtor aparecem quando paira o cursor sobre a área de conteúdo. Crie a sua primeira página mostra o essencial.

  1. Paire o cursor sobre a coluna e clique em + na barra de controlos, ou clique em Add Elements numa página vazia. Abra o separador Content e clique em Social links. O elemento é colocado no topo da coluna e o diálogo de definições abre.
  2. Em Social links, substitua as duas linhas de exemplo pelas suas contas. Clique em Add link para cada conta extra. Comece a escrever a marca, escolha-a nas sugestões e introduza o URL, como https://github.com/dxpr.
  3. Escolha um Style para a forma do ícone. Este é o campo perto do topo do diálogo, não o painel Style mais abaixo. Aqui é Circle.
  4. Escolha um Size para os ícones. Aqui é 3x.
  5. Clique no título Icon colors para expandir e defina Background color como Brand color.
  6. Em Color, escolha uma amostra na paleta. A paleta aparece porque Color está em Custom por predefinição. Aqui é quase branco.
  7. Clique em Save no diálogo. Depois clique em Save na barra de ferramentas no topo da área de conteúdo para guardar a página.

O que vê

As contas que adicionou aparecem como uma fila de ícones, e cada ícone abre o seu perfil. No vídeo, LinkedIn, GitHub e Drupal aparecem como círculos grandes nas cores das marcas com logótipos brancos. Os visitantes veem-nos depois de guardar a página e de esta ser publicada.

Paire o cursor sobre o elemento e abra More > Settings na barra de controlos. Opções:

  • Social links: uma linha por ícone, com nome de marca e URL do perfil. Clique em Add link para outra linha, e use as setas para mudar a ordem.
  • Layout: Inline coloca os ícones em fila. Stacked coloca cada ícone na sua linha.
  • Style: a forma do ícone: None, Rounded, Circle ou Square.
  • Size: Small, Large, ou 2x a 5x.
  • CSS3 hover effects: None, Disc ou Pulse. Qualquer efeito transforma o ícone num círculo.
  • Color: a cor do logótipo: Brand color, Custom ou Inherit. Custom mostra uma paleta, e Inherit usa a cor do texto à volta.
  • Background color: o preenchimento da forma, com as mesmas três opções.

Color e Background color estão sob o título Icon colors. Clique para os abrir.

Se não as vir

  • O Social links não está no separador Content. O seu perfil de utilizador oculta-o. Peça a um administrador para o ativar em User Profiles.
  • Desapareceu depois de recarregar. A página não foi guardada. Adicione-o novamente e clique em Save na barra de ferramentas no topo da área de conteúdo.
  • Falta um ícone. A sua linha não tem marca nem URL, por isso o elemento salta-a. Preencha ambos os campos dessa linha.
  • Uma forma aparece sem logótipo. O nome da marca não tem ícone correspondente, e a linha diz "No matching brand icon found". Escolha a marca nas sugestões enquanto escreve.
  • Um ícone abre a página errada. O URL dessa linha está errado ou incompleto. Paire o cursor sobre o elemento e abra More > Settings, depois verifique se cada URL começa por https://.

E a seguir?

Separador Style para alterar o espaçamento e o fundo das suas ligações sociais.