Column Layout

[aa2zz6]

Is this possible to create? It looks like a very basic and nice layout. I know many of the tools in xtheme can be used. I’m just not sure about the columns and the top image

[friech]

Hi There,

Thank you for writing in! You can do that with 2 columns section and Classic Promo element.

Then you need to use a 2 up Block Grid shortcode on the content to have that 1/2 columns below the image.

e.g.

[block_grid type="two-up"]
[block_grid_item] FIRST BLOCK CONTENT HERE [/block_grid_item]
[block_grid_item] SECOND BLOCK CONTENT HERE [/block_grid_item]
[/block_grid]

Just keep in mind that there is currently a bug in Block Grid element where it does not look right on the Cornerstone, but its fine on the front-end.

You can also do 2 columns section with Image element and Block Grid element. But this needs an styling to the columns so it will look like a box like you have in your example.

Hope it helps,
Cheers!

[aa2zz6]

Can someone give me an example of how to properly do this I can’t figure out how to format the text in each promo block grid item. I thought I could use a {span class=“Column_Paragraph_2”} to assign formatting but it didn’t work. I wish I could insert a text element with a class ID and format it like I usually do

[ruenel]

Hello There,

The example url is using this code:

<div class="classes-post-schedule-inner"><h5>Schedule</h5><div class="classes-post-schedule-item"> <span class="classes-post-schedule-day">Monday</span> <span class="classes-post-schedule-time"> <span class="fa fa-clock-o"></span> 9AM - 10AM </span></div><div class="classes-post-schedule-item"> <span class="classes-post-schedule-day">Tuesday</span> <span class="classes-post-schedule-time"> <span class="fa fa-clock-o"></span> 9AM - 10AM </span></div><div class="classes-post-schedule-item"> <span class="classes-post-schedule-day">Friday</span> <span class="classes-post-schedule-time"> <span class="fa fa-clock-o"></span> 9AM - 10AM </span></div> <span class="classes-post-schedule-fade"></span> <a href="http://meridianthemes-demo.net/meridian-fitness/class-view/yoga-lessons/" class="classes-post-schedule-fade-link">view full schedule</a></div>

I have replicated it for you as an example. I am using a Blank - No Container page template. In the section, I added a row with two columns. In the first column, I added an image element and a block grid element. I added also the formatted text for each grid item.

Please check the page now.

[aa2zz6]

How do you add a vertical line between the 2 block grid items?

Thanks guys!

[christian]

Regretfully, there’s no option for that in X and achieving that would require custom development. You could add a background to you block grid using CSS.

But, you would also need media queries to hide or realign the background on mobile because it won’t look good.

With that said, you need to have a developer create a border for you as this would be quite tricky and this is outside the scope of our support.

Thank you for understanding.

[aa2zz6]

This little piece of code on the right grid block item will get the vertical line to work.

border-left: 1px solid #e5e5e5;

How do I remove the bottom space between the column 1 and grid block item? I tried adding this little piece of code but it didn’t do anything.

margin-bottom: 0 !important;

Page: Programs & Classes

[jade]

Hi there,

You can remove the bottom margin by adding this code in the custom CSS:

.x-block-grid {
    margin-bottom: 0;
}

Hope this helps.