Hi,
Thanks for your patience and the link to your site, it looks like you are using the grid cell element with a download button to a PDF, I tried to recreate this on my demo site and the button works and I don’t have any further issues with the ALB Builder:

Please see the link to my test page below

Please try disabling all of your plugins and If this doesn’t help, please include an admin login in the private content area so we can be of more assistance.

Best regards,
Mike

Hey carlosTLM98,

Thank you for the inquiry.

Adding this css code should create some space between the buttons.

li#menu-item-453 {
    margin-left: 18px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hey,

Thanks for the information!

You can refer to this post: https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options and add a new icon to social share profiles and link it to your shop page :)

If you need assistance with this, please let us know!

Cheers!
Yigit

Hi,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab

a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

Regards,
Yigit

Hi,
Please try adding this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #main .small-button a:hover .avia-button.avia-color-light {
	border: none;
	opacity: 0;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey lauragrashoff,
The TikTok icon is not available on Fontello.com so you need to create it by finding an SVG and converting it on Fontello to create the icon font

The icon font will be black and white a colored SVG won’t work. But if you find a png with a transparent background then you can convert it here. For example I found a TikTok icon here and downloaded it as a SVG and then uploaded it to Fontello which converted it for me. This is the fontello-tiktok.zip file I’m using in this example.
Then to create the TikTok social profile follow the steps outlined here in our documentation.
For example, I added this code to the end of my child theme functions.php file in Appearance ▸ Editor, If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and allows you to export and import your custom code snippets to other sites that you may have or as a backup.

function avia_add_custom_icon($icons) {
$icons['tiktok'] = array( 'font' =>'fontello', 'icon' => 'ue800');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
$icons['TikTok'] = 'tiktok';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
add_filter('avia_social_share_link_arguments', 'avia_add_social_share_link_arguments', 10, 1);
function avia_add_social_share_link_arguments($args){
    $tiktok = array('tiktok' => array("encode"=>true, "encode_urls"=>false, "pattern" => "https://www.tiktok.com/", 'label' => __("Share on TikTok",'avia_framework')));
    $args = array_merge($tiktok, $args);
    return $args;
}

Then I enabled it at Enfold Theme Options ▸ Social Profiles ▸ Your social profiles

Now it shows on the frontend:

Now to add the on mouse-over color add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .av-social-link-tiktok:hover a{
    color:#fff; 
    background-color:#00f2ea; 
}

Now go to the theme options Enfold Theme Options ▸ Blog Layout ▸ Profile Links At The Bottom Of Your Blog Post and enable the TikTok item:

and now on blog posts when the share box shows TikTok will be included:

Best regards,
Mike

Hey,

Thanks for contacting us!

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (max-width: 767px) { 
.avia_transform .avia-button-wrap.av-14b7av-40967159c1685d687e874f52f7c3cc4f-wrap {
  float: none;
}
.avia-button-wrap.av-14b7av-40967159c1685d687e874f52f7c3cc4f-wrap.avia_animated_button.av-animated-when-visible-95.pop-up.avia-button-right.avia-builder-el-5.avia-builder-el-no-sibling.avia_start_animation.avia_start_delayed_animation {
  margin: auto;
  float: none;
  max-width: 200px;
}
}

Best regards,
Yigit

Hey,

Thanks for contacting us!

You can add custom social icons by referring to this post: https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

Discord icon is not available on Fontello therefore I am afraid we are not able to add it in Enfold but I will check with our devs :)

Best regards,
Yigit

Hi,
Thanks for sharing Guenni007, this looks nice, but the main goal of THP Studio is to achieve a skewed border between the two buttons like in this example

do you have any ideas to achieve this?

Best regards,
Mike

Hi,
Thanks for the link to the example, these buttons have multiple divs in them to create the skew so we would not be able to style one of our buttons to match this, but you could add these buttons to your page in a Code Block element, on my example page I added the button code and the css in the same Code Block element:

try this code:

<style>
  .home-section-cta-wrap {
      position: relative;
      z-index: 100;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: 24px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
  }
  
  .main_color .home-section-cta-wrap a {
    color: #fff !important;
  }
  .skewed-button {
      position: relative;
      width: 180px;
      padding: 10px 60px 10px 32px;
      -webkit-transition: width 0.2s ease;
      transition: width 0.2s ease;
      font-weight: 500;
      text-align: center;
      text-decoration: none;
  }
  .skewed-button-bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 32px;
      bottom: 0;
      z-index: -1;
      border-style: solid none solid solid;
      border-width: 1px;
      border-color: #e0e0e0;
      border-top-left-radius: 1px;
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
  }
  .button-skew {
      position: absolute;
      left: auto;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      width: 50%;
      margin-top: -1px;
      margin-right: -18px;
      margin-bottom: -1px;
      border-top: 1px solid #000;
      border-right: 2px solid #000;
      border-radius: 0 2px 1px 1px;
      -webkit-transform: skew(-45deg, 0deg);
      -ms-transform: skew(-45deg, 0deg);
      transform: skew(-45deg, 0deg);
  }
  .skewed-button.skewed-button--right {
      margin-left: -12px;
      padding-right: 32px;
      padding-left: 60px;
  }
  .skewed-button-bg.skewed-button--right.cc-pink {
      border-style: solid;
      border-color: #ff6180;
      background-color: #ff6180;
  }
  .skewed-button-bg.skewed-button--right {
      left: 32px;
      right: 0;
      border-top-right-radius: 1px;
      border-bottom-left-radius: 0;
  }
  .button-skew.button-skew--right {
      left: 0;
      right: auto;
      margin-right: 0;
      margin-left: -22px;
      border-style: none none solid solid;
      border-bottom-width: 1px;
      border-left-width: 2px;
      border-radius: 1px 0 0 2px;
  }
  .button-skew {
      background-color: inherit;
      border-color: inherit !important;
  }
  .skewed-button:hover {
      width: 200px;
  }
  </style>
  
  <div class="home-section-cta-wrap">
  <a href="#" class="w-inline-block skewed-button">
    <div class="skewed-button-bg">
      <div class="button-skew"></div>
    </div>
    <div>Learn more</div>
  </a>
  <a href="#" class="skewed-button skewed-button--right cc-white-text w-inline-block">
    <div class="skewed-button-bg skewed-button--right cc-pink">
      <div class="button-skew button-skew--right"></div>
    </div>
    <div>Buy now</div>
  </a>
  </div>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
I hope this helps.

Best regards,
Mike