If you've been building WordPress sites with Elementor for a long time, the first time you switch to the Kadence Theme + GutenbergThe current boundaries of Kadence's official capabilities are also very clear: the theme structure relies more on Elementor, and the theme structure is more dependent on Elementor's own content, so it's very likely that there will be a strong sense of discrepancy between Kadence and Elementor. The current boundaries of Kadence's official capabilities are also very clear: Theme structures rely more on Hooked ElementsWooCommerce's in-depth templates rely on the Product Templates (Woo Templates) for Kadence Shop KitInstead of wrapping all pages in the same set of visual template logic as Elementor.
This article is not a general introduction to Kadence, but a complete review based on a recent real trade showroom project we did. The client's requirements were very clear:The whole site try to use WordPress native Gutenberg editor, do not use Elementor, the requirements of lighter, more stable, more conducive to SEO, and post maintenance costs should be low. It is also because of this project that we went through the key issues of Kadence theme order page, article system, product templates, brand page, Mega Menu, breadcrumbs, Off Canvas Sidebar for mobile and so on. The final conclusion was straightforward:Kadence is perfectly capable of making complex websites, but only if you accept that it's a native WordPress logic of “theme global structure + block content + dynamic templates” and not a stand-in for Elementor.
Why Kadence was chosen for this project instead of continuing to use Elementor
This project ended up with Kadence, not because Kadence is more fancy than Elementor, but because the customer didn't want “fancy,” but ratherLighter, more structured, better for long-term maintenanceKadence Theme itself is responsible for the global structure and theme layer capabilities, Kadence Blocks are used to enhance the Gutenberg layout, Hooked Elements are used to take over the one-page, archive, and content insertion positions, and the WooCommerce templates for the product pages, archive pages, and product cards are taken care of by Woo! Templates of Kadence Shop Kit. In other words, Kadence's system division of labor is more clear than Elementor, which is suitable for foreign trade sites, enterprise sites, product display sites and other sites that emphasize more on structure and maintainability.
From the perspective of project execution, this choice has been proved to be right later on. It's true that the page editing experience is not as “WYSIWYG” as in Elementor, but the site structure will be cleaner: single pages will be handled in Pages, articles will be archived in Archive, product templates will be in Woo Templates, and custom content types will be in CPT + Dynamic Content. In other words, theKadence is better suited to building a website as a “content system” rather than as a collection of drag-and-drop visual pages.
Kadence build the most important thinking switch: pages, templates, dynamic content to be handled hierarchically
After moving from Elementor to Kadence, the first thing we had to do was not to learn a certain functionality, but to change our way of thinking. In Elementor, we used to do things in the same way: homepage, article templates, product pages, archive pages, almost all of them can be taken over by Theme Builder. But in Kadence, this way of thinking will hit a wall very quickly. Because Kadence's best practices are actually layered:Regular pages go to regular pages, articles go to the article system, WooCommerce goes to WooCommerce, and custom content types go to CPT.
To take the simplest example: the home page, about us, contact us, service page, FAQ and such pages are still essentially “standalone page content”, and the most standard practice is still to include the content in the Pages You can create pages directly in Gutenberg / Kadence Blocks and then use Gutenberg / Kadence Blocks to build the content. They don't need to be forced into a template system for the sake of “templatization” because a template system is better suited to managing a “uniform structure of similar content” rather than individual content on each separate page. Kadence's official documentation on Hooked Elements and Template Elements essentially emphasizes that templates are better suited for reusable structures and that content should remain in the content itself.
What to do with regular pages: Single pages under Kadence should still be in Pages.
The home page, about us, contact us, and several service pages in this project all ended up being directly in the Pages It's done in the Gutenberg editor. Why is this the most stable? Because these pages are more like “content containers” and don't rely on archival queries, single-article loops, or dynamic product fields. What you really need to control: content widths, header hierarchies, image blocks, button styles, graphic layout, responsive layouts - Kadence Blocks is designed to solve these problems.
In the implementation process, we actually use the way is: first unified the whole station's color, font size, button styles, Section spacing and content width, and then in the page ride Hero, selling point area, product recommendation area, FAQ, CTA and other modules. The biggest advantage of doing so is thatNormal pages are always kept simple, and there is no need to understand complex template inheritance relationships when customers want to change copy, change images, or add blocks at a later stage. This is one of the most important principles to adhere to after switching from Elementor to Kadence: don't think about templates first when you can solve the problem directly on the content page.
How to build an article system: the correct relationship between News pages, category pages and Post Archive.
The post system is another very crucial part of this project. One of the things that many users get confused about when doing a blog for the first time under Kadence is the post system:“Is the ”News" portal a general page, an article page, or a category page? In the end, we went with the solution of first creating a normal Page named NewsThen go to Settings → Reading Specify it in the Articles Page (Posts Page)WordPress itself is built with the page_for_posts This option to identify the post page is the most standard way to get the blog entry.
In this way, “News” becomes the entry point for the blogroll, while “Industry News” and “Company News” continue to serve as the entry points for Category Archives Page exist. That is, all three types of pages are essentiallyArticle Archiving SystemKadence's post archive templates and Archive Content replacement logic are naturally suited to handle this kind of structure: a main blog page, plus multiple category pages that share the same archive system, but differ only in titles, descriptions, breadcrumbs, and query results.
Here's an important detail to remember:Posts Page is not the same as a regular page. Once News is set up as a posts page, it's more like a “blog container page”, where the main content displayed on the frontend is the list of posts, not the body of the text you're filling out in that page editor. A lot of WordPress developer documentation and community experience has also emphasized over and over again that a Posts Page is more like a container than a normal standalone content page.
Why the breadcrumbs on the article category page often don't automatically bring up the “News” layer?
There is a typical phenomenon in this project: the breadcrumbs on the Brand page are not displayed when you turn on the has_archive After that it can be displayed as Home / Brands / brand01But article category pages are often shown only as Home / Industry Newsand does not automatically become Home / News / Industry NewsThis is not a Kadence error. It's not Kadence that's wrong, it's The WordPress hierarchy of CPT archive and Posts Page is not a logical one.CPT's has_archive is part of the native structure, whereas the Posts Page is just the blogroll entry, it's not naturally the parent of all category archives.
So if you see the breadcrumb missing the “News” layer in the article category page, it is normal, and Kadence officially supports switching the breadcrumb engine to other engines such as Yoast, Rank Math, SEOPress, etc. This is also due to the fact that different engines don't handle the blog hierarchy in the same way. Kadence officially supports switching breadcrumb engine to other engines such as Yoast, Rank Math, SEOPress, etc. This is also because different engines don't have the same way to deal with blog layers. For blog sites, if you are very concerned about Home / News / Classifieds This path display is usually more stable than continuing to rely hard on Kadence's built-in breadcrumbs by cutting to SEO breadcrumb engines that are better suited to the customization tier, or by manually patching in this layer of links in the archive template.
WooCommerce Product Detail Pages: Don't Hardwire Plain Elements Anymore!
This was one of the most critical cognitive shifts in the entire project. At the beginning we also tried to create templates in Kadence Elements, and then we passed them through the Replace Single Post Content Taking over WooCommerce's single product page seemed a lot like the Elementor days of “applying a template”, but it quickly became clear that this was the wrong way to go. Here's why:WooCommerce Single Product Page is not a normal article content page, it has its own complete product template structure. Kadence officials have now made this very clear - WooCommerce-related templates should go Product Templates (Woo Templates) for Kadence Shop KitInstead of replacing the product page content area with a normal Template Element.
In the end, we adopted the right program:
- Product details page → Single Product Woo Template
- Product Category Page → Product Archive Woo Template
- Product Card → Product Catalog Loop Item Template
Each of these three layers is responsible for its own thing: Single Product Template is responsible for the structure of the product detail page, such as gallery, title, price, description, parameters, CTA; Product Archive Template is responsible for the overall layout of the product category page and query; Loop Item Template is responsible for the appearance and content of a single product card. Kadence's official definition of Product Templates is just like this: use Woo Template Blocks to dynamically output various elements of WooCommerce, instead of treating Woo pages as ordinary article templates.
Product category page why easy to get stuck: structure, navigation, screening and style can not be mixed to do
The product category page is the easiest place for people to “look almost done, but the details are always wrong”. This is where almost all of the high frequency problems we encountered in this project were centered:
- The top needs to be breadcrumbed, but
Product Breadcrumbsblock can only be used for single product templates - The left side of the product category navigation desktop can be, to the tablet and cell phone all expand, the experience is very poor!
- Product card templates can be built, but there are many details such as the number of summary lines, hover shading, borders, button positions, etc. that are not readily available.
- The off-canvas filter button above the product list can be turned on, but there are no panel switches for button centering, desktop hiding, and other behaviors
The root causes of these problems are really the same:Kadence Product Archive is responsible for the structure and queries, it doesn't mean that all visual details will be made into visualization options. The official position of Product Archive Woo Templates is clear: it can be used with Archive: Main Query Block Do the standard filing layout, or use Advanced Query Loop Block More flexible control. When it comes to the details of the card and mobile interactions, there are still a lot of areas that need to be filled in with CSS.
This is a very practical Kadence principle that we have finally come up with:
Use templates and blocks to address the structure of 80% and CSS to address the details of the final 20%.
For example: summary two-line omission, hover shading, button centering, desktop hiding mobile filter buttons, all of these are more suitable for CSS closing, rather than finding switches in the panel. Kadence Blocks also officially and explicitly supports block-level customization of CSS.
The best solution for mobile product category pages is not to stuff a left sidebar, but Off Canvas Sidebar.
On desktop, it's common to put a category navigation bar on the left side of the product category page; however, on tablets and cell phones, it's a very poor experience to have the entire category navigation bar directly on the page. The reference site's “show one button, click it to bring up all the categories from the right” approach is actually closer to the standard experience of modern WooCommerce sites, and Kadence provides the following in WooCommerce Addons Catalog Off Canvas Sidebar The relevant capabilities are, essentially, for this scenario.
But here's an easy pitfall: many people go to the backend by the documentation and can't find the Off Canvas SidebarIn the end, I thought it was a function that was not available. We encountered this problem in this project, and finally realized that the key is not in “will not use”, but in theIs the corresponding WooCommerce Addons capability enabled?This is a typical problem in the Kadence system. This is a typical problem in the Kadence system: the functionality is not absent, but the module is not turned on.
Ultimately the most stable mobile category page solution is:
- Desktop side retains the left side category bar
- Tablet / Mobile hide the left category bar
- Keep only one filter / sort button at the top
- Click on it to slide the off-canvas panel to the right.
This solution is both user-friendly and more in line with Kadence's current WooCommerce capability boundaries.
Brand is not part of the product categorization system: it is more suitable for use withCustom Article Typespage to realize the
There is another category of content in this program that is very typical:Brand Customized Article Type PageThe client's reference website has a set of brand entrances. The client's reference website has a set of brand portals, with multiple brand logo cards at the top, clicking on which leads to the corresponding content detail page, and the following structure of introductions, application scenarios, related content, etc. The client's reference website has a set of brand portals. At the beginning, some people would instinctively think: can we just make Brand into a WooCommerce product category? But this project quickly proved that this approach is not appropriate. Because Brand here is not the same as WooCommerce product categories, it is more like a separate content system.
In the end, we adopted the program:
- Use ACF to create a Brand Custom Post Type (CPT)
- One piece of content per Brand
- Creating Brand One-Page Templates with Kadence Template Elements
- Uniformly placed navigation area at the top
- The content area below goes through the same set of templates, replacing only the specific Brand content
This is officially supported by Kadence: Hooked Elements for template takeover of custom post types, and Dynamic Content / Dynamic HTML for dynamic output of Post Title, Post Content, and ACF fields into templates.
Why do you insert Content block will report an error.
This is a very specific, yet typical pitfall we stepped into when building Brand's custom post type one-page template.
We've already set up the Brand CPT, and we've also set up the Template Element as a detail page template, and it turns out that when trying to use the core Content block to display the body, the backend reports an error directly:
Block ‘content’ can not be inserted
At first it's easy to mistake it for a problem with the ACF, CPT, or template settings, but check out the real reason:In the context of Kadence Template Elements, do not rely on the core Content / Post Content placeholder block to output the body. Kadence's current official recommendation is to use the Dynamic HTML blockand then set the dynamic source to Post ContentThe official Kadence Dynamic Content documentation also makes it clear that it is possible to dynamically output default content such as Post Title and Post ContentIt is also possible to call custom fields such as ACF, Meta Box, and so on.
So in Kadence's CPT one-page templates, if you need to output body text, the safest thing to do is not to keep trying to insert the Content Block, instead:
Dynamic HTML → Source: Post Content
Why does Brand's breadcrumb work on the archive?
Brand The reason this set of content later showed up in breadcrumbs as:
Home / Brands / brand01
The key reason for this is that we finally gave Brand CPT the boot. has_archiveWordPress natively supports custom post types via the register_post_type() 的 has_archive parameters to generate a CPT archive; once Brand actually has an archive layer, it is easier for Kadence's breadcrumb to recognize the middle layer.
This phenomenon is helpful in understanding the structure of WordPress:
As long as it's part of the native structure, it's easier for the theme and the breadcrumb engine to recognize it automatically; if it's just “some page you made by hand,” the theme won't necessarily treat it as a system-level hierarchy.
Mega Menu is not a normal menu and is done differently in Kadence.
In this project, the top navigation also need to realize a common style of large station: the main menu after hovering, below the full-width sub-menu area, a line of 4 columns, can be displayed in multiple rows. This effect many webmasters intuitively called “drop-down menu”, but from the point of view of the actual realization, it is not an ordinary secondary menu, but the Mega MenuKadence's official documentation on Advanced Navigation explicitly refers to this mode as a Mega Menu and supports full-width layout, multi-column layout, and insertion of custom block content.
The most suitable implementation for this type of menu is not to continue hard nesting with the normal menu structure:
- 用 Advanced Header / Advanced Navigation
- Enables the parent menu item to Mega Menu
- Using Column Layout in Mega Menu Containers
- A set of headings + sub-links in each column, with images, descriptions or buttons if necessary
The benefits of this approach are clear structure, more professional vision, and also more suitable for the organization of information in corporate and foreign trade sites. Especially if you have a lot of product lines, brand entrances, and solution entrances, Mega Menu is much more readable than ordinary menus.
Why Kadence is often “in the document, not found in the background”?
If you're new to Kadence, it's easy to wonder one thing:
Why is it that a feature is clearly written in the official documentation, but I can't find it at all in the backend?
We encountered this at least three times during this project:
- Hooked Elements not found
- Can't find Woo Templates
- Can't find Off Canvas Sidebar
Final troubleshooting revealed that it was almost always related to the same cause:The module in question is not enabled, or requires the corresponding Pro / Addons capability. Kadence's official dependencies for these modules are actually very clear: Hooked Elements requires the corresponding functionality in Theme Kit Pro to be enabled; Woo Templates requires Shop Kit's Product Templates to be enabled; and some of the WooCommerce-related enhancements hang under the WooCommerce Addons.
So a very important habit of troubleshooting when doing a Kadence project is:
Make sure the corresponding module is enabled in the backend before discussing how the feature works.
It saves a lot of ineffective trial and error.
Many users think they don't know how to use Kadence, when in fact the more common problem is:The corresponding Pro module is not enabled, or the division of functions between Theme Pro, Blocks Pro, Shop Kit and common extensions is not clear.
Kadence officially splits its product line by modules, such as Theme Kit Pro for Hooked Elements, additional templates and theme enhancements, Blocks Pro for dynamic content, conditional displays and more specialized blocks, and Shop Kit to extend WooCommerce's product templates and store functionality.
For users who want to reduce the cost of trial and error and complete the deployment of the site faster, it is more suitable to match the corresponding modules according to the actual needs, WP Website Builder also provides Kadence Pro and common extension resources, which are suitable for building enterprise official websites, content sites, foreign trade showrooms and WooCommerce websites.
If you want to deploy a Kadence themed site quickly and with less fuss, you can also build a Kadence themed site directly in WP Master Builder. Get Kadence Pro and popular extensions.
Our final summary of Kadence's best practices for building websites
After this project, we've made a very clear summary of the path of building websites under the Kadence theme. For enterprise official website, foreign trade showcase site, WooCommerce product showcase site, this structure is very stable at present:
General pages, such as the home page, about us, contact us, and service pages, are all built directly in Pages using Gutenberg; the article system is built through the News Page + Posts Page + Category Archives WooCommerce is completely hierarchical: product detail pages go to Single Product Woo TemplateProduct Category Page Go Product Archive Woo TemplateProduct cards are available separately. Catalog Loop Item Template Management. Instead of being hardwired to product categories, brand pages are no longer managed using the Brand CPT + ACF + Template Elements + Dynamic HTML / Dynamic Content A system of independently branded content was formed. As for Mega Menu, mobile filtering, breadcrumbs, etc., this was accomplished based on Kadence's existing module capabilities and necessary CSS additions.
The best thing about this structure is not that it's “exceptionally functional,” but that it is:
Clear, stable and well maintained.
Pages are pages, templates are templates, dynamic content is dynamic content, Woo is Woo, and branding is branding. You won't have to cram everything into a huge template system like you do in Elementor, and then be afraid to change one thing at a later stage.
Conclusion: Kadence is not a replacement for Elementor, but a more native way to build a WordPress site.
If I could summarize this project in one sentence, I would say:
Kadence is not a replacement for Elementor, but rather a method of building websites that is closer to WordPress' native logic.
It does have a different learning curve than Elementor, and when you first get started you're more likely to get stuck in places like template structure, archiving logic, and dynamic content. But as long as you really straighten out this set of ideas, you will find that Kadence is very suitable for those websites with higher requirements on structure, performance and maintainability. Especially for foreign trade display site, enterprise official website, product display WooCommerce website, its advantages will become more and more obvious.
If you are also moving from Elementor to Kadence + Gutenberg, or are researching how to build a WordPress site in a more lightweight way, hopefully this article will help you go the extra mile.
Want to build a corporate website, trade showroom or WooCommerce product showcase with Kadence theme?
If you're also making the switch from Elementor to Gutenberg, or are struggling with the headaches of product templates, custom post type pages, Mega Menu, post archiving, breadcrumb navigation, and filtering on mobile, feel free to follow along! WP Website BuilderWe will continue to update this page with more and more information about our experience with WordPress. We will continue to update more WordPress site building solutions, structural design and troubleshooting experience based on real projects.
暂无评论