Column Layouts on Renaissance

You can use these column layouts in a snippet to add content to your website.
See below for types of layouts you can use:

2 Column Layout

Screen Shot 2021-10-27 at 12.41.20 PM

<section class="block block--lightest block--agents">
<div class="container">
                <div class="teasers teasers--2-col">

        <div class="teaser__content">
			<p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
			<h3>Column 1 (width: 285px)</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
        </div>
        <div class="teaser__content">
			<p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
			<h3>Column 2 (width: 285px)</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
        </div>			
				
                </div>
</div>
3 Column Layout

Screen Shot 2021-10-27 at 12.46.27 PM

    <section class="block block--lightest block--agents">
    <div class="container">
     <div class="teasers teasers--3-col">

            <div class="teaser__content">
            <p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 1 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                    </div>
            <div class="teaser__content">
<p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 2 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                    </div>
            <div class="teaser__content">
 <p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 3 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                    </div>
                             </div>
                        </div>
</section>
4 Column Layout

Screen Shot 2021-10-27 at 12.47.27 PM

<section class="block block--lightest block--agents">
<div class="container">
                <div class="teasers teasers--4-col">
                  <div class="teaser__content">

        <p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 1 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                </div>
        <div class="teaser__content">
<p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 2 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                </div>
        <div class="teaser__content">
 <p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 3 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                </div>
        <div class="teaser__content">
<p><img src="/uploads/agent-1/lightning.gif" width="100%" alt=""></p>
<h3>Column 4 (width: 285px)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat.</p>
                </div>
                         </div>
                    </div>
</section>
1 Like

BRAVO REW, BRAVO!

This is the type of information that is missing! Please keep adding content like this. It would be great to show how to add images in the columns.

Can you continue to expand on this? How to change the font sizes and types, justify left, right or center, etc.

Thank you for this very informative and helpful post.

2 Likes

Hi @PuertoRealty

Thank you for your feedback. I am glad you found this article useful.

Here is a link to the guide on how to upload your images through the moxie-manager and add them in a snippet Upload an image to use in a CMS snippet

Best Regards,
Prakriti

Thanks, that’s how I have been doing it. I had hoped there was a way to access the moxie-manager from the snippet page instead of having to experiment on a test page. Seems like some extra steps could be avoided.

Hi @PuertoRealty

That is a great suggestion. I am going to share this with our development team. Hope you have a great week ahead!

Warm Regards,
Prakriti

using the code for the 4 column layout is not setting the format as a 4 column was a 1row 4 columns. Copied and pasted the exact code and just used my image instead. Screen Shot 2021-12-07 at 4.06.17 PM

Hi @aaviles,

Thanks for your inquiry. I made a few changes in the code and it should work as intended now. Could you please give it a try again?

Thanks!

Is there a way to make this code work with just images and no text?

           <div class="teasers teasers--4-col">

             <div class="teaser__content">
			<a href="/airdrie-homes-for-sale.php"><img style="margin-left:auto;margin-right:auto;" src="/uploads/agent-1/Airdrie Cochrane Chestermere Okotoks/AIRDRIE.png" alt="Airdrie homes for sale"><a/></p>       <p></p>          </div>
              <div class="teaser__content">
			<p><a href="/cochrane-homes-for-sale.php"><img style="margin-left:auto;margin-right:auto;" src="/uploads/agent-1/Airdrie Cochrane Chestermere Okotoks/COCHRANE.png" alt="Cochrane homes for sale"></a></p>            <p></p>     </div>
             <div class="teaser__content">
			<p><a href="/chestermere-homes-for-sale.php"><img style="margin-left:auto;margin-right:auto;" src="/uploads/agent-1/Airdrie Cochrane Chestermere 

Okotoks/CHESTERMERE.png" alt=‚ÄúChestermere homes for sale‚ÄĚ>



Okotoks Homes For Sale

is pumping out

Nevermind - I got it -

Code for those wanting to replicate four column image layout

           <div class="teasers teasers--4-col">

              <div class="column">
			<p><a href="/cochrane-homes-for-sale.php"><img style="margin-left:auto;margin-right:auto;" src="/uploads/agent-1/Airdrie Cochrane Chestermere Okotoks/COCHRANE.png" alt="Cochrane homes for sale"></a></p>     </div>

             <div class="column">
			<p><a href="/chestermere-homes-for-sale.php"><img style="margin-left:auto;margin-right:auto;" src="/uploads/agent-1/Airdrie Cochrane Chestermere 

Okotoks/CHESTERMERE.png" alt=‚ÄúChestermere homes for sale‚ÄĚ>