Buttons
State buttons are used throughout the Trek template. They are used to combine different objects to create a unified hover effect on the text and image.
Step One
Go to the Widgets Library > Buttons > State Button. Drag the state button onto the page.
Step Two
Right click on the state button and select Clear All Styling. Repeat this and select Clear Widget Contents. Now it’s ready for full customization.
Step Three
Adjust the size of your state button as desired and drag and drop any text, images, or objects that you want to include in the state button.
Rollover Effects
To customize the rollover effects, select the state button, go to the upper left and select State Button: Normal. Now you can select the state that you want to customize. You can do some of the following:
Change the opacity of individual objects
Change the font color, size, or spacing
Enable a fade transition
Here’s a great video (5 minutes) by Adobe Muse that shows how to use State Buttons with rollover effects.
Forms
Trek has pre-designed and responsive form areas for your use for both the Registration and Contact segments of the template.
Customizing the Contact Form
- Select the form group.
- Click the blue arrow to open the forms’ options panel.
- Customize the form options.
- Use the Fill and Stroke panel to customize the colors of your form.
Styling Form States
You can customize the following states of your forms:
Empty- the Normal state of your form when empty.
Non Empty- the Normal state of your form when filled in.
Rollover- the state of your form when being hovered over.
Focus- the state of your form when selected.
Error- the state of your form when something has gone wrong.
Select the form field and the state you’d like to change in the States Panel and customize each field’s state using the Fill and Stroke panel.