Creates Floating Social Profile Links with Icon Group Module

Floating Social Profile Links

One of our Beaver Builder user asked this on the Facebook group. So I am sharing the tutorial and it will help the other users. I did following things:

  1. Creates a beaver builder template
  2. Using hook I am displaying the template below the copyright text
  3. Adds floating effect using CSS

Follow the complete procedure here:

1. Creates a template using Icon Group module

First making a beaver builder template using Icon Group module. Make sure that you already installed the Beaver Builder premium plugin on your site and activated the “Templates” post type. Now

  1. Login to Dashboard
  2. Click on Builder -> Templates
  3. Enter Title
  4. Select Type “Templates”
  5. Click on “Add Saved Template” button
  6. You will redirect to new page
  7. Launch Page Builder
  8. Drag&Drop the Icon Group module
  9. Add the icons as per your mind and style it
  10. Click on Advanced tab and enter “social-profile-links” into class input field
  11. Later publish the template

Using Beaver Builder Theme

Open the functions.php file of your BB child theme and add this PHP script at end of the file

Open the style.css file of your child theme and add this CSS

All done. Social links would be float on the desktop and medium devices. For small devices it will appear below the copyright text.


Using Genesis Framework

Open the functions.php file of your Genesis child theme and add this PHP code at end of the file

Open the style.css file and add this CSS code

All done. Social links would be float on the desktop and medium devices. For small devices it will appear below the copyright text.


Using GeneratePress Theme

Open the functions.php file of your GP’s child theme and add this PHP script at end of the file

Open the style.css file and add this CSS code

All done. Social links would be float on the desktop and medium devices. For small devices it will appear below the copyright text.

1 Comment

  1. CM on March 12, 2019 at 8:56 pm

    Does not work for me , What am I missing? I put the correct ID and added the codes in the childs theme but it stays at the bottom and I want them floating on the side? Did exactly as instructed. Please help.

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares