Social Icons

The Social Icons Block allows you to add various social media icons to your post or page. It also lets you add the social media links of your company/organization/ personal profile on all the major social networks.

How to add a Social Icons Block? #

Adding the Social Icons Block is a simple task. Click on the + sign from the left of the post/page editor. Under the Magazine Blocks, you will see the Social Icons Block.

Click on the Social Icons Block, which will display the icons inside the editor.

How to add links and new social icons? #

Well, after you have added the block successfully, you will get to see some major social icons added (Facebook, Twitter, Instagram). To add the link, click on the specific social icon, which will display a toolbox.

Inside the toolbox, you will get to see three options. The option is listed below:

Social Icons

A list of social icons is displayed. Clicking on one of the social icons from the list will change the existing icon. For example, you are on the Facebook Icon. If you select the Twitter icon from the list, your Facebook icon will be changed to Twitter Icon.

Social Link

You can add the appropriate social link that links to your respective profiles.

Open in a new tab

You can let your social media profiles open in a new tab or on the same page.

Likewise, for more customization of each social icon, you will get two options: Settings and Advanced on the right sidebar of the editor. These tabs are to make changes to each social icon.

Block Settings #

The settings section mainly consists of three options as listed below:

General #

The section comes with two options. It lets you add the appropriate social link to your respective profiles. Also, you can let the social media profiles open in a new tab or on the same page.

General Settings of Social Icons Block

Icons #

It consists of the settings related to the size of the social icon. Moreover, you can set the different icon sizes for various devices (Desktop, Tablet, and Mobile). Also, you can choose any units like px, em, %, and rem.

Color #

Inside the section, you can choose the colors for your social media icons. Moreover, you can select the different colors for the icons in the Normal and Hover modes.

Icon Color – It allows you to set up the color of the social media icons only.

Background – It allows you set the background image for the social media icons. It also comes with various options listed below:

  • Local/ External – It allows you to choose the background image from your Local PC or an External Source
  • Position – You can set the position of the background image to be Center, Bottom, Left, Right, etc. Moreover, you can also set the different positions on various devices (Desktop, Tablet, and Mobile).
  • Size – You can set the display size of the background image to be either Cover, Contain, Auto, etc. Moreover, you can also set the different display sizes on various devices (Desktop, Tablet, and Mobile).
  • Width – It allows you to assign a specific value for the background image’s width.
  • Repeat – You can set the background-repeat option to be repeated either Vertically, Horizontally, No-repeat, etc. Moreover, you can also select the background image repeat option to display on various devices (Desktop, Tablet, and Mobile).
  • Attachment – It allows the background image attachment to be fixed or scrolled.

Color – It allows changing the background color of the social media icons.

Block Advanced #

The Advanced section consists of three customization options for the specific social icon.

Advanced #

The advanced sections come with the following three options:

Block Padding

Inside the Advanced > Block Padding section, you will have the option to add the Block Padding values to all four sides of each social icon.

According to the site requirement, you can assign a specific margin value along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).

Adding Block Padding
Adding Block Padding

Z-Index – It allows you to set the priority of each social icon according to the site requirement.

CSS ID

You can also add the specific CSS ID to make changes in the specific section of the icon.

Responsive #

It allows setting up the social icon to be responsive on various devices and comes with the following options:

Hide on Desktop

Hide on Tablet

Hide on Mobile

You can make the changes upon your site requirements.

CSS #

It allows you to add a CSS class to your icon, letting you write custom CSS to style the particular social icon.

For example, if you want to increase or decrease the icon gap, add a class such as fb-column-gap to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.mzb-social-icons.fb-column-gap {
    column-gap: 20px;
}

Upon adding the code, it will make the changes only to the social icons block.

Likewise, for customizing the overall social icon block,  you will get two options: Settings and Advanced on the right sidebar of the editor. These tabs are to make changes to each social icon:

Block Settings #

The settings section mainly consists of options as listed below:

General #

It provides the following two customization options for Social Icons. These are listed below:

Alignment – It consists of the settings of the social icon block alignments. You can either set the block on the LeftRight, or Center upon the site requirements. Moreover, you can select the alignments for different devices (Desktop, Mobile, and Tablet).

Column Gap – You can adjust the gap value between the social icons.

Advanced #

The advanced sections come with the following three options.

Block Padding – Inside the Advanced > Block Padding section, you will have the option to add the Block Padding values to all four sides of the block.

According to the site requirement, you can assign a specific margin value along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).

Z-Index – It allows you to set the priority of the social icon block according to the site requirement.

CSS ID – You can also add the specific CSS ID to make changes in the specific section of the block.

Advanced Settings
Advanced Settings

Responsive #

It allows setting up the social icon block to be responsive on various devices and comes with the following options:

Hide on Desktop

Hide on Tablet

Hide on Mobile

You can make the changes upon your site requirements.

CSS #

It allows you to add a CSS class to your social icon block, letting you write custom CSS to style the block.

For example, if you want to increase or decrease the icon gap, add a class such as column-gap to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.mzb-social-icons.column-gap {
    column-gap: 20px;
}

Upon adding the code, it will make the changes only to the social icons block.

Adding Additional CSS Class
Adding Additional CSS Class

Powered by BetterDocs

Scroll to top