Edge One Pager

Last Updated on

Edge One Pager is a shortcode introduced in Ken 2.0. Using the One Pager mode of Edge Slider you can show your slides separately in full height and on a vertical axis. Please click here to see a demo of this shortcode.

Edge One Pager

Edge One Pager Front End

To add an Edge One Pager you need to go to the Edge Slideshow menu item and add the slides that you wish to include. There are two choices to add slides: one, by using the slide options presented in the Edge Slider single-post addition screen or two, by using the Visual Composer. Here is the list of options presented on the Edge Slideshow slide entry page with their descriptions:

1
Content Animation.  

Using this option you can define specific animations for the content of this slider. This option will affect custom content that you create in the Visual Composer or the built-in captions and buttons. Animation choices are:

  1. Fade In
  2. Slide From Top
  3. Slide From Left
  4. Slide From Bottom
  5. Slide From Right
  6. Scale Down
  7. Horizontally Flip
  8. Vertically Flip
2
Slider Type.  

You can choose between having an Image or Video type for your slide.

3-A
Upload Image.  

If you choose to have an image as your slide, use this option to add in your image. For better quality in all browsers, the recommended size is 1920X1080 pixels.

Edge One Page Options 1

3-B
MP4.  

If you choose to have a video as your slide, use this option to upload your video. You will need to add multiple video formats to make your slide work in all browsers. MP4 video type is for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7.

3-C
WebM.  

If you choose to have a video as your slide, use this option to upload your video. You will need to add multiple video formats to make your slide work in all browsers. WebM video type is for Firefox4, Opera, and Chrome.

3-D
OGV.  

If you choose to have a video as your slide, use this option to upload your video. You will need to add multiple video formats to make your slide work in all browsers. OGV video type is for older Firefox and Opera versions.

3-E
Video Preview Image.  

This will be the placeholder image for the video when it is not played or if there’s a lack of video support. This image will also be shown on mobile devices instead of videos.

Edge One Page Options 2

4
Cover Whole Background.  

This options scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

5
Background Color.  

You can use a solid background color for your slide which is suitable for company logos or other like cases.

6
Pattern Mask.  

Enabling this option will add a pattern overlay to the video. This overlay will make your text and buttons much more readable over the video.

7
Color Overlay.  

Enabling this option will add a color overlay which will stay over the video or image so that the final output will be colored.

8
Color Overlay Opacity.  

This option will set the alpha opacity-level of the option above. The color will be more opaque if the level is closer to 1 and more transparent if it is closer to 0.

9
Content Align.  

These options will determine the position of the content added to the slide. Available options are:

  1. Left Top
  2. Center Top
  3. Right Top
  4. Left Center
  5. Center Center
  6. Right Center
  7. Left Bottom
  8. Center Bottom
  9. Right Bottom
10
Content Width.  

This option will determine how much of the width of the screen will be occupied by the content added into the slide.

11
Caption Title.  

This option will add a caption title into the slide.

12
Caption Title Font Size.  

This option will determine the font size of the caption title.

Edge One Page Options 3

13
Caption Title Font Weight.  

This option will determine the font weight of the caption title. Available options are:

  1. Default
  2. Semi Bold
  3. Bold
  4. Bolder
  5. Normal
  6. Light
14
Caption Description.  

This is the main place to add the actual text for your slide caption.

15
Caption Skin.  

If you are using a dark or light image for your slide, the text you are using should adapt accordingly in order to be visible. This option will help you determine the skin of the text. Here is the list of options available:

  1. Light
  2. Dark
  3. Custom Color (If you choose this option then you can select your custom color from the option described below)
16
Custom Caption Text Color.  

If you choose item C from the options above, this option will appear. You can easily set the color of the text you like here.

17
Button Style.  

Use this option to select the style of button you want to add to your slide. Options available are:

  1. Outline
  2. Flat
18
Button Skin.  

You can set the skin of the button on your slide here. Options available are:

  1. Dark
  2. Light
  3. Theme Skin Color
19
Button Text.  

Add button text using this option.

20
Button URL.  

This option will determine where to redirect if the button is clicked. Don’t forget to add https:// for this option.

Edge One Pager Options 4

21
Transparent Header Style Skin for This Slide.  

This option is going to change the skin of the header including the logo and the navigation menu, depending on the option you choose. Available options are:

  1. Dark
  2. Light
x
Note: Please consider that you can add two buttons for each slide. All options are available for a two-button version. Leave the second set of options blank if you want to use one button.

For more information about adding Edge Slideshow slides please watch the video below:

This content is blocked. Accept cookies to view the content.


Adding the Shortcode onto the Page

After adding the slides using the Edge Slideshow post type, you can add the Edge One Pager shortcode on the Page/Post edit screen using the Visual Composer. Just click on Add Element, and search for Edge One Pager to add the element. After this, the Edge One Pager edit screen will open.

Edge One Page Select Element

Here is a brief introduction of options that is available for the Edge One Pager shortcode:

1
Select Specific Slides.  

You can add the slides you already added using the Edge Slideshow menu item here. Just click on the selection box and search for the name of your desired slide. You can add as many slides as you like, but we recommend keeping this limited so there will be no impact on your website speed. More slides means more images and media to load which will make your website slow.

2
Order.  

You can choose the order type for the slides. Available options are:

  1. ASC (Ascending Order)
  2. DESC (Descending Order)
3
Order By.  

You can determine the order of the selected slides to appear on the front end. Available options are:

  1. Date
  2. Posts In (manually selected posts)
  3. Menu Order
  4. Post Id
  5. Title
  6. Comment Count
  7. Random
  8. Author
  9. No Order
4
Extra Class Name.  

This is an option which is common amongst most shortcodes. If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in the Custom CSS settings inside Theme Settings.

Edge One Pager Options 5

x
Note: Finally we should mention that the Edge One Pager shortcode works best if you set the Page Elements option to Remove Page Title & Footer, and enable the Stick Template option from Ken Page Options.

Stick Template

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket