How every element on a page (like paragraphs, headings, and images) looks is decided by styles. Learn to use the design tools to set these styles.
If you built your site from a theme, it may have come with several theme presets. These allow you to switch between different designs for the same theme. Generally, these options may have different colors, fonts, and other styles.
The theme presets were created by your theme's designer. And they're a quick way to change look of your site.
To switch between presets:
You can also change the look of your site at a more granular level by changing styles.
Every element on a page—like text, images, and buttons—has a style. Basically, a style is formatting information, and you can use styles to keep the design of your site consistent.
For example, you might have a style for paragraph text that says all paragraph text uses the Open Sans font, is 14px, and is gray. If you adjust that style, then all paragraph text on your site will change accordingly.
How everything looks is defined by styles. Here Paragraph text is set to use Open Sans font, have a size of 14px, and have a color of gray.
If you’re familiar with CSS, this will sound familiar because a style is just another name for a selector such as: .heading h1
Every widget has its own styles. For example, the Heading widget has an overall style for all headings, and it has additional styles for every level of heading from 1 – 6.
Every widget has its own styles. The Heading widget has a style for all headings (Heading), and it has additional styles for every level of heading from 1 – 6 (Heading 1, Heading 2, etc.).
To see a widget’s styles:
To see a widget’s styles, click the widget, and then in the upper right, click the Styles tab.
Your site also has general styles. To see these general styles:
To configure a style (change a font color, set a background image, and so on):
Once you click the style, you’ll see blue lines on the page around the elements that the style affects.
Once you click a style, you’ll see blue lines around the elements that the style affects. In this case, the Paragraph style is selected, so the lines are around paragraphs (but not headings) on the page.
You’ll also see several tools appear below (like Typography, Background, Border, and so on). Use these tools to configure the style.
Once you click a style, you’ll see several design tools appear below. Use these tools to change the font, background, border, and so on.
Next, learn more about each tool:
Until recently, when building a site, you had to choose from a short list of web-friendly fonts. These fonts are web friendly because everyone has them. Moboom is integrated with Google Fonts, which is a library of hundreds of fonts that work on the web.
Tip The way this works technically is that Moboom embeds a link in your page to that font. If you use several different fonts on a page, your site might load slower, so try to limit the amount of fonts per page. Using only a few fonts is also good design advice.
The Typography tools are near the top of the Styles tab. To see more Typography tools, click Advanced.
You can configure more than just font choice—you can also configure:
The Font Family menu allows you to pick the font for a style. This is tool is pretty self explanatory, but some of the features might not be completely clear at first.
The Font Family menu is broken up a few different categories:
Note You’ll see the option inherit under Standard Fonts. This option means that you don’t want to set a particular font for that style, and the style should inherit the font family. For example, for the Heading widget, you can set a particular font for the Heading style and then all heading levels (1 – 6) can inherit that choice.
Tip Moboom embeds a link in your page to each Google font. So if you use several different fonts on one page, your site might load slower, so try to limit the amount of fonts per page. Using only a few fonts is also good design advice.
The Font Family menu also has a search box, so you can search for a particular font. So find a font you like on Google’s site, and then search for the name here.
Search for a particular font instead of scrolling through the list.
Next to the Font Family, you can set the color. Click the color box, and choose:
You have a few different options for setting your font size. With older browsers, the standard web-design style was to use relative units such as ems or percentages. This way, if users scaled up the font the size with their browser, the font would actually change.
Modern browsers will scale even pixel-based sizes, so they don’t have the same accessibility concerns that they did a few a years ago. That said, this topic is still hotly debated, but the real answer is that you should choose whichever unit you prefer to work with.
To change the font size, drag the slider left or right and choose a unit (pixels, ems, or percentage).
You can set the size of your font in the following units:
Each font family has different options for bold, or more accurately weight.
For example, if you select the font family Helvetica, then you can set the weight to Light, Normal, and Bold. However if you select the font family Impact, the only option that you have for weight is Normal.
However, you can apply italic formatting to any font. Just click the I button
To make a font bold, set the weight. Each font has slightly different options for weight.
Set the line height with the Height field. Line height is an essential part of developing a good flow so your text is easy to read.
The standard recommendation is that the height should be somewhere between 120 – 145% of the font size (as described in Butterick’s Practical Typography by Matthew Butterick).
Write some sample text and then drag the height up and down until the spacing looks right.
Set the line-height of your fonts to 120 – 145% of the font size.
Align the text left, right, center, or justified. You’re probably used to this feature in word processors—it works pretty much the same here.
The Indent feature is an Advanced feature. So to see it, next to Typography, click Advanced.
It works just like you would imagine: it indents the text from the left by a specific amount. This feature is especially useful for creating lists that line up just right.
Letter spacing is an Advanced feature. So to see it, next to Typography, click Advanced.
If you want to get the text just right, you can adjust the space between letters. This can be a good way to draw attention to heading.
Changing case is an Advanced feature. So to see it, next to Typography, click Advanced.
Transform your text to all uppercase, all lowercase, or just capitalize the first letter of each word. This feature is especially useful for ensuring that your headings all have consistent capitalization.
Adjust the background of any style with the Background tools.
You can set:
Next to the Image, you can set the color. Click the color box, and choose:
Add a background image to a style. You can also make this field dynamic and set it to use an image from a content set.
Tip When adding an image, be careful to use one that’s an appropriate size. If you add a huge image and scale it down, it may look okay, but your page will load slower.
Position lets you set the alignment of the background image. Click the arrows to align the background image to different edges or to the center.
Set the image to display once, repeat horizontally, repeat vertically, or repeat horizontally and vertically.
Set the size of the background image to adjust based on the height of the particular style. This is a good way to scale an image precisely based on different situations.
At the top of the Background tools, click Advanced to see the Size options.
There are a few options for sizing the image (based on CSS properties):
Enabling Scroll, makes it scroll with the text. Otherwise, the background will be set to fixed, and it will stay in the same place—even if you scroll down the page.
You can edit the border of any style.
The Border tools let you configure:
Next to the Width, you can set the color. Click the color box, and choose:
Set the width of your borders using pixels (px), ems, or percent (%).
Choose between a solid, dashed, or dotted border.
In the dark days of web design, creating rounded corners meant creating several images of rounded corners and lining them up with an element. If you wanted to change the size of the element or adjust the colors, you had create new images!
Thankfully, technology has improved. The Radius field lets you add rounded borders to styles. Specifically, you set the radius of the curve.
Adjust the size, spacing, and position of any style with the Position tools.
Just click any value to adjust it. You can set values in Pixels (px), Ems, and Percent (%).
The Position tools let you adjust:
Use the inner box to adjust the width and height a style.
The outer box allows you to adjust the margin, which is the space around a style.
Use the second box to adjust the padding, which is the space between the content of a style and its border.
You can float a style to the left, right, or center it. Floating a style causes other elements on the page to flow around it.
Sometimes you want to see what’s beneath a style. For example, maybe you want text to on top of a background image, but you still want to see the background image a bit through the text.
You can make a style partially (or completely) transparent with the Opacity tool. Just select a style, and then drag the opacity slider to watch the style disappear.
