Hi Tom,

Do you have access to the ThemeForest account that was used when purchasing the license? If so, you can go to the Downloads page ( https://themeforest.net/downloads ), click the Download button, and select the License Certificate option to find your Purchase Code:

Then, you can go to the Register page ( https://kriesi.at/support/register/ ), register to our forums using your purchase, and start new threads under Enfold sub forum ( https://kriesi.at/support/forum/enfold#new-post ).

Best regards,
Yigit

Hi,

I’m sorry for the confusion, this feature has been added in Enfold 5.6.9. If this button isn’t available on your site, you’re probably using an older version of the theme. Updating the theme should add the option: https://kriesi.at/documentation/enfold/theme-update/.

Regards,
Yigit

Hey Sebastian,
I tested with a medium sized button and this css:

.my-custom-button,
.my-custom-button a.avia-button {
padding: 0;
width: 100px;
height: 100px;
border-radius: 100px;
line-height: 108px;
}

.my-custom-button .avia_iconbox_title {
width: 72px;
display: inline-block;
line-height: 16px;
}

This was the result:

Please give this a try.

Best regards,
Mike

Hey macika,

Thank you for the inquiry.

Have you assigned one of the menus as the Enfold Main Menu in the Appearance > Menus panel? Please go to the Appearance > Menus panel, select your main menu, and assign it as the Enfold Main Menu in the Menu Settings > Display location section.

If you want to create a button-like menu item, edit one of the menu items in the Appearance > Menus panel, and then adjust the Menu Style settings.

Best regards,
Ismael

Hi,
On my test page I added two more buttons with the URLs #open-popup3 and #open-popup2

and adjusted the code blocks to match:

and they work correctly:

try checking your code again.

Best regards,
Mike

Hi,
To enable a button to open the popup, add a button to your page and set the link URL to #open-popup:

then go to Advanced ▸ Developer Settings and add the custom class open-popup-button:

then update the popup script in your child theme functions.php to this:

function magnific_popup_with_no_scroll_and_button() { ?>
  <script>
(function($) {
  $(window).on('load', function(){
	$('.open-popup-button a').addClass('open-popup-link');
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'magnific_popup_with_no_scroll_and_button', 99 );

then you can use both text links and buttons for your popup like in the example:

Best regards,
Mike

Hey MikeTandySwag,
Thanks for the mockup, I recommend using the Masonry Element with the Display Title and Excerpt and Display as centered overlay (overlays the image) selected:

then under styling choose a Large Gap and Perfect Grid:

Then under the Advanced tab ▸ Developer Settigs add the custom class custom-masonry-with-button, note that you do not add the class dot:

For my example I choose to use two columns and only show four posts.
Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.custom-masonry-with-button .av-masonry-date {
	display: none;
}
#top .custom-masonry-with-button.av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos {
    vertical-align: bottom;
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avf_masonry_loop_prepare','avia_change_default_link', 10, 2);
function avia_change_default_link($loop, $entries)
{
	foreach($entries->posts as $key => $entry)
    {
        if($entry->post_type == "post")
        {
            $more 	 		 =  "<br /><span class='custom-masonry-more-button avia-button avia-size-x-large avia-position-center avia-color-light'>".__('Read more','avia_framework')."</span>";
			$loop['content'] =   avia_backend_truncate($entry->post_content, apply_filters( 'avf_masonry_excerpt_length' , 0) , apply_filters( 'avf_masonry_excerpt_delimiter' , ""), "", true, '') . $more;
        }
    }

    return $loop;
}

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, for this code you would choose the PHP snippet:

This is the expected results:

Please give this a try.

Best regards,
Mike

Hi,
Please note in our documentation Custom Elements Advanced Options about the opton: Custom Elements For Subitems which by default is set to All sub-items use the same custom element template for button rows you will want to change this to Individually select subitem custom element templates
Please scroll down to this part of the documentation for Button Rows and review.
I have done this for you on your test page:

Best regards,
Mike

Hey Monique,

Thank you for the inquiry.

Please temporarily edit the enfold/config-templatebuilder/avia-template-builder/php/class-element-templates.php and remove this code around line 672.

			$duplicate  = '<a href="' . $notify_url . '" aria-label="' . esc_attr__( 'Make a duplicate from this element template', 'avia_framework' ) . '" rel="permalink">';
			$duplicate .=		esc_html__( 'Duplicate', 'avia_framework' );
			$duplicate .= '</a>';

			$actions['duplicate'] = $duplicate;

Let us know if this removes the Duplicate button.

Best regards,
Ismael

Hi,
Typically when you add a new social profile following the documentation this is the correct code snippet that you should add to your child theme functions.php:

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons['line'] = array( 'font' =>'icomoon', 'icon' => 'ue900');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons['Line'] = 'line';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
// Add new icon to sharebox
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('line' => array("encode"=>true, "encode_urls"=>false, "pattern" => "https://line.me/", 'label' => __("Share on Line",'avia_framework')));
    $args = array_merge($line, $args);
    return $args;
}

and then you would choose the new social profile from the options”

and then it will show on the front end:

I have done this for you.

Best regards,
Mike

Hi,
Please see our documentation for: How to add Custom Social Icons to Enfold options.

Best regards,
Mike

Hey Anton,

Thank you for the inquiry.

Adding this css code should remove the space below the video.

.su-youtube.su-u-responsive-media-yes {
    margin-bottom: 0;
}

The double button on the official site is not available by default, but here is the markup in case you want to use it on your own site.

HTML:

<div class="avia-double-buttons "><a href="https://site.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://1.site.market/" class="avia-double-button avia-double-button-2">Purchase Now</a></div>

CSS:

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
    text-decoration: none;
}

#top div .main_color .avia-double-button {
    border-color: #e1e1e1;
    background: #fcfcfc;
    color: #222222;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, #top #wrap_all .avia-hover-fx .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

Best regards,
Ismael

Hi,
Thanks for the login, I tested both of your custom buttons:

and they both show the add more button option:

so I added more buttons and saved your page:

please check, if you still are unable to add buttons then please try the login you posted for us.

Best regards,
Mike

Hi,
On mobile there is not enough room for the buttons next to the logo, so they will need to be smaller and under the logo.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100%;
	}
	.responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
	padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
	}
	.responsive #top #header #header_main .inner-container .widget>div {
		padding: 0;
	}
	.responsive #top #header #header_main .inner-container .widget>div>div {
	text-align: center;
	}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the link to your site, the issue was in your widget there was a “pre” & “code” tag, probably from were you copied the code from.

I removed it for you and now your header buttons are correct

please clear your browser cache and check.

Best regards,
Mike