Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Rev Slider Example

Recommended Posts

jmad

I'm trying to accomplish a few things in Rev Slider...built into DMS.  

 

If I want to have something like below but for each li to be a different font then do I just build a class and assign to each level?  Also, if using center for the x position is it calculating for top center or top left...does that make sense.

 

The "Slide Extra Elements" overrides slide text or slide position options...correct?

 

Will the "Slide Extra Elements" still be available in v1.2?  Now that I'm getting into this more I see it is pretty powerful tool but maybe something in DMS support docs could be helpful.  

 

 

<ul>
 <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
   <img src="images/slides/image1.jpg">
   <div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
   <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
   <div class="caption lfr medium_grey"  data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
 </li>
</ul>

 

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Yes to have a different font for each line that would be the correct method, insert a class that you can then assign css manually to override the font.

 

Slide extra elements allows you to take control of the slide manually, so you can use it to add video embeds or create the slide content from scratch using html. We've not been given the full spec for 1.2 for support yet as it's still in testing but I'd doubt they'd remove this feature as it allows you to extend the slider much further.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jmad

One observation about using the DMS rev slider version.  When resizing a window on desktop it takes an entire revolution of the slides for the text alignment to recalibrate when using the selector drop down "Slide Text Location". This sometimes happens on the first revolution on a phone...meaning the first thing a client sees is unaligned text that rights itself on the second revolution.

 

However, when putting text in the Slide Extra Elements  section and setting data-x="center" then the problem resolves. Simon_P this has been an issue since last fall is it going to get resolved in this version of DMS along with parallax or are users going to have to upgrade to resolve these issues?  You can see what I mean on slide 1 of this test site. madsky1.wpengine.com

 

@James_B

 

Regarding using the Slide Extra Elements.

 

I added this class to my custom CSS .revoslide {

  font-family: 'Montez', cursive;
  font-size: 42px;
}
 
Then changed the class in the slider, however then the text I added the class to completely disappeared.  What step am I missing?
 
I have slide1 setup using the DMS add image and the slide text area.  Slide 2 I left all the DMS selection areas untouched and just added the code below to the slide extra elements (all in one Slide)
 
 
<ul>
  <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
   <div class="revoslide"  data-x="center" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
   <div class="caption sfb big_orange"  z-index="100" data-x="center" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
   <div class="caption lfr medium_grey"  data-x="center" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
 </li>
...
</ul>

Share this post


Link to post
Share on other sites
Danny

What is the code you have added to the Slide Extra Elements field ?

 

As you don't want to use <ul> or <li> tags, as this will trigger a new slide, see my example here - http://forum.pagelines.com/topic/28168-revslider-how-to-add-video-and-have-it-resize-properly/page-2

 

The example on that links strips out all the unnecessary code and add a video to the rev slider, the same process can be used to add your own text.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

Okay so the step that I was missing was that you have to add caption and an animation class before the custom class of the font.  I assume you add an image the same way?  I might have missed it in your instructions and I'm new to using Rev Slider in this fashion but it might be nice to point out in the docs for Rev Slider use with DMS (whenever they are ready) that important step:)   

 

Now that I've made that hurdle....I must say this implementation of Rev Slider is VERY flexible and powerful.  Even though I think a few more basic options in Rev for DMS would be nice I hope we keep the functionality of the Slide Extra Elements in 1.2

Share this post


Link to post
Share on other sites

×