Skip to content

Elementor

Learn how to use weDocs with Elementor. Add weDocs widgets to any page and design the single doc template in Elementor Pro Theme Builder, step by step.

  • weDocs Pro
  • Updated Oct 12, 2026
  • 4 min read
On this page
  1. Before you start
  2. Add weDocs widgets to a page
  3. weDocs widgets
  4. Design the single doc template (Elementor Pro)
  5. Tell weDocs to use the Elementor template

weDocs now works inside Elementor. You get a set of weDocs widgets for building documentation pages, plus a ready-made single doc template you can open and restyle in the Elementor Theme Builder.

This guide covers both parts.

  • weDocs widgets. Drag docs grids, sidebars, search, a table of contents and feedback boxes onto any Elementor page.
  • Single doc template. Design how every individual doc looks, then tell weDocs to use it.

The widgets work with free Elementor. The single doc template needs Elementor Pro, because it is built in the Theme Builder.

What you want to doweDocsElementor
Use weDocs widgets on a pageweDocs (free) 2.6.0 or laterElementor (free)
Design the single doc templateweDocs (free) 2.6.0 or laterElementor Pro (Theme Builder)

Make sure all plugins are installed, activated and updated before you begin.

Any Elementor page can hold weDocs widgets. Here is how to add them.

  1. Go to Pages and create a new page, or open an existing one.
  2. Click Edit with Elementor at the top of the editor.

Edit with Elementor Button

  1. In the Elementor Elements panel, scroll down to the weDocs category. You can also type “weDocs” in Search Widget… to find them faster.

WeDocs Elementor Widgets

  1. Drag a widget into a section or column on your page. For example, drag weDocs – Docs Sidebar into the left column of a three-column layout.

Drag n Drop widget to design single documentation page

  1. Click the widget to open its settings in the left panel. Adjust its content and style there.
  2. Click Publish or Update to save the page.

A common docs layout uses three columns. Put Docs Sidebar on the left, Breadcrumb, the doc content and Doc Navigation in the middle, and Table of Contents on the right.

The weDocs category in Elementor holds nine widgets. Use them on regular pages or inside the single doc template.

WidgetWhat it showsWhere to use it
weDocs – Docs GridYour docs as a grid of cardsDocs home or landing page
weDocs – Docs SidebarThe doc tree with sections and articles, plus a quick search boxLeft column of a doc page
weDocs – BreadcrumbThe navigation path to the current docAbove the doc title
weDocs – Doc NavigationPrevious and next doc links in reading orderBelow the doc content
weDocs – Table of ContentsAn “On This Page” list of the current doc’s headingsRight column of a doc page
weDocs – Search ModalA search box that opens a search popupHeader, hero or sidebar
weDocs – Hamburger MenuA compact menu for the doc treeMobile and tablet layouts
weDocs – Was This HelpfulYes and no feedback buttons for the readerEnd of the doc content
weDocs – Need More HelpA box pointing readers to supportEnd of the doc page

Previous and next links follow your full documentation tree, so readers move through docs in the order you set.

Design the single doc template (Elementor Pro)

Section titled “Design the single doc template (Elementor Pro)”

weDocs adds a ready-made template called weDocs – Single Doc Page to the Elementor Theme Builder. You edit it like any other Theme Builder template. This part needs Elementor Pro.

  1. Go to Templates > Theme Builder in your WordPress dashboard.
  2. Click Single Post under Site Parts.
  3. Find weDocs – Single Doc Page and click Edit.

Elementor Template

The template opens in Elementor with a sample doc in the preview. It comes with a docs sidebar, breadcrumb, doc content and an “On This Page” table of contents.

Elementor template edit

  • Move, remove or restyle any widget in the layout.
  • Add more weDocs widgets from the weDocs category, such as Was This Helpful or Need More Help.
  • Use Elementor’s own Single widgets, such as Post Title, Post Content and Featured Image, for the doc itself.
  • Add FAQs with the weDocs FAQ shortcode inside a Shortcode widget.
[wedocs_faq group="" limit="-1" orderby="menu_order" order="ASC"]

Click Publish or Update when you are done.

Display conditions tell Elementor which docs use this template. In the Theme Builder, click Edit Conditions under the template card. In the screenshot above, the template shows Instances: Docs by author.

  1. Click Edit Conditions.
  2. Choose Include, then pick Docs to apply the template to every doc.
  3. Add an Exclude rule if some docs should keep a different layout.
  4. Click Save & Close.

Elementor explains every condition option in its guide on setting conditions for templates.

The last step is one setting in weDocs. It decides which template renders your single docs.

  1. Go to weDocs > Settings > General.
  2. Scroll to Single Doc Template.
  3. Select Elementor from the dropdown.
  4. Save your settings.

This is a screenshot of choosing template

OptionWhat it uses
Automatic (Detect)weDocs picks the template that fits your theme. This is the default.
Classic (PHP Template)The classic weDocs PHP template
Block (Block Theme Template)The block theme template for full site editing themes
ElementorYour Elementor Theme Builder template

Open any doc on your site to check the new layout.

Last updated on

Filed under weDocs Pro

Still stuck?

Our support team can walk you through it.