Welcome to the Option Panel documentation for the Webnwell theme! The Option Panel is a powerful tool that allows you to customize and configure various settings for your Webnwell theme. With the Option Panel, you can easily change the appearance, behavior, and functionality of your Webnwell theme without having to write any code.
In this documentation, we’ll walk you through all the different options available in the Option Panel, and explain how each option works. We’ll also provide examples and recommendations for how to use each option effectively. By the end of this guide, you’ll be able to confidently use the Option Panel to create a website or application with the Webnwell theme that meets your unique needs and specifications.
So whether you’re a beginner or an experienced developer, this documentation is designed to help you get the most out of the Option Panel for your Webnwell theme. Let’s get started!
Header Section:
Header Background Color: The header background color refers to the color of the background of the header section. To change the header background color, simply select the color you want from the color picker or enter the hex code for the color you want.
Header Menu Text Color: The header menu text color refers to the color of the text in the header menu. To change the header menu text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Header Menu Hover Text Color: The header menu hover text color refers to the color of the text in the header menu when the user hovers over it. To change the header menu hover text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Header Menu Indicator Color: The header menu indicator color refers to the color of the indicator that appears next to the active item in the header menu. To change the header menu indicator color, simply select the color you want from the color picker or enter the hex code for the color you want.
Header Menu Active Indicator Color: The header menu active indicator color refers to the color of the indicator that appears next to the active item in the header menu when it’s selected. To change the header menu active indicator color, simply select the color you want from the color picker or enter the hex code for the color you want.
Overall, these options give you the ability to customize the appearance of the header section on your website or application to your liking.
Header Layout Section:
Left Side Menu: The Left Side Menu option refers to a header layout where the menu is placed on the left side of the header section. To select this option, simply click on the radio button next to the Left Side Menu option.
Right Side Menu: The Right Side Menu option refers to a header layout where the menu is placed on the right side of the header section. To select this option, simply click on the radio button next to the Right Side Menu option.
Center Menu: The Center Menu option refers to a header layout where the menu is placed in the center of the header section. To select this option, simply click on the radio button next to the Center Menu option.
Overall, these options give you the ability to choose the layout of the header section on your website or application according to your preference. Simply select the radio button next to the option you want and the header layout will be updated accordingly.
Footer Section:
Background Color: The Background Color setting refers to the color of the footer section background. To change the background color, simply select the color you want from the color picker or enter the hex code for the color you want.
Heading Text Color: The Heading Text Color setting refers to the color of the text in the footer section headings. To change the heading text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Body Text Color: The Body Text Color setting refers to the color of the text in the footer section body. To change the body text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Link Text Color: The Link Text Color setting refers to the color of the links in the footer section. To change the link text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Link Hover Text Color: The Link Hover Text Color setting refers to the color of the links in the footer section when the user hovers over them. To change the link hover text color, simply select the color you want from the color picker or enter the hex code for the color you want.
Overall, these options give you the ability to customize the appearance of the footer section on your website or application to your liking. Simply select the color you want for each setting from the color picker or enter the hex code for the color you want, and the footer section will be updated accordingly.
Footer Layout Section:
4 Column Section: The 4 Column Section option refers to a footer layout where the footer section is divided into four equal columns. To select this option, simply click on the radio button next to the 4 Column Section option.
3 Column Section: The 3 Column Section option refers to a footer layout where the footer section is divided into three equal columns. To select this option, simply click on the radio button next to the 3 Column Section option.
2 Column Section: The 2 Column Section option refers to a footer layout where the footer section is divided into two equal columns. To select this option, simply click on the radio button next to the 2 Column Section option.
1 Column Section: The 1 Column Section option refers to a footer layout where the footer section has only one column. To select this option, simply click on the radio button next to the 1 Column Section option.
Overall, these options give you the ability to choose the layout of the footer section on your website or application according to your preference. Simply select the radio button next to the option you want and the footer layout will be updated accordingly.
Footer Copyright Section:
Footer Copyright Text: The Footer Copyright Text setting refers to the text that will appear in the footer copyright section on your website or application. You can enter the text you want in the text area field provided.
HTML Code with Class or ID: The text area field also allows you to add HTML code with class or ID to the footer copyright text. This can be useful if you want to style the copyright text using external CSS code. For example, you can add a class or ID to the copyright text like this:
Typography Section:
Body Text Color: This setting allows you to change the color of the text in your paragraphs (P tags) throughout your entire website. You can select a color by using the color picker provided. Once you’ve chosen a color, the change will be applied automatically to all paragraphs on your website.
Heading Text Color: This setting allows you to change the color of the text in your headings (H1, H2, H3, H4, H5, and H6 tags) throughout your entire website. You can select a color by using the color picker provided. Once you’ve chosen a color, the change will be applied automatically to all headings on your website.
It’s important to note that changing the colors in these settings will affect your entire website. So, if you want to change the color of specific paragraphs or headings, you’ll need to use custom CSS for those specific elements.
Overall, the typography settings in your option panel provide an easy way to make global changes to the text colors on your website.
Hero Section Font:
- Go to the Theme Option Panel and look for the Hero Section Font section.
- In this section, you can customize the heading and text color for your Home page Hero Section.
- Make sure to select the Home page option to ensure that your changes only apply to the Home page Hero Section.
- Use the color picker to choose the color you want for the heading and Hero text.
- Once you’ve selected your preferred color, save your changes and preview the Home page to see the updated Hero Section.
By following these simple steps, you can easily customize the Hero Section Font for your Home page Hero Section in your Theme Option Panel. Remember to select the Home page option to ensure that your changes only affect the Home page Hero Section. Also, use the color picker to select your preferred color, and then save your changes to see the updated Hero Section.
CTA Section:
- First, locate the CTA section in the Theme Option Panel.
- To change the color of the heading text, look for the option labeled “Heading Text Color” and click on the color picker to choose a color that you like.
- To change the color of the body text, look for the option labeled “Body Text Color” and click on the color picker to choose a color that you like.
- Once you have selected your desired colors, click the “Save” button to apply the changes.
Note: Make sure that the colors you choose are complementary and easy to read. It’s also a good idea to preview the changes before saving them to ensure that they look good and are consistent with the overall design of your website.
Button Settings:
- Button Background Color: This is the color of the button’s background. To change it, click on the color picker and select your desired color. This will affect the color of all buttons on your website.
- Button Text Color: This is the color of the text inside the button. To change it, click on the color picker and select your desired color. This will affect the color of all button text on your website.
- Button Hover Background Color: This is the color of the button’s background when the user hovers over it with their mouse. To change it, click on the color picker and select your desired color. This will affect the hover color of all buttons on your website.
- Button Text Hover Color: This is the color of the text inside the button when the user hovers over it with their mouse. To change it, click on the color picker and select your desired color. This will affect the hover color of all button text on your website.
Please note that any changes made to these settings will affect all buttons on your website.