How do I create dynamic layout templates?

Hi this is Sandra from Greyd and today I’d like to introduce you to our Dynamic Templates. Unlike regular WordPress templates, Dynamic Templates are — as the name already indicates — dynamic. That means you can use them at different places of your website and even across different websites with different content while you still have only one place to maintain the design and layout.

You’ll find Dynamic Templates in the Greyd.Suite dashboard when you’ve activated the feature or also here in the menu on the left. In the overview you can see all your Dynamic Templates including information on whether you’ve added them to any category and how often they are used on this website. To create a new template, click here. In the editor you can then work with any block you like. My tip: the Greyd editor Helper lets you customize the template preview in size and background color which is very helpful. Many blocks now offer you the possibility to make their content dynamic, for example the heading block.

You can now either directly enter a text here which will then be static and cannot be changed when the template is used or you can make the heading dynamic, so you can enter the text later on your page and use the template with different headings at different places. The field will automatically get a unique name that you can edit. In most cases that makes sense as the field name is also a help for the editor to know which kind of content to enter. Please make sure to work with unique names for each field as otherwise all fields with identical names will automatically sync their content. You can then do the same with the H-tag. That way you can use the template at one place on the top of a page with an H1 or H2 and further down with an H4.

Even if you make fields dynamic, you can still enter content in the editor. This will then be used as a placeholder and an additional guidance for the content editor. As long as the placeholders are not overwritten, they will also be visible in the frontend. Important tip: If you do not enter a placeholder, the field will become optional. If the editor then does not enter any content, the heading will not be visible in the frontend. Other than that, you can style your headline as usual.

A big advantage of Dynamic Templates is that you can change the design of the template later completely individually from your content. According to the same principle you can also make links dynamic, for example in content boxes or buttons. Here you can make both the button text and the trigger dynamic. That way you can use the button at one place for example to open a popup and at another place to open a link. If you add neither a placeholder nor an icon nor a trigger, the button will become optional, so it will only be shown in the frontend when the editor enters something when filling the template on a page. That way you can for example also add lists to your templates and add as many list elements as you like without placeholders, and when using the template on a page only as many list elements will be visible as the editor enters.

So now let’s have a look at how to use a Dynamic Template on a page. I have prepared a template example that I want to use several times on my page, each time with different content. This template has dynamic headings, dynamic buttons and also an optional button without a placeholder or trigger. The space here I’ve kept static, so the editor is not able to change that.

I now open the page in which I’d like to use the template, place the template block and select my Dynamic Template. I can either enter the content directly in the editor or also use the fields here on the right. Only those fields are available to edit that are dynamic. For example the space here, which we’ve kept static, is not changeable. I will now enter some example content. Here we will keep the placeholder and just change the link. I won’t fill the optional button as I don’t want to display it in the frontend.

With Dynamic Templates an editor will never have to worry again about layout options or topics such as responsive design. He or she doesn’t even need to have WordPress skills, as they only have to fill the prepared fields. Now let’s check our template in the frontend. Here you can see these are our example text and only one button is visible, the optional button is invisible. Up here I’ve used exactly the same template, but with different content and with the optional button. If I now like to change something, for example change the button design, I can do that without any impact on the content. Let’s check the frontend: everywhere where the template is used, the button design has changed without any impact on the content.

A very interesting thing here is also the responsive design. If for example you have different layouts or different backgrounds on different screen sizes, just copy the respective area including all your dynamic field names, re-layout your blocks or use the responsive column settings. When copied elements all have the same name, the editor will only have to fill them once as the template automatically recognizes that the other elements are copies and syncs the content. That way you can even swap templates without destroying content that has already been entered. If elements in your old and new template have the same name, your content will remain untouched.

And last but not least let me show you some very handy Dynamic Templates features that you will find right in the editor. For example, let’s assume you’ve created this beautiful section here and want to use it as a Dynamic Template. You can do so right from the editor by selecting the blocks you want to use in your template and then simply clicking “create Dynamic Template”. You can add a name, you could even add a category here, and then you define whether you want to have all the fields in your template dynamic or static. So all the headlines, texts, images, etc. I am going to make everything dynamic now and publish that. I now have a new Dynamic Template that of course is also available here in the overview. As you can see, all the fields have automatically been made dynamic.

Also, we have some more handy features here in the toolbar. For example, if you’ve made changes to your template in the meantime, for example in a different tab or with Global Content, you can always reload your template here. If you’ve made changes in your dynamic fields, you can always reset them all together with just a single click. And in case you decide that you don’t want to use this section as a template but want to have it as a static section, you can also detach the template again.

For more videos and information please visit our Helpcenter.