Configuring Index Pages in Materia X2 Theme

Index Pages (Multiple Items) is a listing page or a list of posts consisting of an Index Page (Homepage), Archive Page, Search Page, Label Page and Error Page.

Elements on the Index Page also vary; consists of Post Label or Category, Post Title, Post Author Name, Post Published and Updated Date, Post Share, Post Summary, Post Image/Thumbnail, Post Jumplink, Post Comment Link, etc.

You can customize it and adjust the elements to be displayed on the Index Pages easily.

Blog Posts Configuration

There are several things that can be set on the index pages. Here are some steps and their explanations:

1. Go to Blogger Dashboard and select the Layout menu.
2. Look for the section titled Main Section.
3. Click the edit button (pencil icon) on the Blog Posts (Blog Posts Gadget).
4. A Blog Posts Configuration Popup will appear.
5. Here are a few things that can be set:
   • In the Number of posts on main page input, fill it the number of posts you want to display on the index pages. Example: 4.
   • In the Post page link text input, fill it with the jumplink text. Example: View Full Coverage.
   • You can skip the Show date header as this feature can't be used on the Materia X2 Theme.
   • The Show author setting is useful for displaying the Author name. If enabled, the Author format input will appear. You can fill it with text Written by, By or leave it blank.
   • The Show publish time setting is useful for displaying the post's publication date. If enabled, the Publish time prefix input will appear, you can fill it with text Published at, At or leave it blank. A dropdown for the date/time format will also appear, please select it according to your wishes.
   • The Show comment count setting is useful for displaying the comments. If enabled, the Comment format input will appear. Just skip it, because the input is not used.
   • The Show labels setting is useful for displaying the posts label. If enabled, the Labels prefix input will appear. You can fill it with text Labels: or leave it blank.
   • Just skip the Show email post link setting as it's not being used.
   • The Show share buttons setting is useful for displaying sharing buttons and share links to social media.
   • Just skip the Show location setting as it's not being used.
   • The Show author profile setting is useful for displaying post Author Profile.
   • The Show ads between posts setting is useful for displaying Ads. If enabled, Ad settings from AdSense like Number of posts between ads and Format will appear. Here are the options you can use:
     • Number of posts between ads - For the location of placing ads per post item. We recommend placing an ad in every half of the post that is displayed. For example, if the post item on the index page is set to 4, then you can set the Number of posts between ads to 2.
     • Format - To select the ad size. We recommend using Ad Units - Responsive.
6. If you want to finish the configuration, click the SAVE button at the bottom.

Custom Posts Label Icon

This feature is useful for adding custom label icon. In short, if you have a label or post category called Documentation, then you can add a custom icon for documentation label, as well as other labels.

This setting will be further explained in the Customizer Settings.

Posts Pagination Type

This feature is useful for changing the pagination type, you can choose between Next/Previous, Load More, Infinite Scroll or Numbered types.

Customizer Settings

There are several Options and Color settings for all elements in the Index Pages.

Options for Index Pages

There are several Options for the Index Pages that can be customized, namely:

Posts Recent Headline Title

This setting is useful for displaying the title text of the Recent Posts specifically on the main page (Homepage). 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Recent Headline Title (Disable | Enable), drag the slider right or left. Here is the explanation:

   

   • 1px: Disable - Recent Title will be disabled.
   • 2px: Enabled - Recent Title will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Animations

This setting is useful for adding Fade In Up animation effects to each item in the list of posts on the index pages. Here are some steps to set it up:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Animation (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Fade In Up Animation will be disabled.
   • 2px: Enable - Fade In Up Animation will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Layout on Desktop

This setting is useful for changing the layout of post items on the desktop screen. You can choose between List or Grid with two columns. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Layout on Desktop (List | Grid), drag the slider right or left. Here is the explanation:

   

   • 1px: List - Post items with a list view.
   • 2px: Grid - Post items with a two-column grid view.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Layout on Mobile

This setting is useful for changing the layout of post items on the mobile screen. You can choose between List or Grid with two columns. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Layout on Mobile (List | Grid), drag the slider right or left. Here is the explanation:

   

   • 1px: List - Post items with a list view.
   • 2px: Grid - Post items with a two-column grid view.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Edge Style on Desktop

This setting is useful for setting the edge styles of each post item on the index page on the desktop screen. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Edge Style on Desktop (None | Border | Border Bottom | Shadow) drag the slider right or left. Here is the explanation:
   • 1px: None - Post items without any appearance.
   • 2px: Border - Post items will have a border.
   • 3px: Border Bottom - Post items will have a border at the bottom.
   • 4px: Shadow - Post items will have a shadow.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Edge Style on Mobile

This setting is useful for setting the edge styles of each post item on the index page on the mobile screen. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Edge Style on Mobile (None | Border | Border Bottom | Shadow) drag the slider right or left. Here is the explanation:
   • 1px: None - Post items without any appearance.
   • 2px: Border - Post items will have a border.
   • 3px: Border Bottom - Post items will have a border at the bottom.
   • 4px: Shadow - Post items will have a shadow.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Edge Shadow Thickness

This setting is useful for adjusting the thickness of the Shadow on the Post Items. Shadow thickness is measured in dp units.

Note that this setting is only useful if you have set the Posts Edge Style on Desktop and Posts Edge Style on Mobile to 2px (Border) or 3px (Shadow).

There are three options that you can choose from, including 2dp (Thin), 4dp (Medium) and 6dp (Thick). 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Option named Posts Edge Shadow Thickness (Thin | Medium | Thick), drag the slider right or left. Here is the explanation:
   • 1px: Thin - Post items with Shadow Thickness 2dp (Thin).
   • 2px: Medium - Post items with Shadow Thickness 4dp (Medium).
   • 3px: Thick - Post items with Shadow Thickness 6dp (Thick).
5. Click the Save button (diskette icon) in the lower right corner.

Posts Corner Radius

This setting is useful for setting the rounded corner radius for the Post Items. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Option named Posts Corner Radius, drag the slider right or left until you find the corner radius you want.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Label

This setting is useful for enabling or disabling Label Icon or Label Link on index pages. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Label (Disable | Label | Label and Icon), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Labels will be disabled.
   • 2px: Label - Post Labels will be enabled without icon.
   • 3px: Label and Icon - Post Labels will be enabled with icon.
5. Click the Save button (diskette icon) in the lower right corner.

Custom Label SVG Icon

This setting is useful for adding Custom Icon for each Post Labels. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Custom Label SVG Icon (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Custom Label SVG Icon will be disabled.
   • 2px: Enable - Custom Label SVG Icon will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

To add a Custom Label Icons, you can choose to use the Matericons or the Material Design Icon Picker.

Adding Icons Using Matericons

Matericons is an open source and optimized collection of SVG Icons from Materia X2. Here are some steps to use it:

1. Go to the Matericons page.
2. In the search bar, find the name of the icon you want to use.
3. Select the icon. At the bottom.
4. A popup will appear. Copy all the SVG Path Data in the Code Box by clicking the Copy icon.

Next, you can follow the following steps:

1. Go to Blogger Dashboard and select the Theme menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the Custom SVG Icon (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. Here are a few things that can be set:
   • In the Site name input, enter the label name. Example: Documentation.
   • In the Site URL input, paste the SVG Path that was copied earlier.
   • If both inputs are set, click the SAVE button next to them.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Adding Icons Using Material Design Icon Picker

Material Design Icons Picker is a Browser Addon that is useful for finding and using Material Design-themed SVG Icons that have thousands of icons.

Before that, you need to use the SVG icon library called Material Design Icons Picker available for Google Chrome or Firefox.

After the addon is installed on the browser you are using, then you can follow these steps:

1. Click the Material Design Icons Picker Addon.
2. In the search bar, find the name of the icon you want to use.
3. Select the icon. At the bottom, click the Copy..., and choose Copy SVG Path.

Next, you can follow the following steps:

1. Go to Blogger Dashboard and select the Theme menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the Custom SVG Icon (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. Here are a few things that can be set:
   • In the Site name input, enter the label name. Example: Documentation.
   • In the Site URL input, paste the SVG Path that was copied earlier.
   • If both inputs are set, click the SAVE button next to them.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Posts Label Search Description

This setting is useful if you want to add a description especially on the Label search page. Example: If you click on the Documentation label, you will see a description of the Documentation label that was created earlier. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Label Search Description (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Posts Label Search Description will be disabled.
   • 2px: Enable - Posts Label Search Description will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Next, you need to set each description of the Label by following these steps:

1. Go to Blogger Dashboard and select the Theme menu.
2. Look for the section titled Main Section.
3. Click the edit button (pencil icon) on the Posts Label Search Description (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. Here are a few things that can be set:
   • In the Site name input, enter the name of the label for which you want to create a description. Example: Documentation.
   • In the Site URL input, enter a description according to the name of the label you created. Example: Documentation is any communicable material that is used to describe....
   • If both inputs are set, click the SAVE button next to them.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Posts Author

This setting is useful for enable or disable Author Name and/or Author Prefix (Text before Author Name) on Index Pages. 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 Dropdown, click Default Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Author (Disable | Name | Prefix and Name), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Author will be disabled.
   • 2px: Name - Post Author Name will be enabled.
   • 3px: Prefix and Author - Post Author Prefix and Post Author Name will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Timestamp

This setting is useful for show or hide the publish date and update date of the post on index pages. 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 Dropdown, click Default Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Timestamp (Disable | Published | Published and Updated), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Timestamp will be disabled.
   • 2px: Published - Post Published Timestamp will be enabled.
   • 3px: Published and Updated - Post Published and Updated Timestamp will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Timestamp Prefix

This setting is useful for enabling or disabling Prefix (Text before Pubish date). Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
3. Look for the Slider setting named Posts Timestamp Prefix (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Timestamp Prefix will be disabled.
   • 2px: Enable - Timestamp Prefix will be enabled.
4. Click the Save button (diskette icon) in the lower right corner.

Posts Sharer

This setting is useful for enabling or disabling of the share button on the index pages. Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
3. Look for the Slider setting named Posts Sharer (Disable | Visible on Hover | Visible), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Share Button is disabled.
   • 2px: Visible on Hover - Share Button will be visible when hovered.
   • 3px: Visible - Share Button always visible.
4. Click the Save button (diskette icon) in the lower right corner.

Posts Summary

This setting is useful for enabling or disabling the summary of posts on the index page. Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
3. Look for the Slider setting named Posts Summary (Disable | Desktop Only | Desktop and Mobile), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Summary is disabled.
   • 2px: Desktop Only - Post Summary will be enabled and only visible on Desktop Screen.
   • 3px: Desktop and Mobile - Post Summary will be enabled and will be visible on both Desktop and Mobile Screen.
4. Click the Save button (diskette icon) in the lower right corner.

Posts Thumbnail Resolution

This setting is useful for adjusting the resolution of images on Index pages. Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
3. Look for the Slider setting named Posts Thumbnail Resolution (Low | Medium | High), drag the slider right or left. Here is the explanation:
   • 1px: Low - Low Resolution Post Thumbnails (Recommended).
   • 2px: Medium - Medium Resolution Post Thumbnails.
   • 3px: High - High Resolution Post Thumbnails.
4. Click the Save button (diskette icon) in the lower right corner.

Posts Thumbnail

This setting is useful for enabling or disabling the post image or thumbnail on the index pages. Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
3. Look for the Slider setting named Posts Thumbnail (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Thumbnail is disabled.
   • 2px: Enable - Post Thumbnail is enabled.
4. Click the Save button (diskette icon) in the lower right corner.

Posts Thumbnail Corner Radius

This setting is useful for setting the rounded corner radius for the Posts Thumbnail. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Option named Posts Thumbnail Corner Radius, drag the slider right or left until you find the corner radius you want.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Jumplink

This setting is useful for enabling or disabling the post jumplink on the index pages. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Jumplink (Disable | Jumplink | Icon and Jumplink), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Jumplink is disabled.
   • 2px: Jumplink - Post Jumplink is enabled and will show text only (Without icon).
   • 3px: Icon and Jumplink - Post Jumplink is enabled and will show text and icon.
5. Click the Save button (diskette icon) in the lower right corner.

You can set Jumplink text by editing it via Blog Post Configuration in Post page link text.

Posts Comment Link

This setting is useful for enabling or disabling the comment link on the index pages. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Comment Link (Disable | Comment Link | Icon and Comment Link), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Post Comment Link is disabled.
   • 2px: Comment Link - Post Comment Link is enabled without Icon.
   • 3px: Icon and Comment Link - Post Comment Link is enabled with icon.
5. Click the Save button (diskette icon) in the lower right corner.

Posts Pagination Style

This setting is useful for changing the style of the pagination button. 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 Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts Pagination Style (Default | Raised | Unelevated | Outline), drag the slider right or left. Here is the explanation:
   • 1px: Default - Default Pagination Button.
   • 2px: Raised - Normal Pagination Button with shadow.
   • 3px: Unelevated - Normal Pagination Button without shadow.
   • 4px: Outline - Outlined Pagination Button.
5. Click the Save button (diskette icon) in the lower right corner.

Posts FAB Position

This setting is useful for changing the position of the Floating Action Button (FAB) especially on Index pages. If you want to customize it, you can follow these steps:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
4. Look for the Slider setting named Posts FAB Position (Left | Center | Right), drag the slider right or left. Here is the explanation:
   • 1px: Left - The FAB position will moved to the left side (In RTL mode, it will moved to the right side).
   • 2px: Center - The FAB position will moved to the center of screen.
   • 3px: Right - The FAB position will moved to the right side (In RTL mode, it will moved to the left side).
5. Click the Save button (diskette icon) in the lower right corner.

Color Settings for Index Pages

There are several color settings for the Index Pages that can be customized, namely:

• Posts Recent Headline Title Color - To set Posts Recent Headline Title color.
• Posts Recent Headline Border Color - To set Posts Recent Headline Border Bottom color.
• Posts Recent Headline Indicator Color - To set Posts Recent Headline Indicator color.
• Posts Edge Border Color - To set Posts Edge Border color for each post item.
• Posts Edge Shadow Color - To set Posts Edge Shadow color for each post item.
• Posts Background Color - To set Background color for each post item.
• Posts Label Color - To set Label and its icon color.
• Posts Label Hover Color - To set Label and its icon color when hovered.
• Posts Title Color - To set Post title color.
• Posts Title Hover Color - To set Post title color when hovered.
• Posts Meta Color - To set Meta text color (Author, Published and Updated Date and Share Button).
• Posts Summary Color - To set Summary text color.
• Posts Jumplink Color - To set Jumplink text color.
• Posts Comment Link Color - To set Comment link color.
• Posts Pagination Color - To set Pagination Button color/background color.

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 Dropdown, click Default Options Dropdown and Select Index 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 Index Pages (Multiple Items) in the 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.