All posts by Magee

Expand Shortcode Example

This shortcode supports linking to content within the collapsible section. When a user follows a link to content within a collapsed section, that section will automatically expand.

Expand Shortcode

Aenean eget metus sem. Vivamus tortor enim, venenatis vitae mattis semper, rhoncus a magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas feugiat sapien ligula, sed euismod metus viverra lobortis. Sed ultricies eleifend magna.
Aenean eget metus sem. Vivamus tortor enim, venenatis vitae mattis semper, rhoncus a magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas feugiat sapien ligula, sed euismod metus viverra lobortis. Sed ultricies eleifend magna.
Aenean eget metus sem. Vivamus tortor enim, venenatis vitae mattis semper, rhoncus a magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas feugiat sapien ligula, sed euismod metus viverra lobortis. Sed ultricies eleifend magna.
Get the code

Use Expand With Dropcap

Nullam consequat dui sit amet varius vehicula,morbi nisi ligula, tempus ac semper ac, hendrerit sit amet ex. Integer hendrerit consequat nulla sed viverra. In mattis tellus at pretium feugiat. Mauris vulputate, augue in euismod semper, arcu dolor commodo felis, at sagittis orci magna quis ligula.
Get the code
Nullam consequat dui sit amet varius vehicula,morbi nisi ligula, tempus ac semper ac, hendrerit sit amet ex. Integer hendrerit consequat nulla sed viverra. In mattis tellus at pretium feugiat. Mauris vulputate, augue in euismod semper, arcu dolor commodo felis, at sagittis orci magna quis ligula.
Get the code

Use Expand With List

Nullam consequat dui sit amet varius vehicula,morbi nisi ligula, tempus ac semper ac, hendrerit sit amet ex. Integer hendrerit consequat nulla sed viverra. In mattis tellus at pretium feugiat. Mauris vulputate, augue in euismod semper, arcu dolor commodo felis, at sagittis orci magna quis ligula.
Get the code
Nullam consequat dui sit amet varius vehicula,morbi nisi ligula, tempus ac semper ac, hendrerit sit amet ex. Integer hendrerit consequat nulla sed viverra. In mattis tellus at pretium feugiat. Mauris vulputate, augue in euismod semper, arcu dolor commodo felis, at sagittis orci magna quis ligula.
Get the code

Tooltip Shortcode Example

Tooltips are a great way to provide popout tips for your readers. They can be added to elements like links, buttons and social icons, making it a great way to add additional info to your post without adding clutter.

Tooltip Shortcode

Four businesspeople at boardroom table watching presentation
Ut gravida nunc semper ante tristique, eu ornare ex rutrum. Nullam a dolor eget urna vehicula molestie id a nibh. Mauris lorem neque, ultricies nec magna a, egestas euismod ex. Praesent et lobortis ipsum. Pellentesque pharetra ligula a elementum molestie.Mouse hover here. Integer pellentesque ullamcorper sollicitudin. Nunc non eros urna. Etiam pharetra vitae sapien eu blandit. Vivamus et libero vel nibh malesuada posuere.

Morbi erat tortor, lacinia a massa nec, accumsan mollis nulla. Pellentesque scelerisque viverra ligula. Quisque mattis laoreet odio, ac bibendum lacus feugiat vitae. Quisque placerat non lacus finibus facilisis. Nullam in cursus diam, vel porttitor odio. Cras sollicitudin libero vitae metus feugiat iaculis.

Mouse Hover Here
Get the code

Tooltip Trigger : Hover

Morbi et tortor varius, porttitor velit at, fermentum diam. Maecenas dictum mauris massa, nec vehicula nisl efficitur non. Mouse hover here. Integer lorem lorem, porta id velit non, consectetur auctor erat. Cras eget cursus urna, ut fringilla lorem. Vestibulum pellentesque nisl vitae arcu convallis, a placerat nisl feugiat. Pellentesque at sem vitae orci condimentum sollicitudin ultrices fermentum dolor.

Praesent dapibus, magna at semper semper, eros nibh volutpat leo, quis laoreet lacus turpis vitae diam. Nunc semper interdum massa, ut tristique metus ultrices eu. Sed non orci nec nisi congue cursus. Pellentesque risus purus, dapibus non lacus eu, rutrum placerat eros. Mouse Hover Here. Mauris vel felis at libero faucibus pulvinar. Fusce consequat dictum mi non condimentum. Donec eros metus, aliquet eu dictum quis, elementum ac ligula. Phasellus ullamcorper vitae diam eget maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus eget nulla ac cursus. Sed nec augue a libero commodo accumsan vel id lectus. Suspendisse aliquam quam vitae risus facilisis blandit. Nullam ut sem quis felis suscipit sollicitudin. Sed non ipsum et ante eleifend rhoncus. Duis lacinia sem sit amet magna vehicula mattis.
Four businesspeople at boardroom table watching presentation
Get the code

Tooltip Trigger : Click

Morbi et tortor varius, porttitor velit at, fermentum diam. Maecenas dictum mauris massa, nec vehicula nisl efficitur non. Mouse click here. Integer lorem lorem, porta id velit non, consectetur auctor erat. Cras eget cursus urna, ut fringilla lorem. Vestibulum pellentesque nisl vitae arcu convallis, a placerat nisl feugiat. Pellentesque at sem vitae orci condimentum sollicitudin ultrices fermentum dolor.

pp1
Praesent dapibus, magna at semper semper, eros nibh volutpat leo, quis laoreet lacus turpis vitae diam. Nunc semper interdum massa, ut tristique metus ultrices eu. Sed non orci nec nisi congue cursus. Pellentesque risus purus, dapibus non lacus eu, rutrum placerat eros. Mouse click Here. Mauris vel felis at libero faucibus pulvinar. Fusce consequat dictum mi non condimentum. Donec eros metus, aliquet eu dictum quis, elementum ac ligula. Phasellus ullamcorper vitae diam eget maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus eget nulla ac cursus. Sed nec augue a libero commodo accumsan vel id lectus. Suspendisse aliquam quam vitae risus facilisis blandit. Nullam ut sem quis felis suscipit sollicitudin. Sed non ipsum et ante eleifend rhoncus. Duis lacinia sem sit amet magna vehicula mattis.
Get the code

Tooltip Placement

smartphone-925287_1920

Tooltip On Top
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
macbook-924824_1920

Tooltip On Bottom
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
macbook-925614_1920

Tooltip On Left
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
smartphone-925758_1920

Tooltip On Right
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code

Popover Shortcode Example

Popover shortcode is perfect for adding additional content for your viewers. The content is housed as secondary information that the viewer can trigger by a mouse hover, or a mouse click. Expanded options allow you customize several aspects of the popover like background colors, border colors, text colors, trigger value, popup placement and more.

Popover Shortcode

portfolio_07
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse hover here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.

MOUSE CLICK HERE
Get the code

Click Trigger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse click here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.

Maecenas eget pellentesque purus. Morbi facilisis sapien velit, ut congue mi sodales at. Donec semper, nibh volutpat posuere semper,mouse click here purus arcu molestie orci, ac volutpat enim orci quis justo. Curabitur congue efficitur augue, vel interdum ipsum lacinia tempus. Donec hendrerit molestie risus efficitur tempus. Nam dapibus mollis lacinia. Mauris bibendum lorem ac cursus venenatis. Aenean vitae ante eget ipsum elementum porttitor. Morbi efficitur sapien et nulla fermentum mollis. Donec vestibulum varius sapien vel hendrerit. Integer at tempor mi. Proin tempor mauris eget ligula convallis, ut dapibus ligula aliquam. Sed feugiat augue eu lorem malesuada elementum. Maecenas sit amet nisi tortor. Duis vel nisi id quam vestibulum varius. Cras malesuada magna a sem ornare rutrum. Mauris consequat fermentum magna a molestie. Sed dictum ut lacus vel pretium. In rutrum imperdiet sodales. Vivamus sed felis consequat augue convallis vehicula nec nec odio. Ut eu libero et tellus accumsan interdum sit amet sed diam. Integer laoreet dignissim leo, non fermentum orci laoreet a.
portfolio_07
Get the code

Hover Trigger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse hover here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.

portfolio_07
Maecenas eget pellentesque purus. Morbi facilisis sapien velit, ut congue mi sodales at. Donec semper, nibh volutpat posuere semper,mouse hover here purus arcu molestie orci, ac volutpat enim orci quis justo. Curabitur congue efficitur augue, vel interdum ipsum lacinia tempus. Donec hendrerit molestie risus efficitur tempus. Nam dapibus mollis lacinia. Mauris bibendum lorem ac cursus venenatis. Aenean vitae ante eget ipsum elementum porttitor. Morbi efficitur sapien et nulla fermentum mollis. Donec vestibulum varius sapien vel hendrerit. Integer at tempor mi. Proin tempor mauris eget ligula convallis, ut dapibus ligula aliquam. Sed feugiat augue eu lorem malesuada elementum. Maecenas sit amet nisi tortor. Duis vel nisi id quam vestibulum varius. Cras malesuada magna a sem ornare rutrum. Mauris consequat fermentum magna a molestie. Sed dictum ut lacus vel pretium. In rutrum imperdiet sodales. Vivamus sed felis consequat augue convallis vehicula nec nec odio. Ut eu libero et tellus accumsan interdum sit amet sed diam. Integer laoreet dignissim leo, non fermentum orci laoreet a.
Get the code

Color Control

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse hover here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse hover here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat. Vestibulum bibendum dolor a tellus varius, ac ultricies odio euismod. Integer quis lectus nunc. Proin finibus consequat est et pharetra. Maecenas vulputate maximus euismod. Donec egestas ante purus, ut rhoncus est efficitur quis. Duis luctus dolor eget felis consectetur, sed pharetra justo euismod. Nunc laoreet, mouse hover here eleifend, enim nulla fermentum turpis, eu commodo risus tortor nec tortor. Maecenas tristique tempus lorem quis blandit.Pellentesque sit amet sodales leo. Integer imperdiet facilisis quam, id placerat mauris tempus eget.

Get the code

Popover Placement

portfolio_07

Popover On Top
Lorem ipsum dolor sit amet, sectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat.

Get the code
portfolio_07

Popover On Bottom
Lorem ipsum dolor sit amet, sectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat.

Get the code
portfolio_07

Popover On Left
Lorem ipsum dolor sit amet, sectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat.

Get the code
portfolio_07

Popover On Right
Lorem ipsum dolor sit amet, sectetur adipiscing elit. Morbi id lacus ut mauris auctor rutrum vitae ut erat.

Get the code

Dummy Image Shortcode Example

Dummy images mostly used in web designing template as like in blogger, wordpress theme template for dummy image. Generate png/jpeg type of dummy image with any background & text color combination.

Any Style

Get the code

Transport Style

Get the code

Technics Style

Get the code

People Style

Get the code

Sports Style

Get the code

Cats Style

Get the code

City Style

Get the code

Food Style

Get the code

Night life Style

Get the code

Fashion Style

Get the code

Animals Style

Get the code

Business Style

Get the code

Nature Style

Get the code

Abstract Style

Get the code

Document Shortcode Example

By adding a simple [documents] shortcode in your post or page, you get a list of all documents (non-image/audio/video) attached. Each item in the document list can be styled with CSS to indicate different document types based on file extension (e.g., .doc, .pdf, etc).

Doc Format Preview

Get the code

Xls Format Preview

Get the code

Pdf Format Preview

Get the code

RSS Feed Shortcode Example

Show RSS feed posts in a list using the RSS shortcode. Each item in the list can be formatted using a template. publish frequently updated information like blog entries and news headlines.

3 items preview

Get the code

5 items preview

Get the code

Dailymotion Shortcode Example

Easily add Responsive Daily Motion Media to your content with Supreme dailymotion Shortcodes.

Mute Control

Get the code

Autoplay Control

Get the code

Loop Control

Get the code

NO Controls

Get the code

Video Shortcode Example

Easily add videos to your content with our video shortcodes. MP4/WEBM formats are needed. OGV format is optional.

Mp4 Format Video

Get the code

Ogv Format Video

Get the code

Webm Format Video

Get the code

Video turn into poster, once incompatible with html5

Get the code

Mute Control

Get the code

Autoplay Control

Get the code

Loop Control

Get the code

No Controls

Get the code

Youtube Shortcode Example

A very simple shortcode to insert youtube videos into your page or post!

Mute Control

Get the code

Control Autoplay Video

Get the code

Control Loop Video

Get the code

Without Controls

Get the code

Audio Shortcode Example

The audio shortcode lets you upload MP3/WMV/OGG files on your WordPress pages. Their are also options to control the playback. You can choose to loop the audio so it will restart once it gets to the end. You can also choose to automatically play the audio when the page loads.

Mute Options

Get the code
Get the code

Autoplay Options

Get the code
Get the code

Loop Options

Get the code
Get the code

Control Options

Get the code
Get the code