WP Slidenotes

Slidenotes lets you add fancy sliding notes into your wordpress posts, pages or text widgets using a simple and customizable shortcode.

Click on the demo boxes to see some examples:

Click me!

I'm really simple


just hover me!


left or right?

I'm a Donout

6 presets included!

I'm a Rose

CSS customizable.

I'm Custom!

your own style


wait 4 seconds


and height


trigger & content

[slidenote text="Click me!"]The Slidenote content goes here[/slidenote]

Click me!

The Shortcode

The shortcode will create a hidden slidenote, also it will render the trigger text, which will make the slidenote slide-in into the content when clicked or hovered (depending on settings,  click by default).

The shortcode is controlled by several parameters. The paramaters default values can be set in the WP Slidenotes menu in your dashboard, this default values will be aplied to all the slidenotes shortcodes created, however a single or more parameters canbe overwritten by passing the parameter name and value to the shortcode directly:

[slidenote text="Click me!" width="200"]The Slidenote content goes here[/slidenote]

The Parameters

There are two ways to controll the shortcode parameters: Setting the default values in the WP Slidenotes admin menu, and passing parameters to the shortcode.

WP Slidenotes admin menu

Controls the General Slidenotes Settings and the Default Slidenotes Settings.

General Slidenotes Settings

  • Slidenotes Default Style: Choose one of the presets for the slidenote appearance. You can choose “Custom” and edit the CSS for that style in the slidenotes.css file included.
  • Animation Transition: The animation transition type.
  • Animation FPS: The animation frames per second.

Default Slidenotes Settings
Hover each parameter to see its definition, yes! that’s made with SlideNotes!

  • Trigger text
  • Slide from
  • Launch Event
  • Slidenotes width
  • Slidenotes height
  • Slidenotes top
  • Margin-In
  • Margin-Out
  • Close button
  • Close button text
  • Close button align
  • Animation duration
  • Autohide delay
  • Custom class

Overwriting the default settings with inline Shortcode Parameters

  • text: [slidenote text="My text"]slidenote content[/slidenote]
  • from: [slidenote from="right"]slidenote content[/slidenote]
  • event: [slidenote event="hover"]slidenote content[/slidenote]
  • width: [slidenote width="200"]slidenote content[/slidenote]
  • height: [slidenote width="150"]slidenote content[/slidenote]
  • top: [slidenote top="50"]slidenote content[/slidenote]
  • marginin: [slidenote marginin="50"]slidenote content[/slidenote]
  • marginout: [slidenote marginout="50"]slidenote content[/slidenote]
  • closebutton: [slidenote closebutton="no"]slidenote content[/slidenote]
  • closetext: [slidenote closetext="Hide"]slidenote content[/slidenote]
  • closealign: [slidenote closealign="left"]slidenote content[/slidenote]
  • duration: [slidenote duration="1000"]slidenote content[/slidenote]
  • autohide: [slidenote autohide="1000"]slidenote content[/slidenote]
  • customclass: [slidenote customclass="my_css_class"]slidenote content[/slidenote]

More Examples

Image inside Slidenote

Click here. This slidenote contains an image

Image as slidenote trigger (click the image)

WP Slidenotes
When setting html tags with parameters as the slidenote “text” you have to be careful with the quotation marks. You must use single quotation marks to wrap the text parameter content and double quotation marks in the html tag you are setting as trigger.


5 Responses to WP Slidenotes

  1. Simon says:

    Amazing plugin.

    This would be so kewl on my service providing sites 🙂


  2. Pingback: WP Slidenotes Plugin (Utilities) |Plugins| Zip Bucket : Graphics, Code, Video ,Audio, 3d Downloads

  3. Plugincome says:

    Can images and links be included in the html? Text boxes? Submit buttons? Anything like that?

    • admin says:

      Sure! you can put any HTML content in a Slidenote, just have to be careful with the shortcode syntax. Example:

      [slidenote text="This slidenote will have an HTML content"]
      Here goes your HTML tags

      See the bottom-right box in the top examples: “HTML trigger and content”, that one contains bold text made with HTML, but you can also put forms, headings, divs, tables, etc..

      Best Regards!

Leave a Reply