Documentation

The SVG Social Media Icons block can be added on every page using a sitewide Global Area or on a page by page basis. 

 

To add the block to a page, click "+" or "+Add" in the toolbar. In the block menu, scroll down to the Social Media Icons block icon.

 

 

 

 

 

 

Drag the Social Media Icons block into an area on your page. In this example, the block is being dragged into a sitewide Global Area. The block will now be on every page that shares that area.

 

 

 

After you drag the block into an area, a block form will pop up. The first tab of the form allows you to choose the social media account icons to display and their addresses. Each address field has a placeholder to show an example of the address format that is most commonly used. On the right side of each address field is an arrow icon. Clicking and dragging the arrow icon allows you to change the order of how the icons will be displayed on the page.

 

 

 

 

In this example, the Facebook account icon is chosen and a Facebook account address is entered. The account address will be the link address of the icon. As a demonstration of icon field ordering, the Facebook icon field will be made the first icon in the list. The arrow icon is dragged upward, until the icon field is at the top. Icon fields that are unchecked are ignored in the icon display sorting order. For an icon to be displayed first, it only has to be higher than other checked icon fields.

 

 

 

 

 

The second tab of the block form lets you choose the icon appearance. The icon shape can be square or round. The icon color can be logo (the original logo color), black, grey, or white. You can enable or disable the icon hover - the icon hover is displayed when the mouse moves over an icon (showing a light grey and white alternate image). The icon size can be set to five different sizes - 45px x 45px, 40px x 40px, 35px x 35px, 30px x 30px, or 25px x 25px. The icon spacing can be set to add space in between each icon. The icon spacing unit is in pixels, so only a number is needed.

 

There is also an icon preview which will display the current selected settings (except icon spacing).

 

 

After selecting the desired icon appearance, click "Add".

 

 

 

 

 

In this example, a Facebook account icon and Facebook account address were chosen. After clicking "Add", there is now a Facebook icon on the page that links to a Facebook account. 

 

 

By default, icon spacing is set to 0px, so icons will be positioned against each other. Setting the icon spacing allows you to increase the spacing. In this example, the icons have a spacing of 0px.

 

 

 

An icon spacing of 3px is set. A reminder, the icon spacing is already in pixels, so only a number is required.

 

 

 

 

 

After setting an icon spacing of 3px, the icons are now pushed away from each other by 3px. Adjust the icon spacing to your preference or design needs.

 

New in version 0.9.6:

- links can be opened in a new tab

- icons can be positioned to the left or to the right

 

New in version 0.9.7:

- icons can be centered using position center

- now supports multiple icon blocks per page