Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #11982

    Jared N
    Participant

    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.7

    This is the ultimate goal (built in Photoshop):

    Desired Result

    #11985

    Jared N
    Participant

    As 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

    #11992

    Kory
    Keymaster

    Hey 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!

    #12202

    Jared N
    Participant

    Please see link below. I was able to achieve my goal. Thanks for your help X-folks!

    http://dev2webfrogs.wpengine.com/bowling/leagues/

    -Jared

    #12209

    Rubin
    Keymaster

    Hey Jared,

    Looks great! If you need anything else let us know!

    #97755

    Jesse C
    Participant

    Hi, just out of curiosity, is it possible to add more than 2 rows of columns within the [column type=”one-half”][/column]?

    #97821

    Kosher K
    Member

    Hi 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