Velocity Template - Turn Hero Section into slider

I want to turn the hero section used in velocity template into a slider. I want the responsive text, everything as is in hero section, just put it in slider so I can add multiple images and messages. Thanks in advance!

Can you please update your post with some more information so we can help you faster? Things like your read-only link, more screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

thanks - not sure what more I can provide? screen shot is of hero section used in Velocity Template. I want same size, responsive text, settings, etc, just want in in a slider. Ideally I will have 3-4 slides different image, different text that scroll on home page. starting from scratch so I don’t have a link to “public” site. Does any of that help?

Here is the public link (just figured that one our :slight_smile:

Chrome browser: Version 43.0.2357.81 (64-bit)

I left original “hero section” below the one I’m trying to build. The section that comes with the template is working perfectly on resize, etc, I just want it in a slider. When I try and build a slider my picture doesn’t resize on different devices.

I am a novice - :slight_smile: jeff

@ jeffcrume You will need to set your photo sizing and maybe work with it on the mobile views to fit. You could probably copy and paste the text you want into the hierarchy or on the page. Or you could add text and then add the class associated with the hero text to your slider text.

jdesign - thank you for your post. I’ve tried multiple versions of pictures etc., still struggling. Every time I attempt to add slider and then “put hero section inside of slider” it seems to change parameters of the hero section? Notice that when I create a slider out of the “hero section” the container holding text “this is velocity” buttons etc, doesn’t display properly (in preview) text goes to left side on preview instead of middle as in hero section below it. Also, it doesn’t preview correctly in different devices.

It seems like when I put anything in a “slider” the slider is overriding some of the settings?

Can you simply show me how to make the “hero section” which is in the Velocity template into a slider? So that it works just like it does without being in a slider? If I can get that far I can work through the pictures issues I think? Thanks - Jeff

PS Notice that when I stretch my screen my image drops. If I select “cover” it drops out of view if I stretch the screen. If I select container it puts image in middle of text and I can’t move it.

Lastly, do you have a template I can buy that’s similar to simplicity of Velocity that comes with 2-4 slide header (hero size) that’s already built it? I’ve looked through tons of templates and haven’t found one?

Thanks - Jeff

1 Like

@jeffcrume Check out this tutorial This covers the basics of the slider. You can’t really turn the “Hero” into a slider as that hero section is built from a section not the slider component.

As far as the text sliding to the left, that will need adjusted based on your element being block or in-line block and then centering via alignment. Work with it on desktop and then scale fonts and images based on device size. For example, if you want your title 58px on desktop set that then on the tablet view change font size of the title to 37px…just an example.

I don’t personally have a template for sale and haven’t spent much time searching the templates. Maybe someone from the WebFlow team can weigh in on that question.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.