Xpro Elementor Theme Builder

⌘K
  2. Home
  4. Docs
  6. Xpro Elementor Theme Buil...
  8. Free Theme Builder
  10. How To Create Singular Layouts Using Theme Builder For Elementor

How To Create Singular Layouts Using Theme Builder For Elementor

Xpro theme Builder For Elementor lets you customize each part of your website. It is fully integrated and works seamlessly with popular themes like Hello, Xpro, GeneratePress, and Astra. You can create custom single layouts for post types, WooCommerce single product pages, search pages, 404 pages, and much more. 

You can elevate your online store experience by changing the default layout and customizing it as you want. You can also create custom templates that determine the layout of your website’s static pages and blog posts.

The default single-post layout of most of the themes is quite boring, and you cannot change or customize it to match your vision. This was only possible with complicated workarounds and coding knowledge, but now with the Xpro Elementor Theme Builder, it is easier than ever. You can design your own single post/page with the live front-end dashboard of Xpro Theme Builder for Elementor.  There’s no need to deal with any shortcode; no more going back and forth in the WP backend. You can fully customize singular posts and pages like 404, single post, single page, single product, cart, checkout, account, and much more. There’s no limit to what you can customize; it’s all up to your imagination. 

Some salient features of creating singular layouts using Xpro Theme Builder are:

  • Fully integrated with WooCommerce
  • Apply display conditions as you like
  • Create attractive designs on the go from a live front-end dashboard
  • Assign custom user roles and much more

Let’s learn how to create a single post/detail page for your WordPress website.

How To Use Xpro Elementor Theme Builder to Design a Single Post?

First, we are going to see the default Single Post Layout of a WordPress theme. It can be different for different themes, but mainly it’s based on the same layout. For this, simply login to your WordPress Admin Dashboard and view any default post type from the All Posts option. This is the default ‘hello world” titled post.

Requirements for Creating Singular Post Layout:

Before creating a singular page layout, here are some requirements you need to check to ensure everything goes smoothly.

Make sure to install and activate the theme and all these plugins on your WordPress website. 

To install them, just go to the Add New Plugins page and search for each plugin. After that, just click Install and then Activate. You can also check out the installation guide of Theme Builder for Elementor.

Creating a Singular Page Layout:

Once you have installed and activated the plugins, navigate to your WordPress dashboard. Visit your website by clicking on Visit Site.

On the front end, you will see the Xpro icon on the bottom left side of your page. Click on it to access the Xpro theme builder dashboard.

Now simply click on the Singulars option to create a new single post/page or edit an existing one. Here, we will create a new single post layout so that we can replace the existing ordinary-looking layout.

Type the name of your new Singular Layout and press Enter. Your new layout will be available to Edit.

Simply Hover over the newly created Singular Layout and click the Edit Icon to customize the settings of your Singular Layout.

Here, you can change the Title of your Singular Template, set Display Conditions, User Roles, and Status of the layout. Whenever you make a change, don’t forget to ‘Update’ your settings otherwise, it won’t work for you. Remember, you need to change the Status of your singular layout to ‘Published’ from the Status option.

You can now easily customize or create a new singular layout from scratch using any Elementor widget. Click on the Elementor button to get started.

Moving forward, in the next part, I will explain how you can create a single post template from scratch using Xpro Theme Builder for Elementor.

Create Custom Single Post Using Theme Builder for Elementor

Let’s create a single post template from scratch using Xpro Theme Builder. But first, let me explain what they are. Singular templates display one item at a time. For example, one post, page, or instance of a custom post type.

A Singular template can be used to display the following:

  • A page
  • A blog post/blog detail page
  • A WooCommerce product detail page

With Xpro Theme Builder for Elementor, you can create any of the above-mentioned custom singular templates for FREE. The robust theme builder gives you two options to design custom singular templates:

  • You can design a new Singular Layout from scratch.
  • Or, you can simply import any of the pre-built Single posts/pages and WooCommerce Single Product Template to quickly add a professionally designed Singular Layout to your website.

Remember, Xpro Elementor Theme Builder is fully compatible with popular Elementor themes like Xpro, Hello, GeneratePress, and Astra. Moving forward, let’s design a single blog post using Xpro Elementor Theme Builder. Simply click on the Theme Builder Icon, navigate to the Singulars Layout section, and edit an existing layout or create a new one.

Set the Display Conditions, set user roles, and much more. Here, I will set the Display On option for my current post, ‘Hello World!’. Simply scroll to the bottom of the Display On dropdown and select ‘Specific pages/Posts/Taxonomies, etc. Next, click and select the post you want this template applied to.

Remember, you can apply the singular template to:

  • All Post Types
  • Posts
  • Pages
  • Any Custom Post Types present on your site

Similarly, you can set rules from the Don’t Display On option to hide your Singular Layout on a specific page/post.

Finally, click on the Elementor button to edit your Singular layout.

As I mentioned earlier, you can create a singular layout from scratch or simply insert one of the pre-built Singular Templates to quickly add a single post, page, or WooCommerce product page to your website. Here I am going to create a custom single blog post layout using theme builder widgets.

Now, once you click on the Elementor button from the Xpro Theme Builder Dashboard (as above), you will be redirected to a new tab with the Elementor Editor opened on it.

Click on the Xpro Theme Builder section available in the widgets menu.

Now simply drag and drop the Xpro Themer widgets to create a stunning post layout for your website. You can use powerful widgets like Post Meta, Post Comment, Post Title, Post Content, Featured Image, and many others.

Let’s first add a Featured Image for this specific single post. Simply drop the Featured Image widget into your desired location.

Set custom image height and width from the Style tab, and set Object Fit as you like. After applying your desired settings, simply click on the update button present on the bottom left side.

The widget will automatically fetch the featured image you published recently. Let’s add other Xpro Themer widgets to complete our new single-post layout. I have added the ‘Post Meta’ widget now. You can style it from the Style tab as you like.

Similarly, add any other widget you like and complete your single-post layout. Your imagination is the only limit here. I have created a custom layout below:

Here, I’ve mentioned all the widgets used to create this awesome layout. You can create your own single post layout as you wish using Xpro Theme Builder widgets.

Once you’ve finalized your layout in the Elementor Editor, simply click on the Update button. Your changes will be saved, and the layout will be updated.

Remember, your post content needs to be added from the WP dashboard. To do this, simply open the specific post and add your content in blocks. You can choose or upload Featured Images, add/choose a category for the post, and turn comments on/off right from the editor.

Simply update your settings and view the post. Your custom layout and content changes will reflect on the live post.

This is all from our custom singular layout for the WordPress guide. I hope you have a better understanding of using Xpro Theme Builder for Elementor to create a FREE single page/post type, WooCommerce single product, search page, 404 page, and much more. 

In the same way, you can create archive layouts for your website for free using our powerful theme builder. Check out our detailed guide on creating custom archive templates using Xpro Elementor Theme Builder and instantly delight your website visitors with perfect UI.

How can we help?