This area will explain how you can use the Frame borders and margins area including how to answer common questions we see like this:
How can I align my Text or Image Better?
Often when you are trying to line up text or images to other frames, the best way to do it is by using the "alignment" icons. But that doesn't always work. For various reasons. your frames can be different sizes etc... When this is the case, then you should use the Frame borders and margins area. And add some frame margins to align the content.
To do that you will want to select the Frame which has content that needs to be aligned.
When the frame is selected it will have a red border around the frame like this:
Next you will want to click the "Frame Borders and Margins" icon. (See it in the screenshot above in the green rectangle)
Lets say for this example you want to center the wording "Products" over the items listed. But since the "Center" alignment option will align the text over both of the frames below it, and the left align is too far to the Left. And Right align is too far to the Right. You can add a frame margin to move it closer to the center.
See this example:
This will add 250 pixels of space to the right of the text "products". (or any content that is in that frame)
In the members area it looks like this:
You should always check your work in preview mode. Since the members area has a left hand navigation that your site will not have, there will be times when spacing looks correct in the members area, but will appear incorrect on your site. So be sure to save and preview. How the site looks in preview is how it will look on the live site.
As you can see here the text appears to be lined up center for the items. But look at preview:
The text is not centered. So you will want to add a larger margin on the right to be able to center this text over these items. That will require guessing at the size, saving and previewing until you find the right amount of space used.
It appears that for the wording to be centered in this example we needed a margin of 450 pixels. Here is how it looks on the preview:
And here is how it looks in the members area:
This is a normal behavior. The only spacing you will want to concern yourself with, is how it looks on the preview and live site.
Can I use rounded corners?
YES! You can now have rounded corners on your frames. This option can be used with a colored background or a background image.
First select the frame you wish to use rounded corners with. And choose "Frame Borders and Margins".
Then you will want to enable the corners. And specify how large you want the rounded edges to appear. You can do that by increasing the number on the corner margins.
By enabling the corners and specifying a size this will make the frame appear rounded. But you will need to give it either a background color or image to see the change. This is how it will look before a color is applied:
By Clicking on the "Frame Background Color" icon, you can specify a background color so you will be able to see your rounded edges better.
I specified Orange here, and now you can see the rounded edges. If you wish it to have a more rounded look, you would increase the pixel size for the corner margins. If you would like a less obvious rounded edge you would specify a smaller number for the corner margins.
Can I have a border color around my text or image?
YES!
By choosing a color, and a border type you can have several types of borders. Take a look under "Frame Border and Margins"
With these selections:
The frame border will appear as a solid line, 5px in width.(set in the upper left hand corner) And will be purple (the color selected in the upper right hand corner)
NOTE: If you're using rounded corners, then you would select all of the frame boxes. (be sure to hit Apply to save the changes)
This is how it will look on the preview and live site:
Can I make a frame an exact Width or Height?
YES! In the "Frame Borders and Margins" area you can choose if you want to use an "Automatic", "Exact" or "Minimum" Width or Height.
There are scenario's where one of these options are grayed out. Those scenarios include:
- When a frame does not have another frame next to it (more then one frame needs to be in the same row or column when choosing an option other than "Auto". Because one frame will ALWAYS require being set to automatic to use up any open space.
- When all of the frames in a row or column have a set width or height, the last remaining frame will be set to auto and grayed out.
To change the size select the frame, and choose "Frame Borders and Margins".
If you have any questions or need assistance with any of these please feel free to Contact Support.
