Site User Guide
A quick reference for your site’s styles, features, and tutorials—everything you need to keep it looking great and working smoothly.
H1 and H1 Italicized
Spaces with presence
( & Purpose )
H3 and H3 Italicized
Spaces with presence
( & Purpose )
H2 and H2 Italicized
Spaces with presence
( & Purpose )
H4
Guided with Giana
Headers should be used in descending order. There should only be one H1 on each page, which is why your H2 is formatted with exactly the same styles.
Paragraph 1
Giana Shorthouse is the founder and creative force behind Studio Giana, known for her understated yet highly considered approach to design.
Paragraph 1 Italicized — This is a dupe for H4
Giana Shorthouse is known for her understated yet highly considered approach to design.
Paragraph 2 — Body Copy
We work with clients who appreciate thoughtful design—who care about the details, the materials, and the feeling a space evokes. Our approach is highly tailored, ensuring every choice is intentional and aligned with your vision.
Paragraph 3
About
Projects
Bespoke
Guided
FAQ
Italicized
Use headings for titles, not paragraphs. Headings are meant to introduce sections. If you put full sentences or paragraphs inside them, it can hurt readability and confuse search engines.
That’s why your P1 is a dupe for H4
Primary
Secondary
Tertiary
Make sure to set your buttons to “fit.”
Edit > Design > Fit
Give them extra horizontal space in the block on desktop so they don’t collapse on mobile view.
Special Tricks
Add a specific link to activate your dots. Don’t worry - the text won’t be clickable.
Your dots scale with size of the text they are used on.
#brown-dot-top ➝ Used when there are two lines of text
You also have a #green-dot-top
Spaces with presence
#hollow-dot
( & Purpose )
#brown-dot ➝ Centers the dot on the text exactly
Spaces with presence
( & Purpose )
Spaces with presence and purpose
#green-dot
LINK CODES
#slide-down
#image-border
MARKDOWN CODES
Add a ‘markdown’ block to a section and type Section Styles + the code word to apply effects to the elements in the section
text-center-mobile - centers text on mobile view only
button-center-mobile - centers buttons on mobile view only
image-border - applies image border to ALL images in section
background-split-left
background-split-right
Background image takes up 50% of section on every screen size
background-split-left-40
background-split-left-40
Background image takes up 40% of section on every screen size