What are the best practices for adding video to a slider? What's the best dimensions? Best file size? Format to save in? Minimum and maximum length? Can it be uploaded or does it have to be linked to a YouTube clip? I could not find any best practices for video in the documentation.
You can decide to embed a video from youtube or vimeo or upload a video file to your server and use that file as a html5 video. We prefer this option (html5). You can read more about that in our documentation: https://layerslider.com/documentation/#builder-layer-media The most compatible codec/format is h.264/mp4
You can use any dimensions and make it fit or fill the whole slider.
You can change the hover color and other options by using a Hover Transition on those layers. Please navigate to Layers → Transition, then select Hover Transition from the dropdown menu. Enable the switch, then scroll down to set all the desired options. You can fine tune the hover effect by changing the transition duration and other timing settings if necessary.
I am creating a website entirely with LayerSlider. I have a few questions:
1. I have created this layout in Photoshop. What’s the best way to divide the sections? 5 sections like the red, 3 sections like the green or a different way? What are the advantages of having multiple sections or making the entire site one long section?
2. I would like to animate the numbers (43, 552, 1,783, etc) to generate random numbers before stopping at the correct number. For example, the two digit spot where the “43” is would generate like twenty random two digit numbers before stopping at 43, then the 552 spot will generate twenty random three digit numbers before stopping a 552. But these will happen very fast, like half second for each number sequence. Is there a way to program this to happen?
3. The bottom section will be a book. By clicking on the next arrow I would like the book to flip the page and new text to the right of the book to animate. The text animation is easy. But getting the page to flip is more difficult. I tried doing it through animated GIFs. Each time you click the next arrow, an animated gif of the page turning will play in a new slide. However, since there are five pages (slides) and a user can go backwards, I can’t play an animated GIF backwards to flip the pages backwards. Also, if the user is on the first slide then clicks the bottom circle for the 3rd slide, the page flip will jump and not look real.
Can the page flip be done with a transition, animation or code? I checked the transitions and none of them look like a page flip.
1. I would prefer the "red". But I am not sure, that sections 2 and 4 should be built with LayerSlider. You can build with it of course if you prefer but...
2. ...but unfortunately there is no feature like this in LayerSlider to animate the numbers. We are planning to put a feature like this into the plugin in the future, but currently, even on our own home page, we used a custom script for that.
3. I've made an example slider for you, how can be the page flip effect achieved. Unfortunately, it is not perfect. For example it is working only in one direction and I had to make some 'hacks' for the proper effect.
Hi George. Thanks so much for your patience with my questions about the page fli[. Please see if I exported this correctly and you are able to import the slide:
1. Each of the six slides has it's own video. They are small videos. Each is about 650k. There is a flash or glitch when the videos load. Is there a way to pre-load all 6 videos before the slides play. Maybe that is the cause of the flash? 2. The slides loop. Is it possible to only play the opening animation on slide #1 once, but when it loops around and plays slide #1 again, it doesn't have the intro animation?
WOW, the site will be really awesome - I like especially the bottom slider. We are testing the blinking of the video layers and I hope I"ll find a solution for this issue. About your second question: on which slider would you like to play the opening transition only for the first time?
Thank you for writing back so quickly George! The slider with the page turning book is the one I would like to have an opening transition on slide #1. I would like the book to fade in and come in from the left, which I can easily do. However, when the user leaves slide 6 and it loops back to slide 1, they will see that opening transition again. Is it possible to play that opening transition on slide #1 just for the first time then never play it again when the user enters slide #1 thereafter?
If this is difficult, then never mind. The flicker issue is much more important to me than this!
Another question:
For the slide that has the smoke with the tan background. The smoke is an animated GIF of white smoke on a black background. It has a “screen” effect applied. There is also supposed to be a tiled patern background which I can put in the “Project Settings/Appearance. “ But in order to show the “screen” effect of the smoke, I need to have a background on the slide. When I do, it covers the pattern that was set in the “Project Settings/Appearance.” So is there a way to make a tiled pattern in the slide that repeats on both axis indefinitely? This way the smoke can appear properly?
If you set the action on the last slide to jump to slide #2 (instead of jumping to the next slide) the slider will skip the 1st slide.
If you would like to have a tiled/repeated background over the slide bg but below the smoke, you should use an HTML layer for that (just remove the default text from the HTML layer, set the size to 100%/100% and you can set a repeated bg image). I hope it helps.
The HTML suggestion for the video background worked perfectly!
For the page turn video I duplicated slide 1 so there was two #1 slides. The first had the intro animation and the second did not. Slide #1 then jumped to slide 3 and slide 6 leads to slide 2. SO it works great!
The last pending question is the flickering with the videos on the page-turn slides. Please let me know if your team comes up with a solution!
The bottom slider is not centered like the others. Its layout is set to “full width” like the others and it has the same width (1280) like the rest, but it isn’t behaving like the others. Any ideas?
2. The top image with the brown video background…when I resize the browser window, all the sliders get smaller or larger and do not replay their intro animations which is what I want. The top image gets larger and, but it replays it’s intro animation each time the browser is resized. Where can I prevent that from happening?
Thank you George for the screenshot. Question #2 has been answered.
Question #1 remains. I switched to full width, but it still shows an infinite horizontal repeating background. Would want it to have a finite box that does not repeat.
In full-width or full-size mode, the slide background (or bgcolor) will fill the whole screen from side to side. I see that you've changed the slider type to responsive and it is not centered right now. The reason for this is the following: the container element (in which you placed the sliders) has only a with of 960px which is not enough for a 1280px wide slider.
So I can recommend you to set that element with id="content-area" to wider. Or you can use a full-width slider, but in that case you should not use slide bg images and slide bg colors - you can use an HTML layer instead of that which has 100% width and height, and of course the "align position from" property must be set to "sides of the project". So you can set the required bg color for that HTML layer, instead of the whole slide. Of course, you have to animate those HTML layers as well, for example with a normal fade animation.
Thank you George. This slider was imported from one of the templates and I modified it. Is the 960px wide "container element" something I can fix WITHIN layerslider or is it something external? If it's internal, where do I go? If it's external, I just added this layerslider like mall others in WordPress.
No, that cannot be changed within the slider. Maybe that's the default site width in the theme you are using. So I recommend you what I wrote in my last message: "you can use a full-width slider, but in that case you should not use slide bg images nor slide bg colors - you can use an HTML layer instead which has 100% width and height, and of course the "align position from" property must be set to "sides of the project". So you can set the required bg color for that HTML layer, instead of the whole slide. Of course, you have to animate those HTML layers as well, for example with a normal fade animation."
Unfortunately, I'm not a programmer and I couldn't fix the issue with the "container element". So I trashed the slider and created a blank one. I am systematically brining in layer by layer, slide-by-slide and checking to make sure it renders properly. Presently, the size of the box is correct by using the HTML layer for the background and it scales when I resize the browser, however, it's showing the space outside the canvas area and the forward and next arrows seem to be on the edge of the browser window and to contained within the 1280 canvas area. Could you help? Please see the bottom slider here:
I understand the issue, but the main problem is the container element on the page which is only 960px wide. The solution (changing the slider to full-width) is working, but the layers are overflowing the background because the slider takes up the space on the screen from edge to edge. I can make a "hack" solution for you, but please, create me a temporary wp-admin access for that, because it is easier for me to make the necessary changes.
Unfortunately, I don't know where will be the flickering issue fixed. I am not sure that it can be even fixed, because as I can see, the issue is present only in the first cycle. We are, of course trying to figure out a solution.
Unfortunately, your site is incredible slow for me today - I even couldn't get to the slider editor. So, please export that slider for me and send the ZIP file to [email protected] I will make the changes locally and will send you back the modified slider.
About preloading: LayerSlider is always preloading the next slide, and the browser itself also preloads the locally hosted html5 videos as well.
I've just sent the modified version. As you will see, I put two layers on the sides of the sliders to hide the overflow content. The slider is now full-width again, but the background color and the overflow layers are not visible on the sides.
Thanks George! It is centered now. Can it be at the same width as the others at 1280? Your layout is 1280x720 but it seems like it's at 960. www.massexplained.com/new
Thanks George. I did indeed link the wrong one. I renamed all the old ones and was able to properly link yours. While it did solve the sizing issue, it created two more:
1. The previous and next arrows are now tied to the edge of the screen and not the canvas. They disappear when the browser is stretched wider than the canvas area. I suppose I can use a blank skin and create my own arrows. Let me know if that's the best solution.
2. The parallax effect now continues beyond the canvas area which severely distorts the elephant and shows the background beyond the background image. Is there a way to limit parallax effect to when the mouse is only over the canvas area? Thanks
Good morning! As I continue with the website, I have a few questions. But first, I had a plugin that was causing my site to be slow. You mentioned that you could not access the WordPress site because it was to0 slow. You can freely use the credentials I gave you in an earlier email to log on to the WordPress site and make any revisions. You will not experience any slowness. Here are my questions:
1. Pop-ups: I created a pop-up for a video. There are several buttons throughout the site that will call up this video pop up. Under “Attributes/ID”, I labeled all the buttons “popup” and under “open click by” I typed “#popup” in the pop-up slider. Only the “see video” button in the header works. None of the others can bring up this pop up. Any ideas?
2. I noticed that the template for “LayerSlider v5” has the properties that I need:
It is a constrained size. It crops the area beyond the canvas size. It scales when the browser is resized and it has the previous and next arrows. When I added the template to my site, the same thing happened: it’s constraining it to 960 pixels wide. Now that I’ve fixed the issue with the WordPress plug in, can you please take a look and see what in my theme is hindering this from behaving as expected? Using your solve by adding two white squares to hide the overflow content is a good idea, but then the arrows are not constrained within the canvas and the parallax scrolling is being applied being the canvas.
3. SEO: Since I’m creating the entire site with LayerSliders, will this impact my SEO since there are no <H1> headers or anything else? Will search engines read the text? Is there anything I can do within the program to improve SEO?
4. I saw that a nav bar can be created with Layer Slider. Is this something you would recommend or should I use a separate plug in? Can layer slider create pull down menus?
5. The projects I’ve created so far will be for desktop and tablet, but I’d like to modify it for phones. What’s the best way of doing this? In project setting I see “Hide on Mobile” but not the ability to specify devices. I don’t see a way to “show on desktop and tablet, but hide on phone”. So it seems like I need to use the “Hide Under” and “Hide Over” entries. Is this the case? If so, what’s the best numbers to use for phone and tablet? Is it best to duplicate the entire project and make a version for phone or duplicate layers within the same project to make the phone version by using “toggle device visibility”?
1. Did you insert/embed also the popup slider on the page? 2. It is the same issue: your site has a main container/wrapper element that has only 960px width. Thatswhy the responsive slider type cannot be larger or wider, than 960px. I think that your theme should have a setting for that. But I cannot help with this, since I don't know every WordPress theme. 3. Google will index your text layers, independently of the type of HTML element, but you can easily change the ls-layer element type to h1 or other (under Layer Settings / Content) 4. I would not recommend you create nav bars with LayerSlider - or only if it has a few one-word menu items. 5. In my experience, in most cases it is enough to create a different slider for phones (in portrait mode) and another slider for all other devices (phones in landscape, tablets, and desktops). I think that if a device has a width less than 480px that is a mobile device in portrait mode (but because most of the phones have larger screens and resolutions right now, you can use 512px for more accurate results). If you would like to create a separate slider for tablets as well, you can use the numbers 513px - 1024px for the lower and upper values.
Thank you George. Yes, the popup is on the page. It works with the "See Video" button in the header, but not with any other "See Video" button on the site. Please see:
Yes, the problem is that if you would like to use more buttons for the same popup, you should use class instead of id. So, add (for example) the following class name (and not id) for all the buttons: open-popup
And in the popup settings, use the selector: .open-popup
1. The left side of the line next to the Chai-Rho (PX) symbol in the header does not initially appear. It's only after scrolling does it appear. I have deleted, and reimported many times and can't find a fix.
2. I have a long slide that begins with the quote "It Would be easier.." I have it set to animate when it becomes visible in the viewport. Since it is a long vertical slide, it seems that it only begins to animate when it encounters the center of the slide. Is there a way to begin animating in the viewport when the top of the slide is n the viewport?
1. Unfortunately, this is a known issue on some browsers with the clip property, but only if you set the mask transition to be working from the right side of the layer. I've tried to find a solution, but nothing so far. Maybe you can try to set a vertical scaling (with setting transform origin to right) instead of using mask effect in the mobile slider.
2. Yes, as you wrote, the slider will start to animate in, when the center of the slider is almost in the center of the screen. I recommend you split that large vertical slider into two smaller ones.
I think it is better to use a carousel plugin for that. LayerSlider can move the slide backgrounds that way but the layers won't move in a way that depends on the direction.
Below that is the shortcode outside of layer slider. I would like to know why the one in Layer slider is cropping the titles of the articles that are long and the one outside of layer slider breaks them in more lines. Is there a way to have the one in layer slider break the titles and not crop.
I have a question. Please visit www.massexplained.com/new on your phone. Then scroll down to the slide that has the flipping book that reads “A WORK OF ART”. Please notice the style of the grey paragraph text that begins “Mass Explained enlists the Church’s…” When you click the right arrow, all the following paragraph text looks bolder and darker. When it comes back to the initial slide, it looks normal again. When I check the layer slider, the font styling is the same on all slides. How can this be? Is it picking up styles from the theme?
Also, on phone I see a speaker icon in a circle at top left. Can this be removed?
As I can see, the reason for the bold(ish) style of the text layers in the corresponding slider is that it is inherited from your theme. (There is an inline style element in the source of your front site at line 86. On the first slide, the text layer has a font-weight: normal; style property which prevents it from inheriting the bold style. So I recommend you to manually set a font weight property for all affected text layers in the LayerSlider editor.
If you would like to hide that speaker icon, you should set the video to play muted by default.
Thanks George. Looking here (attached) and it seems to be the same for all paragraph text on all slides. If it's somewhere else, can you show me where? I just don't see "font-weight: normal"
That's strange... what I can see (in the source code of your site) is that the text layer on the first slide has a font-style: normal; property on it (which is equal font-size: 400; ), but text layers on the other slides missing this property so they inherit font-weight: 800; from your theme.
So - for example - you should try to set font weight to 500 for all text layers, maybe that will help and won't be so bold.
When I visit it in Chrome, the audio of the video file starts playing, but the video itself is not moving nor have I clicked it to play. It just automatically stats playing the audio only. The only two sliders that have the video are the one that shows the video on the tan background and a pop up that appears when you click on the "watch video" button. Neither is set to auto play. Any ideas? Can you replicate it on your end?
Can you tell me which layer slider is calling for this image? Can't seem to find it. The site is ready to launch and still hearing the audio auto play in both Chrome and Safari.:
I think this causes the issue. Please try to remove that image and upload it again but with lower case letters in the file name only. This should solve the issue.
Hi George! I believe I did what you requested. Unfortunately on my end, I'm still hearing the audio of the video play automatically with no way of shutting it off. Any help you can provide would be most welcomed. Thanks!
I think that the affected video is in your slider with id #39. I would suggest you to set PLAY MUTED to ENABLED under LAYER -> CONTENT -> VIDEO/AUDIO for the video layer in that slider.
Hi George. I just updated to Layer Slider 7.5 and I'm experiencing an issue with one slide. Please visit here and go to the bottom carousel that shows me in a church. Go to the side that shows a swimming elephant. Then go backwards and the bubbles on that slide are still present on all slides. Is there a fix? www.MassExplained.com/new Thanks!-Dan
As I can see, the layer with the bubbles animation does not have Ending Transition. Please enable ending transition and the layer will gone at slide change.
There is a book carousel that has the title "A Work of Art". As you advance the carousel, the numbers at bottom increase: 1/6, 2/6, 3/6, etc. The first number should be bold. The "6" should never be bold. However, 3, 4, and 6 appear correct. But in 1, 2, and 5 both fonts look bold which is incorrect. I checked and they all seem to have the same settings. Please let me know if there is a solve. Thanks!
WOW, that is really strange. All I can see is that the 1, 2 and 5 are inheriting font-weight: 700 of an inline style of your page (on line 91: <style data-base-selectors>body{font-family:"Montserrat";font-style:normal;font-weight:700} ....... ) But I don't know why only in three cases are the font-weight wrong.
1. I created a pop-up that is the size of a letter 81/2" x 11". You can see the pop-up by going here: https://www.massexplained.com/new/ And scrolling down to where you see a monitor that reads "Sound Teaching". Just below is an underlined link that reads "Imprimatur". Clicking brings up the popup. I am using the pop up preset '"Center bar". But it gives too much space to the left and right of the letter. If you adjust your browser width, it adds more white space. I am looking for the letter to appear at the right proportions of a letter (which is how the popup is built) and have maybe 20 pixels above and below of clear space. I'd like for it to scale up and down if the browser window is resized. Not sure which preset to use or if I should use something else.
2. Is an issue we discussed previously. When you click on the carousel that has the book that has the title "A Work of Art". There is a flicker and stutter when it goes from one slide to the other and the page turns. Each slide has a small movie that begins where he previous movie left off. There is no slide transition. I was hoping that version 7.5 would address the issue but sadly it did not. Last time we spoke about it, you mentioned that you would have your engineers take a look at it. I was wondering if they had time and if there is a solve for this?
Hi George. Thanks for your quick reply. Would it be possible for you to send me a link to documentation to solve #1. Or maybe a few screenshots or a video or point me in the right direction.
As far as #2. Oh well, I guess I'll live with it. I'll then only love LayerSlider 99.99999% :) It really is a great product and it allows me to do things I could never even dream of coding.
Please export the Popup in question for me and I will make the necessary adjustments for you. You can send the zip file to [email protected] or try to add it as an attachment here in the ticket.
Thanks George. Here it is. It's very close to what I want, the only exception is that it should be the proportional width of a piece of paper. It is too wide.
For the button popus, I click the button then go to the layer actions and select the name of the pop up. Am I doing it right? Where would I enter the popup ID?
Hi George! One quick question...You created for me that pop-up of the letter which works perfectly on desktop. And when I resize the desktop browser so it's phone-sized, the pop-up still works perfectly by scaling to size. But when I see it on my actual iPhone, the letter pops up at full size and I can't close it, pinch to zoom out, or anything. I need to close the browser window and visit the site again. Any ideas?
That's strange. I've tested that popup on our test servers (also on mobile) and for me, it worked fine. I think that this issue is related to your site (maybe you are using some mobile specified css code or html meta tags (?)). I would recommend you to check your settings/code because the popup should not work by this way.
Hi George. Quick question. I have an upper slide here with a video background. The circular loading animation appears, then vanishes, but the slide only plays after I scroll down slightly. Is there a way for it to play immediately after it loads and not require a scroll event? www.MassExplained.com/new Thank you!
There is a javascript error on this page now: www.MassExplained.com/new - so I couldn't check what you've asked. It seems like there is no jQuery loaded.
For some reason, my youtube video does not have the play icon at the center anymore. It is the closeup picture of the priest holding the bread underneath the icons with numbers. Do you know why it left and how do I bring it back? The same video works as the pop up, but it doesn't on the page. Any help would be appreciated.
Please make sure, that if you select the video layer, under Layer Settings in the iframe embed code there should be an src attribute with the video URL, but NOT a data-src attribute. If there is a data-src attribute, please change it to src. If this is not the case, please disable and other plugins with lazy load feature or exclude embedded videos from lazy loading because it can break LayerSlider's built-in preloading feature.
Hi George. Please see the image "Source" shows my source. The slide "slide preview" shows the play arrow and it works perfectly. But when I see it in the browser, the play arrows is gone. However, when I click on the button "See video" the same video plays perfectly well in the pop up. Any ideas. Not sure I understood your next step. Thanks!
Hi George. Problem solved. It was the "Site Ground Optimizer" plug in. I turned this off (it was on by default) and it now works as you suggested:
Lazy Load Media
RECOMMENDED
With Lazy Load enabled only the media in the visible part of the browser will be loaded. This makes loading faster and smoother for longer pages with multiple media items.
I have a quick question. I want to have a pop up that is triggered by a button. The pop up will collect the users email and I want it sent to my Constant Contact email list. I have ninja pop up. What's the best way of integrating that into Layer Slider or should I create the pop up with Later Slider. If so, is there a constant contact integration? Thanks!
If you would like to open a Ninja Popup modal by clicking an element in LayerSlider, you should select that layer, go to Layer -> Link in the right sidebar and use #ninja-popup-XX in the "Set Link" field, where XX should be the ID of your Ninja Popup modal.
What are the best practices for adding video to a slider? What's the best dimensions? Best file size? Format to save in? Minimum and maximum length? Can it be uploaded or does it have to be linked to a YouTube clip? I could not find any best practices for video in the documentation.
Hello Daniel,
Thank you for writing us.
You can decide to embed a video from youtube or vimeo or upload a video file to your server and use that file as a html5 video. We prefer this option (html5). You can read more about that in our documentation: https://layerslider.com/documentation/#builder-layer-media
The most compatible codec/format is h.264/mp4
You can use any dimensions and make it fit or fill the whole slider.
Best Regards,
George | Kreatura Dev Team
thank you for your fast reply. Could you also point me to documentation on creating the hover states for buttons. Thanks!
Hello David,
You can change the hover color and other options by using a Hover Transition on those layers. Please navigate to Layers → Transition, then select Hover Transition from the dropdown menu. Enable the switch, then scroll down to set all the desired options. You can fine tune the hover effect by changing the transition duration and other timing settings if necessary.
Best Regards,
George | Kreatura Dev Team
I am creating a website entirely with LayerSlider. I have a few questions:
1. I have created this layout in Photoshop. What’s the best way to divide the sections? 5 sections like the red, 3 sections like the green or a different way? What are the advantages of having multiple sections or making the entire site one long section?
2. I would like to animate the numbers (43, 552, 1,783, etc) to generate random numbers before stopping at the correct number. For example, the two digit spot where the “43” is would generate like twenty random two digit numbers before stopping at 43, then the 552 spot will generate twenty random three digit numbers before stopping a 552. But these will happen very fast, like half second for each number sequence. Is there a way to program this to happen?
I just noticed that the effect I want is on your website: https://layerslider.com/
3. The bottom section will be a book. By clicking on the next arrow I would like the book to flip the page and new text to the right of the book to animate. The text animation is easy. But getting the page to flip is more difficult. I tried doing it through animated GIFs. Each time you click the next arrow, an animated gif of the page turning will play in a new slide. However, since there are five pages (slides) and a user can go backwards, I can’t play an animated GIF backwards to flip the pages backwards. Also, if the user is on the first slide then clicks the bottom circle for the 3rd slide, the page flip will jump and not look real.
Can the page flip be done with a transition, animation or code? I checked the transitions and none of them look like a page flip.
Thanks!
Hello Daniel,
1. I would prefer the "red". But I am not sure, that sections 2 and 4 should be built with LayerSlider. You can build with it of course if you prefer but...
2. ...but unfortunately there is no feature like this in LayerSlider to animate the numbers. We are planning to put a feature like this into the plugin in the future, but currently, even on our own home page, we used a custom script for that.
3. I've made an example slider for you, how can be the page flip effect achieved. Unfortunately, it is not perfect. For example it is working only in one direction and I had to make some 'hacks' for the proper effect.
Best Regards,
George | Kreatura Dev Team
Thank you George. Can you please send your zip file in a different way. I cannot initiate the download.
Hello Daniel,
I've sent it via email.
Best Regards,
George | Kreatura Dev Team
Hi George. Thanks so much for your patience with my questions about the page fli[. Please see if I exported this correctly and you are able to import the slide:
https://we.tl/t-MSG4D8ymTz
You can see a preview here:
https://www.massexplained.com/new/
My questions are:
1. Each of the six slides has it's own video. They are small videos. Each is about 650k. There is a flash or glitch when the videos load. Is there a way to pre-load all 6 videos before the slides play. Maybe that is the cause of the flash?
2. The slides loop. Is it possible to only play the opening animation on slide #1 once, but when it loops around and plays slide #1 again, it doesn't have the intro animation?
Hello Daniel,
WOW, the site will be really awesome - I like especially the bottom slider. We are testing the blinking of the video layers and I hope I"ll find a solution for this issue. About your second question: on which slider would you like to play the opening transition only for the first time?
Best Regards,
George | Kreatura Dev Team
Thank you for writing back so quickly George! The slider with the page turning book is the one I would like to have an opening transition on slide #1. I would like the book to fade in and come in from the left, which I can easily do. However, when the user leaves slide 6 and it loops back to slide 1, they will see that opening transition again. Is it possible to play that opening transition on slide #1 just for the first time then never play it again when the user enters slide #1 thereafter?
If this is difficult, then never mind. The flicker issue is much more important to me than this!
Another question:
For the slide that has the smoke with the tan background. The smoke is an animated GIF of white smoke on a black background. It has a “screen” effect applied. There is also supposed to be a tiled patern background which I can put in the “Project Settings/Appearance. “ But in order to show the “screen” effect of the smoke, I need to have a background on the slide. When I do, it covers the pattern that was set in the “Project Settings/Appearance.” So is there a way to make a tiled pattern in the slide that repeats on both axis indefinitely? This way the smoke can appear properly?
Thanks again for all your help!
Hello Daniel,
If you set the action on the last slide to jump to slide #2 (instead of jumping to the next slide) the slider will skip the 1st slide.
If you would like to have a tiled/repeated background over the slide bg but below the smoke, you should use an HTML layer for that (just remove the default text from the HTML layer, set the size to 100%/100% and you can set a repeated bg image). I hope it helps.
Best Regards,
George | Kreatura Dev Team
Thanks George!
The HTML suggestion for the video background worked perfectly!
For the page turn video I duplicated slide 1 so there was two #1 slides. The first had the intro animation and the second did not. Slide #1 then jumped to slide 3 and slide 6 leads to slide 2. SO it works great!
The last pending question is the flickering with the videos on the page-turn slides. Please let me know if your team comes up with a solution!
Thanks!
Hi George
I have two questions:
1. At this page: www.massexplained.com/new
The bottom slider is not centered like the others. Its layout is set to “full width” like the others and it has the same width (1280) like the rest, but it isn’t behaving like the others. Any ideas?
2. The top image with the brown video background…when I resize the browser window, all the sliders get smaller or larger and do not replay their intro animations which is what I want. The top image gets larger and, but it replays it’s intro animation each time the browser is resized. Where can I prevent that from happening?
Thanks!
Hello Daniel,
1. As I can see, the bottom slider is set to full-size, not to full-width.
2. You can disable this feature (please see the attached screenshot).
Best Regards,
George | Kreatura Dev Team
Thank you George for the screenshot. Question #2 has been answered.
Question #1 remains. I switched to full width, but it still shows an infinite horizontal repeating background. Would want it to have a finite box that does not repeat.
In full-width or full-size mode, the slide background (or bgcolor) will fill the whole screen from side to side. I see that you've changed the slider type to responsive and it is not centered right now. The reason for this is the following: the container element (in which you placed the sliders) has only a with of 960px which is not enough for a 1280px wide slider.
So I can recommend you to set that element with id="content-area" to wider. Or you can use a full-width slider, but in that case you should not use slide bg images and slide bg colors - you can use an HTML layer instead of that which has 100% width and height, and of course the "align position from" property must be set to "sides of the project". So you can set the required bg color for that HTML layer, instead of the whole slide. Of course, you have to animate those HTML layers as well, for example with a normal fade animation.
Best Regards,
George | Kreatura Dev Team
Thank you George. This slider was imported from one of the templates and I modified it. Is the 960px wide "container element" something I can fix WITHIN layerslider or is it something external? If it's internal, where do I go? If it's external, I just added this layerslider like mall others in WordPress.
No, that cannot be changed within the slider. Maybe that's the default site width in the theme you are using. So I recommend you what I wrote in my last message: "you can use a full-width slider, but in that case you should not use slide bg images nor slide bg colors - you can use an HTML layer instead which has 100% width and height, and of course the "align position from" property must be set to "sides of the project". So you can set the required bg color for that HTML layer, instead of the whole slide. Of course, you have to animate those HTML layers as well, for example with a normal fade animation."
Best Regards,
George | Kreatura Dev Team
HI George
Unfortunately, I'm not a programmer and I couldn't fix the issue with the "container element". So I trashed the slider and created a blank one. I am systematically brining in layer by layer, slide-by-slide and checking to make sure it renders properly. Presently, the size of the box is correct by using the HTML layer for the background and it scales when I resize the browser, however, it's showing the space outside the canvas area and the forward and next arrows seem to be on the edge of the browser window and to contained within the 1280 canvas area. Could you help? Please see the bottom slider here:
https://www.massexplained.com/new
Also, still experiencing the flicker with the page-flip slider. Please let me know if your team has made any progress or if you need anything from me.
Thanks
Hi Daniel,
I understand the issue, but the main problem is the container element on the page which is only 960px wide. The solution (changing the slider to full-width) is working, but the layers are overflowing the background because the slider takes up the space on the screen from edge to edge. I can make a "hack" solution for you, but please, create me a temporary wp-admin access for that, because it is easier for me to make the necessary changes.
Unfortunately, I don't know where will be the flickering issue fixed. I am not sure that it can be even fixed, because as I can see, the issue is present only in the first cycle. We are, of course trying to figure out a solution.
Best Regards,
George | Kreatura Dev Team
Hello Daniel,
Unfortunately, your site is incredible slow for me today - I even couldn't get to the slider editor. So, please export that slider for me and send the ZIP file to [email protected]
I will make the changes locally and will send you back the modified slider.
About preloading: LayerSlider is always preloading the next slide, and the browser itself also preloads the locally hosted html5 videos as well.
Best Regards,
George | Kreatura Dev Team
I've just sent the modified version. As you will see, I put two layers on the sides of the sliders to hide the overflow content. The slider is now full-width again, but the background color and the overflow layers are not visible on the sides.
Best Regards,
George | Kreatura Dev Team
Thanks George. Where did you send it to?
Via WeTransfer - as I can see you downloaded it already.
Best Regards,
George | Kreatura Dev Team
Thanks George! It is centered now. Can it be at the same width as the others at 1280? Your layout is 1280x720 but it seems like it's at 960.
www.massexplained.com/new
Hello Daniel,
That is not the same slider I've sent you. It should be a full-width slider with static layers on the first slide.
Best Regards,
George | Kreatura Dev Team
Thanks George. I did indeed link the wrong one. I renamed all the old ones and was able to properly link yours. While it did solve the sizing issue, it created two more:
1. The previous and next arrows are now tied to the edge of the screen and not the canvas. They disappear when the browser is stretched wider than the canvas area. I suppose I can use a blank skin and create my own arrows. Let me know if that's the best solution.
2. The parallax effect now continues beyond the canvas area which severely distorts the elephant and shows the background beyond the background image. Is there a way to limit parallax effect to when the mouse is only over the canvas area?
Thanks
Hi George
Good morning! As I continue with the website, I have a few questions. But first, I had a plugin that was causing my site to be slow. You mentioned that you could not access the WordPress site because it was to0 slow. You can freely use the credentials I gave you in an earlier email to log on to the WordPress site and make any revisions. You will not experience any slowness. Here are my questions:
1. Pop-ups: I created a pop-up for a video. There are several buttons throughout the site that will call up this video pop up. Under “Attributes/ID”, I labeled all the buttons “popup” and under “open click by” I typed “#popup” in the pop-up slider. Only the “see video” button in the header works. None of the others can bring up this pop up. Any ideas?
2. I noticed that the template for “LayerSlider v5” has the properties that I need:
It is a constrained size. It crops the area beyond the canvas size. It scales when the browser is resized and it has the previous and next arrows. When I added the template to my site, the same thing happened: it’s constraining it to 960 pixels wide. Now that I’ve fixed the issue with the WordPress plug in, can you please take a look and see what in my theme is hindering this from behaving as expected? Using your solve by adding two white squares to hide the overflow content is a good idea, but then the arrows are not constrained within the canvas and the parallax scrolling is being applied being the canvas.
3. SEO: Since I’m creating the entire site with LayerSliders, will this impact my SEO since there are no <H1> headers or anything else? Will search engines read the text? Is there anything I can do within the program to improve SEO?
4. I saw that a nav bar can be created with Layer Slider. Is this something you would recommend or should I use a separate plug in? Can layer slider create pull down menus?
5. The projects I’ve created so far will be for desktop and tablet, but I’d like to modify it for phones. What’s the best way of doing this? In project setting I see “Hide on Mobile” but not the ability to specify devices. I don’t see a way to “show on desktop and tablet, but hide on phone”. So it seems like I need to use the “Hide Under” and “Hide Over” entries. Is this the case? If so, what’s the best numbers to use for phone and tablet? Is it best to duplicate the entire project and make a version for phone or duplicate layers within the same project to make the phone version by using “toggle device visibility”?
Hello Daniel!
I am sorry for the delayed reply.
1. Did you insert/embed also the popup slider on the page?
2. It is the same issue: your site has a main container/wrapper element that has only 960px width. Thatswhy the responsive slider type cannot be larger or wider, than 960px. I think that your theme should have a setting for that. But I cannot help with this, since I don't know every WordPress theme.
3. Google will index your text layers, independently of the type of HTML element, but you can easily change the ls-layer element type to h1 or other (under Layer Settings / Content)
4. I would not recommend you create nav bars with LayerSlider - or only if it has a few one-word menu items.
5. In my experience, in most cases it is enough to create a different slider for phones (in portrait mode) and another slider for all other devices (phones in landscape, tablets, and desktops).
I think that if a device has a width less than 480px that is a mobile device in portrait mode (but because most of the phones have larger screens and resolutions right now, you can use 512px for more accurate results).
If you would like to create a separate slider for tablets as well, you can use the numbers 513px - 1024px for the lower and upper values.
Best Regards,
George | Kreatura Dev Team
Thank you George. Yes, the popup is on the page. It works with the "See Video" button in the header, but not with any other "See Video" button on the site. Please see:
www.massexplained.com/new
Any help will be most welcomed!
Yes, the problem is that if you would like to use more buttons for the same popup, you should use class instead of id. So, add (for example) the following class name (and not id) for all the buttons: open-popup
And in the popup settings, use the selector: .open-popup
Best Regards,
George | Kreatura Dev Team
Yup. That worked. Thanks George!
Hi George!
Hope all is well. I've turned my attention to the mobile version. Please see this site on your phone in portrait orientation:
www.MassExplained.com/new
Please download this video so you can see where my questions are:
https://we.tl/t-dsawrRWuQM
1. The left side of the line next to the Chai-Rho (PX) symbol in the header does not initially appear. It's only after scrolling does it appear. I have deleted, and reimported many times and can't find a fix.
2. I have a long slide that begins with the quote "It Would be easier.." I have it set to animate when it becomes visible in the viewport. Since it is a long vertical slide, it seems that it only begins to animate when it encounters the center of the slide. Is there a way to begin animating in the viewport when the top of the slide is n the viewport?
Thanks!
Hey Daniel,
1. Unfortunately, this is a known issue on some browsers with the clip property, but only if you set the mask transition to be working from the right side of the layer. I've tried to find a solution, but nothing so far. Maybe you can try to set a vertical scaling (with setting transform origin to right) instead of using mask effect in the mobile slider.
2. Yes, as you wrote, the slider will start to animate in, when the center of the slider is almost in the center of the screen. I recommend you split that large vertical slider into two smaller ones.
Best Regards,
George | Kreatura Dev Team
thanks George. Is #1 just an issue on mobile or does it occur on desktops as well?
Hello Daniel,
I am not sure about that. So far I have only experienced this error in a desktop browser
Best Regards,
George | Kreatura Dev Team
Hi George,
I'm trying to design a recent post carousel like "Carousel Design – 2" which is towards the bottom of this page:
https://demo.infornweb.com/post-slider-and-carousel/
Can this be done with layer slider or is it better to use the WP plug in?
I was able to add the picture, title and excerpt of a post using the dynamic layer, but not sure how to turn this into a slider like the sample above:
www.massexplained.com/new
Thanks!
Hello Daniel,
I think it is better to use a carousel plugin for that. LayerSlider can move the slide backgrounds that way but the layers won't move in a way that depends on the direction.
Best Regards,
George | Kreatura Dev Team
Hi George!
I created a slider that has a shortcode to show recent posts. You can see it here in the tan box:
https://www.massexplained.com/new/
Below that is the shortcode outside of layer slider. I would like to know why the one in Layer slider is cropping the titles of the articles that are long and the one outside of layer slider breaks them in more lines. Is there a way to have the one in layer slider break the titles and not crop.
Thanks!
Hello David,
I think that you should maximize the size of that layer (which will get the titles) by setting the width (try 1000px for example). I hope this helps.
Best Regards,
George | Kreatura Dev Team
Hi George!
I have a question. Please visit www.massexplained.com/new on your phone. Then scroll down to the slide that has the flipping book that reads “A WORK OF ART”. Please notice the style of the grey paragraph text that begins “Mass Explained enlists the Church’s…” When you click the right arrow, all the following paragraph text looks bolder and darker. When it comes back to the initial slide, it looks normal again. When I check the layer slider, the font styling is the same on all slides. How can this be? Is it picking up styles from the theme?
Also, on phone I see a speaker icon in a circle at top left. Can this be removed?
Thanks!
-Dan
Helo David,
As I can see, the reason for the bold(ish) style of the text layers in the corresponding slider is that it is inherited from your theme. (There is an inline style element in the source of your front site at line 86. On the first slide, the text layer has a font-weight: normal; style property which prevents it from inheriting the bold style. So I recommend you to manually set a font weight property for all affected text layers in the LayerSlider editor.
If you would like to hide that speaker icon, you should set the video to play muted by default.
Best Regards,
George | Kreatura Dev Team
Thanks George. Looking here (attached) and it seems to be the same for all paragraph text on all slides. If it's somewhere else, can you show me where? I just don't see "font-weight: normal"
That's strange... what I can see (in the source code of your site) is that the text layer on the first slide has a font-style: normal; property on it (which is equal font-size: 400; ), but text layers on the other slides missing this property so they inherit font-weight: 800; from your theme.
So - for example - you should try to set font weight to 500 for all text layers, maybe that will help and won't be so bold.
Best Regards,
George | Kreatura Dev Team
Hi George:
Almost finished with the website:
https://www.massexplained.com/new/
When I visit it in Chrome, the audio of the video file starts playing, but the video itself is not moving nor have I clicked it to play. It just automatically stats playing the audio only. The only two sliders that have the video are the one that shows the video on the tan background and a pop up that appears when you click on the "watch video" button. Neither is set to auto play. Any ideas? Can you replicate it on your end?
Hello Daniel, As I can see, there is an issue loading this file:
It seems like this image is not found on the server. It is set for a video thumbnail image and I think, this can cause an issue.
Best Regards,
George | Kreatura Dev Team
Can you tell me which layer slider is calling for this image? Can't seem to find it.
The site is ready to launch and still hearing the audio auto play in both Chrome and Safari.:
https://www.massexplained.com/new/
Thanks!
Hello Daniel,
As I can see, the slider with ID #22 is trying to load that image.
The image file in question is:
However, you have the following file on your server, with the F letter being uppercase:
I think this causes the issue. Please try to remove that image and upload it again but with lower case letters in the file name only. This should solve the issue.
Best Regards,
George | Kreatura Dev Team
Hi George! I believe I did what you requested. Unfortunately on my end, I'm still hearing the audio of the video play automatically with no way of shutting it off. Any help you can provide would be most welcomed. Thanks!
https://www.massexplained.com/new/
Hello Daniel,
I think that the affected video is in your slider with id #39. I would suggest you to set PLAY MUTED to ENABLED under LAYER -> CONTENT -> VIDEO/AUDIO for the video layer in that slider.
Attached files: Screenshot 2022-07-11 at 18.26.26.png
Best Regards,
George | Kreatura Dev Team
I believe it already is.
Attached files: screens.jpg
I am sorry, I was wrong: it is the slider with id #41
Best Regards,
George | Kreatura Dev Team
Hi George. I just updated to Layer Slider 7.5 and I'm experiencing an issue with one slide. Please visit here and go to the bottom carousel that shows me in a church. Go to the side that shows a swimming elephant. Then go backwards and the bubbles on that slide are still present on all slides. Is there a fix?
www.MassExplained.com/new
Thanks!-Dan
Hey Daniel,
As I can see, the layer with the bubbles animation does not have Ending Transition. Please enable ending transition and the layer will gone at slide change.
Best Regards,
George | Kreatura Dev Team
Thank you George! That fixed it!
One small question, George. When you visit the site:
https://www.massexplained.com/new/
There is a book carousel that has the title "A Work of Art". As you advance the carousel, the numbers at bottom increase: 1/6, 2/6, 3/6, etc. The first number should be bold. The "6" should never be bold. However, 3, 4, and 6 appear correct. But in 1, 2, and 5 both fonts look bold which is incorrect. I checked and they all seem to have the same settings. Please let me know if there is a solve. Thanks!
WOW, that is really strange. All I can see is that the 1, 2 and 5 are inheriting font-weight: 700 of an inline style of your page (on line 91: <style data-base-selectors>body{font-family:"Montserrat";font-style:normal;font-weight:700} ....... )
But I don't know why only in three cases are the font-weight wrong.
Best Regards,
George | Kreatura Dev Team
Thanks George. Anyway this can be solved? How can I remove the inheriting font-weight: 700 from the bold numbers?
Please try to set the font weight to 300 of those text layers - maybe this will help.
Best Regards,
George | Kreatura Dev Team
Thanks George. That did it!
My two next questions:
1. I created a pop-up that is the size of a letter 81/2" x 11". You can see the pop-up by going here:
https://www.massexplained.com/new/
And scrolling down to where you see a monitor that reads "Sound Teaching". Just below is an underlined link that reads "Imprimatur". Clicking brings up the popup. I am using the pop up preset '"Center bar". But it gives too much space to the left and right of the letter. If you adjust your browser width, it adds more white space. I am looking for the letter to appear at the right proportions of a letter (which is how the popup is built) and have maybe 20 pixels above and below of clear space. I'd like for it to scale up and down if the browser window is resized. Not sure which preset to use or if I should use something else.
2. Is an issue we discussed previously. When you click on the carousel that has the book that has the title "A Work of Art". There is a flicker and stutter when it goes from one slide to the other and the page turns. Each slide has a small movie that begins where he previous movie left off. There is no slide transition. I was hoping that version 7.5 would address the issue but sadly it did not. Last time we spoke about it, you mentioned that you would have your engineers take a look at it. I was wondering if they had time and if there is a solve for this?
Thanks
1. Please create me a wp-admin access and I will help you with the settings. It would be a bit complicated to explain.
2. Unfortunately, we still couldn't find a way to fix that.
Best Regards,
George | Kreatura Dev Team
Hi George. Thanks for your quick reply. Would it be possible for you to send me a link to documentation to solve #1. Or maybe a few screenshots or a video or point me in the right direction.
As far as #2. Oh well, I guess I'll live with it. I'll then only love LayerSlider 99.99999% :)
It really is a great product and it allows me to do things I could never even dream of coding.
Thanks!
Hello Daniel,
Please export the Popup in question for me and I will make the necessary adjustments for you. You can send the zip file to [email protected] or try to add it as an attachment here in the ticket.
Best Regards,
George | Kreatura Dev Team
Thanks George. Here it is. It's very close to what I want, the only exception is that it should be the proportional width of a piece of paper. It is too wide.
Attached files: LayerSlider - PopUp-Nihil - 2022-10-01 at 20.09.44.zip
It should ideally crop to where the blue lines are in the JPEG
Attached files: bluelines.jpg
Hello Daniel,
I've made the changes for you. I hope you'll like it.
Attached files: LayerSlider - PopUp-Nihil - 2022-10-03 at 12.16.38.zip
Best Regards,
George | Kreatura Dev Team
George! This works perfectly. Exactly how I wanted it to work. Thank you so much!
Great, thank you for the feedback ;-)
Best Regards,
George | Kreatura Dev Team
Hi George. Your pop up works great on desktop! However, I have a mobile version and on the phone it doesn't seem to work. Could you take a look at :
https://www.massexplained.com/new/
Thank you!
-Dan
As I can see in the mobile version of the slider (with the popup opener link) you are referring to the wrong Popup (id=60 instead of 62)
Best Regards,
George | Kreatura Dev Team
For the button popus, I click the button then go to the layer actions and select the name of the pop up. Am I doing it right? Where would I enter the popup ID?
Attached files: nihil.jpg
Nevermind, George. I deleted the button and created a new one and now it's working! Thanks!
Hi George! One quick question...You created for me that pop-up of the letter which works perfectly on desktop. And when I resize the desktop browser so it's phone-sized, the pop-up still works perfectly by scaling to size. But when I see it on my actual iPhone, the letter pops up at full size and I can't close it, pinch to zoom out, or anything. I need to close the browser window and visit the site again. Any ideas?
Attached files: IMG_B0CA31C7B21D-1.jpeg
Hello Daniel,
That's strange. I've tested that popup on our test servers (also on mobile) and for me, it worked fine. I think that this issue is related to your site (maybe you are using some mobile specified css code or html meta tags (?)). I would recommend you to check your settings/code because the popup should not work by this way.
Best Regards,
George | Kreatura Dev Team
Hi George. Quick question. I have an upper slide here with a video background. The circular loading animation appears, then vanishes, but the slide only plays after I scroll down slightly. Is there a way for it to play immediately after it loads and not require a scroll event?
www.MassExplained.com/new
Thank you!
Hello Daniel,
There is a javascript error on this page now: www.MassExplained.com/new - so I couldn't check what you've asked. It seems like there is no jQuery loaded.
Best Regards,
George | Kreatura Dev Team
pareaste try this
https://www.massexplained.com/new/
Hello Daniel,
I think disabling Performance Mode OR settings the Performance Mode Threshold to 0 should solve this issue.
Attached files: project-settings-performance-mode-off.png
Best Regards,
George | Kreatura Dev Team
Thank you, George! I will give it a go!
Hi George!
For some reason, my youtube video does not have the play icon at the center anymore. It is the closeup picture of the priest holding the bread underneath the icons with numbers. Do you know why it left and how do I bring it back? The same video works as the pop up, but it doesn't on the page. Any help would be appreciated.
https://www.massexplained.com/new/
I thought it might have something to do with the "performance" project settings but I set everything back to the way it was and nothing helped.
Hello Daniel,
Please make sure, that if you select the video layer, under Layer Settings in the iframe embed code there should be an src attribute with the video URL, but NOT a data-src attribute. If there is a data-src attribute, please change it to src. If this is not the case, please disable and other plugins with lazy load feature or exclude embedded videos from lazy loading because it can break LayerSlider's built-in preloading feature.
Attached files: media-embed.png
Best Regards,
George | Kreatura Dev Team
Hi George. Please see the image "Source" shows my source. The slide "slide preview" shows the play arrow and it works perfectly. But when I see it in the browser, the play arrows is gone. However, when I click on the button "See video" the same video plays perfectly well in the pop up. Any ideas. Not sure I understood your next step. Thanks!
Attached files: slide preview.jpg
source.jpg
Hi George. Problem solved. It was the "Site Ground Optimizer" plug in. I turned this off (it was on by default) and it now works as you suggested:
Lazy Load MediaRECOMMENDED
With Lazy Load enabled only the media in the visible part of the browser will be loaded. This makes loading faster and smoother for longer pages with multiple media items.
Hello Jordan,
I am sorry for the delayed reply.
Thank you for the feedback.
Best Regards,
George | Kreatura Dev Team
Hello George!
I have a quick question. I want to have a pop up that is triggered by a button. The pop up will collect the users email and I want it sent to my Constant Contact email list. I have ninja pop up. What's the best way of integrating that into Layer Slider or should I create the pop up with Later Slider. If so, is there a constant contact integration? Thanks!
Hello Daniel,
Unfortunately, since LayerSlider has no built-in feature like collecting email addresses I recommend you to use Ninja Popup instead.
Best Regards,
George | Kreatura Dev Team
OK. How do I implement that? Ninja pop ups just gives me a short code. How do I add that to be triggered by a button in Layer Slider? Please see here:
https://demo.arscode.pro/ninja-popups/open-popup-by-clicking-on-the-link-or-button/
Hello Daniel,
If you would like to open a Ninja Popup modal by clicking an element in LayerSlider, you should select that layer, go to Layer -> Link in the right sidebar and use #ninja-popup-XX in the "Set Link" field, where XX should be the ID of your Ninja Popup modal.
Best Regards,
George | Kreatura Dev Team
Thanks, George. Unfortunately, it is not working. Please see the first button that says "Sign Up:
https://www.massexplained.com/new
Are you sure that Ninja Pupup plugin files are included to this page? I mean, I can't find any JS or CSS files that belong to Ninja Popup plugin.
Best Regards,
George | Kreatura Dev Team
Thanks for your reply, George. Unfortunately, I'm not too familiar with this. Is this code that goes inside LayerSlider or outside in WordPress?
I mean, it seems like Ninja Popup is not installed / activated on your page since there are no JS files are loaded that belong to that plugin.
Best Regards,
George | Kreatura Dev Team