{"id":19307,"date":"2021-04-30T04:30:56","date_gmt":"2021-04-30T09:30:56","guid":{"rendered":"https:\/\/wpstackable.com\/?p=19307"},"modified":"2022-06-27T23:26:07","modified_gmt":"2022-06-28T04:26:07","slug":"dynamic-content-in-stackable","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/dynamic-content-in-stackable\/","title":{"rendered":"Dynamic Content in Stackable"},"content":{"rendered":"\n<p data-block-type=\"core\">Take your page building experience with Gutenberg to the next level with Stackable\u2019s built-in dynamic content functionality \ud83d\ude07<\/p>\n\n\n\n<!--more-->\n\n\n\n<p data-block-type=\"core\">If you\u2019re on the lookout to make your website look more professional and functional, using dynamic content is the way to go! As we strive to be the ultimate companion to Gutenberg, we are thrilled to make this feature available within Stackable.<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-defc814 ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-a0154ad ugb-main-block\"><style>.ugb-a0154ad .ugb-heading__title{font-size:40px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">What is Dynamic Content?<\/h2><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">Dynamic content is content that changes over time. This may be done through creating unique user experiences depending on user journey or user intent\u2013making sure that each website visit is a fulfilling experience.<\/p>\n\n\n\n<p data-block-type=\"core\">Most of the time, we just type in static content inside our blocks and have them displayed in our posts and pages. This may seem innocuous at first but it becomes impractical over time when you find yourself constantly updating your pages and posts. To make your website development and maintenance more efficient, use dynamic functionality.<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-0882874 ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-85db464 ugb-main-block\"><style>.ugb-85db464 .ugb-heading__title{font-size:40px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">What dynamic functionality is available in Stackable?<\/h2><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">We developed this feature with utility and great design in mind. Currently, here are the capabilities of Stackable\u2019s built-in dynamic functionality:<\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-eac2e33 ugb-icon-list--v2 ugb-main-block\"><style>.ugb-eac2e33 li{--icon-size:33px !important}.ugb-eac2e33 li::before{width:33px !important;height:33px !important;background-image:url('data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTAgMTkwIiBzdHlsZT0iZmlsbDogIzAwMDAwMCAhaW1wb3J0YW50OyBjb2xvcjogIzAwMDAwMCAhaW1wb3J0YW50Ij48cG9seWdvbiBwb2ludHM9IjE3My44LDI4LjQgNjAuNCwxNDEuOCAxNS43LDk3LjIgNS4xLDEwNy44IDYwLjQsMTYzIDE4NC40LDM5IDE3My44LDI4LjQiIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3R5bGU9ImZpbGw6IHJnYigwLCAwLCAwKTsgc3Ryb2tlOiByZ2IoMCwgMCwgMCk7Ii8+PC9zdmc+')}.ugb-eac2e33 li:nth-child(1):before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFyIiBkYXRhLWljb249ImV5ZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWV5ZSBmYS13LTE4IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU3NiA1MTIiIHN0eWxlPSJmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQ7IGNvbG9yOiAjMDAwMDAwICFpbXBvcnRhbnQiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0yODggMTQ0YTExMC45NCAxMTAuOTQgMCAwIDAtMzEuMjQgNSA1NS40IDU1LjQgMCAwIDEgNy4yNCAyNyA1NiA1NiAwIDAgMS01NiA1NiA1NS40IDU1LjQgMCAwIDEtMjctNy4yNEExMTEuNzEgMTExLjcxIDAgMSAwIDI4OCAxNDR6bTI4NC41MiA5Ny40QzUxOC4yOSAxMzUuNTkgNDEwLjkzIDY0IDI4OCA2NFM1Ny42OCAxMzUuNjQgMy40OCAyNDEuNDFhMzIuMzUgMzIuMzUgMCAwIDAgMCAyOS4xOUM1Ny43MSAzNzYuNDEgMTY1LjA3IDQ0OCAyODggNDQ4czIzMC4zMi03MS42NCAyODQuNTItMTc3LjQxYTMyLjM1IDMyLjM1IDAgMCAwIDAtMjkuMTl6TTI4OCA0MDBjLTk4LjY1IDAtMTg5LjA5LTU1LTIzNy45My0xNDRDOTguOTEgMTY3IDE4OS4zNCAxMTIgMjg4IDExMnMxODkuMDkgNTUgMjM3LjkzIDE0NEM0NzcuMSAzNDUgMzg2LjY2IDQwMCAyODggNDAweiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHlsZT0iZmlsbDogcmdiKDAsIDAsIDApOyBzdHJva2U6IHJnYigwLCAwLCAwKTsiLz48L3N2Zz4=')}.ugb-eac2e33 li:nth-child(2):before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249InRvZ2dsZS1vbiIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLXRvZ2dsZS1vbiBmYS13LTE4IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU3NiA1MTIiIHN0eWxlPSJmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQ7IGNvbG9yOiAjMDAwMDAwICFpbXBvcnRhbnQiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0zODQgNjRIMTkyQzg2IDY0IDAgMTUwIDAgMjU2czg2IDE5MiAxOTIgMTkyaDE5MmMxMDYgMCAxOTItODYgMTkyLTE5MlM0OTAgNjQgMzg0IDY0em0wIDMyMGMtNzAuOCAwLTEyOC01Ny4zLTEyOC0xMjggMC03MC44IDU3LjMtMTI4IDEyOC0xMjggNzAuOCAwIDEyOCA1Ny4zIDEyOCAxMjggMCA3MC44LTU3LjMgMTI4LTEyOCAxMjh6IiBzdHJva2U9IiMwMDAwMDAiIHN0eWxlPSJmaWxsOiByZ2IoMCwgMCwgMCk7IHN0cm9rZTogcmdiKDAsIDAsIDApOyIvPjwvc3ZnPg==')}.ugb-eac2e33 li:nth-child(3):before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNsb25lIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2xvbmUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogIzAwMDAwMCAhaW1wb3J0YW50OyBjb2xvcjogIzAwMDAwMCAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNDY0IDBjMjYuNTEgMCA0OCAyMS40OSA0OCA0OHYyODhjMCAyNi41MS0yMS40OSA0OC00OCA0OEgxNzZjLTI2LjUxIDAtNDgtMjEuNDktNDgtNDhWNDhjMC0yNi41MSAyMS40OS00OCA0OC00OGgyODhNMTc2IDQxNmMtNDQuMTEyIDAtODAtMzUuODg4LTgwLTgwVjEyOEg0OGMtMjYuNTEgMC00OCAyMS40OS00OCA0OHYyODhjMCAyNi41MSAyMS40OSA0OCA0OCA0OGgyODhjMjYuNTEgMCA0OC0yMS40OSA0OC00OHYtNDhIMTc2eiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHlsZT0iZmlsbDogcmdiKDAsIDAsIDApOyBzdHJva2U6IHJnYigwLCAwLCAwKTsiLz48L3N2Zz4=')}.ugb-eac2e33.ugb-icon-list ul{columns:1}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li>Fetch and display post meta<\/li><li>Field custom options<\/li><li>Source custom fields from ACF<\/li><\/ul><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-367d77b ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-6fc9830 ugb-main-block\"><style>.ugb-6fc9830 .ugb-heading__title{color:#515151;font-size:35px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h3 class=\"ugb-heading__title\">Fetch and display post meta<\/h3><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">Fetch data from your post meta (fields that are native to WordPress) or custom fields that you\u2019ve made within the Gutenberg editor and display them in Stackable blocks and native blocks.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"377\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Adding-Dynamic-Content-in-Stackable.gif\" alt=\"\" class=\"wp-image-19369\"\/><figcaption>Adding content from dynamic source<\/figcaption><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Furthermore, easily customize your dynamic content with Stackable\u2019s powerful customization options! Here is a preview of customizing content from dynamic sources <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"377\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Customizing-Dynamic-Content-1.gif\" alt=\"\" class=\"wp-image-19370\"\/><figcaption>Customizing content from dynamic source<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-17ba9a1 ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-46d9b78 ugb-main-block\"><style>.ugb-46d9b78 .ugb-heading__title{color:#515151;font-size:35px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Field options<\/h2><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">Some dynamic fields will have their own options, you can display post titles and URLs as links and have the option to open them in a new tab.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"583\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.27.30-PM.png\" alt=\"\" class=\"wp-image-19367\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.27.30-PM.png 695w, https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.27.30-PM-300x252.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><figcaption>Field options in the dynamic fields modal<\/figcaption><\/figure><\/div>\n\n\n<p data-block-type=\"core\">In addition to that, you can also customize the format for field types that are dates. We have built-in date formatting options, but you also have the ability to create a custom format. Check out our <a data-type=\"URL\" data-id=\"https:\/\/docs.wpstackable.com\/article\/456-using-stackables-dynamic-content\" href=\"https:\/\/docs.wpstackable.com\/article\/456-using-stackables-dynamic-content\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> on date formatting here.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"582\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.28.47-PM.png\" alt=\"\" class=\"wp-image-19366\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.28.47-PM.png 724w, https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-5.28.47-PM-300x241.png 300w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><figcaption>Field options in the dynamic fields modal<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-a3aaef9 ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-4799992 ugb-main-block\"><style>.ugb-4799992 .ugb-heading__title{color:#515151;font-size:35px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Source custom fields from ACF<\/h2><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">In addition to the dynamic functionality in Stackable, if you are an <a href=\"https:\/\/wpstackable.com\/blog\/stackable-integrates-with-acf\/\" data-type=\"URL\" data-id=\"https:\/\/wpstackable.com\/blog\/stackable-integrates-with-acf\/\" target=\"_blank\" rel=\"noreferrer noopener\">ACF<\/a> user, you can use custom fields created from those plugins and display custom field content in blocks!<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-5bf90d9 ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-cc19a20 ugb-main-block\"><style>.ugb-cc19a20 .ugb-heading__title{font-size:40px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Break no sweat with Stackable!<\/h2><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">We\u2019ve made it easy for both beginners and web design professionals to create stunning dynamic websites with Stackable blocks. Streamline your web development process as you won\u2019t need to write a line of code!<\/p>\n\n\n\n<p data-block-type=\"core\">Head on over to our <a href=\"https:\/\/docs.wpstackable.com\/article\/456-using-stackables-dynamic-content\" data-type=\"URL\" data-id=\"https:\/\/docs.wpstackable.com\/article\/456-using-stackables-dynamic-content\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> to know how you can utilize dynamic functionality within Stackable.<\/p>\n\n\n\n<p data-block-type=\"core\">Dynamic functionality is available for Stackable Premium users. Visit our <a rel=\"noreferrer noopener\" href=\"https:\/\/wpstackable.com\/premium\/\" data-type=\"URL\" data-id=\"https:\/\/wpstackable.com\/premium\/\" target=\"_blank\">Premium page<\/a> to know more about all our Premium features.<\/p>\n\n\n\n<div class=\"aligncenter wp-block-ugb-cta ugb-cta ugb-de2a73a ugb-cta ugb-cta--v2 ugb-main-block\" data-block-type=\"core\"><style>.ugb-de2a73a .ugb-cta__title,.ugb-de2a73a .ugb-cta__description,.ugb-de2a73a .ugb-button-container{text-align:left !important}.ugb-de2a73a .ugb-cta__item{background-image:url(https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Learn-CTA.png)}.ugb-de2a73a .ugb-cta__item:before{opacity:0.5}.ugb-de2a73a .ugb-cta__title{font-size:48px !important;font-weight:500 !important;color:#ffffff}.ugb-de2a73a .ugb-cta__description{margin-bottom:32px !important;color:#ffffff}.ugb-de2a73a .ugb-button .ugb-button--inner{font-family:\"DM Sans\",Sans-serif !important;font-weight:400 !important}.ugb-de2a73a .ugb-button{background-color:#ffffff;border-radius:0px !important}.ugb-de2a73a .ugb-button .ugb-button--inner,.ugb-de2a73a .ugb-button svg:not(.ugb-custom-icon){color:var(--stk-global-color-43441,#111111) !important}.ugb-de2a73a .ugb-button:before{border-radius:0px !important}.ugb-de2a73a .ugb-inner-block{text-align:left}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-cta__item ugb--has-background-overlay\"><h3 class=\"ugb-cta__title\">Want to learn more <br>about Stackable?<\/h3><p class=\"ugb-cta__description\">Your very own Learning Hub for all things WordPress and Stackable. Find the right resources to help get you started as you begin building your online presence with Stackable.<\/p><div class=\"ugb-button-container\"><a class=\"ugb-button ugb-button--size-normal ugb--shadow-3 ugb-button--has-icon ugb-button--icon-position-right\" href=\"\" rel=\"\" title=\"\"><div class=\"ugb-icon-inner-svg\"><svg data-prefix=\"fas\" data-icon=\"arrow-right\" class=\"svg-inline--fa fa-arrow-right fa-w-14\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg><\/div><span class=\"ugb-button--inner\">Go to Stackable Learn<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Take your page building experience with Gutenberg to the next level with Stackable\u2019s built-in dynamic functionality \ud83d\ude07<\/p>\n","protected":false},"author":18,"featured_media":24528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[21],"tags":[],"class_list":{"0":"post-19307","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-stackable-guides"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Dynamic-Content-Guide.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>Take your page building experience with Gutenberg to the next level with Stackable\u2019s built-in dynamic functionality \ud83d\ude07<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/stackable-guides\/\" rel=\"category tag\">Stackable Guides<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"4 comments","acf":[],"modified_by":"Liana","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/19307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=19307"}],"version-history":[{"count":2,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/19307\/revisions"}],"predecessor-version":[{"id":24531,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/19307\/revisions\/24531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/24528"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=19307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=19307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=19307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}