9 tricks for your Weebly text elements
Working with text on a website in Weebly isn’t the same as what you’re used to when working with text in word processing programs. Do-it-yourself website design is a drag-and-drop process, where you drop the design elements you want on a page (text, images, buttons, and so on) and then move them around until they are placed the way you want.
Understanding how text elements work and how they interact with other design elements will help you shape your pages the way you want. It will also help you not to panic—as I did when I was learning—when you drop a text element on a page and it shifts everything else hither and yon and you have no idea why!
Read the Squarespace version of this blog post here.
Trick 1: Add spacers to enlarge page margins
Weebly doesn’t have what you would call page margins. Instead you can use design elements called spacers on the right and left sides of pages. These spacers create blank space on your page. Pages full of wide text are hard to read, so I often use spacers on either side of text elements to make the text narrower and more readable.
You can drag to resize the spacers to the width you want, but make them the same on either side of the text element for consistency. You’ll probably want to use the same size spacers as margins on other pages for a consistent text width throughout your website. (Use SHIFT+drag to resize spacers on Weebly precisely.)
Left and right spacers are often ignored when you look at your website on a cell phone because the narrow width of a cell phone screen automatically has a readable width.
To find out more about spacers, read my blog post, “Spacers: Your Weebly website’s invisible super power,” which tells you more about how to use these handy design elements.
When viewed on a computer, spacers create page margins
Trick 2: Sidle up to create columns
To create text columns, drag text elements next to one another. You’ll know you’re at the right insertion point when you see a short vertical line that marks the area next to the text element where you’re adding another column.
Look for a short vertical line to know you’re placing a text element next to another one
Text elements after they’ve been placed next to each other as columns
Reasons to use columns for desktop display
Using columns for large amounts of text, like newspapers do, can make the text more readable. You can also use it to call out important features or types of services.
Another way to use two columns is to help headings stand out in a Q&A list. Use Column 1 for the questions and Column 2 for the answers. You may want to add a spacer in between the two columns for more white space. Note that these column arrangements only display on wider devices, like a computer. Otherwise, they’re shown stacked one after the other.
Columns are stacked on mobile devices
On a cell phone, columns are placed one after the other, so you’ll want to check the cell phone preview as you’re designing a page to make sure the columns look good when they are stacked one on top of another.
Mobile display of columns, stacked for narrow width
Trick 3: Shove over to create an indent
To create an indent for one or more elements of text, you can add a spacer to the left side of the text. Look for a short vertical line showing you that the spacer is going next to the text element rather than being placed in a column that goes the full length of the page. Resize the spacer to be the size you want.
Add a spacer to the left of a text element to indent it
Trick 4: Buddy up to pair column headings and text
If you are trying for the effect of two columns, with a heading for each column, you’ll need to align the text with the column heading, so they are displayed on a cell phone as a single unit.
I usually create the heading and the paragraph for Column 1. Below those elements, I create the heading and paragraph for Column 2.
Look for the short vertical lines and horizontal lines as you’re dragging elements. You want the Column 2 heading to be next to Column 1. Then you want to drag the Column 2 paragraph under Column 2 only. Then you drag the Column 1 paragraph to be under only Column 1.
If you’ve done this correctly, when the columns are seen on a cell phone, Heading Column 1 and Text Column 1 appear first, followed by Heading Column 2 and Text Column 2.
Example of placing column text only under one column’s heading
Trick 5: Add extra space between paragraphs
Sometimes you want text elements to be independent of one another even if they are shown in one long column. I use this most often on Services pages when I want a way for each service to stand on its own and not be confused with any other service. To force space between text elements, you can either add spacers or divider lines.
Check the mobile preview as you’re trying out different splitting techniques. Sometimes spacers added in between text elements cause more space than you want and you’ll have to compromise on a spacer size that looks good both on computers and cell phones or use a divider line instead.
Use divider lines or spacers to break apart text elements
Trick 6: Insert new text
If you need to add new text in the middle of a long text element, drag a new text element to the place where you need to add it, watching for a short horizontal line showing that you have the correct insertion point. Type the new text in the text element. You’ll add a Title element if you need a heading and a Text element if you need regular text.
Splitting a text element to add new text
Occasionally the horizontal line showing the insertion point just won’t display at the point where you want it. Here’s how to make it work:
Add a new text element after the original text element and add your new text; style it the way you want.
Create another new text element, under the text element you just created.
Cut the portion of the text from the original text element that is supposed to appear after your new text and paste it into the second new text element.
You’ll now have everything in the correct order.
Trick 7: Add spacers to focus attention
If you want to give an important announcement or testimonial extra attention on a page, you’ll use spacers on either side of the text element to center it or on one side to place it to the side.
If you are also using page margin spacers, place these new elements under the narrower column created by the page margin spacers.
Extra spacers create deeper margins for added focus
Trick 8: Press ENTER twice to separate paragraphs
Normally, when you press ENTER after typing a list item, you’ll see the regular line spacing built into the text element.
Paragraphs don’t automatically add double spacing in Weebly, so you’ll want to press ENTER twice to create spacing between paragraphs.
Otherwise, it’s hard to distinguish between paragraphs because they will be separated by a single line space.
Trick 9: Wrap text around images
To avoid a lot of white space under an image, you can force a long text element to wrap around the image. In this case, you aren’t working with the text element. Instead, you’re dragging an image element into the text element on the text’s right or left side until you see a full shadow rectangle embedded over the text element.
When you drop the image element, it is embedded in the text element. Adjust the size of the image by dragging it at its lower corner until the size of the image with the text looks good.
Embed image element to wrap text around
Text elements are the foundation of the messages on your Weebly website. Incorporating some of these tricks into your page designs will have you doing cartwheels (if only in your mind) as you position your messages exactly as you want them, so they are clear, readable, and memorable. Have I left any tricks out that you love to use? If so, I’d love to hear about them.
