When you add a new style with the + symbol, you will be creating a duplicate of the currently selected style. The duplicate will then appear in the list of styles and will have the same name as the currently selected style with the addition of a number in brackets after the style name.
You would then edit the style name by clicking on the edit icon next to the style name.
After editing the name, you will be shown the normal style panel in Sparkle where you will be able to style your new text style with font, size, colour, spacing etc. You will also be able to assign it to a specific tag.
In my example, I assigned my new style to be an h4 tag.
When all your styling has been done, click on the button that says Apply Changes. Your new style is now ready to go.
With reference to your other questions, Sparkle uses the first 3 heading tags in its default styles as well as the p tag. This is a sort of âbest practiceâ approach to using heading tags. Many people do not need to use all six heading styles so I think Sparkle just reflects that. You, on the other hand may have a different need, so you can create all the styles you wish and apply any heading tags you think are appropriate. The default options are really there as your launchpad, allowing you to create a site right out of the box without having to consider custom styling options.
One thing to note about adding custom styles - they are project specific and will be retained as part of your sparkle project file. So, donât expect them to appear in new projects you create. Each project will typically have itâs own unique styles. Itâs one of the first things I do when starting a new project. I edit the default styles to reflect the typography I plan to use in the project and add additional styles where needed. I also edit the colour palette to reflect the colours I intend using throughout the project. This saves me a lot of time later.
I am confused about the protocol for headings. Suppose I have a website to sell hats, using 6 pages: Home, Menâs Hats, Womenâs Hats, Childrenâs Hats, About, Contact. On each page I want to use the name of the company, say âNice Hats.â Then on each page I want to describe what is on that page (e.g., âThe best menâs hats in the worldâ). That would be followed by descriptions of the hats.
Would I use:
Title (H1) for âNice Hatsâ
Heading H2 for âThe best menâs hats in the worldâ
Heading H3 for descriptions
⌠or
Title (H1) for âNice Hatsâ
Heading H1 for âThe best menâs hats in the worldâ
Heading H2 for descriptions
Google & the likes expects one H1 per page which is like the title of your web page, aka the chapter of the book⌠To introduce more than 1 H1 per page will have Google and the likes go into a tailspin which messes with how your website page is indexed and in turn affecting your whole websiteâs ranking.
You can have more than 1 H2 headings per page but I wouldnât go crazy and I generally only keep it to one because it is more there to support your H1 Title. Your H3, H4, ⌠can be used multiple times per page without any negative outcome.
You should use H1 to tag a singular UNIQUE element of the page. In your example, the unique element would be the title âThe best menâs hats in the worldâ A non-unique element (one that could appear on a number of pages) could be tagged as H2 e.g âNice Hatsâ. The descriptions do not have to have a heading tag at all, but if you wanted the description as a heading, H3 would be the way to go because it follows logically from H2. What you would try and avoid is leaving gaps in the heading structure of your page. For example, donât go from H2 to H4 - leaving out the H3.
The H1 tag thing was really a hangover from pre HTML5 days, Although the one H1 per page rule is still commonly applied, it isnât strictly necessary to follow this rule in HTML5. This is because HTML5 introduced the article element, which essentially allowed for sections to be created in a page. Furthermore, each article section can have itâs own tag structure - including H1. So, I guess it all depends on how Sparkle creates its html output. If it utilises the article element, then it wonât find anything wrong with seeing multiple H1 tags. Below is an example from the webdesign.tutsplus website that illustrates how article sections are used to effectively allow multiple H1 tags without adversely affecting SEO. It will be seen that you can have an H1 tag for the whole page and then have additional H1 tags within each article section.
To be sure that everything is being formatted correctly by sparkle, you should take a look at the HTML output by Sparkle. If it doesnât include article elements, it may be best to stick to the old rule of only using one H1 per page.
I am always placing myself in the Userâs shoes and placing myself under time restraints when viewing a site because this is how the typical User will interact with your site. It needs to flow (and be blocks of content) because most will skim the content and if it hasnât a hierarchal structure to it (title (H1), supporting title (H2), sub-headings (H3), content ( P), etcâŚ) then this will all the more confuse the User which leads to random interaction (darting-eyes), frustration, and then NEXTt!
This is even more important on mobile!
Page structure is not only a science but an art and it leads the User to an outcome. The more confusing you make it with challenging H1 headings throughout the page (what is the essence of the page?) the more the User has to use their brain-power which leads to âthis is all too hardâ!
Iâm afraid to add that with all the time I have spent with my nose in code it never was appreciated by the User⌠They donât see it and they donât care. All what they want is an easy to understand page that flows and has them achieve their needs for being there.
