Advanced Design

This lesson covers how to use the Creative Agent to add background gradients, sticky navbars, anchor links, and hover effects to make your assets feel more polished and professional.

Next Lesson:📄 Templates

Background Gradients

Select the section where you want the gradient, then open the Chat tab and describe what you want. The agent has full context of your brand theme, so you can reference your brand colors directly in the prompt. For example: "Create a background gradient using the light blue background to the light purple background colors."

From there, you can keep refining with follow-up prompts. Change the direction, swap the colors, or adjust the transition, and the agent will update accordingly.

Sticky Navbars

To make your navbar stay fixed at the top of the page as visitors scroll, select your navbar section, open the Chat tab, and say: "Make the nav bar sticky." The agent will apply the right CSS to keep it pinned. Selecting the navbar before prompting is optional, but it gives the agent clarity on which section you are targeting.

To test it, open a preview using the Preview button in the top right and scroll down the page to confirm the navbar stays locked in place.

Anchor Links

Anchor links connect a CTA button to another section on the same page so visitors are scrolled directly to that section when they click. A common use case is linking a header CTA to a form embedded further down the page.

There are two ways to set this up. The first is through the agent. Select the button you want to link, open the Chat tab, and tell the agent which section to link to. For example: "Set the link for this button to the 'See how top marketers use Mutiny' section below."

The second way is manual via the Design tab. Select the section you want to scroll to, open the Design tab, and click Copy Link to Section. Then select your CTA element, open its Design tab, and paste the link into the link field.

Hover Effects

Hover effects are a subtle way to make your page feel more interactive. You can add them to buttons, logos, cards, or any element on the page.

Select the element you want to add the effect to, open the Chat tab, and describe what you are looking for. For example: "Add a hover effect to the logos," or "Add a scale-up hover effect to this button," or "Make this card slightly lift with a shadow on hover."

Preview the result using the Preview button, and send a follow-up prompt to adjust the intensity if needed.