Add text and text frames in Adobe Muse

While designing a website, you can add text using Adobe Muse in the following ways:

• Add a text box and then start typing your content inside the text box.
• Save your text in a text file and import this file to your Adobe Muse page.
• Use an application like InDesign to layout the text. Copy this pre-formatted text to clipboard and paste it in Adobe Muse.

In responsive layout, you can also format the text according to the device in which users view your website. For example, you can make the text for smartphones larger, with more padding, compared to the desktop version. Further, responsive web design in Adobe Muse also allows you to format text for each breakpoint. You can change the style, color, leading, padding and size of the text for each breakpoint. To know more on formatting text while creating a website for various devices in a single file, see Format text in responsive layout.

To populate the menus, you'll copy the menu text from external text files and then paste the contents into text frames. You'll also style the text by creating and applying paragraph styles. Follow these steps:

You may find it helpful to visit the live version of the sample site, and use its design as a reference.

To learn more about working with text, read the article titled Typography in Adobe Muse.

Use the built-in Spell Checker

Adobe Muse includes a Spell Checker that makes it very easy to locate and resolve typographical errors in text frames. The Spell Checker is always enabled. It displays a red underline on any words not found in its dictionary.

If one of the suggested words is correct, press the Down arrow or use the mouse to select the suggested word you'd like to use, and then press Return/Enter to apply it. If you make a mistake and choose the wrong word, simply undo the change (Edit > Undo) and then choose a different suggested word or edit the word using the Text tool.

If a word flagged as a typo is used only once (such as a person's name or location) and you know that it is spelled correctly, there is no need to fix it. The red underline you see in Design view is not displayed when you preview, publish, or export a site.

When working with commonly used words, such as business names or addresses, you can add the words to the Spell Checker dictionary so that they are not marked as typos.

Use the Text tool to right-click on a word you want to add to the dictionary, and then choose the Add to Dictionary option from the context menu that appears.

You can set the desired language (which in turn sets the Spell Checker language dictionary) for the entire site and for individual text frames.

To set the Spell Checker dictionary for the entire site, choose File > Site Properties. Click the Text tab, choose the desired language in the Language menu, and then click OK.

Sometimes site projects require providing text in multiple languages. In these cases, you can set the default language (used most often) in the Site Properties and then set the Spell Checker language for specific text frames that display text in a different language.

To set the Spell Checker dictionary for a text frame, select a text frame with the Selection tool. Right-click and choose Language > (Choose desired language) in the context menu that appears.

Next, you'll update the appearance of the text frame. Like rectangles and image frames, you can set the stroke, fill, and background image of text frames to style them.

Update the appearance of text frames

In this section, you'll update the attributes of a text frame, to make it stand out from the background graphics on the page.

The label above the breakfast menu helps orient users and makes it visually apparent which menu they are reading. After making these changes, the completed breakfast menu looks similar as shown in the following image.

In the next section, you'll duplicate the breakfast menu, and then you'll update the text content in the duplicated text frames to create the lunch, dinner, and dessert menus.

Duplicate text frames

In the previous sections, you created the breakfast menu text frame, populated it with text from an external text file, used paragraph styles to apply consistent text formatting, and then updated the appearance of the text frame by adding a tiling background image, a fill color, and a stroke. You also added a second text frame above the menu text frame, to create a header that identifies the breakfast menu. The next step involves duplicating this set of elements three times, to create a total of four menus.

You may have noticed that as you drag each duplicate copy down, the footer region you defined in Part 1 automatically moves down to create more vertical space on the page. As a result, the food page is longer in height than the other pages in this sample site.

You need to add anchors above each menu to create a navigation system that enables visitors to quickly jump to each menu. Since the food page is a longer page, the content scrolls vertically to display the corresponding menu, based on the menu item that visitors click. You'll also explore how to work with the Links to create various types of links — including download links, which enable visitors to download a PDF file.

Insert symbols and special characters

The Glyphs panel allows you to insert symbols, such as © or special characters, such as an Beta (ᵝ) that are not available on a standard keyboard. The Glyphs panel lets you insert Unicode characters.

The types of symbols and characters you can insert, depend on the font that you choose. For example, some fonts may include international characters (Ç, ë) and international monetary symbols (£, ¥). The built-in Symbol font includes arrows, bullets, and scientific symbols.

To insert characters using the Glyphs panel, do the following:

Edit the appearance of text frames

No matter whether you apply web fonts, web safe fonts, or system fonts to text, you can always edit the text content while working in Design view. You can also update the appearance of the text frame itself, so that the text block displays differently.

Think of text frames as containers that surround each section of text. You can control them in many ways to affect how they will display on the live site.

When you want to format and style text frames, use the Selection tool to select the text frame and then apply changes that affect the appearance of the text content.

Note: If you select the text using the Text tool, you can style the text by setting formatting options in the Text panel or the Control panel.

You can resize the dimensions of a text frame by dragging the handles to stretch or shrink it. You can also drag the entire text frame around on the page to reposition it. As you resize the text frame, a tooltip displays its dimensions.

You can also rotate a text frame, but be aware that if you rotate a text frame (regardless of the fonts you apply) the text will be exported as an image file. So do that sparingly, and always add a title to rotated text.

To update the appearance of a text frame container, you can use the same formatting options you use to edit rectangles. You can set the fill color and even add background images. You can also set a stroke and use the same settings to control the stroke width, color, and alignment. Using the Corners and Effects menus in the Control panel, you can set the corner radius of the text frame and apply drop shadows, bevels, and glows.

To add transparency to a text frame, change the opacity value using the Opacity slider.

And use the Hyperlink menu and Hyperlink field to add titles to text, as well as adding links and defining if the link opens in a new browser window.

Control text alignment and text-wrapping around an image

Text frames are extremely useful for creating page content. As you saw in the previous section, text frames can contain graphic elements and effects, as well as holding text content.

In this section you'll take a look at how to control the text content within a text frame, by setting padding to add more space. You'll also learn how to create magazine-style layouts by creating columns of text that wrap around images.

Add padding to text

By default, the text you type, place, or paste into a text frame is aligned along the left side. If you look at the settings in the Spacing panel, they are all set to 0.

To add more space to the left, right, top, or bottom of the text frame, type the desired value (in pixels) or click the up and down arrows next to each field to increment or reduce the numeric value.

Indenting text and controlling leading and tracking values

You can control text formatting in Adobe Muse the same way you update text content in word processors and many other image-editing tools. The Text panel includes many additional settings, some of which are not displayed in the Control panel when text is selected.

Follow these steps to indent the first line of text in a paragraph:

The Letter Space option in the Text panel enables you to define the amount of space between each character. It is especially useful for text effects and to make ornate or stylized fonts easier to read on the web.

You can apply letter spacing to selected text by entering the number of pixels in the Letter Space field. Alternatively, you can click the up and down arrows to increment or decrease the value until you achieve the desired effect.

Leading is another helpful feature you can use to control the format of text in paragraphs. Leading enables you to adjust the space between lines of text. The Leading feature is available in both the Control panel and the Text panel.

The other four typography controls available in the Text panel are:

Left Margin and Right Margin

As you would expect, these control the space between the characters on either side of the text frame, and the text frames' border. These settings are very similar to setting the Padding values in the Spacing panel, except you select the text frame with the Selection tool, (rather than selecting the text content with the Text tool) to edit padding values.

Space Before and Space After

You can use these settings to control the amount of space (in pixels) that is displayed before or after a hard paragraph return. These settings enable you to display more or less white space in between a set of paragraphs that are in a single text frame.

Be sure to experiment with using all of these settings in the Text panel to learn how you can control the display of text content on the pages you design.

Place text from a text file onto a page

The source files that contain the body copy for this sample project are located in the Kevins_Koffee_Kart folder. The text is saved as TXT files. In Adobe Muse, you can place a whole text file to add type to your page. There's no need to open text files in a text editor and copy the lines of text to paste them on your pages.

Working with Synchronized text

For information about working with Synchronized Text, see Working with Synchronized Text.

Working with text in responsive layout

To learn how to format text in responsive layout, see Format text in responsive layout.