Welcome to the Graphic Styler Widget

Style the elements on your Adobe Muse website with the Graphic Styler widget from Muse For You.

There are 3 widgets included. They are - 'The Graphic Styler', 'The Graphic Styler on Scroll', and 'The Graphic Styler on Click/Hover'. On this page, we are using all three of them.

01

How to use the widget and what's what?

In this section and the section above, we have applied 'animista.net' animations to the rectangles, text, image, and the button using all three Graphic Styler widgets.

Drag 'The Graphic Styler' widget from the Library Panel (Window > Library) and place onto your Adobe Muse website. It can be placed off-canvas.

Visit any website that outputs CSS code. For easy reference, there's a section called 'Websites' within widget options with links to a few websites which could be useful.

Click here for click effect

Customize your animations, gradients, patterns, or box shadows on these websites and paste the generated CSS code in the 'Graphic Style Code' section in the widget options.

Not all the CSS codes have keyframes. If the CSS code that you generated has keyframes, copy and paste it in the 'Graphic Style Keyframes' section.

02

What to do after generating the CSS code?

Note: If you are applying the CSS code to a rectangle or ellipse, it cannot be transparent. No matter what color you choose for the rectangle/ellipse, the CSS code will override it.

After you have generated, copied, and pasted the CSS and/or Keyframes code, select the element on your website to which you would like to apply that code.

Assign a graphic style name to the element and enter in that name in the 'Graphic Style Name' section within widget options, and done!

Adding box shadow and pattern

As aforementioned, there are links to websites in the widget options to generate CSS code for animation, gradient and gradient animation, box shadow, and pattern.

Additional Information

Put a unique instance number for each new Graphic Styler widget.

  • For both images in this section, we have created 3 rectangles (one over the other). The one below has an image, the above has a gradient animation, and the one at the very top has a pattern applied to it with the 'Graphic Styler' widget.
  • To have the graphic style applied when scrolling to the element install the “The Graphic Styler On Scroll Widget.” Place “The Graphic Styler On Scroll - Add First” at the top of your Adobe Muse website before beginning. This widget is mostly for animista.net animations.
  • To have the graphic style applied when clicking or hovering over the element install the “The Graphic Styler On Click-Hover Widget.” This widget is mostly for animista.net animations.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials