Table of Contents
Updated by Randall Theil
Estimated Reading Time: 20 Minutes
Required Permissions: SiteEdit, Snippet
Our Technical Support team is always available to create and lay out pages. If you would like to build your own pages, this article offers methods and processes to create nice looking layouts using the built in site editing tools.
Lining Images Up In Rows
Putting pictures in rows for a bar or gallery of photos can be challenging and there are a few different ways to do it. Here's a process to get any number of pictures to line up nicely on devices of any screen size:
- Start by clicking the Image button on the editing toolbar or by double-clicking on an image that's already on the page to open the Image Properties window. Here you can change the size and look of the image:
- The Height and Width fields will show how much screen space the image will take up in pixels. Images will have values in here by default based on the maximum size of the image you've uploaded. While you can place images with fixed widths and heights next to each other, I would recommend replacing the width value with a percentage based on how many images you'd like to appear in your row, and clearing out the Height field, like in the screenshot below:When Width is represented as a percentage, it will always take up that much of the container its in (the column in the middle of your website where the page contents go), so you can predict what the layout will look like at any screen size. If you have three images with a width of 33%, they will always each take up a third of the page. Not entering a height value will make the image automatically find a height based on width. Entering a height with a percentage width may result in a distorted (stretched) image.
- Setting the widths will shrink your images so they can fit next to each other, but you'll also have to set alignments on them or else they'll appear in a column:To align images (or text), you just need to click on the image and click the left or right align button on the editing toolbar (pictured above). You can also set it from the Alignment dropdown in the Image Properties window. While you can align elements to the left and right, I would recommend aligning all of the images you'd like to appear in a row to the left for consistency.
- Lastly you may want to add some space between the images so they aren't flush against each other. You can do so by double-clicking on one or more of the images to open the Image Properties window and then putting a number into the HSpace field as shown below.HSpace adds pixels of empty space to the left and right of the image, so you may need to reduce the width percentages of your images to account for the extra space you're adding through the HSpace field (use 24% instead of 25% for a row of four images, for example).
Wrapping Text Around Images
A basic formatting requirement for any kind of informational page is wrapping text around images. Text and images don't line up next to each other by default, but this walkthrough will show you how to get them to play nice with each other:
- Start by Putting the text and images you want to combine into the same snippet (dotted box). You can click and drag the images to move them up and down in the text, but it's probably best to wait until the end to do fine adjustments.
- Next you'll need to set the images to align to either the right or left. You can do this using the Alignment dropdown in the Image Properties window, or just by clicking on the image and clicking the Align Left or Align Right buttons on the editing toolbar (pictured below).
- When you align the images one way or the other, the text below them should come up to sit next to the images, but putting the text flush against the images can be ugly, so it's best to add some empty space around the images. To do this, double click on them to open the Image Properties window and add numbers to the HSpace and VSpace fields. This will create a gutter around the image that's as large as the numbers you've entered (in pixels). I would recommend "10" as a good starting number for HSpace and VSpace.
Creating Ordered / Unordered (numbered / bulleted) Lists
It can be helpful to break up big blocks of text on pages with ordered (numbered) or unordered (bulleted) lists. Unfortunately there aren't built-in functions for adding these, but you can still get there with a couple tricks:
- Copy and paste in this bullet character at the start of each line: •.
- Put regular numbers at the start of each line with a right parenthesis after the number (like "4)").
- Lists are usually indented slightly, so add a few spaces before the start of each line to push it to the right. I would recommend four spaces per line.
- If the bullets or numbers aren't standing out enough, use the Bold button on the editing toolbar. It'll work even for the bullet character.
Making Links Look Like Buttons
There's a Link button on the editing toolbar to change a line of text into a clickable link, but you may want something that stands out and apart from the regular text a little more. Here's how to make a link look like a full button:
- Start by typing out the text you want for the button's label. Then highlight the text and click the Link button on the editing toolbar:
- Next you should see the Link pop-up appear. You can fill in the link's destination in the Link Info tab, but to get it to look like a button you'll have to switch to the Advanced tab and put some code into the Style field:
- Paste this full paragraph of CSS code into the Style field in the Link window. This CSS tells the browser what the link should look like. In this case it's setting the size of the text, the size of the button, and the color of both. All you really need to worry about are the first two rules in the list: background-color:blue; and color:white;. If you want to change the background color of the button or the color of the text, replace "blue" and "white" there with the color names or hexidecimal values (like "#40c3f4") for the colors you'd like to use. Make sure you don't accidentally delete the semicolons at the end of the rules! You can read about colors in CSS here.