Column Layouts on Renaissance

Renaissance Renaissance Guide
#1

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
Screen Shot 2021-10-27 at 12.41.20 PM2028Ă—1036 452 KB 

<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
Screen Shot 2021-10-27 at 12.46.27 PM2038Ă—876 384 KB 

    <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
Screen Shot 2021-10-27 at 12.47.27 PM1970Ă—878 355 KB 

<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
#2

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
#3

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

#4

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.

#5

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

#6

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
Screen Shot 2021-12-07 at 4.06.17 PM1538Ă—832 76.3 KB

#7

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!