Mac SEO Blog

One of the premier features of the new EverWeb 4.0 release is the introduction of Paragraph Styles. You can now easily set up different text styles to suit all your website’s needs. Paragraph Styles can also be modified later on, for example, if you want to update, or refresh, the style of your website.

Setting Up Your Paragraph Styles

When you first create your website in EverWeb, it is an ideal time to create default Paragraph Styles. In this way, all your styling choices will be applied as your create the text for the pages of your site. It also means that you will have less work to do, both now and in the future, if your design needs change later on.

Hopefully you will already have an idea about which fonts you want to use, but if not, here are some recommendations:

• Use two fonts at most. Choose one font style for headlines and titles (e.g. Montserrat Bold) and one for your site’s body text. Checkout Google Fonts, which is great for font pairings and is EverWeb compatible!
• Often websites have the heading font as a Sans Serif font, and the body text font as a Serif font. This is not a hard and fast rule though. The main point is that the fonts you use in your site should be easy on the eye and easy to read.
• When thinking about your Paragraph Styles you will likely need to define styles for headings, sub-headings and maybe even sub sub-headings. For example, your main title heading could be a Montserrat 36 point bold font, your sub-heading a Montserrat 30 point bold font, and your sub sub-heading a Montserrat 24 point bold font. Note that the styles used are based on the main heading font chosen. Again, this method of styling is advisory, not mandatory.
• When defining your Paragraph Styles also remember that the color of the font, the font weight (e.g. bold, light, thin etc.) and the size of the font are also important. Use colors that are easy to read against your page background color. Bear in mind as well, that some people may have some form of color blindness, so be careful when mixing e.g. green and red, or blue and yellow, colors.
• Your text font size should be large enough to be easily read on a screen or mobile phone e.g. 16 point. Use smaller a font size only for ‘small print’ items on your page, such as terms and conditions or for legal information.

Once you have defined the Paragraph Styles that you want to use, you can implement them using the Format-> Default Styles… menu option. There are also other alternative ways in which to set up, and manage, Paragraph Styles which we will cover later on in this post.

Creating and Modifying Paragraph Styles in Default Styles

After accessing the Default Styles dialog box, click on the plus (+) button in the bottom right hand corner of the Paragraph Styles section to create a new Paragraph Style. Enter the name of the new style, then press Enter. You can then add the Paragraph Styles attributes you want using the Fonts section to the right of the Paragraph Styles section. Furthermore, you can also set up a Backup Font in case there are times your main font cannot be displayed in a browser. The font you use for the backup font should be a web safe font.

When you have created your Paragraph Style, click on the ‘Save’ button to finish. The Paragraph Style will now be available to use in the Text Inspector.

Modifying a Paragraph Style works in the same way in the Default Styles dialog box. Just click on the Paragraph Style you want to modify in the list of Paragraph Styles, then use the Fonts section and Back up Fonts sections as required. Click on ‘Save’ when you have completed your changes.

Paragraph Styles In The Redesigned Text Inspector

The second way in which to add, and manage, Paragraph Styles is through the Text Inspector. In EverWeb 4.0 the Text Inspector got a big redesign, so it is now easy to choose fonts for your site rather than having to use the Fonts Panel all the time. When you click on the Text Inspector button, you will immediately see at the top the paragraph style in use if any text is selected.

Applying a Paragraph Style

You can easily apply a Paragraph Style to text within a TextBox. Just select the text you want to apply a Paragraph Style to, then choose the Paragraph Style you want to use from the dropdown list at the top of the Text Inspector. In this example, we have selected the ‘Body’ Paragraph Style for our selected text.

Changing an Existing Paragraph Style

In the above example, we applied the ‘Body’ Paragraph Style to some text in a TextBox. This Paragraph Style is used throughout my site for all body text. Currently, its font size is 12 point which is a bit smal. As my text is already selected an now uses the ‘Body’ Paragraph Style, I can now change the font size on the fly to 16 point in the Text inspector. I can see the text size change in the Editor Window immediately. In the Text Inspector I can now see that next to the ‘Body’ Paragraph Style name, is an ‘Update’ button. If I click on this button, all text that uses this Paragraph Style will be updated to 16 point.

Using this method it is quick and easy to make global changes to your text all at once just with a mouse click! It is a great time saver! If you only wanted to apply the font size change to the selected text and not to the Paragraph Style, do not click on the Update button.

Renaming a Paragraph Style

To rename a Paragraph Style, just open the Paragraph Style list, then highlight the Paragraph Style that you went to change the name of. To the right of the style you will see either a Settings button, or a Down Arrow button depending on your version of EverWeb. Click on this button/arrow and a sub menu will appear. Choose ‘Rename Style’ to rename the Paragraph Style. Press Enter when done.

If you want to change the name of the Paragraph Style in the Default Styles dialog box, just double click on the name of the Paragraph Style that you want to change to be able to edit it. Once you have change the name, press Enter, then click on the Save button to save your changes.

Deleting a Paragraph Style

If you want to delete a Paragraph Style, simply highlight the Paragraph Style that you want to delete from the Paragraph Styles dropdown list, click on the Settings/Down Arrow button and then select Delete Style from the submenu. If the Paragraph Style is in use already in your site, you will be asked to select an exisitng Paragraph Style as a substitute for the one you are deleting.

If you are using the Default Styles dialog box instead, you can delete your Paragraph Style by simply highlighting the style, then pressing the minus (-) button to remove it from your site. Again, you will be asked to substitute a Paragraph Style for the one you are removing.

Paragraph Styles offer you a great way to add easy, consistent text styling to your website. Updating the styles you use in your site is now also quick and simple to do, saving you much time and effort!

If you have any questions on this great new feature, please let us know in the Comments Section below.