Uncode 2.3.0, introduces new elements that support Dynamic Contents and extends features of elements that already supported Dynamic Contents. Dynamic Contents play an essential role in creating layout templates. With the Dynamic Contents options, it's possible to create personalized and dynamic layouts by populating data from various sources.
In the past, you were limited to building static pages. You can create the layout for your content and then apply it across your website with just a few clicks. In Uncode, the new Dynamic Contents features let you automatically insert content from your WordPress site in your designs.
What are Dynamic Contents?
Dynamic Contents allow you to replace static content in content elements with WordPress default contents. This means you can transform a regular Heading into the title of your page, a simple Text Block into the content of your post, or a single image into the Featured Image of your portfolio.
The best part of Dynamic Contents is that you can create a template with Dynamic Contents placeholders and use it in your pages, posts, or custom post types.
Dynamic Contents and Content Block
The ultimate power of Dynamic Contents, when associated with Content Blocks, is creating custom designs matrix that can be used as templates for your Post Types (both single page template, both archive and categories templates).
In Uncode, you can create a Content Block matrix that uses Dynamic Contents placeholders and apply it to your Post Type. The Content Block with Dynamic Contents modules will be automatically filled with the contents from the final post page or archive category page.
Ultimately, you can customize your pages, blog posts, portfolio project pages, and single product pages. But you can also customize the design of the respective archives and category pages.
Dynamic Contents examples
In the Uncode Demo, we have created some examples of layouts made with the Dynamic Contents functions that you can import. Note that these are examples applied to single pages to give users more variety. Dynamic Content Blocks are then applied via Page Options.
The advantage of Dynamic Contents is that they can be used as a matrix to define a template. The correct use is to use the Content Blocks via the Theme Options to centralize the design of multiple pages or posts.
- Portfolio Center Dynamic Layout;
- Portfolio Sidebar Dynamic Layout;
- Blog Post Page Builder Dynamic;
- Product Carousel Dynamic (and all the custom product layouts).
How to use Dynamic Contents
There is no sequence of steps to follow when working with Dynamic Contents. The very concept of Dynamic Contents is to provide the user with a set of options that allows for the highest possible creativity and design customization without the need to modify the code.
Below you can find the necessary steps to realize a simple template for your single blog posts, achieved through Header, and Content area. Remember that in the same way you can also create a template for the archives or category pages, in case you find more information in the dedicated documentation Archive Layout.
- Create a new Content Block, and save it with a descriptive name such as 'My Post Header', screenshot .
- Insert a Row inside it and, in the settings, insert a placeholder image (which will be used as a fallback), activate the Dynamic Background → Dynamic Image options and select a source. At this point, the Featured Image of your blog posts will be used as the header background. Set the layout options to your liking, screenshot .
- Insert a Heading module and, in the settings, select a source for the Dynamic Heading option. At this point, your blog posts' title text will be used as a dynamic text for the Heading. Set the layout options to your liking. Optionally insert an Info Box module or any other module that supports Dynamic Contents, screenshot .
- Navigate to Theme Options → Post → Header → Type → Content Block and select the Content Block you have created, screenshot .
- Create a new Content Block, and save it with a descriptive name such as 'My Post Content', screenshot .
- Insert a Text Block element and set the Dynamic Text option to Get the Content. Set the layout options of the Text Block or of the Row and Column container to your liking. Optionally insert other module that supports Dynamic Contents, screenshot .
- Navigate to Theme Options → Post → Content → Type → Content Block and select the Content Block you have created, screenshot .
Below is a list of Uncode elements that can use Dynamic Contents, a brief description, and the content sources they can use.
- Row and Inner Row: they can display the Featured Image or Secondary Featured Image as the background of a Row, screenshot
- Column and Inner Column: they can display the Featured Image or Secondary Featured Image as the background of a Column, screenshot
- Posts: this element can be used to create an archive or category page with the Dynamic Query or to create a Related Posts section, screenshot
- Media Gallery: it can display the Page Media of a blog post, a portfolio, or display the gallery of a WooCommerce product, screenshot
- Single Media: this element can display the Featured Image or Secondary Featured Image as embed media, screenshot
- Heading: it can display different text sources, among these, we have the page title, the Excerpt or the price (for a WooCommerce product), screenshot
- Text Block: it can display different text sources; among them, the Excerpt or the content, screenshot
- Button: this element can create dynamic Add To Cart buttons for WooCommerce products, screenshot
- Info Box: it can display the date, categories, author, comments dynamically and estimated reading time for a particular page or blog article, screenshot
- Author Profile: this element can display a special box with all the information related to the author of a particular page or blog article, screenshot
- Breadcrumbs: this element creates the breadcrumb (navigation bar) that reveals the user's location on a website, screenshot
- Copyright: it creates the copyright of your site (that you can set in the Theme Options), screenshot
- Portfolio Details: this element displays the Portfolio Details of a Portfolio project, useful to create custom Portfolio layouts, screenshot
Please note that dynamic options are created to connect contents created through WordPress native functions, such as title, content, excerpt, featured image, etc... For example, a Text Block module with 'Get the Content' option is designed to display an article or page created with the native WordPress editor, and not a page or content built through Page Builder.
If, for example, through the dynamic 'Get the Content' option of the Text Block module, you try to display content created through the Page Builder, please note that this can create nested Row structures that are not supported. So if you use a Text Block module with the 'Get the Content' option in your Content Block to display a content created with the Page Builder, remember to exclude padding from the embedded content, and that support is not offered for possible problems, screenshot .