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 #

Il primo passo del nostro viaggio consiste nell'installare il plugin GutenKit. Quindi, fai le seguenti cose:

• Apri una nuova pagina o vai a quella esistente.
• Abilita l'editor a blocchi e trova "+" nella parte superiore della schermata dell'editor.
• Cliccando si aprirà la libreria dei blocchi.
• Search for the GutenKit Social Share.
• Una volta visualizzato, clicca o trascina e rilascia il blocco nella schermata dell'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: #

• Spazio tra gli elementi: Use the slider to define the gap between social items.
• Allineamento: 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 “+Aggiungi articolo” button. Also, delete one by clicking the “Xpulsante ".

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

• Scegli Icona: Add an icon from the library or upload it from your device to symbolize your social media site.
• Mezzi sociali: Select your social media site from the dropdown.
• Etichetta: 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.
  • Colore del bordo: Add color to the social media border. 

• Hover Style: Making changes to the following options will affect the hover state.
  • Passa il mouse su Colore: Add color to the social media icon and text.
  • Colore di sfondo al passaggio del mouse: Choose a background color for the social media site.
  • Hover Border Color: Pick a color for the hover border. 

• Seleziona Stile: 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: #

• Schermo: For showcasing the social media, you will have two options.
  • In linea: Keep your social media one by one horizontally. 
  • Bloccare: 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.
• Utilizza Altezza Larghezza: This option is enabled by default. Disabling it will hide the next setting “Line Height”.

• Altezza della linea: 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.

• Scatola Ombra: Use these settings to adjust the box shadow animation effect around the border area.
• Ombra del testo: 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.

Disposizione: #

• Margine: Definisce lo spazio attorno al layout del blocco. Aiuta a impostare lo spazio tra un altro blocco.
• Imbottitura: inserisci un valore per impostare lo spazio attorno al blocco all'interno del suo layout.
• Larghezza: Oltre a mantenere la larghezza del layout predefinita.
  • Intera larghezza: Selezionando questa opzione, il layout si estenderà per l'intera larghezza dello schermo.
  • In linea (automatico): Applicandolo avrà la stessa larghezza dell'elemento blocco.
  • Costume: Scegliendo questa opzione verrà visualizzato un cursore per definire lo spazio orizzontale del layout del blocco.
• Indice Z: utilizzare il cursore per specificare l'ordine di sovrapposizione del blocco con altri blocchi.

Posizione: #

Sotto il menu a discesa, vedrai tre opzioni: Predefinito, Assoluto, E Fisso. 

• Assoluto: Selezionando questa opzione ti verrà fornita una posizione assoluta del blocco, il che significa che gli elementi si adatteranno al loro contenitore.
• Fisso: l'opzione Posizione fissa consentirà all'elemento di adattarsi all'intera finestra o schermo.

Entrambe le opzioni Assoluto e Fisso hanno impostazioni simili come le seguenti:

• Orientamento orizzontale: scegliere la direzione di posizionamento tra sinistra e destra.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento orizzontale del blocco.
• Orientamento verticale: Selezionare la direzione di posizionamento tra su o giù.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento verticale del blocco. 

Sfondo: #

• Sfondo: scegli un'opzione di sfondo tra tinta unita, sfumatura o immagine.

Sotto l'opzione Al passaggio del mouse:

• Immagine: Se scegli l'opzione immagine si apriranno le seguenti opzioni:
  • Immagine: scegli un'immagine dal catalogo multimediale o carica la tua.
  • Dimensioni immaginee: selezionare la dimensione dell'immagine tra Miniatura, Media, Grande o Intera.

• Posizione: Seleziona la posizione delle 10 diverse opzioni.
• Allegato: Specifica la relazione fissa o scorrevole dell'immagine di sfondo con il resto della schermata del browser.
• Ripetere: selezionare un'opzione per impostare la modalità di ripetizione delle immagini di sfondo.
• Dimensioni dello schermo: consente di selezionare una dimensione di visualizzazione tra quattro diverse opzioni.

• Durata della transizione: utilizza il cursore per regolare la transizione dello sfondo dallo stato normale allo stato al passaggio del mouse.

Confine: #

• Confine: sotto questa opzione di impostazione, otterrai opzioni di impostazione del bordo come larghezza, stile e colore.
• Raggio del confine: imposta la rotondità del bordo inserendo un valore.
• Scatola Ombra: Ottieni tutte le impostazioni come colore, orizzontale/verticale, sfocatura, diffusione e altro per dare effetti di ombra al bordo. 

Sotto l'opzione al passaggio del mouse:

• Durata della transizione: puoi aggiungere un valore manualmente o utilizzare il dispositivo di scorrimento per impostare l'ora in cui modificare il design del bordo allo stato al passaggio del mouse.

Visibilità: #

Il modulo visibilità consente di controllare la visualizzazione dei disegni a blocchi in base al tipo di dispositivo. Ci saranno tre opzioni del dispositivo (desktop, tablet, cellulare) con un pulsante di attivazione/disattivazione. Attiva il pulsante di attivazione/disattivazione per nascondere il design a blocchi di quel dispositivo.

Tuttavia, puoi ancora vederlo nella vista dell'editor.

Avanzate: #

• Nome del blocco: assegna un nome per identificare questo blocco in modo univoco durante il collegamento o lo scripting per definire lo stile del blocco.
• Ancoraggio HTML: aggiungi un URL per collegare una pagina del sito web.

• Classi CSS aggiuntive: assegna classi CSS aggiuntive al blocco che ti consentiranno di modellare il blocco come desideri con CSS personalizzato. 

NB: puoi aggiungere più classi separatamente con spazi.