Docs

[444media]

I just purchased the X theme yesterday, have activated the child theme and just installed the Integrity 1 demo content. On the theme.co demo page for Integrity 1 (http://demo.theme.co/integrity-1/) there is a large image above the fold (girl surfing), then 4 blocks pop up in an animated fashion. When I activated the demo on my site, this “feature” is not part of the demo on my new site. So…

1. How can I add this (a full page image with 4 blocks popping up)? Is this done with Revolution Slider? Is there a Rev. Slider template for this?

2. I’m sure once the above question gets answered I can figure out the rest, but was also wondering if these 4 blocks in the demo (Integrity, Renew, Icon, Ethos) can they be linked individually…as like menu navigation items?

3. Can the down arrow (bottom middle of the screen) be animated a bit to draw attention to it?

4. Finally, when I add the image above the fold, like I am looking to do and what’s in the demo, will the feature where when one scrolls down the page (or clicks the down arrow button) and the menu then sticks to the top of the page, be automatically “activated”? Or is there some setting I need to check in order for the menu bar to function like this.

Thanks for your help!

Chris

[Rad]

Hi there,

Thanks for posting in.

Those media files and slider aren’t part of the standard demo. The complete demo is only available on expanded demo.

1. Yes, it’s done by the slider. You’ll just add a background video, and box layers with fade in animation. You may check rev. slider documentation.

2. Yes, with the slider, you can add layers, buttons, and any content and link them under Actions setting.

3. It’s not, it’s part of the theme and not the slider. It’s only added to provide scroll animation after the slider’s fold. But it can be positioned the way you prefer. You can do that by editing the page and set/activate a slider, once it’s set, it will give you more option.

4. Your slider should be set as full screen, and the arrow should be active once you set the slider on your page. Then in Customizer, your navbar should be fixed on top.

Hope this helps.

[444media]

Thank you for your quick reply. So is there an expanded demo I can download that will have the slider rev. template set up and part of the page, so it looks more like the page at http://demo.theme.co/integrity-1/? If so what is it called? (I thought the expanded demos were only “restaurant”, “agency”, “spa”, “education” etc? There’s one that looks like the Integrity Home page 1 demo?) I’m just assuming it would be easier, and less time consuming for me to just edit the slider content, rather than have to create it from scratch. I’ve worked with Revolution Slider before, so I am a bit familiar with it….but being able to edit an already created template would be a lot easier.

Thanks!

[Christopher]

Hi there,

Please follow this thread to recreate integrity 1 slider : https://community.theme.co/forums/topic/header-over-video/#post-612599

Hope it helps.

[444media]

OK…so this helps a little, thank you, and do appreciate the step-by-step…however this doesn’t “recreate the integrity 1 slider” It’s missing the 4 boxes pop ups and how to properly size the image. As well, how to set the timing of all the animations. Which is one thing that I still can’t seem to completely figure out…..how to adjust the timings of each layer. I see it down there and see how you slide the bars to adjust the load times of each layer….but never seems to work right for me. That’s why a completed template or demo would be a huge help (so I can just replace the text and images with what works for me)….and I guess the one at Integrity 1 is not available to download?

[444media]

To start, I can’t get the static image for the background above the masthead, to size to full screen. And the logo area, above the navigation, is showing at the bottom of the page, because the height is not set right. I have the image set to 1600px wide and 1067 high. The settings for the layer is the same and image moved out to the edges of the work area in Slider Rev.

Site: ccrcofamerica.com

Thanks for your additional help

[Rad]

Hi there,

Integrity 1 is only available on the standard demo, and standard demo only contains the skeleton needed to build a site. It’s only the expanded that has complete demo import.

For timing, please check this https://www.themepunch.com/revslider-doc/slider-revolution-documentation/ in the section of Individual Slide Content.

About the image, you have to insert it as the background image and not as a layer. https://www.themepunch.com/revslider-doc/main-background/

Please provide your admin login credentials in the private reply. I’ll check your fullscreen setting

Thanks!

[444media]

Well that’s what I was asking earlier….I see the expanded demos, but not one that looks like the Integrity 1 demo. Is there an expanded demo that will give me the Rev. Slider set up like one in that demo?

I will check out that link for the timing. Thank you! I’m sure that’ll help.

Oh yeah! I totally forgot that’s the way to do it….thank you. Looks better that way.

I got it to work (go full height)…I changed the height of the slider by -58px in the slider settings (below where .masthead is)….seems strange (-58px), but it worked. Or is there a better way I should do it?

Thank so much again for your fast help….very much appreciated 🙂

[444media]

Do you by any chance know the animation settings for the Integrity Demo 1 four colored boxes that appear on page load? I’m trying to match those settings, and honestly there are so many options and tweaks, I am not getting it to load the same way. I have read the documentation at Theme Punch, but there are 30+ animation templates to choose from. If you know, great…if not, I’ll continue to play with it. Thanks

[Christopher]

Hi there,

Please add .masthead in slider’s containers field.
In regards with animation, please use ‘long-from-bottom’ animation, see the attachment.

Hope it helps.

[444media]

I have .masthead in the slider settings section under the “increase/Decrease Fullscreen Height (Optional)” section. I had that there before, but image didn’t reach the bottom of the screen. When I added the -58px to the field below it, that seemed to fix it. See attached screenshot. Is that what you meant by add .masthead to the containers field? Or do you mean somewhere else?

Thank you for the animation settings info….that’ll save me a lot of time from having to keep guessing and testing.

[Christopher]

Hi there,

Please set slider layout to ‘full screen’, disable ‘custom grid size’ options and remove negative margin. Clear cache and check again.

Hope that helps.

[Author]

Posts