Styles Features

This content is intended for SpotOn Website customers whose Website was created prior to October 2023. For customers of SpotOn Website after October 2023, please visit this FAQ for assistance.

Quick Links

1 Styles Features
- 1.1 Editing Styles
- 1.2 Text Group Styling
- 1.3 Site Header
- 1.4 Site Navigation
- 1.5 Content
- 1.6 Media
- 1.7 Site Footer
- 1.8 Text Group Properties
2 Other Style Features

Effortlessly edit individual fonts, colors, and sizes of text groups, as well as make changes to other features such as buttons, links, and social icons to your website.

Editing Styles

Action	Display

Action

Display

To edit styles:

Open the Design toolbar by clicking on the main menu.
Select Styles.
Select a text group or feature you would like to change.
Modify the desired properties.
Save and confirm changes.

Text Group Styling

One of the functions of the Styles menu in the Design toolbar is to apply font, size, and color properties to text groups. A text group refers to the text on your website that belongs to the same identifying label such as a Headline, Sub Headline, Paragraph Title, or Paragraph Text.

If you edit the style of a text group, all text belonging to that group will change throughout the whole website.

Site Header

Information	Display

Information

Display

The Site Header is the top-most part of your website. The text groups shown are the website Title and Subtitle. Site navigation is also contained in the Site Header.

Title. The main title that appears at the top of your website close to the navigation menu when a logo is not used. See Figure A.
Subtitle. The main subtitle of your website that appears just below the title when a logo is not used. See Figure A.
Promo Bar (Sofia Theme Exclusive). The thin bar appearing above the header.

Figure A

Site Navigation

The site navigation is how visitors will browse your website. The Main Navigation and Subpage text groups belong to this category.
Main Navigation. The menu displaying all the pages of the website. Usually appears at the top. See Figure A.
- Subpage. The pages nested as submenus of the main navigation. See Figure A.

Content

Information	Display

Information

Display

Headline. Normally found in banners, it is the largest text on the body of the website. See Figure B.
Sub Headline. Normally found in banners, it is the second largest text and appears under the headline. See Figure B or Figure D.

Figure B

Small Sub Headline. Smaller than the Sub Headline and found as section titles. Usually bold by default. See Figure C.
Paragraph Title. The title of each paragraph section. Slightly smaller than the Small Sub Headline by default and not bolded. See Figure C.
Paragraph Text. The main body of the text of the website. All paragraphs and long text belong to this group. See Figure C or Figure D.

Figure C

Media

Information	Display

Information	Display
Photo Caption. This is text that appears below images in features with images (excludes Galleries). See Figure D.	Figure D
Lightbox Caption. Edits the Title and Description that appear when you click on an image in a Grid Gallery. See Figure E.	Figure E
Project Thumbnail Title. The titles that appear below the thumbnails of the projects section. See Figure F.	Figure F

Site Footer

Information	Display

Information

Display

The Site Footer contains the Footer Title, Subtitle, Navigation, and Copyright text groups.

Learn more about the Site Footer.

Footer Title. The first and largest text in the footer.
Footer Subtitle. The second and slightly smaller text in the footer.
Footer Navigation. The navigation menu in the footer.
Footer Copyright. The smallest text in the footer. Usually used for Copyright notes.

Figure G

Text Group Properties

Information	Display

Information

Display

Font Type. Applies different font types to text groups.
Style. Applies Bold or Italics to text groups.
Color. Changes the color of a text group using a color picker or HEX code.
Font Size. Increases or decreases the font size of a text group.
Letter Spacing. Increases or decreases the space between characters in a given text group.
Line Height. Increases or decreases the space between lines in a given text group. (Prevents text from overlapping in mobile.)
Upper Case. Toggle on to make all characters upper case in a text group.
Save. Saves and applies all changes to the text group.
Cancel. Cancels changes made to a text group.
Reset. Restores theme defaults for that text group.

Other Style Features

There are other features besides text groups that you can customize in the Styles menu.

Promo Bar (Sofia Theme Only). Adjust the font color, type, and size of the promo bar in the Sofia Theme header.
Header Background. Change the color of the header background. Set to transparent will show the color or image you have set for your Body Background (white is the default).
Link. Customizes the color of links. Like in text groups, the Style dropdown menu will allow you to set bold or italics to the text. The Link Color is the color in which links will appear when unclicked. The Hover Color is the color a link will change to when you position your mouse over it.
Button. Customizes the color of buttons. Like with text properties, you can select a font (type), style, size, uppercase, and letter spacing. The Button Text Color is the color in which the call-to-action (CTA) in your button will appear. The Button Color is the color of the button itself. Learn more.
Social Icons. Customizes how social icons in the body of the website appear. Scalable Vector Graphic (SVG) icons are icons in their original full color. Whereas Font icons can have the color customized to match your website style. Each icon type is available in classic, outline, rounded/circular, and square styles.
Body Background. Select a Background Color or Image for the entire website.
Icon Styling. Customizes the (hamburger) icon on mobile, and the gallery arrows < > (carrots).
Footer Social Icons. Customizes how the social icons in the footer appear. The same features as Social Icons apply.

The Hover Color feature may not be available in all themes.