Topic: Help creating a sidebar widget with a custom black shape heading (GeneratePress

techjuyel
October 31, 2025 at 8:29 am

Hello GeneratePress support team,

I would like help creating a sidebar widget design that matches the style used on this site: https://www.admissionwar.com/
— specifically the black shape heading and the sidebar block layout shown there.

I attached a screenshot of my target design: https://prnt.sc/s2MCpxkkipru

What I want:

A sidebar widget (or Global Sidebar element) that contains a heading placed inside a black irregular/rounded shape (looks like a pill/flag with a pointed edge). The heading text should align visually like in the screenshot.

The sidebar should include multiple widgets (title shape + small list or box under it), matching the spacing and alignment used on the example site.

Preferably built using GeneratePress elements and GenerateBlocks (no extra plugins) so I can paste the block(s) into my site and reuse them.

What I tried:

I tried building a block with a Container + Headline in GenerateBlocks and applied some CSS, but I’m not able to recreate the exact shape/overflow and the small pointed edge.

What I need from you:

Guidance or sample code (HTML/CSS) that I can paste into a GenerateBlocks block (or a snippet to add in Customize → Additional CSS) to recreate the black shape heading with the pointed edge and proper padding.

Instructions to make that block responsive and reusable across sidebar widgets.

If there is a recommended GeneratePress hook or element type for placing this in the sidebar globally, please include that.

Links:

My screenshot (target): https://prnt.sc/s2MCpxkkipru

Example site to match: https://www.admissionwar.com/

Thank you — please provide step-by-step code and where exactly to paste it (GenerateBlocks block settings and any additional CSS location).

Best regards,
Liton
Ying
October 31, 2025 at 10:07 am

Hi there,

It requires some custom CSS.

Can you show me your site with the sidebar and title implemented so I can write the CSS?
techjuyel
October 31, 2025 at 10:50 am

captionlover.com
Ying
October 31, 2025 at 12:05 pm
1. add this CSS:
```
.sidebar .widget .custom-widget-title {
    background-color: red;
    padding-right: 20%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
    padding-left: 10px;
}
```
Adding CSS: https://docs.generatepress.com/article/adding-css/

2. add the CSS class custom-widget-title to the text block that represents the widget title.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
techjuyel
October 31, 2025 at 7:56 pm

Please login my site and create this.
techjuyel
October 31, 2025 at 8:05 pm

I want the headings or titles on my homepage and sidebar to have a similar shape design like this one. Could you please guide me on how to achieve only this specific shape style?
Ying
November 1, 2025 at 9:50 am

Please login my site and create this.

I apologize, but as we mentioned earlier, we cannot create the layout for you. Our role is to provide guidance. If you need someone to create the layout, you will need to hire a developer.

I want the headings or titles on my homepage and sidebar to have a similar shape design like this one. Could you please guide me on how to achieve only this specific shape style?

Yes, I have provided the steps in my previous reply. Can you follow?

Do you know how to activate the sidebar for pages? If not, the option is at customizer > layout > sidebars, the first sidebar layout option, set it to content/right sidebar.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Help creating a sidebar widget with a custom black shape heading (GeneratePress