we recently started using the incredible LayerSlider and are very happy with the possibilities. Unfortunately we are only "normal users" and have no extensive programming skills. We use the well known theme "AVADA" on Wordpress and have added a custom font in their backend. As far as we could research, it is somehow possible to use this font (it is called: Boston Skyline Rough) via CSS command also in LayerSlider. Unfortunately, we only know roughly what CSS is and therefore do not know where and with which command we can define the link to the font. We would be very happy if we could get some help here.
Thank you for your kind words! It is possible to use your font in LayerSlider, if you write the name of it to the layer style / font-family field. It will not take any effect on the backend because probably your font only load on the frontend, but it will be okay on the frontend. Please check it and if you will have any other question, feel free to ask.
we are not only thrilled about the possibilities of LayerSlider, but now also about the support. Your hints helped us absolutely. Thank you so much!
Now we have worked a bit further and have another issue. It is more a problem of understanding and we don't want to do anything wrong.
The situation is the following: 1) We want to configure a slider that looks something like this in the Desktop Viewport. The outer area is only a background image and the animation takes place just within the middle "picture frame".
2) For the smartphone-viewport, we want to do without the background - to make better use of the display area - and display only the middle square.
We are now uncertain which "strategy" we should follow for this. Can we configure it so, that we define these two views within ONE LayerSlider? Or should we better create two sliders (one with and one without background)? It would be important for us to keep the file size/loading time for the landingpage as small as possible. So we want to avoid that (even if in the background) two sliders have to be loaded, which would drastically increase the total file size of the landing page.
Yes, you should create a separate slider for desktop and mobile. You should use the slider settings / mobile tab for set the hide under and over parameters.
Currently, both created sliders are loaded because hideUnder / hideOver is also widely used to create multiple sliders on the desktop depending on the resolution, e.g. for mobile phones, they switch between portrait / landsape mode to display other sliders and in these cases it is necessary not to start loading the images when the user is turning his phone or resizing the browser, but to have a working slider in the background which appears. However, in the future, we are planning a feature that will allow the users to better customize these things (what to load when, etc.). Thank you for understanding!
If you will have any other question, feel free to ask.
Thanks for your answer. Ok, we have understood your informations.
As said before, we don't know much about coding and we are concerned about keeping the loading-file size as small as possible...so we ask ourselves whether we should store images of different sizes separately for the two slider variants. Those for the smartphone view would be much smaller in file-size. Or should we always refer to the same image in both variants, since these are then only loaded ONCE and they are perhaps in the user's cache?
If we have understood correctly, images are loaded twice, if you want to have different arrangements for the smartphone view and the desktop view. So far we assumed that we would have to create two sliders in LayerSlider to do this. Now we have seen that there is the "Toggle device visibility". We still want the slider to keep the file size as small as possible. Would the images be loaded twice, if we duplicate an image within ONE slider and adjust it with the "Toggle device visibility" function for smartphone and desktop?
Thank you for your feedback! If two or more image with the same URL are available in one page, then the browser load the image only once, so only the html code will be duplicated present.
Hello everyone,
we recently started using the incredible LayerSlider and are very happy with the possibilities.
Unfortunately we are only "normal users" and have no extensive programming skills.
We use the well known theme "AVADA" on Wordpress and have added a custom font in their backend. As far as we could research, it is somehow possible to use this font (it is called: Boston Skyline Rough) via CSS command also in LayerSlider. Unfortunately, we only know roughly what CSS is and therefore do not know where and with which command we can define the link to the font.
We would be very happy if we could get some help here.
Many thanks in advance
Kiu
Hello Kiu,
Thank you for your kind words!
It is possible to use your font in LayerSlider, if you write the name of it to the layer style / font-family field.
It will not take any effect on the backend because probably your font only load on the frontend, but it will be okay on the frontend. Please check it and if you will have any other question, feel free to ask.
Best Regards,
Andrea | Kreatura Support Team
Hi Kristof,
we are not only thrilled about the possibilities of LayerSlider, but now also about the support. Your hints helped us absolutely. Thank you so much!
Now we have worked a bit further and have another issue. It is more a problem of understanding and we don't want to do anything wrong.
The situation is the following:
1) We want to configure a slider that looks something like this in the Desktop Viewport. The outer area is only a background image and the animation takes place just within the middle "picture frame".
2) For the smartphone-viewport, we want to do without the background - to make better use of the display area - and display only the middle square.
We are now uncertain which "strategy" we should follow for this. Can we configure it so, that we define these two views within ONE LayerSlider? Or should we better create two sliders (one with and one without background)?
It would be important for us to keep the file size/loading time for the landingpage as small as possible. So we want to avoid that (even if in the background) two sliders have to be loaded, which would drastically increase the total file size of the landing page.
We hope that you can help us.
Again, many thanks
Kiu
We noticed that the picture that visualizes our issue was probably not sent along. Here again in the attachment :-)
Hello Kiu,
Thank you for your feedback!
Yes, you should create a separate slider for desktop and mobile. You should use the slider settings / mobile tab for set the hide under and over parameters.
Currently, both created sliders are loaded because hideUnder / hideOver is also widely used to create multiple sliders on the desktop depending on the resolution, e.g. for mobile phones, they switch between portrait / landsape mode to display other sliders and in these cases it is necessary not to start loading the images when the user is turning his phone or resizing the browser, but to have a working slider in the background which appears.
However, in the future, we are planning a feature that will allow the users to better customize these things (what to load when, etc.). Thank you for understanding!
If you will have any other question, feel free to ask.
Best Regards,
Andrea | Kreatura Support Team
Hi Kristof,
Thanks for your answer. Ok, we have understood your informations.
As said before, we don't know much about coding and we are concerned about keeping the loading-file size as small as possible...so we ask ourselves whether we should store images of different sizes separately for the two slider variants. Those for the smartphone view would be much smaller in file-size.
Or should we always refer to the same image in both variants, since these are then only loaded ONCE and they are perhaps in the user's cache?
Thanks for your help
Kiu
Hello Kiu,
You are welcome!
I suggest you to create images with different size to the mobile version of the slider because they don't use the same image.
Best Regards,
Andrea | Kreatura Support Team
Hi Kristof,
just a follow up question:
If we have understood correctly, images are loaded twice, if you want to have different arrangements for the smartphone view and the desktop view.
So far we assumed that we would have to create two sliders in LayerSlider to do this.
Now we have seen that there is the "Toggle device visibility".
We still want the slider to keep the file size as small as possible.
Would the images be loaded twice, if we duplicate an image within ONE slider and adjust it with the "Toggle device visibility" function for smartphone and desktop?
Thanks for your help
Kiu
Hello Kiu,
Thank you for your feedback!
If two or more image with the same URL are available in one page, then the browser load the image only once, so only the html code will be duplicated present.
Best Regards,
Andrea | Kreatura Support Team