x

How do I have 3 columns but divider to go under only 2

I want a layout of 3 columns where I have an image in 1, text in next with a divider under both these. I then want a 3rd column where i can have as much or as little text as I want. My issue is the columns seem fixed so can't say have twitter feed running down last column (which would mean a long column) but have 2 columns next to it with that are equal depth, e.g. https://thelandtrust.org.uk/news/ where the 1st 2 columns are equal size with divider line at top and bottom (if I do it with weebly I have to put a divider in each column, which is a fiddle to keep them equal and if I want a longer 3rd column then the lenght of the column is determined by that).

Tags (2)
1,494 Views
Message 1 of 3
Report
2 REPLIES 2
Square

Hi, @PennyB.

You're going to want to nest some columns elements in order to get the layout you want. Here's how I would do it:

1. Add the embed code element (or app element if it's from the App Center) to the page for your Twitter feed.

2. Underneath that, add your image element.

3. To the right of the image, add your text element so it's in a column next to the image.

4. Click on a divider between the image and text so you're select on the columns element, then drag the columns element up and to the left or right of the Twitter embed.

1,474 Views
Message 3 of 3
Report

@PennyB Further to @Adam's reply, you shouldn't think of Weebly columns as discrete page elements like text or images. Columns are auto-generated with respect to the placement of (actual) content elements (you don't actively place columns into the content zone like you do with content elements).

So, in your case, you first dropped an image element in your content zone. That element by default spanned the entire width of the zone. You then dropped a text element to the right of the image element and this auto-generated a column split where the image occupied the first column and the text, the second. The columnar widths each default to 50% of the content zone width.

Now, if your intent is actually to have a third column housing a Twitter feed embed with all of the remainder of the page content to the left of the feed, what you're really after is a two column page layout where one column is the content zone and the other, a sidebar (like a standard blog page layout). The sidebar column is intended to house your Twitter feed.

The easiest way to do this is to place a Code Element to the right of existing full-width content. If you have content above the image and text content and this content spans the full width of the content zone, you should drop a Code Element to the right of that content first in order to create the two-column page layout. If you don't have full-width content above your image and text columns, just drag and drop a dummy element (e.g., a text or title element) above the image/text columns and ensure that it spans the full width of the content zone, i.e., it's not contained within either the image or text columns but is instead in a separate "row" above those two items.

When you drop your Code Element to the right of your full-width content (dummy or real), resize the column widths so that the Code Element occupies less width (follow @Adam's instructions on that) and so that column looks more like a sidebar. Okay, so now things look all wrong because the image and text columns are still 50/50 below this content. So, you'll drag your image up and below the wide left column content. The image will now be in the wider column right below the dummy or real content and the Code Element will be to the right of all of this. Drag the text up and drop it to the right of the image. This will split the wider column 50/50 and both the image and text will be to the left of the Code Element and directly under the (dummy or real) content which will also be to the left of the Code Element. This is what @Adam refers to as "nesting" - what you've done is created a master two-column page layout and within the left column nested another two-column content block (the image and text). And you just keep adding content to the left master column as though this is the entire page content zone (the right column just has the Twitter feed).

1,458 Views
Message 4 of 3
Report