Sitemap Widget for Elementor by PowerPack allows you to display a structured overview of your website's content in a single place. With this widget, visitors can quickly navigate through your pages, posts, products, categories, and other content types.
The widget offers flexible options to control what content appears in the sitemap and how it is displayed. You can organize content in a simple list, a hierarchical structure, or an interactive tree layout. Additionally, the widget provides extensive styling controls to help you match the sitemap design with your website's branding.
Getting Started: Using the Sitemap Widget#
Follow these steps to add the Sitemap Widget to your page:
- Open the page where you want to add the Sitemap widget in Elementor.
- In the Elementor widgets panel, search for Sitemap.
- Drag and drop the Sitemap Widget onto your page.
- Once added, you will see two main tabs in the left panel:
- Content
- Style
Content Tab#
Content tab allows you to choose what content should appear in the sitemap and how it should be organized.
It contains two sections:
- Sitemap
- Tree Structure
Sitemap#
This section lets you select the content source and configure how the sitemap is generated.
- Type: Choose the type of content you want to display in the sitemap. Available options include:
- Custom Post Type
- Taxonomy
Select Custom Post Type to display pages, posts, products, templates, and similar content. Select Taxonomy to display categories, tags, or other taxonomy terms.
- Source: Choose the content source that will be used to generate the sitemap. Depending on the selected Type, available options may include:
- Posts
- Pages
- Media
- Landing Pages
- My Templates
- Products
- Templates
The available sources may vary based on the post types and plugins installed on your website.
- Exclude Pages: Use this option to remove specific content from the sitemap. For example, you can exclude:
- Pages
- Products
- Templates
- Custom Post Types
This option is useful when you don't want certain content to appear in the sitemap.
- Title: Enter a custom title for your sitemap.
- Order By: Choose how sitemap items should be arranged.
- Hierarchical View: Enable this option to display content in a parent-child structure.
- Columns: Select the number of columns for displaying sitemap items.
- Title HTML Tag: Choose the HTML tag used for the sitemap title.
- Add Nofollow: Enable this option to add the nofollow attribute to sitemap links. When enabled, search engines will not pass ranking value through those links.
- Open in a New Window: Enable this option if you want all sitemap links to open in a new browser tab.
Tree Structure#
Tree Structure section allows you to display sitemap content in an expandable and collapsible tree format.
- Tree Layout: Enable this option to display the sitemap in an interactive tree structure. Visitors can expand or collapse content groups, making navigation easier for websites with a large amount of content.
Note: The Hierarchical View option must be enabled for Tree Layout to work properly.
- Style: Choose the icon style used for expanding and collapsing tree items.
- Circle
- Caret
- Plus & Minus
- Other available styles
- Color: Choose a custom color for the tree structure icons.
Style Tab#
Style tab gives you complete control over the appearance of your sitemap. It contains three sections:
- List
- Title
- List Items
List#
These settings control the overall layout and container styling of the sitemap.
- Indent: Adjust the spacing between parent and child items in the sitemap hierarchy.
- Background Type: Choose a background style for the sitemap container. You can apply:
- Classic background
- Gradient background
- Border Type: Add and customize borders around the sitemap container.
- Border Radius: Adjust the corner roundness of the sitemap container.
- Box Shadow: Add depth and visual emphasis by applying shadow effects around the sitemap container.
- Padding: Control the inner spacing between the sitemap content and its container edges.
Title#
These options help you customize the sitemap heading.
- Alignment: Set the title alignment.
- Background Type: Apply a background style to the title area.
- Text Color: Choose a custom color for the sitemap title text.
- Border Type: Add a border around the title section.
- Border Radius: Round the corners of the title container.
- Box Shadow: Apply shadow effects to make the title stand out.
- Padding: Adjust the spacing inside the title area.
- Margin: Control the spacing around the title section.
- Typography: Customize the title typography.
List Items#
These settings control the appearance of individual sitemap links and items.
- Background Type: Apply a background style to sitemap items.
- Text Color: Choose the default text color for sitemap links.
- Hover Color: Set a different color that appears when visitors hover over sitemap items.
- Typography: Customize the typography of sitemap items, including font size, family, weight, and spacing.
- Border Type: Add borders around sitemap items to improve separation and visual organization.
- Padding: Adjust the spacing inside each sitemap item for better readability and appearance.
Wrapping Up!#
PowerPack Sitemap Widget for Elementor is a simple yet powerful way to help visitors navigate your website. With support for custom post types, taxonomies, hierarchical structures, and interactive tree layouts, you can create a sitemap that is both user-friendly and attention-grabbing.
Using the styling options available in the Style tab, you can easily customize the sitemap to blend seamlessly with the rest of your website's design.