Knowledgebase

A Paragraph Style is a saved look for text: the font, size, colour, bold or italic, and spacing. Give your headings and body text a style, and when you change that style later, every piece of text that uses it changes too, on every page. It's the quickest way to keep your website looking the same throughout.

In EverWeb 4.6 and later, all your styles are in one window: Format > Website Styles.... In EverWeb 4.5, the window is Format > Default Styles.... The Text Inspector works the same way in both.

Where to find Paragraph Styles

There are two places, and they change the same styles:

• Inspector > Text. The box at the top shows the style of the text you've selected. Click the arrow next to it to see all your styles.
• The styles window. All your styles in one list. Use it to set up or change several styles at once, then click Save.
  • EverWeb 4.6 and later: Format > Website Styles..., then click Paragraph Styles on the left.
  • EverWeb 4.5: Format > Default Styles...

Every new project starts with styles such as Heading 1 and Body, which you can change, rename or delete.

EverWeb 4.6 and later: the Website Styles window

Website Styles keeps all of your website's saved looks together: Text Defaults, Colors & Gradients, Paragraph Styles, List Styles, Link Styles, Button Styles, Shape Styles, Spacing Presets and Corner Presets. The number next to each name shows how many styles it holds.

Change a Paragraph Style

1. Choose Format > Website Styles... and click Paragraph Styles.
2. Click the style you want to change, such as Heading 1.
3. On the right, set the Font (typeface, style such as Bold or Light, size, and Minimum Font Size), then open Color and Emphasis for bold, underline, italic, the text colour and an optional background fill.
4. Click Preview under the list to see the style as you change it.
5. Click Save. Until you do, the window shows Unsaved changes. Cancel throws your changes away.

Every piece of text that uses the style changes, on every page.

Add, rename, duplicate or delete a style

• Add: click + at the bottom right of the list, type a name such as Quote, and press Enter.
• Rename: double-click the style's name, type the new one and press Enter. Or select it, click the settings cog and choose Rename.
• Duplicate: select the style, click the settings cog and choose Duplicate. Handy for a variation, such as a smaller heading.
• Delete: select the style and click - below the list. If text uses it, EverWeb asks which style to use instead.

Backup fonts

Open Backup Font for a style and add one or two common fonts, such as Arial or Georgia. If a visitor's browser can't show your main font, it uses the backup instead. See My fonts look different on other computers: Google Fonts and using your own font.

Good to know

• Buttons and links use Paragraph Styles too. Each Button Style and Link Style picks a Paragraph Style for its words. Change that Paragraph Style and the button or link text changes with it. See Design buttons that look clickable: colours, rounded corners, shadows and hover effects.
• Text Defaults sets the size and colour of new TextBoxes, and your Preferred Fonts, which then appear at the top of the font menu.
• Project made before 4.6? Your Paragraph Styles are already in the window. To add the new default styles (such as Button Styles), click Add Website Styles... at the bottom. It only adds what's missing and doesn't change your existing styles. It's greyed out when nothing is missing.

Apply a style

1. Highlight the text, or select the whole TextBox.
2. In Inspector > Text, click the arrow next to the current style and choose the style you want.

Pasting from Word, an email or a web page? Use Edit > Paste and Match Style so the text takes on your style.

Change a style from the text you're working on

1. Highlight some text that uses the style.
2. In Inspector > Text, change the font, size, colour or any other setting.
3. A blue Update button appears next to the style name. Click it. Every piece of text that uses the style changes, on every page.

If you don't click Update, only the text you highlighted changes. Changed the style by mistake? Choose Edit > Undo (Command+Z on a Mac, Ctrl+Z on Windows).

Already styled some text exactly how you want it? Keep it highlighted, open the style list, click the round button with three dots next to the style, and choose Redefine Style from Selection.

A style change can affect every page, so publish with File > Publish Entire Site.

Make a new style from the Text Inspector

1. In Inspector > Text, click the arrow next to the current style.
2. Click the + button.
3. Type a name over New Style, such as Quote, and press Enter.
4. Set the font, size and colour, then click Update.

EverWeb 4.5: you can also open Format > Default Styles..., click + below the list, name the style and click Save when you're done. You set backup fonts there too.

Rename or delete a style from the Text Inspector

1. Click the arrow next to the current style in Inspector > Text.
2. Point to the style and click the round button with three dots on its right.
3. Choose Rename Style or Delete Style.

When you delete a style, EverWeb asks which style to use instead for any text that had it. Choose one and click Delete.

Text too big on phones? Use Minimum Font Size

A heading sized for a computer can be too big on a phone. You don't need custom code for this:

1. Highlight the text and go to Inspector > Text.
2. Keep your normal size in the font size box, such as 40.
3. In Minimum Font Size, type the smallest size you want on a phone, such as 28.
4. To use it everywhere the style is used, click Update. In 4.6 you can also set Minimum Font Size for the style in Format > Website Styles....

The text now shrinks smoothly between the two sizes as the screen gets narrower. The minimum must be smaller than the font size, or EverWeb warns you and the text stays one size everywhere. 0 means no minimum.

Headings and Google

A style called Heading 1 only sets how the text looks. To tell search engines that it's your main heading, select the text and go to Inspector > Text > Export Options, then set HTML Tag to H1. Use one H1 per page and H2 for section headings.

Common problems

Related articles

• My fonts look different on other computers: Google Fonts and using your own font
• Design buttons that look clickable: colours, rounded corners, shadows and hover effects
• My website looks fine on my computer but is cut off or jumbled on my phone
• What's the difference between Publish and Publish Entire Site?
• Put the same header, menu and footer on every page with a Master Page