Dear Ismael,
Thank you for your help. I have a look at the topic you posted above. It was a bit unclear for me at the beginning but I believe I have found a “nicer” way to include the LayerSlider in every blog post.

For people who are interested, here are the steps:
1.) as I am using child theme … if you don’t, then you need to modify directly the Enfold files … just be aware that after update those modification WILL DISAPPEAR … that is why it is better to use child theme
2.) copy “single.php” to your child directory … name of the file stays the same
3.) copy “header.php” to your child directory and give it a name “header-single.php”
4.) in you child directory create files “layerslider-header.html” and “layerslider-main.html”
5.) edit “single.php” and look for “get_header();” and replace it with “get_header(‘single’);”
6.) edit “header-single.php” and look for “wp_head();” and replace it with

wp_head();
include('layerslider-header.html');

7.) edit again “single.php” and add the following

        <?php include('layerslider-main.html'); ?>
        <div id='after_layer_slider_1' class='main_color av_default_container_wrap container_wrap fullsize'>

BEFORE

<div class='container_wrap container_wrap_first main_color <?php avia_layout_class( 'main' ); ?>'>

and REMEMBER to close the <div> at the end of a file. The end should look like this

                        </div><!--end container-->
                </div><!-- close default .container_wrap element -->
        </div><!-- close 'after_layer_slider_1' -->
<?php get_footer(); ?>

8.) edit “layerslider-header.html” and put the following inside … just REMEMBER to change your domain name from “example.com” to the one you are using

<link rel='stylesheet' id='layerslider-front-css'  href='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/public/front.css?ver=6.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='layerslider-css'  href='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/css/layerslider.css?ver=6.5.1' type='text/css' media='all' />
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/greensock.js?ver=1.19.0'></script>
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/layerslider.kreaturamedia.jquery.js?ver=6.5.1'></script>
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/layerslider.transitions.js?ver=6.5.1'></script>

9.) now edit “layerslider-main.html” and put the following inside … just REMEMBER to change your domain name from “example.com” to the one you are using

<div id='layer_slider_1' class='avia-layerslider main_color avia-shadow  avia-builder-el-1  el_after_av_textblock  el_before_av_textblock  slider-not-first container_wrap fullsize'    style='height: 157px;' >
<script data-cfasync="false" type="text/javascript">var lsjQuery = jQuery;</script><script data-cfasync="false" type="text/javascript">
lsjQuery(document).ready(function() {
if(typeof lsjQuery.fn.layerSlider == "undefined") {
if( window._layerSlider && window._layerSlider.showNotice) { 
window._layerSlider.showNotice('layerslider_9','jquery');
}
} else {
lsjQuery("#layerslider_9").layerSlider({sliderVersion: '6.5.1', type: 'fullwidth', skin: 'fullwidth', hoverPrevNext: false, navStartStop: false, navButtons: false, showCircleTimer: false, popupWidth: 640, popupHeight: 360, skinsPath: 'http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/skins/'});
}
});
</script>
<div id="layerslider_9" class="ls-wp-container fitvidsignore" style="width:1300px;height:156px;margin:0 auto;margin-bottom: 0px;">
<div class="ls-slide" data-ls="bgcolor:#041c2c;kenburnsscale:1.2;"><img width="1158" height="795" src="http://example.com/wp-content/uploads/images/website/baner.electrical.circuit.png" class="ls-l" alt="" srcset="http://example.com/wp-content/uploads/images/website/baner.electrical.circuit.png 1158w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-300x206.png 300w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-768x527.png 768w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-1030x707.png 1030w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-705x484.png 705w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-450x309.png 450w" sizes="(max-width: 1158px) 100vw, 1158px" style="top:18px;left:-463px;text-align:initial;font-weight:400;font-style:normal;text-decoration:none;wordwrap:false;opacity:1;mix-blend-mode:normal;" data-ls="fadein:false;clipin:0;transitionout:false;">
</div></div></div>

10.) this workaround works with WP 4.8.1, Enfold 4.1.2 and LayerSlider 6.5.1

In simple words I have copy & pasted the generated LayerSlider code (on other page build with Advanced Layout Editor) and put it in the correct places in <header> and <body> of the single post template.

Hope that descriptions will help some of you … Kriesi has quite a lot of room for improvements here …

Best regards,
MD

• This reply was modified 8 years, 7 months ago by midudek1.

Hi Ismael

Yes that sort of works now the buttons stack on top of one another which is okay

But can you help me understand why this didn’t align “straight out of the box” so to speak. The theme should do this was there something creating this issue? Would it happen again with another site using enfold?