If your paragraph style name contains spaces (many MuseThemes template paragraph style names do), simply replace the spaces with hyphens or underscores. While the paragraph styles in Muse can accept spaces, our widgets cannot because they create CSS style names (which cannot use spaces) when published. Make sure that there are no spaces in the name. Start by copying the paragraph style name.Now that we have headlines throughout the site with the same paragraph style applied, we can set all of these headlines to scale, in one simple action.Now to apply the same parapraph to other headlines throughout the site, simply select another headline, open the Paragraph Styles panel, and click on the paragraph style you previously created. Select one headline text box, and apply a paragraph style. For existing sites built from scratch that don't use paragraph styles, you can easily add them. MuseThemes templates generally use paragraph styles for all of the text throughout.In this scenario, we'll use headlines as an example. To apply text scaling to exisitng sites and templates: If your site uses paragraph styles applied to headlines and body text throughout your site (MuseThemes templates typically use paragraph styles for all text), you can quickly apply this site to text across your entire site. Simply try to ensure that the min and max widths don't overlap.Ī great way to use this widget is to use it with templates or exisitng sites. Again, the above breakpoint ranges are just examples.In this sense, examples of four breakpoint ranges could be: If you're using individual scaling settings at multiple breakpoints, it's best practice to set the Breakpoint Min Width to the beginning of the breakpoint range.If you wish to have your text scale at one rate across all screen sizes, you may set the first section (or any section to cover all possible widths.Our widget works independantly from the breakpoints in Muse. If your site is responsive and contains breakpoints, the breakpoint settings in the widget option panel (Breakpoint Min Width & Breakpoint Max Width) do not have to match the breakpoints set in the Muse site.This widget may be used in responsive or non-responsive sites.The font scaling options set in any breakpoint section can apply to any pixel width range you like. While the widget includes sections for 4 breakpoints, you are not required to set them all up.So if you wish to have unique scaling settings for the mobile breakpoint, possible entries would be 0 for the Breakpoint Min Width and 479 for the Breakpoint Max Width, assuming that the next set of scaling settings began at 480. Breapoint Min Width & Breakpoint Max Width: These settings set the width range (in pixels) that the font scaling settings will apply to.When previewed, the text will appear closer or further from the element beneath.Īll font scaling settings in the widget accept decimal-based entries for fine-tuned control Bottom Margin (%): This setting determines the margin of space beneath the text.However, keep in mind that this setting accepts fine settings such as 0.54. For most instances, you will use the default setting of 1%. Line Height (%): This percentage-based setting applies to the height between lines of text.Then use the Font Size (vw) unit in the widget option panel to match the font size appropriate for the design. We suggest styling text as normal in Muse, appropriate for the design. The Font Size (vw) set in the widget option panel overrides the font size set in Muse. Try out the default setting of 6 to get started. Overall, expect to use lower numbers for vw-based font sizes. So a setting of 10 represents 10% of the viewport. The number entered represents a percentage of the viewport.
Viewpoint width (vw) units are relative to the viewport (the screen space). This setting is different from the standard fixed font size units you may be used to. Font Size (vw): The font size setting uses viewport width units.Open the first section: Mobile Breakpoint.Define the style name in the Paragraph Style field.If you're using existing text, apply the paragraph style to the existing text. Apply a paragraph style to the text box.We suggest placing the widget out of the way, off canvas. Placement of the widget isn't important.Drag the widget from the library and drop into your project in Design mode.
0 kommentar(er)
