Want to add social sharing buttons anywhere on your WordPress website? GutenKit Social Share Block lets you add attractive and interactive buttons to connect all social sites using the default block editor. Thus, you will get a good amount of new visitors from the popular sites.

In this documentation, we’ll walk you through how to use the GutenKit Social Share plugin on your Gutenberg website.

Step 1: Add GutenKit Social Share Block #

O primeiro passo da nossa jornada envolve instalar o plugin GutenKit. Então, faça o seguinte:

• Abra uma nova página ou vá para a existente.
• Habilite o editor de blocos e encontre o “+” ícone na parte superior da tela do editor.
• Clicar nele abrirá a biblioteca de blocos.
• Search for the GutenKit Social Share.
• Quando ele aparecer, clique ou arraste e solte o bloco na tela do editor.

Step 2: Add Social Media Icon and text #

To include the social media icon and text, you need to start from the Content Tab. 

Under Social Media: #

• Espaço do item entre: Use the slider to define the gap between social items.
• Alinhamento: Set the location of social share icons. (Start, End, Center, Space Between)

• Add Social Media: By default, the GutenKit Social Share block shows three social media items which are Facebook, Twitter, and Linkedin. You can also add additional items by clicking the “+Adicionar item” button. Also, delete one by clicking the “X" botão.

Further, you can change the label, icon, and style of any item. Click on any item to reveal its settings.

• Escolha o ícone: Add an icon from the library or upload it from your device to symbolize your social media site.
• Mídia social: Select your social media site from the dropdown.
• Rótulo: Enter your social media site name in this field.
• Normal Style: The following setting options apply to the normal style.
  • Normal Color: Use the color picker to add your social media icon and text color.
  • Normal Background Color: Give a background color to the social media icon and text.
  • Cor da borda: Add color to the social media border. 

• Hover Style: Making changes to the following options will affect the hover state.
  • Cor do mouse: Add color to the social media icon and text.
  • Hover Background Color: Choose a background color for the social media site.
  • Hover Border Color: Pick a color for the hover border. 

• Selecione o estilo: Select from three different pre-made styles. You get the option to show only social media icons or text and you can display both.

Step 3: Styling Social Media #

Now, by executing the following options, you can change the looks of social media.

Under Social Media: #

• Mostrar: For showcasing the social media, you will have two options.
  • Em linha: Keep your social media one by one horizontally. 
  • Bloquear: Choosing this will show the social media icons vertically one by one.
• Tipografia: Use these setting options to change the typography like font family, size, weight, line height, etc.
• Usar Altura Largura: This option is enabled by default. Disabling it will hide the next setting “Line Height”.

• Altura da linha: Use the slider to adjust the line height of the social icons.
• Item Border: From this setting area control the border thickness, color, and style. 
• Item Border Radius: Enter a value to determine the roundness of the item border.
• Item Padding: Add spaces outside the social media icons and text.

The next two options work in the same way for normal and hover state.

• Sombra da caixa: Use these settings to adjust the box shadow animation effect around the border area.
• Sombra de texto: Add and control the shadow text for your social media. Do note that this option will only show if you choose to show text for your social media from the content tab.

Step 4: Set Advanced Tab #

From the Advanced Settings tab, you can configure the Social Share block layout, background, border styles, and control its visibility.

Disposição: #

• Margem: Defina o espaço ao redor do layout do bloco. Ajuda a definir a lacuna entre outro bloco.
• Preenchimento: insira um valor para definir o espaço ao redor do bloco dentro de seu layout.
• Largura: Além de manter a largura padrão do layout.
  • Largura completa: selecionar esta opção fará com que o layout ocupe toda a largura da tela.
  • Em linha (automático): Aplicá-lo terá a mesma largura do elemento do bloco.
  • Personalizado: Escolher esta opção revelará um controle deslizante para definir o espaço horizontal do layout do bloco.
• Índice Z: Use o controle deslizante para especificar a ordem da pilha do bloco com outros blocos.

Posição: #

No menu suspenso, você verá três opções: Padrão, Absoluto, e Fixo. 

• Absoluto: Selecionar esta opção lhe dará uma posição absoluta do bloco, o que significa que os elementos caberão em seu contêiner.
• Fixo: a opção Posição fixa permitirá que o elemento caiba em toda a viewport ou tela.

Ambas as opções Absoluta e Fixa têm configurações semelhantes às abaixo:

• Orientação horizontal: Escolha a direção de posicionamento entre esquerda e direita.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento horizontal do bloco.
• Orientação Vertical: Selecione a direção de posicionamento entre para cima ou para baixo.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento vertical do bloco. 

Fundo: #

• Fundo: escolha uma opção de plano de fundo entre cor sólida, gradiente ou imagem.

Na opção Hover:

• Imagem: Se você escolher a opção de imagem, serão abertas as seguintes opções:
  • Imagem: escolha uma imagem da biblioteca de mídia ou carregue a sua própria.
  • Tamanho da imageme: Selecione o tamanho da imagem entre Miniatura, Médio, Grande ou Completo.

• Posição: Selecione a posição das 10 opções diferentes.
• Anexo: Especifique a relação da imagem de fundo fixa ou de rolagem com o resto da tela do navegador.
• Repita: selecione uma opção para definir como as imagens de fundo serão repetidas.
• Tamanho de exibição: selecione um tamanho de exibição entre quatro opções diferentes.

• Duração da transição: use o controle deslizante para ajustar a transição do plano de fundo do estado Normal para o estado flutuante.

Fronteira: #

• Fronteira: Nesta opção de configuração, você obterá opções de configuração de borda como largura, estilo e cor.
• Raio da Fronteira: defina o arredondamento da borda inserindo um valor.
• Sombra da caixa: Obtenha todas as configurações como cor, horizontal/vertical, desfoque, propagação e muito mais para dar efeitos de sombra à borda. 

Na opção Hover:

• Duração da transição: você pode adicionar um valor manualmente ou usar o controle deslizante para definir o tempo para alterar o design da borda no estado de foco.

Visibilidade: #

O módulo de visibilidade permite controlar a exibição de designs de blocos dependendo do tipo de dispositivo. Haverá três opções de dispositivos (Desktop, Tablet, Mobile) com um botão de alternância. Ative o botão de alternância para ocultar o design do bloco desse dispositivo.

No entanto, você ainda pode vê-lo na visualização do editor.

Avançado: #

• Nome do bloco: forneça um nome para identificar este bloco exclusivamente ao vincular ou criar scripts para definir o estilo do bloco.
• Âncora HTML: adicione um URL para vincular uma página do site.

• Classes CSS adicionais: atribua classes CSS adicionais ao bloco, o que permitirá estilizar o bloco como desejar com CSS personalizado. 

Observação: você pode adicionar várias classes separadamente com espaços.