Mutiny allows users to add new HTML elements to their websites easily. Some common use cases for adding new HTML elements include:

• Adding a secondary CTA, or an additional location for a primary CTA
• Adding testimonial sections to showcase social proof and build trust with potential customers
• Copy a section from another page

Selecting the correct element

Added elements will always be attached to an already existing element on your page. Before adding an element, its important to understand how elements are added to your experience so that you can select the right element from the start. You can add elements to any page content experience.

When you add an element, you can choose to add the element as a "child" of the element you've selected, or as a "sibling" of the element you've selected. Adding an element as a child will nest that element underneath the one you've selected in the DOM tree, whereas adding it as a sibling will nest it next to the element you've selected in the DOM tree (i.e. nested under the parent element of the one you've selected). Lets take a look at an example.

In the screenshot below, we're hovered over a <div> element that has two child <div> elements. The <div> we're hovered over is the block that contains both buttons inside it of it. If we wanted to add a third button to this page, we can either select the parent <div> (the one thats hovered in the current screenshot) and add a child element, or select one of the child <div> elements (i.e. one of the buttons) and add a sibling element.

How to add an element

1. Navigate to the Mutiny editor and select the element you'd like to add an element to. You can learn more about selecting elements in the editor here.
2. Under the "Layout" section on the right, select "Add child" or "Add sibling".
3. Select the type of element you'd like to add by selecting the dropdown under the "Type" section. The default is "Container <div>".
4. You can then input your content into the content box, and style it appropriately.

FAQs

How can I add elements that exist elsewhere on my site?

To do this, navigate to the page you'd like to copy the element from.

1. Right click the element you'd like to copy and then click "Inspect".
2. Hover over the element you'd like to copy. You can hover over different elements in the inspector to ensure that you're copying the correct element.
3. Right click the element, click "Copy > Copy element".

I've added an element but it isn't styled correctly.

If you notice that your element isn't styled correctly, you may need to adjust the styling. You can do this by adding inline styles directly into the HTML, or adding classes and styles under the "Code" section in the editor. Note that any styles and classes added here will be applied to the added element, not the HTML within the content box.