Elements inside article content with different style

support
1

Hello,
I don’t have big issues in creating pages / homepage etc with layouts but I got one in everything related to a blog article with content in a .md file.

What I want to achieve :

  • Blog article with a main content area using Grid
  • Add when needed some elements that come inside this content but do not respect this main content grid.

See illustration :

1 = main content that I write in my .md file. I call it in single.html with {{ .Content }}
2 = an elements positioned at the top of the article (exemple : social media icons). This I achieved in single.html and works fine.
3 = a title for a pagraphe but that is starting at col 1 and not inside the main content container. Problem.
4 = an image with full screen width. Problem.
5 = an element like an image that goes into the container. This no problem.

It’s not an issue with css (tailwind in my case) as I got it working fine in single.html but my problem come when I want to make this working with content file.

What is the best way with Hugo to achieve the points 3 and 4? My main issue (and maybe because I’m missing something here) is that I want to style content that is already in .content. When I Code it in html there is no problem.

grid
grid1673×2530 103 KB

2

Show the working code of the HTML page you did and we might be able to wrap our heads around it. I guess it’s doable with shortcodes or even just inline.

Hint:

## heading ## {#id .className attrName=attrValue class="class1 class2"}

results in

<h2 heading id="id" class="className class1 class2" attrName="attrValue">heading</h2>