Why you might want to use the Dynamic HTML Block
Often, we need to provide our users the ability to add minor HTML such as bolding, italics, or even links to the content that we need to display dynamically. In these cases, the WYSIWYG editor available in Advanced Custom Fields combined with the Kadence Dynamic HTML Block is the perfect solution.
Within the Dynamic HTML Block, choose your Content Source. Ensure that the content you’re pulling in is within the WYSIWYG field. The WYSIWYG field will give the field controls containing some minimum HTML controls so that bolding, italicizing, and other minor HTML can be added without writing code.
Displaying WYSIWYG Content Using Dynamic HTML Block
The Dynamic HTML Block is quite simple to use. Once you place the Dynamic HTML Block, the sidebar offers options for selecting the custom post field.
Styling Dynamic HTML Block
There are a number of settings in the Dynamic HTML Block that allow you to stylize the dynamic content you display in a Kadence Element. In this way, the users inputting data into your custom post fields can add minor html elements while the template design can style the rest.
Container HTML tag
You can add CSS style elements to the entire Dynamic HTML Block within the container HTML tag setting.
Use Inner Tag Wrap
If you would like to apply specific HTML tags to the entire Dynamic HTML Block, you can do so with the Use Inner Tag Wrap. For example, if you set this to H1, your theme’s H1 styles would be set to the entire block.
Content Alignment
Content alignment can be set for the entire block per device. This means that you can set different alignment for the entire block separately for desktop, mobile, and tablet devices.
Text Color
If you’d like to specifically set the text color for the Dynamic HTML Block instead of inheriting from your theme settings, you can do so with the Text Color setting.
Heading Color
If you’d like to specifically set the heading color for the Dynamic HTML Block instead of inheriting from your theme settings, you can do so with the Heading Color setting. This will apply to any heading tags (e.g., H1, H2, H3, etc.) that were set by the user adding content to the custom post field.
Link Color
If links are added to the Dynamic HTML Block and you’d like to specifically set the link colors for both normal and hover for the Dynamic HTML Block instead of inheriting from your theme settings, you can do so with the Link Color setting.
Link Style
If links are added to the Dynamic HTML Block and you’d like to specifically set the link style for the Dynamic HTML Block instead of inheriting from your theme settings, you can do so with the Link Style setting. Options include Unset, None, Underline, and Underline on Hover.
Font Size
Font size can be set either by using the slider or by entering in a numeric value for px, em or rem. Font size can be set for desktop, tablet or mobile.
Line Height
Similarly, Line Height can be set either by using the slider or by entering in a numeric value for px, em or rem. Font size can be set for desktop, tablet or mobile.
Letter Spacing
Similarly, Letter Spacing can be set either by using the slider or by entering in a numeric value for px, em or rem. Font size can be set for desktop, tablet or mobile.
Text Transform
Text transform will override any text settings entered by the user. If you’d like the text to be transformed to Capitalized, Uppercase, or Lowercase no matter what was entered into the custom post field, you can do this here.
Font Family
Font family can be set for this individual block if you’d like to transform it separate from your overall theme settings.
Font Weight
Font weight can be set for this individual block if you’d like to transform it separate from your overall theme settings.
Headline Settings
For each of the headline typography settings, you can override your overall theme settings for the Dynamic HTML Block individually. First, toggle the typography settings for whichever HTML headline tag you’d like to set (e.g., H1, H2, H3, etc.) and you will then be able to set font size, line height, letter spacing for each headline tag you’d like, and you can do so on a per-device basis.
Container Settings
Padding
Padding settings can be set for the Dynamic HTML Block much like they are set for other blocks. You can set padding for each device type (desktop, tablet, mobile) and set the padding globally or individually for top, right, bottom, or left.
Margin
Margin settings can be set for the Dynamic HTML Block much like they are set for other blocks. You can set margins for each device type (desktop, tablet, mobile) and set the margin globally or individually for top, right, bottom, or left.
Full Tutorial on Dynamic Content
For a full review of how to use dynamic content with Kadence Elements Templates, review the full tutorial that includes an example of using Dynamic HTML.
