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 #

The first step of our journey involves installing the GutenKit plugin. Then, do the following things:

• Take a new page or go to the existing one.
• Enable the block editor and find the “+” icon at the top of the editor screen.
• Clicking it will open the block library.
• Search for the GutenKit Social Share.
• Once it appears, click or drag & drop the block in the editor screen.

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: #

• Item Space Between: Use the slider to define the gap between social items.
• Justering: 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 “+Tilføj vare” button. Also, delete one by clicking the “x”-knappen.

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

• Vælg ikon: Add an icon from the library or upload it from your device to symbolize your social media site.
• Sociale medier: Select your social media site from the dropdown.
• Etiket: 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.
  • Kantfarve: Add color to the social media border. 

• Hover Style: Making changes to the following options will affect the hover state.
  • Hover farve: 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. 

• Vælg Stil: 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: #

• Skærm: For showcasing the social media, you will have two options.
  • Inline: Keep your social media one by one horizontally. 
  • Blok: Choosing this will show the social media icons vertically one by one.
• Typografi: Use these setting options to change the typography like font family, size, weight, line height, etc.
• Brug Højde Bredde: This option is enabled by default. Disabling it will hide the next setting “Line Height”.

• Line Height: 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.

• Box Shadow: Use these settings to adjust the box shadow animation effect around the border area.
• Tekstskygge: 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.

Layout: #

• Margin: Definer rummet omkring bloklayoutet. Det hjælper med at indstille afstanden mellem en anden blok.
• Polstring: Indtast en værdi for at indstille rummet omkring blokken i dens layout.
• Bredde: Bortset fra at beholde standard layoutbredde.
  • Fuld bredde: Hvis du vælger dette, vil layoutet spænde over hele skærmens bredde.
  • Inline (automatisk): Anvendelse vil have samme bredde som blokelementet.
  • Brugerdefinerede: Hvis du vælger denne indstilling, vises en skyder for at definere det vandrette rum i bloklayoutet.
• Z-indeks: Brug skyderen til at angive stakrækkefølgen af blokken med andre blokke.

Position: #

Under rullemenuen vil du se tre muligheder: Standard, Absolut, og Fast. 

• Absolut: Hvis du vælger denne mulighed, får du en absolut placering af blokken, hvilket betyder, at elementerne passer ind i deres beholder.
• Fast: Indstillingen Fixed position vil lade elementet passe ind i hele visningsporten eller skærmen.

Både Absolute og Fixed muligheder har lignende indstillinger som nedenstående:

• Vandret orientering: Vælg positioneringsretningen mellem venstre og højre.
• Offset: Brug skyderen eller indsæt en værdi manuelt for at justere den vandrette placering af blokken.
• Lodret orientering: Vælg positioneringsretningen mellem op eller ned.
• Offset: Brug skyderen eller indsæt en værdi manuelt for at justere den lodrette placering af blokken. 

Baggrund: #

• Baggrund: Vælg en baggrundsindstilling mellem ensfarvet, farveforløb eller billede.

Under indstillingen Hover:

• Billede: Hvis du vælger billedindstillingen, åbner den følgende muligheder:
  • Billede: Vælg et billede fra mediebiblioteket, eller upload dit eget.
  • Billedstørrelsee: Vælg billedstørrelse mellem Thumbnail, Medium, Large eller Full.

• Position: Vælg placeringen af de 10 forskellige muligheder.
• Vedhæftet fil: Angiv den faste eller rullebaggrundsbillederelation med resten af browserskærmen.
• Gentage: Vælg en indstilling for at indstille, hvordan baggrundsbilleder gentages.
• Skærmstørrelse: Vælg en skærmstørrelse blandt fire forskellige muligheder.

• Overgangsvarighed: Brug skyderen til at justere baggrundsovergangen fra normal til svævetilstand.

Grænse: #

• Grænse: Under denne indstillingsmulighed får du indstillingsmuligheder for grænser som bredde, stil og farve.
• Grænseradius: Indstil grænsens rundhed ved at indtaste en værdi.
• Box Shadow: Få alle indstillinger som farve, vandret/lodret, sløring, spredning og mere for at give skyggeeffekter til kanten. 

Under svævemuligheden:

• Overgangsvarighed: Du kan tilføje en værdi manuelt eller bruge skyderen til at indstille tidspunktet for ændring af kantdesignet i svævetilstanden.

Sigtbarhed: #

Synlighedsmodulet giver dig mulighed for at styre visningen af blokdesigns afhængigt af enhedstypen. Der vil være tre enhedsindstillinger (Desktop, Tablet, Mobil) med en skifteknap. Slå til/fra-knappen til for at skjule den pågældende enheds blokdesign.

Du kan dog stadig se det i redigeringsvisningen.

Fremskreden: #

• Bloknavn: Giv et navn for at identificere denne blok unikt, mens du linker eller scripter for at style blokken.
• HTML-anker: Tilføj en URL for at linke en hjemmesideside.

• Yderligere CSS-klasser: Tildel yderligere CSS-klasser til blokken, som giver dig mulighed for at style blokken som du ønsker med tilpasset CSS. 

NB: Du kan tilføje flere klasser separat med mellemrum.