Hi,
You don’t need to buy layerslider, these layerslider features are available with the theme.
I believe that you are looking at the layerslider on-boarding tutorial and think it’s a pay-wall, try clicking the button and go through the tutorial to learn about layerslider.

Best regards,
Mike

Hey Chris,
Thanks for the link to your site, unfortunately color section background videos do not automatically play on mobile, and the overlay option adds “background repeat” to the image because it assumes that you are adding a small overlay image, using this option as a mask was not the intention.
I recommend using the Layerslider instead as it will play a background video on mobile (for now, note that the browsers are always changing to block this behavior) and you can add a “mask” layer.
Although you may need to create two layersliders, one for mobile and one for desktop, because depending on the situation landscape desktop slides don’t always change into portrait mobile view well.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for the feedback but could you explain further how several pages were negatively affected? Perhaps these pages had something else going on, or perhaps I’m not fully understanding what you are expecting on mobile, for the page we have been looking at /daily-word-all/ changing the height to 500px doesn’t look very different than 600px, please see the screenshot in the Private Content area. Can you include screenshots of what you are seeing?
As for mobile image sizes, please note that on mobile images are portrait and for desktop images are landscape, which is typically fine for the mobile image to be cropped some to show the full height, this is what background-size: cover does, another option is background-size: contain this forces the full width of the image to show, but the height will not fill the area so you would want to use a portrait sized image for mobile in this case, like 425px x 500px, or whatever size you wish.
One way to achieve this is to duplicate your element and choose your new portrait sized image for mobile and set the display options to show this element only on mobile while hiding the desktop element.
Another possibly for your comment it negatively effected several pages is that the css above is very general, the target of the css rule #av_section_1 is practically on every page and may not be one you want to target, I would recommend using a custom class for each one of these elements you really want to target, such as title-color-section and then adjust your css.

Best regards,
Mike

Hi,
Please try this css instead:

#Black-background-color-and-white-text-color > div p,
#Black-background-color-and-white-text-color .av-special-heading-tag {
	 background-color: rgba(0, 0, 0, 0.5);
	 width: 50%;
     margin: 18px auto;
}

expected results:

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey adventuremototouring,
Thanks for the link to your page, it looks like you made this “post” with the Advanced Layout Builder, so the comments will not automatically show, please use the comment element for these:

Best regards,
Mike

Hey Nat,
Thanks for your question I have not tested this but I have seen an Enfold site using WordPress File Upload, so I assume that it was working correctly. If you want to use this with a contact form then try using Contact Form 7 with Drag and Drop Multiple File Upload

Best regards,
Mike

Hi,
Please try this code in your functions.php instead:

function custom_top_banner() { ?>
    <script>
(function($){
    $( "<div id='banner'>This is a banner</div>" ).insertBefore( "#header_meta" );
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_top_banner');

and this css instead:

.responsive #top #header > #banner {
    width: 100%;
    height: 30px;
    background: #ffff00;
    color: #000;
    text-align: center;
    z-index: 1;
    position: relative;
}
.html_header_top.html_header_topbar_active.html_header_sticky #top #main > .title_container {
    padding-top: 30px;
}

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

Best regards,
Mike

Hey Joseph,
Thank you for your question and the link to your pages, please give this a try, on your page with the form add a code block element at the bottom with this javascript:

<script>
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var carportSize = getUrlParameter('size');

if (carportSize != null) {
	var val = carportSize;
     var sel = document.getElementById('avia_6_1');
      var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}
</script>

Then on your page with the button make your link like this: your-site.com/form-page/?size=2%20Car%204%20Post the url parameter: ?size=2%20Car%204%20Post
needs to match your option text for the correct option to be selected

the spaces need to be replaced with &20

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

Hi,
In your Quick CSS the greater than symbol was not correct, typically this occurs when the code is copied from an email instead of the forum.

I corrected from you, please clear your browser cache and check.

Best regards,
Mike

Hi,
For all of the pages built like this, try this css instead:

.js_active #top #main > #av_section_1.av-minimum-height .container {
    opacity: 1;
    -webkit-transition: opacity 0s ease-in;
    transition: opacity 0s ease-in
}

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

Best regards,
Mike

Hi,
Thank you for the test page, for two buttons opening two popups on the same page the code block should contain this:

<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.avia-button-wrap.form-popup a.avia-button').addClass('form-popup-link');
  jQuery('.form-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });
});
</script>
<style>
.form-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>


<div id="form-popup-one" class="form-popup mfp-hide">
form one
</div>

<div id="form-popup-two" class="form-popup mfp-hide">
form two
</div>

The button links should be #form-popup-one & #form-popup-two

and the button custom class should be form-popup

this results like this:

Now to add your forms you will create your forms with the shortcode wand in a Classic Editor post so you can copy the shortcode and paste it in the code block:

like this:

the result:

I made these changes to your page please clear your browser cache and check.

@mistermagoo8691 thanks for your feedback, I will check & correct it.

Best regards,
Mike

Hey Brolle,
Thank you for your question we don’t have a built-in popup element but we do have this solution to create a popup with a code block element. We can help adjust this to show your form, but we will need further information, such as what will trigger the popup a link or button? What kind of form is it, a contact form element or the shortcode from another plugin?
If you want to use a plugin rather than building this, WP Popups is a free plugin that seems to work well with Enfold.
If you don’t want to use a plugin, then try creating a test page and include admin login in the Private Content area below so we can help further.

Best regards,
Mike

Hi,
I see that you have removed the font-size css, but the letter-spacing css remains, since you can not find it please include an admin login so we can help you.

Best regards,
Mike