[Support request] Custom Headline with Margins

[hichb]

This hero page contains a headline in 2 lines with a margin: https://tinyurl.com/yff7yku4
It was built with Elementor. Should I use another container to center the text?

What would be the best approach to achieve this in GB editor? The second line would need to have a margin left.

1/ Which blocks should I use? 2 Headlines?
2/ If so, how to reduce the line-height between the 2 headlines?
3/ What would be the correct tag name? For SEO, it wouldn’t be advised to add two H1. And this text should not be a headline H1 but text p in terms of SEO.

Here’s the live site in question to look at, I need to achieve the same with GP: https://thefashionglobe.com/

And once again, thanks a lot for the fantastic support!

[Ying]

Hi Hich,

1. YES.

2. When you select the headline block, you can adjust its line-height under the Typography tab, and padding/margin under the Spacing tab.
https://docs.generateblocks.com/article/headline-overview/#typography
https://docs.generateblocks.com/article/headline-overview/#spacing

3.You can choose it to be headings or paragraph or div, it depends on your needs.
https://docs.generateblocks.com/article/headline-overview/#element

By the way, I think the better way is to set the upper headline block to align right, and the lower headline block to align left. No padding or margin is needed 🙂
https://docs.generateblocks.com/article/headline-overview/#alignment

[hichb]

Hi Ying!

Thank you so much for your valuable suggestions and clear explanations, I’m making progress.
The headlines in Elementor was built within a column that contains the text and little margin in the left.
Anyway, I’m trying to make the headlines as https://tinyurl.com/yff7yku4 but I’m getting this: https://wordpress-273320-2007441.cloudwaysapps.com/new-page
Shall I play with the negative margin up and down or add a padding left/right? what would be the best approach in this case?
After it has to be responsive so I’m looking for the most effective approach to handle this without a lot of coding…

Also the headlines have to be a little be more up because there’s a text paragraph that will go below.

[Ying]

I would suggest to use a structure like this:
https://www.screencast.com/t/nTy1hBxVMR

1. Add the background image to Container C, set container C to full width.

2. Container C1 is for the bigger font headlines.
set Container C1 inner container width to 980px,
set margin bottom to 0 for H1 & H2, set line-height to 0.7em for H1 & H2.
Align H1 to right, align H2 to left.

3. Container C2 is for the smaller font paragraph and arrow icon.
Set container C2 inner container width to 700pxor lower.
Set Container width of C-2-1 and C-2-2 under the Grid block to 50%.
Set the Grid vertical alignment to default.
You can add custom icon to H4, and activate theremove text option.

Hope that’s helpful 🙂

[hichb]

This is extremely helpful and exactly what I needed to help me understand the design process with GB. I must admit, switching from Elementor intuitive editor to Gutenberg block wasn’t very smooth.

I’ve been following your guidance for H1 and H2, set up the margins to 0 and line-height but I can only see the changes in the Editor not in the live link: https://wordpress-273320-2007441.cloudwaysapps.com/new

Update Sorry: I was able to understand the issue. I just needed to make sure that both headlines are with paragraph tag. If the tag is H2 it will not work…with div for both headlines, it works.

[hichb]

Dear Ying,

The only thing left for me to understand is how to add the icon and remove text option? I can see there’s an input to insert the HTML code. How to generate the HTML code for the icon?

And my second question is related to the tags shall I set the tag to div for all the elements of my page including the icon?

[David]

Hi there,

this article explains adding SVG icons to the free version of GB:

https://docs.generateblocks.com/article/adding-custom-svg-icons/

And if you’re using Pro you can use the Asset Library to store your icons:

https://docs.generateblocks.com/article/asset-library/

Re:

Update Sorry: I was able to understand the issue. I just needed to make sure that both headlines are with paragraph tag. If the tag is H2 it will not work…with div for both headlines, it works.

Those settings should apply to any Headline tag you use, whether it be H2, H3, P or div.

If its not working then either: a. a cache needs clearing or b. some other code is overwriting its styles. If you want to share an example of where its not working for H2 we can take a look.

[hichb]

Those settings should apply to any Headline tag you use, whether it be H2, H3, P or div.

If its not working then either: a. a cache needs clearing or b. some other code is overwriting its styles. If you want to share an example of where its not working for H2 we can take a look.

Perfect! Got it. I think this is due to some CSS customization for the body that is overwriting the styles for the content. I will look more in details and let you know in case I need further help.

Lastly, do you think it’s possible to hide the background image for mobile devices only using the GB editor?

[Elvin]

Hi there,

Lastly, do you think it’s possible to hide the background image for mobile devices only using the GB editor?

GB blocks have an “Advanced” feature if you have GenerateBlocks Pro. This allows you to specifically set background settings for different devices. – https://share.getcloudapp.com/Wnux50Kp

For the free version, you’ll have to manually write CSS for it. 🙂

[hichb]

For the free version, you’ll have to manually write CSS for it.

All right, thanks for the clarifications. Do GB editor have a specific input or way to assigning an ID or class to an Element?

[David]

Select any Block, and in the sidebar > Advanced you will see the HTML Anchor ( ID ) field and the Additional CSS Classes field.

[Author]

Posts