Versions Compared

Old Version 13

changes.mady.by.user Rebecca Buesseler

Saved on

compared with

New Version Current

changes.mady.by.user Will Castleberry

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

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

Table of Contents

Styles 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

To edit styles:

  1. Open the Design toolbar by clicking  on the main menu.

  2. Select Styles.

  3. Select

a text group or feature

  1. a text group or feature you would like to change. 

  2. Modify the

desired properties. 

  • Save and confirm changes.

    • Image Removed

    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.

    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. 

    1. desired properties. 

    2. Save and confirm changes.

    		Image Modified

    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

    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.

    Image Removed
    Image Added

    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

    Info

    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.

    		Image Modified

    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.

    		Image Modified

    Figure C

    Media

    Info

    Information

    Display

    • Photo Caption. This is text that appears below images in features with images (excludes Galleries). See Figure D.

    Image Removed
    Image Added

    Figure D

    • Lightbox Caption. Edits the Title and Description that appear when you click on an image in a Grid Gallery.
      See Figure E.

    		Image Modified

    Figure E

    • Project Thumbnail Title. The titles that appear below the thumbnails of the projects section. See Figure F.

    		Image Modified

    Figure F

    Info

    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.

    		Image Modified

    Figure G

    Text Group Properties

    Info

    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.

    Image Removed
    Image Added

    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. Learn more.

    • 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. Click here for a cool background trick.

    • 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.

    Note

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

    Tip

    For further assistance, contact us at website@spoton.com or at (415) 306-9522.