Option Panel

Colors

This section of the Tutor Starter theme customization option lets you define the color attributes related to your theme elements. You will be able to customize

  • Body Background color: Select a color you want to set for the whole background of your page. Define any color from the color palette and you can also choose the intensity of the chosen color. There is also a default button to reverse the applied settings
  • Body Text Color: Define the color you want to choose for the texts found on the page or post you are setting up. Select any color from the color palette and also choose the intensity of the color. Also, use the default button to reverse any applied colors.
  • Link Color: Use the color palette to set the link text colors. Also, use the slider to define the intensity of the applied color. And if you want to clear any applied color click on the default button.

Layout

Define the layout settings using the customization options found here.

  • Content Width: Define the content width using the screen pixel size choosing settings. You can set the content width pixel size using the number box or use the increase/decrease button to set your desired size.

Typography

  • Body Font: Choose a font family from the list for your body fonts. 
  • Body Typography: Set the typography for the body of the page and posts of your site.
  • H1-H6 Font Family: You will find the following features for all the header families of the texts found on the page/post.
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.

Header

Define the attributes of the header portion of your post/page. You will be able to customize the following options.

  • Logo: Upload an image as your logo for the header section of your site. Please note that the default logo dimension is 88×25. To get the best results we suggest you use the default resolution or the 2x version of the default resolution to get the best result.
  • Select Header Type: Chose the header type from the preset design types. You can choose from
    • Fullwidth
    • Fullwidth Transparent
    • Standard
    • Transparent
    • Centered Logo
  • Header BG Color
    • Define the header background color from the color palette. Use the slider to set the intensity of the color
  • Menu Link Color
    • The Menu link color option lets you define the link color in the menu bar section.
  • Menu Link Active and Hover Color
    • Define the menu link color in their active state. Once you hover over them they will change to the color that you chose.
  • Menu Typography
  • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.
  • Cart Color: Choose the color you want to set for the cart icon. You can set any color you prefer from the color palette.
  • Show Search Button: Use the toggle button to either enable or disable the search option in the header section.
  • Button BG Color: Define the button background color from the color palette. Increase or decrease the intensity of your chosen color using the slider. 
  • Border Color: Set the color of the border for the header section. 
  • Button Width: Set the button width using the textbox option. You can also increase or decrease the button width using buttons.
  • Border Radius: Define the border radius of the header section.
  • Button Text Color: Select the color from the palette and set the text color for the button.
  • Button Text: Write down the button text you want to set for the button found in the header section.
  • Button Link: Set the button link for the button text. 
  • Button Typography

Colors

This section of the Tutor Starter theme customization option lets you define the color attributes related to your theme elements. You will be able to customize

  • Body Background color: Select a color you want to set for the whole background of your page. Define any color from the color palette and you can also choose the intensity of the chosen color. There is also a default button to reverse the applied settings
  • Body Text Color: Define the color you want to choose for the texts found on the page or post you are setting up. Select any color from the color palette and also choose the intensity of the color. Also, use the default button to reverse any applied colors.
  • Link Color: Use the color palette to set the link text colors. Also, use the slider to define the intensity of the applied color. And if you want to clear any applied color click on the default button.

Layout

Define the layout settings using the customization options found here.

  • Content Width: Define the content width using the screen pixel size choosing settings. You can set the content width pixel size using the number box or use the increase/decrease button to set your desired size.

Typography

  • Body Font: Choose a font family from the list for your body fonts. 
  • Body Typography: Set the typography for the body of the page and posts of your site.
  • H1-H6 Font Family: You will find the following features for all the header families of the texts found on the page/post.
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.

Define the attributes of the header portion of your post/page. You will be able to customize the following options.

  • Logo: Upload an image as your logo for the header section of your site. Please note that the default logo dimension is 88×25. To get the best results we suggest you use the default resolution or the 2x version of the default resolution to get the best result.
  • Select Header Type: Chose the header type from the preset design types. You can choose from
    • Fullwidth
    • Fullwidth Transparent
    • Standard
    • Transparent
    • Centered Logo
  • Header BG Color
    • Define the header background color from the color palette. Use the slider to set the intensity of the color
  • Menu Link Color
    • The Menu link color option lets you define the link color in the menu bar section.
  • Menu Link Active and Hover Color
    • Define the menu link color in its active state. Once you hover over them they will change to the color that you chose.
  • Menu Typography
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.
  • Cart Color: Choose the color you want to set for the cart icon. You can set any color you prefer from the color palette.
  • Show Search Button: Use the toggle button to either enable or disable the search option in the header section.
  • Button BG Color: Define the button background color from the color palette. Increase or decrease the intensity of your chosen color using the slider. 
  • Border Color: Set the color of the border for the header section. 
  • Button Width: Set the button width using the textbox option. You can also increase or decrease the button width using buttons.
  • Border Radius: Define the border radius of the header section.
  • Button Text Color: Select the color from the palette and set the text color for the button.
  • Button Text: Write down the button text you want to set for the button found in the header section.
  • Button Link: Set the button link for the button text. 
  • Button Typography
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.

Blog

  • Customize Blog: You can use the toggle button to enable or disable the following section of the blog page.
    • Show Post Meta
    • Show Post Categories
    • Show Author
    • Show Featured Image
    • Show Post Title
    • Show Post Excerpt in Blog Listing
    • Show Read More Button in Blog Listing
  • Blog Layout
    • Select from three different predefined layout settings. The preset layouts are
      • Default
      • List View
      • Grid View
  • Blog Sidebar Type
    • Select from three different blog sidebar types. You can choose from no sidebar, left sidebar, right sidebar.
  • Single Sidebar Type
    • Select the type of sidebar you want to choose for the single blog page. You can choose from no sidebar at all to left sidebar or right sidebar.
  • Show Social Media Icons: Select to turn on or off the toggle button to show the social media icons.
  • Footer Bottom Logo: Upload an image to set a logo for the bottom area also known as the footer section.
  • Select Footer Type: Set the footer type from the five different types preset. Choose the type you want to set from the predefined types. Please note that type 5 is not customizable as it choosing the default style settings from the theme file.
  • Widgets Background Color: Define the color for the widget’s background color. Select any color from the palette and appy it. There is also a default button to clear any applied color.
  • Footer Bottom BG Color: If you want to set a color for the background of the Footer section of the page/post then use the setting from here. Chose any color from the palette and apply it. Click on the default button to set the theme default color.
  • Widgets Text Color: Apply your desired color for texts found in the widgets.
  • Widgets Title Typography
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.
  • Widgets Text Transform
    • Font Family: Select a font family you want to set for all the header families 
    • Font Size: Use the slider to set the font size according to your need. You can also opt-in to use the manual text option. This is also responsive so you can choose a different font size for different device screens.
    • Line Height: This option lets you set the line height for your font family. 
    • Font Weight: You can set your font’s weight from the preset weight using the dropdown menu.
    • Text Transform: Transform the text according to your needs. You can choose between Capitalize, lowercase, uppercase.
  • Footer Bottom Text Color: Select any color from the color palette and set it as your text color for the Footer found in the bottom section.
  • Footer Bottom Text: Set the text for the bottom Footer using the text box. Example text that can be used are: “@All rights reserved”

Was this helpful?