All About Styling Text With EverWeb’s Paragraph Styles Feature

The TextBox is one of EverWeb’s stalwart features that’s been with the product since day one. You simply add your text then apply the font’s font styling and you’re done. When using TextBoxes you don’t immediately think that they could change over the years, but they have. Under the hood! TextBoxes in the latest version of EverWeb – 4.4.3 – are much better at handling large amounts of text per Textbox. They’re also better at handling font changes and links within them. Importing text with attributes, such as font styles, is also handled better than back in EverWeb 1.0 days…

We would still recommend that you break down large chunks of text in to smaller TextBoxes as this makes them easier to manage and manipulate. And beware of text that you copy and paste from other sources. They can also sometimes contain hidden attributes. If you find that you text doesn’t display correctly in your page within EverWeb, or when you preview or publish, this could be a cause of hte problem, In this case, strip out the formatting of the text and preview or publish again. The same can sometimes be true of imported hyperlinks if they get corrupted. Also a possible source of problems, so you nay need to remove and reapply the hyperlink if you come across issues with it.

Text and TextBoxes, Shapes, Images, Widgets and Blogs
The most obvious way to add Text to your page in EverWeb is by using a TextBox, but there are other ways. You can add text in to images and shapes simply by clicking inside these objects then typing away! This is a great simple way to apply text over an image or shape background color. Simply apply text attributes using the Text Inspector to your highlighted text.

The other way to apply text in EverWeb is by within its Widgets. Some widgets, such as the FlexBox and Text Section widgets, use the Styled Text Editor. Simply enter your text in to the text area and format as desired. With the advent of Containers in EverWeb 4.4, the need for the FlexBox and Text Section widgets can be reduced. You can get the same effect as a widget by just combining elements such as TextBoxes, Images and button styled shapes within a Container. This approach may give you more flexibility and versatility in styling than by using a widget.

Lastly, EverWeb’s blog main and posts pages also give you areas where you can add and style text easily.

Using Paragraph Styles with Text
Now that we’ve covered the how and where you can add text within EverWeb, we come to Paragraph Styles. This was a headline feature introduced with EverWeb 4.0 where the Text Inspector was completely revamped to make styling text within your site’s pages easy to do. A new word processor style Text Inspector UI was added taking away the need to use the Fonts Panel for text styling. Everything is here that you need: fonts from a dropdown menu, a font size input field, icons for bold, italic, underline and subscript, as well as font colors for text and its background. You can even now tell EverWeb the range of font size that you want text to use. For example if you set the font size to 48 this represents its maximum size. If you change the minimum font size from the default zero to, for example, 24 point, then the font will grow or shrink between 24 and 48 point as you change the size of the browser window. Super useful and easy!

The other main change to the Text Inspector is the introduction of Paragraph Styles. Each Paragraph Style is a collection text attributes. To use a Paragraph Style on your text, simply highlight the text then go to the Text Inspector and click on the Style you want from the Paragraph Style dropdown menu. You’ll also find Paragraph Styles available in the blog post editor and in the Styled Text Editor. Easy.

Adapting Paragraph Styles for Your Site
When you create a new project, or open an existing project, EverWeb adds a default set of Paragraph Styles to it. When you create a new TextBox, for example, EverWeb will apply a default ‘Body’ Paragraph Style to the text. You can edit this or any other Paragraph Style as you want. Simply highlight the text, then make the changes you want to the style of it using the Text Inspector, then click on the ‘Update’ button to the Paragraph Style to update it. There’s one caveat here though. If you update a Paragraph Style, any other text that currently uses that Style will also be updated. Typically this is what you will want, but not always, so be careful about immediately clicking ‘Update’.

Adding, Updating and Deleting Paragraph Styles
You can easily add a new Paragraph Style to your site. Just click on the down facing triangle symbol to the eight of the current Paragraph Style in the Text Inspector. You’ll see the Paragraph Styles displayed. Click on the ‘=’ button to the right of the word Paragraph Style. Enter the name of the new Paragraph Style then press enter. Use the Text Inspector to give the Paragraph Style the attributes you want then use the Update button when you’re all set.

Clicking on the downward facing arrow also gives you the opportunity to do other things with a Paragraph Style. With the list of Paragraph Styles open, you’ll notice as you scroll down the list that there is a circle with an ellipse (three dots) icon at the right side of the Paragraph Style, if you’re on a Mac, or a dropdown arrow in Windows. Click on this icon to either delete the style, update the style from the currently selected text, or rename the style. All nice and easy.

Paragraph Styles and Default Styles…
Adding, editing and deleting Paragraph Styles is easy to do through the Text Inspector, but you can also sod this through the Format-> Default Styles menu as well. This is probably most useful when you have just created your EverWeb project and want to set up your site’s styles immediately. When you have finished setting up your Paragraph Styles, simply click on Save to finish.

The Paragraph Styles Advantage
Using Paragraph Styles in your site is recommended, even applying them to existing sites that don’t have any Paragraph Styles applied is worthwhile doing. If you change your site’s design at a later time, you may be changing the font used, or the text size or color. If you are using Paragraph Styles, this is an easy task. Just change the Paragraph Style’s attributes and the whole site will be updated. Again, nice and easy.

EverWeb’s Paragraph Styles makes using EverWeb 4.0 or higher for Mac, or Windows, a no brainer!