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 a 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 three options, i.e., General, Style, and Advanced, on the right sidebar of the editor. These tabs are to make changes to each social icon.
General #
The settings section mainly consists of the following 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.
Icons #
- Enable – Switch the Toggle to the right area to enable the social icon on your site. Enabling the option will display the respective social icon on your end.
- Icon – Choose the appropriate social icon on your end. You can choose the appropriate icons from the list available.
- Size – It determines the size of the social icon. Moreover, you can set the icon size value differently for various devices (Desktop, Tablet, and Mobile).
Style #
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.
Advanced #
The Advanced section consists of four customization options for the specific social icon.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of each Social Icons according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the chosen Social Icons block on the Desktop.
- Hide on Tablet – It hides the chosen Social Icons block on the Tablet.
- Hide on Mobile – It hides the chosen Social Icons block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular News Ticker block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- 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’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block.
General #
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:
- Icon Alignment – It consists of the settings of the social icon block alignments. You can either set the block on the Left, Right, or Center upon the site requirements. Moreover, you can select the alignments for different devices (Desktop, Mobile, and Tablet).
Style #
Under the style option, you’ll find the following options available:
General #
- Column Gap – You can adjust the gap value between the social icons. Moreover, you can set the different gap values for various devices (Desktop, Tablet, and Mobile). Also, you can choose any units like px, em, %, and rem.
Social Icons #
- Background Color – It sets the background color for the Social Icons. You can change the visual appearance of the background by changing its color.
Advanced #
The Advanced section consists of four options for the Social Icon block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the News Ticker block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the News Ticker block on the Desktop.
- Hide on Tablet – It hides the News Ticker block on the Tablet.
- Hide on Mobile – It hides the News Ticker block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Social Icon block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- 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.
