[rs-column_bkg img_url=”https://www.sparklogix.com/wp-content/uploads/2014/02/02.jpg” bkg_color=”#1e73be” bkg_opacity=”1″ img_position=”center center” img_location=”fixed” img_repeat=”no-repeat” padding_in=”15″ txt_color=”#ffffff” link_color=”#000000″ link_hvr_color=”#333333″ class=””]

[rs-space space=”65″/]

Shortcodes are Fun!

This is a fixed background image with foreground content.

[rs-space space=”65″/]

[/rs-column_bkg]

I’ve been meaning to get moving on creating posts that illustrate examples of how to accomplish page design elements in an easy to follow tutorial. One of our Clients sent in a question and that was motivation enough to create this post!

[rs-box_content style=”basic_block” txt_color=”#2F434A” bkg_color=”#ffffff” bkg_opacity=”1″ brd_color=”#99a6aa” brd_opacity=”1″ link=”” new_win=”no”]

This tutorial is for use with the Respondo Pro Shortcode Plugin built by Spark Logix Studios.

[/rs-box_content]

[rs-space space=”35″/]

Image Background

[rs-space space=”35″/]

Question:

What combination of Respondo Pro shortcodes would I use to have an image as a background with text/other content on top of it. I am not looking to do full width content, but rather something that just fits in a sidebar or within a post.

[rs-space space=”55″/]

Create Your Layout & Add the Content

For this example, we’ll start by creating two columns (text in the left and a background image with content over it in the right column). Of course you can do any combination you’d like using the column shortcode options.

[rs-space space=”35″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

Click to Open the Shortcode Editor

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Using-Respondo-Pro-Shortcodes-for-WordPress.png” link=”” alt=”Using Respondo Pro Shortcodes (for WordPress)” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

[rs-space space=”35″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

Select Your Column Selections

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-11-at-4.01.06-PM.png” link=”” alt=”Add Columns using Respondo Pro Shortcodes” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

[rs-space space=”35″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

Select where you want to add the Image.

In this example we’re adding the image in the right column.

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Select-Where-to-Add.png” link=”” alt=”Select Where to Add” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

[rs-space space=”35″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

Open the Shortcode Editor (and select Column Background)

Here, you’ll see you have multiple options. Make your selections and “Insert”.

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-11-at-4.19.27-PM.png” link=”” alt=”Adding Column Background” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

[rs-space space=”35″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

Enter Your Content

Now you’ll enter the content you want to display over the image (get creative).

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Add-Foreground-Content.png” link=”” alt=”Add Foreground Content” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

For example…

[rs-image img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-11-at-4.33.41-PM.png” link=”” alt=”Add Content on Respondo Pro” width=”” height=”” class=”” type=”primary” border=”img-polaroid” new_win=”no” margin=”” pos=”pull-left” wrap=”no”/]

[rs-space space=”65″/]

[rs-divider type=”solid” brd_width=”1″ brd_color=”#99a6aa”/]

[rs-columns gutters=”gutter”]

[rs-one_half]

Here’s our LIVE example!

There are a lot of variations available when using Respondo Pro Shortcodes. Get creative and have fun!

[/rs-one_half]

[rs-one_half]

[rs-column_bkg img_url=”https://www.sparklogix.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-11-at-4.29.51-PM.png” bkg_color=”#fcfcfc” bkg_opacity=”1″ img_position=”center center” img_location=”scroll” img_repeat=”no-repeat” padding_in=”15″ txt_color=”#ffffff” link_color=”#1e73be” link_hvr_color=”#0066bf” class=””]

[rs-space space=”55″/]

 WHOA! That was easy!

[rs-button label=”See Framework” link=”http://framework.sparklogix.com/” new_win=”yes” full_width=”no” position=”center” size=”btn-medium” type=”btn-primary”/]

[rs-space space=”55″/]

[/rs-column_bkg]

[/rs-one_half]

[/rs-columns]

[rs-space space=”75″/]

Leave a Reply

Your email address will not be published. Required fields are marked *