Archived topic
Custom Paragraph Block with CSS and HTML
9 replies · Started by jal-mj on January 30, 2023
Hello,
I want to customize a paragraph block.
Usually, I would apply the CSS class on the ADDITIONAL CSS CLASS(ES) (advanced area), and that's all, but the problem is that I need some HTML code.
This is what I want to do:
So by now, to do so, I have done the HTML in the HTML block post and the CSS on an element page. But this is not good. I want to create a block template where I can insert it while doing the post and writing the paragraph.
It would be good too if I could apply CSS classes where the CSS and the HTML apply, but actually, I don't know if that is possible.
Thank you for your time.
Hi Jal-mj,
You can do such a structure with GenerateBlocks plugin.
You just need to place the Featured text and the inner text through 2 different Headline Blocks, and place both on one Container Block.
Then add Borders to the Container Block.
Lastly, give the Featured text a negative top margin. If this doesn't work, we can use custom CSS to position it.
Hello Fernando,
Could you be more specific?
I already have generate blocks plugin, but I don't know how to apply this design in a block.
Could you be more specific in the process? Thank you.
Can you create a structure like this?: https://share.getcloudapp.com/bLuO2eYy
Afterward, provide the link to where we can see this, and I'll check what CSS is needed.
You can find the URL in the private area.
It is at the bottom of the page. I have created the blocks with no problems, but they are not working correctly on different devices. Please check the size of the screen to see what I mean.
Under the block, there is the HTML code that I did before. That is the way that I want to work.
So maybe some css code is needed....
Thank you.
Here's a CSS you can try:
.gb-container.gb-container-ba10bc52 > .gb-inside-container {
position: relative;
}
.gb-container.gb-container-ba10bc52 > .gb-inside-container .featured-word{
position: absolute;
top:-20px;
left: 16px;
padding: 0 6px;
}This CSS positions the Featured word similar to your HTML Block.
Perfect Fernando, it works fine!
If I want to do more I have to change the .gb-container-ba10bc52 <-- container number in CSS, isn't it?
Thank you.
Are you referring to changing stuff like the padding? If so, you can change that in the Block settings.
You can replace this with a Custom class as well: gb-container-ba10bc52
Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
All is clear Fernando. Thank you for all.
You're welcome, Jal-mj!