Kadence Tutorial : How to create a custom blog header using dynamic content.
In this Kadence Tutorial I will show you how I built this custom blog header. As portrait photographer the struggle is real when you would like the feature image to be a portrait image. Those lovely hero sections on websites just don’t work with portrait images. In this tutorial I use the Kadence Pro Theme and the Pro Blocks to build a custom blog header that incorporates dynamic content. The dynamic content (aka adaptive content) the blog post title, the date the blog was posted and the featured image. The custom blog header is the header created in this tutorial is what you see above.
What is Dynamic Content.
Dynamic content is adaptive content. Content that changes based on data, user behaviour and preferences.
TIPS & TRICKS
- The list view is located in the top left menu bar. The icon is 3 bars.
- To quickly add a block to a section type /
- Sometimes you ma need to add text to add dynamic content.
HOW TO BUILD THE CUSTOM BLOG HEADER
THE PROCESS.
1.
- Appearance – Kadence and toggle on Hooked Elements.
2.
- Kadence – Elements.
- Add new content section. Name that content section.
3.
- Now to build the custom blog header.
- Row layout with 2 sections.
- Align middle the row layout as well as the two sections.
- Row layout padding 25 top and bottom and 20 left.
- In the row layout choose background overlay settings.
- Add a Gradient.
- Overlay Opacity 100
- Select your colours for the gradient.
- The locations is approximately around 55
- Change the angle to 90
4. Adding the dynamic content.
- In the row layout click on the left hand section.
- Add advanced text. A little quirk with the Kadence builder you have to a some text to see dynamic content.
- Click on the dynamic content icon
- Under content choose Post Title .
- Choose Current Post for Content Source.
- Click on Add dynamic content.
- Remove the text inserted before the blog post title.
- Center the text. Adjust the font and the font size.
- Now to add Post Date following the same steps.
- Advance Text
- Click on the Dynamic Content icon.
- Content is Post Date
- Content Source is Current Post.
- Add Dynamic content.
- Style this dynamic content.
5. Adding the Featured Image.
- On the right hand section add an advanced image.
- In the block you will see the dynamic content icon under the image box. Click to enable dynamic image.
- Image is featured image and Image source is current post.
6. The Settings for the placement of the Custom Blog Header.
- Click on Element settings.
- Content wrap is before all content.
- Show on Single Posts.
- User settings- visible to all users.
