Featured image and post title are two of the default elements of the WordPress blog post. The layout of these elements — along with post meta and post content — are different on each website, depending on the theme they use. Some themes might have a layout whereby the post title lies above the featured image. Is it possible to create such a layout if your theme comes with a different layout for the single post?
Every WordPress theme has a template file that controls the layout of the single post (blog post). In most cases, the file named single.php. If you have PHP knowledge, you can edit the file to change the default layout. Alternatively, you can create a custom template using a Theme Builder plugin like Divi Builder and Elementor (the pro version). These plugins allow you to create custom templates for theme parts (including single post) without coding. In other words, no PHP knowledge is required. In this article, we will show you how to create a custom template for single post and place the post title over the featured image. We use Elementor in this tutorial.
How to Place Post Title Over Featured Images in WordPress
Before getting started, make sure you have installed Elementor Pro on your WordPress website. You can get the pro version of Elementor on its official website. If you are new to Elementor, you can read our previous article to learn how to use it.
Once you are ready, go to Templates -> Theme Builder on your WordPress dashboard. On the Theme Builder page, hover your cursor over the Single Post tab and click the plus icon to create a new custom single post template.
On the appearing window, you will be presented a number of pre-made custom templates for single post. Simply select the one you like. If you want to create the custom template from scratch, you can simply close the window. In this example, we will create the template from scratch. You can click the X icon on the top-right corner to close the library window.
Once the Elementor editor opens, add a new section by clicking the plus icon on the canvas area. Select a structure according to the layout you planned. We choose the on-column structure in this example.
On the Layout settings block under the Layout tab, set the height to Min Height. This setting is not required, but it will make your featured image more visible.
Next, go to the Style tab on the settings panel. On the Background block, set the background type to Classic and click the Dynamic Tags (the database icon) on the image selector.
Select Featured Image on the appearing options.
You can set the image position and size on the setting options beneath the Featured Image field.
In order to make your post title more visible, you can also add the overlay to the featured image. To do so, open the Background Overlay block. Select the background type (classic or gradient). If you want to add a solid color for the overlay, you can select Classic and select the color you want by clicking the color picker. After selecting a color, you can set the opacity.
Once done setting the featured image, add the Post Title to the canvas area. Make sure to place it to the section where you have set the featured image as the background above.
Once the post title is added, you can go to the Style tab to style it up. You can set the text color by simply clicking the color picker on Text Color. To set the font family, font size, and font style, you can click the pencil icon on Typography.
Once done editing the post title, you can add other elements like post info, post excerpt, and breadcrumbs.
To add the post content, you can add a new section. For more detailed tutorial on how to create a custom single post template using Elementor, you can read our previous article.
Once done editing the template, you can click the PUBLISH button on the bottom side of the settings panel. On the appearing dialog, set where you want the custom template to be assigned to by clicking ADD CONDITION. You can assign the custom template to all posts, posts under certain categories, post with certain tags, posts written by a certain author and so on. If you want to assign the custom template to all blog posts, you can simply select Posts under the Posts block. Click the SAVE & CLOSE button to apply the selected display condition and to publish your custom template.
That’s it.
Here is the example of the result of this tutorial.
The Bottom Line
Theme Builder is a great solution if you want create a fully customized website with WordPress. A Theme Builder offers way more customization options than any theme does by creating custom templates (read: WordPress Theme vs Theme Builder). No need to deal with code as a Theme Builder comes with a visual editor to create the custom templates. By creating a custom template for theme parts (header, footer, single post, search results page, and so on), you can set the layout yourself, add any element you like, and apply any styling you want. Elementor and Divi Builder are two of the best Theme Builder plugins for WordPress. Whether you use Elementor or Divi Builder, creating a layout whereby the post title lies above the featured image is not a big issue.
