While editing a page in Design view, use the Text tool to create a text frame. If you want to copy text from another file source, copy the text and within Adobe Muse, use the Text tool to click inside the text frame. Paste the text content you copied into the text frame.
Add text and text frames in Adobe Muse
Learn how to work with text in Adobe Muse. Modify appearance of text, add padding, set indent values, and more using the Text panel.
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.
Creating and styling text frames
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:
Use the Text tool to select any line of text.
In the Text panel, use any of the following settings to format the text:
- Font: Droid Serif Bold (or any serif font of your choosing)
- Font Size: 14Font
- Style: BoldFont
- Color: #A6342A (red)
- Leading: 120%
Format text further using any of the following additional text formatting options:
While the text is still selected, click the New Style button in the bottom of the Paragraph Styles (Window > Paragraph Styles) panel. Double-click the new paragraph style and rename it: food-header.
This will make it easier to reapply the same formatting to other text headers in the menus.
Select the next breakfast item with the Text tool: Croissants $3
Click the paragraph style named food-header to apply the same formatting to the second breakfast item.
Repeat steps 7 and 8 to select and apply the food-header paragraph style to every breakfast item in the text frame (all lines that include the dollar sign).
Starting from the top, use the Text tool to select the first breakfast item description: Bananas, mandarin oranges, red delicious apples, mixed berry cup.
Click the body paragraph style listed in the Paragraph Styles panel, to apply the formatting to the line of text.
One by one, select each of the remaining description text below the breakfast items, and apply the body paragraph style.
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.
Select the text frame containing the breakfast menu with the Selection tool.
In the Control panel, set the stroke width to 5 and the stroke color to black.
Use the Fill menu to set the fill color to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F). Click the folder icon next to the Image section and browse to select the file in the sample files folder named bg-texture.png. Click OK to close the Import dialog box. Set the Fitting menu to Tile, and then click anywhere else on the page to close the Fill menu.
If needed, use the Selection tool to drag the handles of the text frame and resize it, until the text fits. The dimensions of the breakfast menu on the live sample site are approximately 800 pixels wide by 440 pixels high.
The tiled background image with the cream fill color adds a parchment-like effect to the text frame and the dark stroke helps it stand out from the background.
Now you'll add a title to the top of the breakfast menu, to identify it for visitors.
Use the Text tool to create a text frame directly above the Breakfast menu, aligned to the top left side.
Type the word: Breakfast.
In the Text panel, choose the following settings to format the text:
- Web font: Kaushan Script (or any script font you prefer)
- Font size: 32 Color: #70909D (In part 3, you renamed this color blue-menu)
- Leading: 120%
- Alignment: Centered
While the text is still selected, click the New Style button in the bottom of the Paragraph Styles panel to create a new paragraph style. Double-click the new paragraph style and rename it: menu-label.
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.
Use the Selection tool to select the text frame with the word Breakfast and the text frame that contains the breakfast menu.
Press and hold Option (Mac) or Alt (Windows) and then drag the set of two text frames down on the page, to create a duplicate copy. Drag the copy down and keep it vertically aligned with the original (the smart guides that temporarily appear indicate when the sides and centers are aligned). The duplicate set of text frames should be approximately 430 pixels below the original set.
Use the Text tool to select the duplicated text field's label. Replace the word Breakfast with the word: Lunch.
Temporarily switch from Adobe Muse to your desktop. Open the sample files folder and locate the file named text-food-lunch.txt. Double-click the file to open it in a text editor. Copy the first line of text: The JR $9.
Return to Adobe Muse. Use the Text tool to click inside the lunch menu text frame. Paste the text content you copied into the text frame, replacing the existing first food item listed: Croissants $3.
Repeat steps 4 and 5, to copy each of the lines with dollar signs from the text-food-lunch.txt file to replace the items in the lunch menu.
Continue populating the lunch menu, by copying each of the descriptions in the text-food-lunch.txt file and pasting the descriptions one by one on top of the existing descriptions in the duplicated lunch menu. This strategy ensures that the styles you applied to the text content are maintained.
Repeat steps 1 through 7 to select the two lunch text frames, duplicate them, drag them down about 430 pixels below the existing lunch menu, rename the label to Dinner, and then copy the items in the text-food-dinner.txt file to populate the dinner menu.
Repeat step 8 once again. This time, rename the duplicated label: Dessert. Copy the lines of text from the text-food-dessert.txt to finalize the dessert menu.
Use the selection tool to reposition each of the four text frames as needed, so that the four text frames are aligned vertically with approximately 120 pixels between each region.
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:
If you haven’t done so already, draw a text frame on the web page where you want to insert the character.
Select Window > Glyphs to bring up the Glyphs panel.
Use the drop-down to select category of the character you want to insert.
The Glyphs panel displays all characters of a selected category. Click the character you want to insert.
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:
Use the Type tool to select some text.
Update the Indent value in the Type tool to the desired pixel value.
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.
Either choose File > Place or use the Place keyboard command, Command+D (Mac) or Control+D (Windows®) to start the Place operation. This is the same process you'll use when placing image files on a page.
In the Import dialog box, navigate to the Kevins_Koffee_Kart folder and select the text file named TextThreeSpeed.txt.
Click the light gray larger container in the Accordion widget, below the header TASTING NOTES, to place the text file's contents in the top Accordion panel.
After placing the new text frame, use the Selection tool to reposition it below the TASTING NOTES header, and drag the handles on the top, bottom, and sides of the text frame to expand the light gray container as needed to make both the header and the text below it fit. As you click and drag the text you just placed, you can tell when it is aligned to the left side of the header text because a blue guide temporarily appears, when the two items are lined up. Notice that in addition to dragging the handles to resize the placed text, you can click the gray container and drag the bottom handles to expand the height of the container.
While the light gray container is selected, click the Fill color picker and set the panel's background color to No Fill.
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.