Jump to content


Photo

Full-Width Column Boxes In Your Posts


  • Please log in to reply
5 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 19 April 2016 - 01:02 PM

+ mrbrady made a request for how to add a 2 columns box that spans the width of the content container. It's a simple thing to do, so I decided to make this quick writeup.

 

Here's an example of what we'll make:

 

Attached File  Screen Shot 2016-04-19 at 1.53.06 PM.png   100.68KB   1 downloads

 

Using the MD Helper Classes we can achieve this by pasting this block of code into your post editor (make sure you're in the "Text" tab):

<div class="aligncenter wrap mb-double">
	<div class="columns-2">

		<div class="col col1 box-sec block-double">
			<h4>Small Headline #1</h4>
			<p>Some description text.</p>
			<p><a href="#link" class="orange button">Click to Learn more</a></p>
		</div>

		<div class="col col2 box-dark block-double">
			<h4>Small Headline 2</h4>
			<p>Some description text.</p>
			<p><a href="#link" class="orange button">Click to Learn more</a></p>
		</div>

	</div>
</div>

Edit the text as it fits your content and add as many columns as you need by copying a new column block.

 

Experiment with different helper classes and see how different combinations of classes alter your content. I always recommend using helper classes because 1) they're used to build default MD 2) they make your content responsive for all screen sizes + devices.

 

Notes

  • You can reset the spacing of an element by wrapping it with the <div class="aligncenter wrap"></div> classes. This will reset the content to the edge of the content box, allowing you to create your own custom content like we did above
  • You'll notice that the first column is gray whereas the second is dark. That's controlled by the box-sec and box-dark classes.
  • Be sure each column counts between the col1 and col2 classes to ensure perfect resizing on smaller screens.

- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 mrbrady

mrbrady

    Junior Member

  • + Legacy Member
  • PipPipPip
  • 106 posts

Posted 19 April 2016 - 01:50 PM

Wow this is great Alex. thanks!



#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 19 April 2016 - 03:55 PM

Wow this is great Alex. thanks!

 

I know you'll come up with some creative ways to use this!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#4 mrbrady

mrbrady

    Junior Member

  • + Legacy Member
  • PipPipPip
  • 106 posts

Posted 20 April 2016 - 02:26 AM

And if I wanted to have a graphic background it would just be a matter of adding

style="background-image: url('http://domain.com/image.png'

?



#5 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 20 April 2016 - 10:03 AM

Yes, you left out a couple of closing quotes:

style="background-image: url('http://domain.com/image.png');"

Add that to each column you want to have a custom background.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#6 mrbrady

mrbrady

    Junior Member

  • + Legacy Member
  • PipPipPip
  • 106 posts

Posted 21 April 2016 - 05:15 AM

Hey Alex, I tried using the code in an Action Lead, everything worked fine except trying to add the image.

 

For some reason the style code is trimmed from the css when saving. In other words there's no style code after I save, its' just gone.

 

Also for some reason the text in the light box is also light.

 

Edit: What I wound up doing is using the 2 column format and buttons, but stripping the box-sec and box-dark away so I could use the action lead background image. Looks nice and  this let's me promote two happenings in one action lead. 

 

http://punavuorifoundationalgym.fi






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users