-
AuthorPosts
-
February 7, 2014 at 12:10 am #11982
I’m trying to place columns within columns, or if you can provide a suggestion to an alternative, that would be great.
The shortcode setup I’m using is…
[content_band no_margin="true" padding_top="100px" padding_bottom="100px" inner_container="true" bg_image="http://dev2webfrogs.wpengine.com/wp-content/uploads/2014/01/leauges-955x634.jpg" border="none" parallax="true"] [container] [column type="whole" last="true" fade="true" fade_animation="in"][/column] [/container] [/content_band] [content_band inner_container="true" no_margin="true" border="none" padding_top="10px" padding_bottom="30px" bg_pattern="" bg_image="" parallax="true" bg_video="" bg_video_poster="" bg_color="#333333"] [container] There's some content here [/container] [/content_band] [content_band no_margin="true" inner_container="false" bg_color="#999999" padding_top="0px" padding_bottom="0" border="none"] [column type="one-third" fade="true" fade_animation="in-from-right" fade_animation_offset="2000px"] [image class="man" src="http://placehold.it/500x800" alt="Alt Text"] [/column] [visibility type="visible-phone"] [gap size="45px"] [/visibility] [custom_headline class="h-resp" style="color: #fff;" level="h3"]FOR THOSE WHO ENJOY THE SPORT OF BOWLING, FLIPSIDE IS HERE FOR YOU.[/custom_headline] <p class="p-resp">We house 28 lanes and maintain them with state of the art equipment. This will ensure that those pesky lane conditions that may have been an issue at other centers are a non-issue here.</p> [custom_headline class="h-resp" style="color: #fff;" level="h3"]WE HAVE MANY OPTIONS AND BENEFITS FOR LEAGUE BOWLERS.[/custom_headline] <p class="p-resp">Your friends want to bowl here.</p> [column type="two-thirds" fade="true" fade_animation="in-from-left" fade_animation_offset="2000px" last="true"] [content_band class="center-text" inner_container="true" padding_top="5px" padding_bottom="5px" no_margin="true" border="none" bg_color="none"] [column type="one-half" fade="true" fade_animation="in-from-right" fade_animation_offset="3000px"] [image class="man" src="http://placehold.it/400x200" alt="Marketing"] [custom_headline class="mtm" level="h3" looks_like="h6"]Play Card.[/custom_headline][/column] [visibility type="visible-phone"] [gap size="40px"] [/visibility] [column type="one-half" fade="true" last="true" fade_animation="in-from-right" fade_animation_offset="2000px"] [image class="man" src="http://placehold.it/400x200" alt="Marketing"] [custom_headline class="mtm" level="h3" looks_like="h6"]Birthday Card.[/custom_headline][/column] [/content_band] [/column] [/content_band] [responsive_text selector=".h-resp" compression="1.0" min_size="12px" max_size="21px"] [responsive_text selector=".t-resp" compression="1.0" min_size="18px" max_size="32px"] [responsive_text selector=".p-resp" compression="2.25" min_size="16px" max_size="21px"] [responsive_text selector=".btn-resp" compression="1.0" min_size="28px" max_size="36px"]
Website: http://dev2webfrogs.wpengine.com
WP Vers: 3.8.1
X Theme Vers: 1.7.3
X Shortcode Vers: 2.0.7This is the ultimate goal (built in Photoshop):
February 7, 2014 at 12:24 am #11985As you can see, I’m running into issues with shortcodes. There’s an extraneous band with the closing shortcodes
[/column] [/content_band]
Any insight on this situation is greatly appreciated!
-Jared
February 7, 2014 at 12:48 am #11992Hey Jared,
WordPress does not allow nesting of similarly named shortcodes within one another, so if you’re trying to do something like this, it is not possible (simplified for demonstration):
[column] ...column content... [column] ...inner column content... [/column] [/column]
Instead, you will need to manually markup your columns using the HTML ouptut by the shortcode itself. Something like this should work for you:
[column type="one-half"] <div class="x-column one-half"> ...inner column content... </div> <div class="x-column one-half last"> ...inner column content... </div> [/column] [column type="one-half" last="true"] ...column content... [/column]
Thanks!
February 7, 2014 at 2:43 pm #12202Please see link below. I was able to achieve my goal. Thanks for your help X-folks!
http://dev2webfrogs.wpengine.com/bowling/leagues/
-Jared
February 7, 2014 at 3:13 pm #12209Hey Jared,
Looks great! If you need anything else let us know!
September 3, 2014 at 1:51 pm #97755Hi, just out of curiosity, is it possible to add more than 2 rows of columns within the [column type=”one-half”][/column]?
September 3, 2014 at 3:05 pm #97821Hi Jesse,
Did you mean something like this
[column type="one-half"] <div class="x-column one-half"> ...inner column content... </div> <div class="x-column one-half last"> ...inner column content... </div> <div style="clear:both;"></div> <div class="x-column one-half"> ...inner column content... </div> <div class="x-column one-half last"> ...inner column content... </div> [/column]
Hope that helps.
Cheers
-
AuthorPosts