Beautifully Lightweight and Ready for Action!

WordPress Design Shortcodes

Shortcodes allow you the ability to create beautiful page layouts with ease. When adding a design element to a page, all you have to do is open the shortcode editor and configure what you want. With Respondo Pro, that’s it! Simple.

Shortcode Editor

Over 50 WordPress Design Shortcode Options

Unlimited Design Combinations!

(Each shortcode selection has several variations which means the design options are endless.)

What’s Available

Columns

Adding columns is the basis of all page design. With the columns shortcode you’ll have the option to add a widest variety of column variations.

Column in Column

This shortcode variation allows you to expand your design capabilities almost infinitely. Using this shortcode functionality is almost inevitable.

Non – Cascading Columns

When the screen size adapts for mobile the columns naturally cascade. With this option the columns keep their intended ratio, no cascading.

Column Background

After adding a column you can easily add a background color or an image to it (and add any content you want over it). This gives you extreme design control.

Vertical Spacing

Getting the height and spacing of all your designs just right makes a huge difference with the user experience. Vertical spacing gives you total design control.

Responsive (Show or Hide)

If you don’t (or do) want something to display at a specific screen size, this option will automatically remove (or show) the content, anything you want.

Full Width & Parallax

Simply create a full width (color or image) background anywhere on a page. This shortcode even allows you to set a parallax scrolling option + much more.

Slider Pro

Easily add a slider to any page, in any column or any placement that fits your design needs. You can control the color, timing and messaging.

Blog Slider Pro

You have all the options you need to make a few selections and control how posts are displayed, in what order and from what category. Also manage the visual design.

Transitions

With transitions you can easily make content appear upon the User’s scroll. Just add the content you want to appear within the shortcode. Several options.

Gallery Grid

The gallery displays images in a beautiful grid layout with options including color variations & pop up content. The User can click an image and flip threw the gallery.

Standard Images

Easily manage your images (and image sizes), where the image is placed (right, center or left), change alt text, if there’s a border + much more.

Horizontal Divider

A very simple addition to any page and a great way to divide content. This simple shortcode allows you to modify the color and style, fit within any column.

Buttons

Add a button anywhere you want. This shortcode’s design is managed globally on the site (via theme options). Control a bunch of styling variations with ease.

Box Content

Add content (anything you want) in a box where you control the background color, border and several other options. A great way to display content on a page.

Box Content with Header

Similar to the standard box content with the addition of a stylized top portion for adding a header. Several options to choose from, making page creation easy.

Widget Area

Let’s say you create a 3 column layout. In each column you can add this shortcode and specify which widget area is displayed. Show dynamic content with ease.

Custom Text

Within this shortcode section you’re able to add text and the work done in the editor (all of the various selections) will be applied with no problem. Custom text options.

Responsive iFrame

Add a Responsive Iframe (ex: YouTube Videos, Google Maps, etc) anywhere on a page. Place your content within the shortcode after you insert this in the page editor.

Services

An already pre-created design layout. Determine how many columns you want, add a few other options and your services section is done. Just add your content.

Single Testimonial

An easy method in adding an already designed layout for testimonials. Control the colors with ease and add this shortcode anywhere (just like the rest).

Progress Bar

With the progress bar you’re able to create an animated percentage option “bar” (and non animated, if wanted). Options too.

Alerts

The alerts are added easily with a title, text and a color selection. Page visitors can close alerts too. Notifications made easy.

Single Button Group

The single button group makes it easy to add navigation style layouts to any section. Several color options available too.

Separate Dropdown Menus

Need a way to display a bunch of links? Add dividers, your specified size, type and position. Easy editor.

Basic Tabs

Create a tabbed section with a bunch of color options for personalization. Many layout variations available.

Basic Pills

Similar to the tabs, with a different style. Determine the layout and add your content and desired shortcode styling.

Accordion Stacked Tabs

A great way to display content in a stacked (hidden) format. Adjust the colors however you want to customize.

Accordion Stacked Pills

Similar to the tabs. A bunch of color options and as always, easy to add any content to customize the experience.

Highlight

Options for the highlight include: label (text), style (default colors), optional CSS class and if it should wrap or not.

Badges

Options for the badges include: label (text), style (default colors), optional CSS class, if it should wrap or not.

Font Awesome Icons

Add Font Awesome icons via a simple shortcode. You have easy access to add icons and manage their colors.

List of Icons

Control the link, color, size and which icon you’re using. Add list icons or a stand alone icon with its own link.

Dynamic Blog Posts

Add dynamic content like blog posts with one easy shortcode. This content will dynamically update as you add new posts. Several options.

Blog Post News Format

Display posts in a news style layout. You’ll have the ability to: select the category and how many posts are displayed + more design options.

Portfolio Display

Add dynamic content like portfolio posts with one easy shortcode. This content will dynamically update as you add new portfolio posts.

+ Advanced Images

Built right in, tested and ready to use, WordPress design shortcodes including a great selection of advanced image options. These image options will enhance your User’s Experience. They’re easy to add too!

globe
bike

New Image on Hover

Have an image appear on an image. Your options include: lightbox (control background color), link to a page (open in a new window or not), your two images (Your image’s alt text is automatically added, you also have the power to alter it), image effect (fade in, slide left, slide right, slide up, slide down, flip horizontal, flip vertical), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Image Opacity on Hover

Control the opacity on hover. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), image opacity (original and hover – control percentage), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Content on Hover

Use shortcodes and content to your heart’s content when a user hovers over an image. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), hover transition (fade in, slide left, slide right, slide up, slide down), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no) + control background color, text color and background opacity.

globe

Image Rotate on Hover

Control how an image rotates when a visitor hovers over it. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), image rotation (left or right rotation, and rotation degrees 5, 10, 15, 20, 25, 30), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Image Saturation on Hover

Control the saturation of an image on live view and hover. Please note: this feature does not work in Firefox. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), image saturation (original saturation level percentage of choice and hover saturation level, also a percentage of your choice), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Skew on Hover

Make your images skew upon hover. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), image skew (left or right, percentage of length skewed 5, 10, 15, 20), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

Globe Square

Squared / Rounded on Hover

Put a square image in and have it default on rounded corners, when a user visits and hovers the image will grow to a square image (and vise versa) . Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), start on square and end on circle or start on circle and end on square, squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Scale on Hover

Put your image in a column and when a user hovers over it, it grows. A fun effect to add to your website. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Rotate and Scale on Hover

When a user hovers over it, it spins and grows. A fun effect to add to your website. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), rotation of image (left, right), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

globe

Rotate on Hover

A fun feature to make images spin when a user hovers on an image. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), rotation of image (left, right), squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

Globe Square

Vignette on Hover

Add a beautiful and subtle vignette to any image. Your options include: lightbox (control background color), link to a page (open in a new window or not), your image (Your image’s alt text is automatically added, you also have the power to alter it), vignette color, squared corners or rounded corners, border, margins, position (left, right, center), wrap (yes or no).

Text Change on Hover

Easily add centered, linkable content that adapts responsively and control the text background bar color, hover color (both font color options) and opacity percentages on both. In addition manage the font weight, image type, border, wrap and postion (center, right or left).