This article content is for personalizations on your existing website. Looking to build 1:1 Mutiny-hosted microsites for your target accounts? Visit our Campaigns help docs here.
Where to add HTML or CSS styling in Mutiny?
Page content experiences
Style rules and HTML elements can be added directly to the site content via the Content block, or you can add style rules to the Styles settings under the Code dropdown.
Component experiences
Component styles can be added to the Experience style settings, and these rules will be applied to all component experiences.
If you want to make style changes to just one of the component experiences, and not all of them, you can add style rules to the component text, or through the Custom heading styles and Custom button styles settings in the Style tab.
Code snippets for text
Use Case |
HTML Snippet(s) |
CSS Snippet(s) |
|
Capitalization |
Sentence case: <span style="text-transform:none">This is some text.</span> Title case: <span style="text-transform: capitalize">This is some text.</span> Lowercase: <span style="text-transform:lowercase">This is some text.</span> Uppercase: <span style="text-transform:uppercase">This is some text.</span> |
Sentence case: text-transform: none; Title case: text-transform: capitalize;
Lowercase: text-transform: lowercase; Uppercase: text-transform: uppercase; |
|
Text Color |
<span style="color:#3a0068">This is some text.</span> |
color: #3a0068; |
|
Font Size |
<span style="font-size:18px">This is some text.</span> |
font-size: 18px; |
|
Font Weight |
<span style="font-weight: 400;">This is some text.</span> |
font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; A weight of 400 is normal body copy with 700 being the bold default. |
|
Bold |
<b>This is some text.</b> |
font-weight: bold; |
|
Italics |
<i>This is some text.</i> |
font-style: italic;
|
|
Underline |
<u>This is some text.</u> |
text-decoration: underline;
|
|
Line Height |
<p style="line-height:18px">This is some text.</p> |
line-height: 18px; |
Code snippets for images and videos
Use Case |
HTML Snippet(s) |
CSS Snippet(s) |
|
Add an Image |
<img src="https://logo.clearbit.com/mutinyhq.com"> |
- |
|
Add an Image with Link |
<a href="https://www.mutinyhq.com/"><img src="https://logo.clearbit.com/mutinyhq.com"></a> |
- |
|
Add a Video |
Use the embed code from your video hosting platform (YouTube, Vimeo, etc.). |
|
|
Size |
By Pixel Width: <img src="https://logo.clearbit.com/mutinyhq.com" width="500"> Height: <img src="https://logo.clearbit.com/mutinyhq.com" height="500"> By Percentage <img src="https://logo.clearbit.com/mutinyhq.com" width="90%">
By using either width or height, you'll maintain the asset's aspect ratio. |
By Pixel Width: width: 150px; Height: height: 50px;
By Percentage Width: width: 75%; Height: height: 75%; |
Code snippets for device type
You can use CSS to customize certain personalizations based on device type.
NOTE: We recommend using this to make minor optimizations to an experience based on device type. If you're making more substantial changes (i.e. removing certain elements based on device type), you may be introducing extra variables into your test that wouldn't be taken into account by your experience analytics. In these cases, we recommend using "Device Type" in your segment instead.
Use Case |
HTML Snippet |
|
Change the color of your |
<style> |
|
Change the background color of your site when the browser window is 800px wide or larger. |
<style> |
Need Help?
If you have questions or need help, the Mutiny Support team is here for you! You can submit a support ticket at the bottom of this page or reach us at support@mutinyhq.com.
Related to
Comments
0 comments
Please sign in to leave a comment.