Configuring Gadgets or Widgets in Materia X2 Theme

All Blogger Default Widgets or Gadgets in the Materia X2 Theme are configurable.

Default Custom Gadgets

There is a Default Widget or Gadget that has been customized in the Materia X2 theme.

Social Gadget

This Widget or Gadget useful for adding multiple social media links. You don't need to enable/disable it via Customizer as this is Blogger's Default Custom Widget. Here are some ways to use it:

YouTube Video: Indonesian Guide (Subtitles/Closed Captions available).

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeSocialWidget.
   In Materia X2 version 3.1 and above, elcreativeSocialWidget is changed to elcreativeSocial.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. Here are a few things that can be set:

   • In the Site name input, type socialWidgetTitle.
     In Materia X2 version 3.1 and above, socialWidgetTitle is changed to socialTitle.
   • In the Site URL input, enter the title of the Social Gadget you want. Example: Get in Touch!.
   • Click the ADD A NEW ITEM button again.
   • In the Site name input, type socialWidgetDescription.
     In Materia X2 version 3.1 and above, socialWidgetDescription is changed to socialDescription.
   • In the Site URL input, enter the title of the Social Gadget you want. Example: Find us on other social media.
10. Next, you need to set the Icon and Link of each social media.
    • Click the ADD A NEW ITEM button again.
    • In the Site name input, If you want to create a Facebook link, then enter facebook as a ID.
      You can use the social media ID provided below.
    • In the Site URL input, enter the appropriate URL for social media.
11. If you want to add other social media, you can repeat step 11.
12. If all inputs are set, click the SAVE button next to them.
13. If you want to finish the configuration, click the SAVE button at the bottom.

Available Social Gadget Icons

Translate Gadget

In the Materia X2 Theme, you can change the style for the Translate Gadget or Widget to be Default or Dialog in the Customizer settings in Translate Style.

If you set the Translate Gadget or Widget to 2px (Dialog), a Translate button will appear on the Floating Action Button (FAB).

You can customize it by accessing it in the Customizer Settings.

Post Carousel Gadget

This Widget or Gadget is useful for adding a Carousel Posts. You don't need to enable/disable it via Customizer as this is Blogger's Default Custom Widget. However, this Gadget requires JavaScript which will certainly increase the page load time. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeCarousel.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. Here are a few things that can be set:

   • In the Site name input, type carouselTitle.
   • In the Site URL input, enter the title of the Gadget you want. Example: Post Carousel.
10. If all inputs are set, click the SAVE button next to them.
11. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you can configure the Carousel Gadget (Optional).

Set the Number of Posts (Optional)

You can set the number of posts you want to show. If you don't set it, then the default number of posts that will be displayed is 6 posts. Here are some ways to set it:

1. Edit the Carousel Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter result.
4. In the Site URL input, enter the number of posts you want to show. Example: 12.
   In the Site URL input, Make sure you enter numbers, not strings/text.

Set the Specific Category of Posts (Optional)

You can set the label or category of posts you want to show. If you don't set it, then the default label of posts that will be displayed is recent posts. Here are some ways to set it:

1. Edit the Carousel Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter label.
4. In the Site URL input, enter the label or category of posts you want to show. Example Documentation.
   In the Site URL input, the label name is Case Sensitive. Example: If you have a label named Documentation (with capital letters at the beginning), then you must also write it the same. Documentation: Is different from documentation, DoCumentation, etc.

Set the Post Order (Optional)

You can set the order of posts you want to show. If you don't set it, then the default order of posts that will be displayed is published posts. Here are some ways to set it:

1. Edit the Carousel Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter sortBy.
4. In the Site URL input, you can enter updated (to sort posts by updated), published (to sort posts by publication date) or random (to sort post by random index).
   Attention!

   • In the Site URL input, the order name is Case Sensitive.
   • random option is only available on Materia X2 version 3.8 and above.

Set the Carousel Autoplay Duration (Optional)

You can set the autoplay duration. If you don't set it, then the default carousel duration is 6 second. Here are some ways to set it:

1. Edit the Carousel Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter autoplayDuration.

4. In the Site URL input, Enter the time duration in seconds. Example: If you want autoplay to be 12 seconds, then enter 12. You can also set the duration to 0 to disable Autoplay.

   In the Site URL input, Make sure you enter numbers, not strings/text.

Enable/Disable Kenburn Effect (Optional)

You can enable or disable the Kenburn Effect animation on the Carousel. Here are some ways to set it:

1. Edit the Carousel Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter kenburnEffect.
4. In the Site URL input, enter true to enable Kenburn Effect or false to disable Kenburn Effect.

Post Grid Gadget

This Widget or Gadget is useful for adding a Grid Posts. You don't need to enable/disable it via Customizer as this is Blogger's Default Custom Widget. However, this Gadget requires JavaScript which will certainly increase the page load time. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeGrid.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. Here are a few things that can be set:

   • In the Site name input, type gridTitle.
   • In the Site URL input, enter the title of the Gadget you want. Example: Post Grid.
10. If all inputs are set, click the SAVE button next to them.
11. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you can configure the Grid Post Gadget (Optional).

Set the Number of Posts (Optional)

You can set the number of posts you want to show. If you don't set it, then the default number of posts that will be displayed is 6 posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter result.
4. In the Site URL input, enter the number of posts you want to show. Example: 12.
   In the Site URL input, Make sure you enter numbers, not strings/text.

Set The Specific Category of Posts (Optional)

You can set the label or category of posts you want to show. If you don't set it, then the default label of posts that will be displayed is recent posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter label.
4. In the Site URL input, enter the label or category of posts you want to show. Example Documentation.
   In the Site URL input, the label name is Case Sensitive. Example: If you have a label named Documentation (with capital letters at the beginning), then you must also write it the same. Documentation: Is different from documentation, DoCumentation, etc.

Set the Post Order (Optional)

You can set the order of posts you want to show. If you don't set it, then the default order of posts that will be displayed is published posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter sortBy.
4. In the Site URL input, you can enter updated (to sort posts by updated), published (to sort posts by publication date) or random (to sort post by random index).
   Attention!

   • In the Site URL input, the order name is Case Sensitive.
   • random option is only available on Materia X2 version 3.8 and above.

Post Ticker Gadget

This Widget or Gadget is useful for adding a Post Ticker (Running Text). You don't need to enable/disable it via Customizer as this is Blogger's Default Custom Widget. However, this Gadget requires JavaScript which will certainly increase the page load time. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeTicker.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. Here are a few things that can be set:

   • In the Site name input, type tickerTitle.
   • In the Site URL input, enter the title of the Gadget you want. Example: Breaking News.
10. If all inputs are set, click the SAVE button next to them.
11. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you can configure the Ticker Post Gadget (Optional).

Set the Number of Posts (Optional)

You can set the number of posts you want to show. If you don't set it, then the default number of posts that will be displayed is 6 posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter result.
4. In the Site URL input, enter the number of posts you want to show. Example: 12.
   In the Site URL input, Make sure you enter numbers, not strings/text.

Set The Specific Category of Posts (Optional)

You can set the label or category of posts you want to show. If you don't set it, then the default label of posts that will be displayed is recent posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter label.
4. In the Site URL input, enter the label or category of posts you want to show. Example Documentation.
   In the Site URL input, the label name is Case Sensitive. Example: If you have a label named Documentation (with capital letters at the beginning), then you must also write it the same. Documentation: Is different from documentation, DoCumentation, etc.

Set the Post Order (Optional)

You can set the order of posts you want to show. If you don't set it, then the default order of posts that will be displayed is published posts. Here are some ways to set it:

1. Edit the Grid Post Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter sortBy.
4. In the Site URL input, you can enter updated (to sort posts by updated), published (to sort posts by publication date) or random (to sort post by random index).
   Attention!

   • In the Site URL input, the order name is Case Sensitive.
   • random option is only available on Materia X2 version 3.8 and above.

Set the Post Ticker Running Duration (Optional)

You can set the running text duration. If you don't set it, then the default carousel duration is 6 second. Here are some ways to set it:

1. Edit the Post Ticker Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter runningDuration.

4. In the Site URL input, Enter the time duration in seconds. Example: If you want autoplay to be 40 seconds, then enter 40.

   In the Site URL input, Make sure you enter numbers, not strings/text.

Comment List Gadget

This Widget or Gadget is useful for adding a list of Comments. You don't need to enable/disable it via Customizer as this is Blogger's Default Custom Widget. However, this Gadget requires JavaScript which will certainly increase the page load time. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeComment.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. Here are a few things that can be set:

   • In the Site name input, type commentTitle.
   • In the Site URL input, enter the title of the Gadget you want. Example: Comment List.
10. If all inputs are set, click the SAVE button next to them.
11. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you can configure the Comment List Gadget (Optional).

Set the Number of Comment (Optional)

You can set the number of comments you want to show. If you don't set it, then the default number of comments that will be displayed is 6 comments. Here are some ways to set it:

1. Edit the Comment List Gadget that you added earlier.
2. Click the ADD A NEW ITEM button.
3. In the Site name input, enter result.
4. In the Site URL input, enter the number of posts you want to show. Example: 12.
   In the Site URL input, Make sure you enter numbers, not strings/text.

Block Components

Block Component is an HTML/CSS component that can be used to display certain components on the Homepage.

This feature is very useful for showing the points and goals of your blog and can also be used to make your main page look like a Landing Page.

Hero Component

This setting is useful for adding the Block Hero Component on the Homepage page. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeBlockHero.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. To show the Component Tagline, follow these instructions:

   • In the Site name input, type blockTagline.
   • In the Site URL input, enter the text you want. Example: This is Hero Tagline.

10. To show the Component Title, follow these instructions:

    • In the Site name input, type blockTitle.
    • In the Site URL input, enter the text you want. Example: This is Hero Title.

11. To show the Component Description, follow these instructions:

    • In the Site name input, type blockDescription.
    • In the Site URL input, enter the text you want. Example: This is Hero Description.

12. To show the Component Button, follow these instructions:

    • In the Site name input, type blockButton.
    • In the Site URL input, enter the URL. Example: https://www.elcreativeacademy.com/.

13. To show the Component Image, follow these instructions:

    • In the Site name input, type blockImage.
    • In the Site URL input, enter the image URL.
14. If all inputs are set, click the SAVE button next to them.
15. If you want to finish the configuration, click the SAVE button at the bottom.

Featured Component

This setting is useful for adding the Featured Component on the Homepage page. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeBlockFeatured.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. To show the Component Title, follow these instructions:

   • In the Site name input, type blockTitle.
   • In the Site URL input, enter the text you want. Example: This is Featured Title.

10. To show the Component Description, follow these instructions:

    • In the Site name input, type blockDescription.
    • In the Site URL input, enter the text you want. Example: This is Featured Description.

11. Next, you can add multiple lists:

    • Click the ADD A NEW ITEM button.
    • In the Site name input, enter the title of your list. Example: Title 1.
    • In the Site URL input, enter the description of your list. Example: This is Description of Title 1.
    • Repeat the above steps as many times as you want.
12. If all inputs are set, click the SAVE button next to them.
13. If you want to finish the configuration, click the SAVE button at the bottom.

Footer Component

This setting is useful for adding the Footer Component on the Homepage page. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeBlockFooter.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. To show the Component Image, follow these instructions:

   • In the Site name input, type blockImage.
   • In the Site URL input, enter the image URL.

10. To show the Component Description, follow these instructions:

    • In the Site name input, type blockDescription.
    • In the Site URL input, enter the text you want. Example: This is Hero Description.

11. To show the Component Copyright, follow these instructions:

    • In the Site name input, type blockCopyright.
    • In the Site URL input, enter the text you want. Example: © 2019 - 2022 EL Creative Developer. All Rights Reserved..

12. Next, you can add multiple link lists:

    • Click the ADD A NEW ITEM button.
    • In the Site name input, enter the title of your link list. Example: Link 1.
    • In the Site URL input, enter the URL. Example: https://www.elcreativeacademy.com/.
    • Repeat the above steps as many times as you want.
13. If all inputs are set, click the SAVE button next to them.
14. If you want to finish the configuration, click the SAVE button at the bottom.

Pricing Component

This setting is useful for adding the Pricing Component on the Homepage page. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeBlockPricing.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. To show the Component Title, follow these instructions:

   • In the Site name input, type blockTitle.
   • In the Site URL input, enter the text you want. Example: This is Pricing Title.

10. To show the Component Description, follow these instructions:

    • In the Site name input, type blockDescription.
    • In the Site URL input, enter the text you want. Example: This is Pricing Description.

11. To show the Component Price, follow these instructions:

    • In the Site name input, type blockPrice.
    • In the Site URL input, enter the text you want. Example: USD 30.

12. To show the Component Price Info, follow these instructions:

    • In the Site name input, type blockPriceInfo.
    • In the Site URL input, enter the text you want. Example: Paid Annually.

13. To show the Component Button, follow these instructions:

    • In the Site name input, type blockButton.
    • In the Site URL input, enter the URL. Example: https://www.elcreativeacademy.com/.

14. Next, you can add multiple lists for pricing key/points:

    • Click the ADD A NEW ITEM button.
    • In the Site name input, type blockPriceKey.
    • In the Site URL input, enter the pricing key/point. Example: This is Selling Point.
    • Repeat the above steps as many times as you want.
15. If all inputs are set, click the SAVE button next to them.
16. If you want to finish the configuration, click the SAVE button at the bottom.

FAQ Component

This setting is useful for adding the Featured Asked Question (FAQ) or Collapsible Component on the Homepage page. Here are some ways to use it:

1. Go to Blogger Dashboard and select the Layout menu.
2. Find the Section you want to use for this widget.
3. Click Add a Gadget and Select Link List.
4. A Link List Configuration Popup will appear.
5. In the Title input, enter elcreativeBlockFAQ.
6. You can skip the Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.

9. To show the Component Title, follow these instructions:

   • In the Site name input, type blockTitle.
   • In the Site URL input, enter the text you want. Example: This is FAQ Title.

10. To show the Component Description, follow these instructions:

    • In the Site name input, type blockDescription.
    • In the Site URL input, enter the text you want. Example: This is FAQ Description.

11. Next, you can add multiple FAQ lists:

    • Click the ADD A NEW ITEM button.
    • In the Site name input, enter the Question of your FAQ list. Example: This is Question 1.
    • In the Site URL input, enter the Answer of your FAQ list. Example: This is Answer of Question 1.
    • Repeat the above steps as many times as you want.
12. If all inputs are set, click the SAVE button next to them.
13. If you want to finish the configuration, click the SAVE button at the bottom.

LinkList

The LinkList Widget or Gadget is basically useful for displaying a collection of sites, blogs, or web pages to visitors.

There are several settings for the LinkList Widget or Gadget, including; LinkList Icon and color settings, including; LinkList Border Color and LinkList Link Color.

You can customize it by accessing it in the Customizer Settings.

Customizer Settings

There are several Options and Color settings for all Widget or Gadgets in Materia X2 Theme.

Options for Gadgets or Widgets

There are several Options that can be customized. Here are some steps to customize and some explanations:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Gadget Options.
4. Find the Widget or Gadget settings you are looking for.
5. Click the Save button (diskette icon) in the lower right corner.

Color Settings for Gadgets or Widgets

There are several color settings for the Gadgets or Widgets that can be customized. Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Gadget Options.
4. Find a color setting and select the color you want to change.
5. Click the Save button (diskette icon) in the lower right corner.

Those are some steps to configure the Header or Navigation Bar in Materia X2 Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.