Two Column and WYSIWYG

Websites
#1

We are creating a two-column layout for a promotion, which must be done in HTML. A modern drag-and-drop WYSIWYG like Squarespace or a block-style editor like Notion would be very helpful in scenarios like this. I poked around, and there seem to be open-source and white-label options. It’s a major undertaking, but it would have a good ROI regarding ease of use, customer satisfaction, and possibly fewer support requests.

By the way, is this code example from the forums still the best way to do a two-column layout?

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

Have you checked the /style-guide/ Under Content Pages?

1 Like
#3

Did you mean this style guide? I didn’t know about this version and it’s exactly what I was looking for. Thank you! However, those components didn’t seem to work on our site in a few tests I tried. The CSS seems to be missing from our site. I’ll have to check with REW about it.

I have been using these two other style guide versions here and here. The help resources could probably use a bit of tidying up.

#4

Yes at Style Guide (it should be in your Content Pages as well in the backend). Look at the html and copy it and adjust it to work within the REW framework

1 Like
#5

Thanks, that was very helpful! It’s not in our backend, but we’ve gone through so many upgrades and custom work that it probably slipped past.

#6

Can’t you right click in wysiwyg and get a table creator?

1 Like
#7

Answered my own question - just right-click in wysiwyg :wink:

Screenshot 2024-11-27 at 1.25.21 PM
Screenshot 2024-11-27 at 1.25.21 PM1356×932 76.1 KB

#8

Hi Morgan, Thanks for checking in! Tables in the WYSIWYG have a drawback because they don’t seem to have a responsive design dynamic going from desktop to phone browsers. I made this test page to illustrate the issue. It’s a 2x2 WYSIWYG table, followed by an HTML/CSS snippet. Visiting that page on the desktop looks ok, but it doesn’t work well on the phone. The HTML/CSS snippet reflows nicely into a single column. Another odd thing is the table makes the font smaller. https://www.thecascadeteam.com/test-stats.php

#9

IC - For 2 column (or 3 or 4) CSS with responsive application, you can go to Style Guide

  • You “should” have this on your own website as well (Unless you deleted it)

And in fact, you do have it - it’s right here Style Guide (go into the backend for HTML)

#10

Thanks! Our style guide was missing, but Carlo had restored it that morning. BTW, Carlo is great!

#11

Hey Victor, can I ask what plugin you are using on your homepage to do the market stats? Or custom

#12

That was a custom project from REW we did a few years ago.