Sometimes we need to create a simple product detail page template in order to differentiate the product details from the regular article detail page. In this article, we will explain how to use theElementor and the Gutenberg EditorRealize this kind of product detail page template creation and share the related implementation ideas and concrete steps.

Page Splitting and Layout

Before we can start making them, we need to make the pagebroken up inseparate items.. A standard product detail page can be divided intoUpper and lower parts, the upper part can be split into left and right parts, and the lower part is also left and right parts. By splitting the page in this way, we can better modularize the design and layout.

Creating Product Detail Page Templates with Elementor

1. Creating Single Post templates

1. New Template: Using Elementor'sTheme Builderfunction, create a new Single Post template.
2. Making the top half::
   • Add aContainer, and set up as a two-column structure with equal left and right columns.
   • To set the container's background image, use the Dynamic Label feature to select Featured Image as the background image and override the style settings.
   • Left column: add Post Title module, breadcrumb navigation (can be used)Rank Math SEOmaybeSlim SEOetc. provided by plugins), plus two button modules. The WeChat button can be set up as a Popup popup for clicking on the QR code.
   • Right sidebar: Add a Featured Image module.
3. Making the second half::
   • Add a container, again divided into two columns, with the left column set to about 75% wide.
   • Left column: Drag in the Post Content module to call the content of the article, you can also add modules such as page flipping and sharing.
   • Right sidebar: insert search module, title module, call recent articles or products.

After production, publish the template and apply it to all articles or specified categories. In this way, when we set different product (article) titles, featured images, and detail descriptions, the content of the product will automatically change, the format is fixed and uniform, and it is easier to use.

2. Insertion of article content

Instead of writing posts directly in Elementor, it is recommended to call normal post content by inserting the Post Content module. This way, we can continue to write content using the Gutenberg editor in the WordPress backend, which is more convenient and efficient.

Making Product Detail Page Templates with Gutenberg Editor

Gutenberg Editor's functionality continues to improve with the expansion of theplug-in (software component)You can realize powerful page building functionality. Next share two implementation ideas.

Idea 1: The Simple Approach

This method is similar to writing articles on a regular basis, without the need to create fixed templates or use the plugin's template customization feature.

1. Installation of the Gutenberg Enhancement PluginAsKadence BlocksmaybeGreenshiftetc.

2. Making the top half::
   • Create a new article and add the ROW module using the Gutenberg editor, divided into two columns.
   • Left column: add title module, breadcrumb navigation module and button module respectively. Popup buttons can be made with Greenshift's Popup module.
   • Right Sidebar: Insert the cover module that comes with WordPress and set the featured image.
3. Making the second half::
   • Add a ROW module. If the theme already has sidebar functionality, compose the product content directly; if not, set the sidebar manually.
4. Quick Copy Function::
   • Install a replication plugin such as Yoast Post.
   • When adding a new product, just click Clone or Quick Draft next to [Product Template] in the article list and change the text and image.

This method, while seemingly tedious, works in conjunction withCopy PluginIt's very convenient, and regular use can greatly improve efficiency.

Idea 2: Advanced Methods

This method requires the use of the theme'sHooks functionCurrentlyAstra Pro,Kadence Pro,Blocksy Proetc. support this feature.

1. New Hooks Template: Specifies that the application is to be applied to the desired article category.
2. Making the top half::
   • Create a new ROW module divided into two columns, add a title, breadcrumb navigation and button module on the left; on the right, add a cover module and set it as the featured image.
3. Making the second half::
   • Insert the Post Content article content module, which comes with WordPress.
   • Depending on the actual situation, if the theme already has a sidebar function, there is no need to create additional; if not, then manually divided into two columns, the right side as a sidebar.

This approach is more advanced and flexible, and is suitable for projects that require more customization and detail.

summarize

Above is the detailed guide to create easy product detail page templates using Elementor and Gutenberg editor. By reasonably splitting the page structure and utilizing the powerful features of Elementor and Gutenberg Editor, you can easily realize the modular and templated design of product detail pages.