[Support request] ATF layout like Backlinko

Hi there,

The closest solution is to create a dynamic page hero using a block element.

Take a look the video and the documentation here:
https://docs.generatepress.com/article/block-element-page-hero/

1. After I disable the title, feature image, I can still see them in my post (see private info section).

Those options disable the default title element and the featured image element of the theme within the content.

You can just remove the heading block that holds the title if you want it removed on the page hero. You can remove the dynamic background image of the Container block if you wish to remove the background featured image.

2. I want to add a shadow on the feature image on the ATF. In this blog post – https://mikeoliver.me/styling-the-wordpress-image-block/, I like the ‘Solid color offset drop shadow’ and ‘Opaque drop shadow.’ I tried the CSS that the author suggested but it’s not working. How can I achieve the ‘Solid color offset drop shadow’ and ‘Opaque drop shadow?’

You likely have the wrong selector.

By the way, I’m not sure I’m seeing the right page. Are you now using a Block element for your page hero like Leo suggested instead of a Header element? I still see a Header Element being used on the page provided on the private information.

The one you want to replicate will be easier done in Block Element as Leo mentioned as Header element is pretty limited in styling options. It’ll be significantly harder to do the layout there because you’ll have to manually code everything as opposed to using a Block element where you can just use GenrateBlocks for layout.

Would it be easier if I shared the staging site with you?

Ah right. I think what I checked was the live site. Yes please. So I can inspect and suggest the correct selectors to apply shadow.

3. Before the date, I want to add the word ‘Updated.’ How can I achieve this?

The dynamic date has an option to add a “before text”. See this – https://share.getcloudapp.com/v1uY9nJr

Check the private info section. If you need access to the WordPress admin, I’ll create a temporary profile. Let me know.

Ah no need for that.

Here’s what you can do:

Open the block editor and add box-shadow to the Image Block’s Additional CSS Class(es) field like this – https://share.getcloudapp.com/YEuZwJ00

And then use this CSS:

.wp-block-image.box-shadow img {
box-shadow: 15px 15px 0px #d3dce5;
border: 1px solid #d3dce5;
}