Basic Layer Content Markup

Prerequisites:

1. Setup your testing environment
2. Setup your basic slider

This article is an introduction to Slide Layer markup.
The example will include a basic Text Layer, with some styling and positioning applied.

1. Copy the following Layer HTML markup to your clipboard.

This following is an example of the bare-minimum HTML markup required to create a Slide Layer.

2. Add the Text Layer markup to one of your existing Slides, placed after the Slide's main background image.

Layer Classes:
  1. "tp-caption" is the official class declaration for a Slide Layer.
  2. "tp-resizeme" tells the Slider that the Layer should be responsive.
  3. "largewhitebg" is one of the pre-built Layer styles available inside: "/revolution/css/layers.css"
"data-frames" (Layer Animation)

The “data-frames” attribute is a required attribute where the Layer’s start and end animation is declared.  The following represents a basic fade transition for both the “start” and “end” animations.

  1. Start Animation: The Layer transition when it first becomes visible
  2. "End Animation: The Layer transition when the Layer is meant to disappear
  1. Start Animation:
    1. "delay": The amount of time (in milliseconds) before the Layer begins to animate in
    2. "speed": The duration of the transition (in milliseconds)
    3. "from": The CSS property(s) to animate from
    4. "to": The CSS property(s) to animate to
  2. End Animation:
    1. "delay": The amount of time (in milliseconds) before the Layer begins to animate in
    2. "speed": The duration of the transition (in milliseconds)
    3. "to": The CSS property(s) to animate to

3. Add some positioning and sizing attributes for the Layer.

Position/Size Attributes:
  • 1. data-xleft center right
    The Layer's horizontal alignment.
  • 2. data-ytop center bottom
    The Layer's vertical alignment.
  • 3. data-hoffsetHorizontal alignment offset in pixels. Both negative and positive numbers can be used.
  • 4. data-voffsetVertical alignment offset in pixels. Both negative and positive numbers can be used.
  • 5. data-widthThe Layer's default width. Use "auto" for single line text. Enter a fixed number for paragraphs of text.
  • 6. data-heightThe Layer's default height. A fixed number can be used, but "auto" is usually best for both single line and paragraphs.
Full Layer Example added to a Slide's markup

The following example has a Layer with a “500” delay applied to its “start” animation, with a default width/height and setup to be positioned in the very middle of the Slide.

Added to the Basic Slider previously setup here:
https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/

Congratulations on your continued training! Continue to the next page to learn about the Slider's timeline.