1. Home
  2. Docs
  3. Top Charity Pro
  4. Customize
  5. Frontpage Options

Frontpage Options

Homepage Sortable


  • To configure the Home Page Sortable Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Home Page Sortable.
  • In this home page sortable panel, it will include:
    • Homepage Sortable: In Homepage Sortable you will see section lists – in this Front Page Option you can change the order of all the sections. For eg: If you want the “Associate” section below the “Counter” section you can drag the hamburger icon from the Associate section and drop it below the Counter Section.

About Us Section


In this section, you can Customize the About Us Section.

  • To configure the About Us Section, you need to navigate from  Admin Panel > Appearance > Customize > Front Page Options> About Us Section. 
  • In this section panel, you can Enable/Disable the About Us section to Display/Hide the About Us Section on the home page. After enabling the About Us section, the user will see the following options:
    • Select a content type: You can select a page or post to display in the About Us Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, and Post) which allow the user to select a page/post to display for the About Us Section
            • Selecting Page/Post as Content Type allows you to select a page/post (Existing posts/ pages) to display the title, featured image, and content of that selected post/page for the About Us Section.
    • Description Length(In words): This setting allows you to set the length of the about us section’s description in words.
    • About Text: This setting allows the user to set the Description text for the About Us Section.
    • Select Style: This section allows you to select between the two styles for the About Us Section. You can select the preferred style for the section.
        • Style 1: This style will display the about section as below:
            • Select Image Mask: Select the masked image that will work best for your website.

        • Style 2: This style will display the about section as below:

    • Image Alignment: This setting is used to set the alignment of the image in the About Us Section. *Note: You can change the layout of the about section by changing the image and content alignment.
        • Left Alignment: The image will be aligned to the left.
        • Right Alignment: The image will be aligned to the right.
    • Button Label: This setting allows the user to set the label for the button.
    • Video Label: This setting allows you to set the video label for the link. *If the video link field is empty then it will not show video label in front section.
    • Video Link: This setting allows you to set the video link for the About Us Section.

Associate Section


In this section, you can customize the Associate Section.

  • To configure the Associate Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Associate Section.
  • In this section panel, you can enable the section to display the Associate Section on the homepage, Disable it to hide the section on the homepage.  After enabling the Associate Section, you can see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the Associate Section.
    • Section Title: This setting allows the user to set the subtitle for the Associate Section.
    • Number of Logos: This setting allows the user to set the number of logos to display in the Associate Section.
    • Logo: This setting allows the user to set the logo for the Associate Section.
    • Logo URL: This setting allows the user to set the URL for the Associate Logo.

Banner Slider Section


You can set the banner pages/posts and set different other options for the Banner Slider Section.

  • To configure the Banner Slider Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Banner Slider Section.
  • In this section pane, you can Enable/Disable the Banner Section to display Banner on the Frontpage otherwise disable to hide.
  • Right after enabling the Banner Slider Section,  you can set the following settings:
    • Select a content type: page or post for the Banner Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, Or Post) which allow the user to select a page/post to display as a Banner
            • Selecting Page/Post as Content Type allows you to select a page/post (Existing post/ page) to display the title, featured image, and content of that selected post/page as a Banner.*After selecting the desired content type as page/ post  you can now set the following section for the banner:
    • Number of Slides: You can set the number of slides to display in the Banner Section. *Note: Please input the valid number and save. Then refresh the page to see the change.
    • Description Length(words): This setting allows you to set the length of the banner section’s content in words.
    • Enable Slider Autoplay: This setting enables the banner slider to autoplay.
    • Button Label: You can set the label for the button.
    • Button Link: You can set the link for the button.
    • Banner Style: This setting allows you to select between two different styles for the banner. You can select the preferred banner style for your banner.
        • Style 1: This Banner Style displays the title and description is left aligned. When this style is selected the banner would look like this:

        • Style 2: This Banner Style displays the title is center aligned aligned.  When this style is selected the banner would look like this:
            • Background Image: In the banner style 2, the user can add a background image for the Banner Section.
            • Select Image Alignment: This setting is used to set the alignment of the image in the banner Section. *Note: You can change the layout of the banner by changing the image and content alignment.
                  • Left Alignment: The image will be aligned to the left.
                  • Right Alignment: The image will be aligned to the right.
            • Select Image Mask: Select the masked image that will work best for your website.

Blog Section


In this section, you can customize the Blog Section.

  • To configure the Blog Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Blog Section.
  • In this section panel, you can enable the section to display the Blog Section on the homepage, Disable the section to Hide the Blog Section on the homepage. After enabling the Blog Section, the user will see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the section.
    • Section Title: This setting allows the user to set the title for the section.
    • Number of Posts to show: This setting will allow the user to set the number of posts to display.
    • Description length (Words): This setting allows you to set the length of the Blog Section’s content in words.
    • Select a content type: In this settings you can select a page or post for the Blog Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, Post, and Category) which allow the user to select a page/post to display in the Blog Section.
            • Selecting Pages/Posts/Category as Content Type allows you to select a page/post (Existing posts/ pages) or category to display to get the content of that selected post/page for the Blog Section.
    • Button label: This setting allows the user to set the button label for the Section.
    • Blog Style: This setting allows you to select between three different styles for the Blog Section. You can select the preferred blog style for the Blog Section.
        • Style 1: In this style the blogs section will look like this:

        • Style 2: In this style the blogs section will look like:

Cause Section


In this section, you can set up donation form.

  • To configure the Cause Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Cause Section.
  • In this section panel, you can enable the section to display the Cause Section on the homepage, Disable the section to Hide the Cause Section on the homepage. After enabling the Cause Section, the user will see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the section.
    • Section Title: This setting allows the user to set the title for the section.
    • Number of Items to show: This setting allows the user to set the number of items to display in the section.
    • Select Form: This setting allows the user to select the donation form for the Causes Section.
    • Button Label: This setting allows the user to set the label for the button.

*Note: give-donation should be installed and the donation form should be added along with the goal amount for this section to work.

Contact Section


In this section, you can set/ customize the Contact Section.

  • To configure the Contact Section, you need to navigate to Admin Panel > Appearance > Customize > Front Page Options > Contact Section.
  • In this section panel, you can Enable/Disable the Contact Section to Display/Fide the Contact Section. After enabling the Contact Section, the user can see the following options:
    • Background Image: This setting allows the user to add a background image for the Contact Section.
    • Contact Image: This setting allows the user to add a contact image for the Contact Section.
    • Contact Image Alignment: This setting allows the user to set the alignment of he Contact Image.
    • Select Image Mask: Select the masked image that will work best for your website.
    • Section Title: This setting allows the user to set the title for the Contact Section.
    • Section Subtitle: This setting allows you to set the subtitle for the Contact Section.
    • Contact Image: This setting allows you to set the image for the Contact Section.
    • Form Shortcode: In this setting, you can add shortcode of the contact form or any other desired form in order to display the form in the Contact Section.

Counter Section


In this section, you can set the counters.

  • To configure the Counters Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Counter Section.
  • You can enable the counter section to display the counter section on the front page and disable the counter section to hide.
  • After enabling the Counters Section, the user will see the options to set:
    • Background Color: This setting allows the user to set the Background Color for the Counter Section.
    • Background Image: This setting allows the user to set the background image for the Counter Section.
    • Section Subtitle: This setting allows you to set the subtitle for the Contact Section.
    • Section Title: This setting allows the user to set the title for the Contact Section.
    • Number of Counters: This setting allows the user to set the number of Counters to show for the section.
    • Icon: This setting allows the user to set the Icon for the counter.
    • Label: This setting sets the Label for the section
    • Value: This setting allows the user to set a value for the counter.
    • Value Suffix: This setting allows the user to set a value Suffix for the counter.
    • Counter Style: This setting allows you to select between two different styles for the counter section. You can select the preferred style for the Counter Section.
        • Style 1: This counter style will display the counter icon above the counter labels.

        • Style 2: This counter style will display the counter icon on the same line.

CTA Section


In this section, you can set/ customize the CTA section.

  • To configure the CTA section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > CTA Section.
  • In this section panel, you can enable/Disable the CTA section to display/Hide the CTA Section. After enabling the CTA Section, the user will see the following options:
    • Background Color: This setting allows you to set the background color for the CTA Section.
    • Background Image: This setting allows you to add a background Image for the CTA Section.
    • CTA Title: This setting allows the user to set the title for the CTA Section.
    • CTA Description: This setting allows the user to set the content for the CTA Section.
    • CTA Button: This setting allows the user to set the button label for the Section
    • Button Link: This setting sets the Link for the button.
    • CTA Style: This setting allows you to select between two different styles for the CTA Section. You can select the preferred style for the CTA Section.
        • Style 1: This style will display the CTA Section as below:

        • Style 2: This style will display the CTA Section as below:

Events Section


In this section, you can set/ customize the Events Section.

  • To configure the Events section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Events  Section.
  • In this section panel, you can enable/disable the Events Section to display/hide the Events Section. After enabling, the user will see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the Events Section.
    • Section Title: This setting allows the user to set the title for the Events Section.
    • Number of events posts to show: This setting will include the number of posts/ pages to display.
    • Select a content type: In this settings you can select a page or post for the Events Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, Post, and Category) which allow the user to select a page/post to display in the Events section.
            • Selecting Pages/Posts/Category as Content Type allows you to select a page/post (Existing posts/ pages) or category to display the title, featured image, and content of that selected post/page for the Events Section. *After selecting the content type as pages/posts user needs to select the following:
  • Event Date And Time: This setting allows you to set the date and time of the event.
    • Event Location: This setting allows you to set the Events location for the event.
    • Button label: This setting allows the user to set the button label for the Section.
    • Events Style: This setting allows you to select between two different styles for the Events section. You can select the preferred style for the Events section.
        • Style 1: This style will display the Event section as below:

        • Style 2: This style will display the Event section as below:

Mission Section


In this section, you can customize the Mission Section.

  • To configure the Mission Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Mission Section.
  • In this section panel, you can enable the section to display the Mission Section on the homepage, Disable it to Hide the Section on the homepage. After enabling the Mission Section, you can see the following options:
    • Mission Subtitle: This setting allows you to set the subtitle for the Mission Section.
    • Section Description: This setting allows you to set the section description for the Mission Section.
    • Select a content type: In this settings you can select a page or post for the Mission Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, Post, and Category) which allow the user to select a page/post to display in the Mission Section.
            • Selecting Pages/Posts/Category as Content Type allows you to select a page/post (Existing posts/ pages) or category to display the title, featured image, and content of that selected post/page for the Mission Section. *After selecting the content type as pages/posts/category user needs to select the following:
    • Button label: This setting allows the user to set the button label for the Section.
    • Select Image Alignment: This setting is used to set the alignment of the image in the Mission Section. *Note: You can change the layout of the Mission section by changing the image and content alignment.
          • Left Alignment: The image will be aligned to the left.
          • Right Alignment: The image will be aligned to the right.
    • Select Image Mask: Select the masked image that will work best for your website.

Project Section


In this section, you can set/ customize the Project Section.

  • To configure the Project Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Project Section.
  • In this section panel, you can enable/Disable the Project Section to display/Hide the Project Section. After enabling the Project Section, the user will see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the Project Section.
    • Section Title: This setting allows the user to set the title for the Project Section.
    • Number of Posts to show: This setting will include the number of posts/ pages to display.
    • Description Length (words): This setting allows you to set the length of the Project Posts.
    • Select a content type: In this setting, you can select a page or post for the Project Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options ( Pages, Post, and Category) which allow the user to select a page/post/ Category to display for the Project Section.
            • Selecting Pages/Posts/Category as Content Type allows you to select a page/post (Existing posts/ pages)/ Category to display the title, featured image, and content of that selected post/page/category for the Project Section.
    • Button Label: This setting allows the user to set the button label for the Section
    • Project Style: This setting allows you to select between two different styles for the Project Section. You can select the preferred style for the Project Section.
        • Style 1: This style will display the Project section in the following layout.

        • Style 2: This style will display the Project section in the following layout:

Service Section


In this section, you can set/ customize the Service Section.

  • To configure the Service Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Service Section.
  • In this section panel, you can enable/Disable the Service Section to display/Hide the Service Section. After enabling the Service Section, the user will see the following options:
    • Section Title: This setting allows the user to set the title for the Service Section.
    • Section Subtitle: This setting allows the user to set the subtitle for the Service Section.
    • Number of items to show: This setting will include the number of posts/ pages to display.
    • Description Length(In words): This setting allows you to set the length of the about section’s description in words.
    • Button Label: This setting allows the user to set the button label for the Section.
    • Select a content type: In this settings, you can select a page or post for the Service Section
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, Post, and Category) which allow the user to select a page/post to display in the Service Section.
            • Selecting Pages/Posts/Category as Content Type allows you to select a page/post (Existing posts/ pages) or category to display the title, featured image, and content of that selected post/page for the Service Section.
    • Service Icon: This setting allows the user to set the custom Icon for the Service Section.
    • Select Style: This setting allows you to select between two different styles for the Service Section. You can select the preferred style for the Service Section.
        • Style 1: In this style, the service section will look like this:

 

        • Style 2: In this style, the service section will look like this:

Team Section


In this section, you can set/ customize the Team Section.

  • To configure the Team Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Team Section.
  • In this section panel, you can enable/Disable the team section to display/Hide the Team Section. After enabling the Team Section, the user will see the following options:
    • Section Subtitle: This setting allows the user to set the subtitle for the Team Section.
    • Section Title: This setting allows the user to set the title for the Team Section.
    • Number of items to show: This setting will include the number of posts/ pages to display.
    • Select a content type: page or post for the Team Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, and Post) which allow the user to select a page/post to display in the Team Section
            • Selecting Pages/Posts as Content Type allows you to select a page/post (Existing posts/ pages) to display the title, featured image, and content of that selected post/page for the Team Section. *After selecting the content type as pages/posts user needs to select the following:
    • Select Designation: This setting allows the user to set the Designation of the Team members.
    • Social links: This setting allows the users to set the social link of the selected Team members.

Testimonial Section


In this section, you can set/ customize the Testimonial section.

  • To configure the Testimonial Section, you need to navigate from Admin Panel > Appearance > Customize > Front Page Options > Testimonial Section.
  • In this section panel, you can enable/Disable the Testimonial section to display/Hide the Testimonial Section. After enabling the Testimonial Section, the user will see the following options:
    • Background Image: This setting allows the user to add a background image for the Testimonial Section.
    • Section Subtitle: This setting allows the user to set the subtitle for the Testimonial Section.
    • Section Title: This setting allows the user to set the title for the Testimonial Section.
    • Section Text: This setting allows the user to set the section Text for the Testimonial Section.
    • Select a content type: page or post for the Testimonial Section.
        • Content Type: This setting allows you to select the kind of content to choose from. It contains select options (Pages, and Post) which allow the user to select a page/post to display in the Testimonial Section.
            • Selecting Pages/Posts as Content Type allows you to select a page/post (Existing posts/ pages) to display the title, featured image, and content of that selected post/page for the Testimonial Section. *After selecting the content type as pages/posts user needs to select the following:
    • Number of items to show: This setting will include the number of posts/ pages to display. Note: Min 1 & Max 12. Please input the valid number and save it. Then refresh the page to see the change.
    • Designation: This setting allows the user to set the Designation of the clients.
    • Testimonial Style: Here this setting allows the user to select between two different styles for the Testimonial Section.
        • Style 1: The testimonial section in this style will be displayed below:

        • Style 2: The testimonial section in this style will be displayed as below:


*Note: Click on Publish to save the changes.

Was this article helpful to you? Yes No

How can we help?