Add code
Open Code in the Studio, paste an example and click Save code.
The code is added to every page's <head>, including the Studio preview. Copy the complete example, including its tags. You can add examples below any code you already have.
Add styles
This example sets the page's background and text colours and adds space between rows.
Background Text Row gap 32px
Site code
HTML
<style>
body {
background: #faf7ee;
color: #352319;
}
main > .w9-row + .w9-row {
margin-top: 32px;
}
</style>A component with its own colour styles can override the colours set on the page.
Add a font
This example loads Rubik from Google Fonts and uses it for text and form controls.
Aa
Make it yours.
Rubik / 400 · 500 · 700
Site code
HTML
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<style>
body,
button,
input,
select,
textarea {
font-family: 'Rubik', sans-serif;
}
</style>Add a small script
This script underlines the link to the current page inside a <nav> element.
Example · on /aboutHomeAboutContact
Site code
HTML
<style>
nav a[aria-current='page'] {
text-decoration: underline;
text-underline-offset: 4px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('nav a[href]').forEach(function (link) {
var url = new URL(link.href)
if (
url.origin === location.origin &&
url.pathname === location.pathname &&
!url.hash
) {
link.setAttribute('aria-current', 'page')
}
})
})
</script>