-
Posts
-
Which slider to use to achieve this effect or a slider that has a “set” image that stays, but words change.
http://www.wholefoodsmarket.com/Also, slider is smaller than screen — and atop another image.
In Enfold, how is this best achieved?
Should this be done with LayerSlider?
Can’t seem to put Layerslider in Color Block…would that be how this would be done?
Perhaps with “wood” as full page image as described in one of your responses?If you could just point me in the right direction, it would be really helpful.
Thank you!
I’m just another coder like you but the way this is done is that the image is a PNG image with just the Whole Foods text and the shadowing. the sliders are transparent images with just the text and they slide over the background. An easy way to achieve this is set your background image, Then place your text image under the slider (or the slider on top of the text image), add text slides to the slider. Done.
Thanks, Michael!
I looked at what they did and it seems as if the image (of food or something) is one image (jpg) and the text and shadowing is another image (png, as you mentioned.)
I suppose I could group the images together and call that the background on a layerslider. Is that what you meant? As the Appearance – Background image on the total slider itself?
Then do more pngs with the shadowed text and use one png per individual slide?
Didn’t quite get your “place your text image under the slider (or the slider on top of the text image), add text slides to the slider.”?
Thank you very much for answering. I’ve seen this technique in multiple places on the web — where the image stays the same and words change, instead of both changing — or just images changing.
Maybe more communicative and less confusing than constantly changing images.
Andy, thank you.
Michael kindly also helped me to understand how to do this, so I’ve been playing with it.
Glad to nail down that layerslider is “platform” to do it in.
I still would appreciate knowing
“Can’t seem to put Layerslider in Color Block…would that be how this would be done?”Is it POSSIBLE to put Layerslider in Color Block?
Thanks in advance!
Hi!
Unfortunately it is not possible unless you purchase LayerSlider as a standalone plugin. Bundled LayerSlider only works fullwidth on Enfold
Best regards,
YigitWell, that explains it!
Interesting, though…if it’s in boxed layout the full-width isn’t full width, right?
Does that mean it “gets” different CSS to cause that?
Charlie,
I wasn’t aware you weren’t using Enfold. However any compatible slider will do the trick. The catch is do you need it to be full page rather than full frame, AKA in the Box. Once you resolve the full frame issue the full frame slider will do what you want. If you set the background to static (not sure if this is even an option with Kriesl themes, but it can be done in CSS somehow), then use the PNG images it will work.
Basically your background fills the browser and the slider works over top of that. If your browser is say, 1500×430 do this:
1. Make your images 1500×430 in Photoshop
2. Keep the background transparent
3. Add a guideline to where you want the text to appear (height)
4. Set a second guide at Vertical 50%
5. Set your text tool to Center Justify
8. Add text to the cross section of the guides
9. File – Save for Web – Save as PNG 24 named Slide01.pngFor your second slide:
10. Hide your first text layer
11. Add a new layer
12. Repeat steps 8 & 9 changing the file name to Slide02.pngRepeat for as many slides as needed.
Add the slides to your slider in numeric oder.
Set your transition to Slide Right to Left
Test.It should work perfectly.
Sorry it took me a day to reply. I didn’t see the notice until just now.
Wow, Michael, you are very kind!
I DO use Enfold, but apparently the layerslider that’s included in the Enfold is “bundled” and works only at full width…you can’t drag it into the Color Block in the Advanced Layout Builder (ALB).
Therefore, it’s not quite full featured, which is fine, but I didn’t understand why it couldn’t be dragged into the Color Block. I thought I was using the wrong technique.
By “Full Page” versus “Full Frame,” I’m not sure what you mean.
In the Enfold theme demo at http://kriesi.at/themedemo/?theme=enfold-overview, the Home > Home V7 says it’s a “Full Screen” Slider.
Do you describe that as “Full Page” or “Full Frame”? It fills the screen “above the fold.”
Your instructions not only have helped me immensely, am betting this will see major traffic for people trying to accomplish this same task.
Thank you very much!
And have a terrific day.
Hey!
The layer slider element can’t be dragged inside a color section because it is already full width by default. The downside is that you can’t drag the slider inside a column layout. That’s when you need to install the layer slider as a standalone plugin, so that you can use the slider shortcode instead.
Regards,
Ismael
- You must be logged in to reply to this topic.