Question: Text / Heading Design

[Limpopoboy]

Hi Guys

New here and thanks to all for the help in advance. Just started using Elementor. Okay I have 2 questions

1. When using headers and writing text. Firstly should you use a separate header element and text element? Or form your headers inside your text element? I understood it was better to use 2 separate elements.

2. Assuming we use 2 separate elements how do we reduce the space between the two? My header and my text seem quite far apart when using the separate element method.

Regards

Limpopoboy

 

[Tonio]

Hey,

1. I assume you mean you have a picture/logo next to a text inside the header? I can think of two advantages of keeping the text seperate:
- If the text is the title of your website, or it is an important tagline, it would be good if searchengines can read this. Therefore making a real text instead of a picture would be a good idea.
- The text and the logo should be a good size on different devices. If you seperate them the size can be adjusted seperately. On the other hand, if they are in one picture, the layout will stay the same on every device. Maybe just try and compare what works best.

2. Are your text and picture underneath eachother or next to eachother? If you have two columns, you can adjust the space between the colums. You can also change the margins. If they are underneath eachother, you can change the margins between the sections.

I might give a more detailed answer if I could see what you mean. Maybe post an URL or a screenshot?

 

[Limpopoboy]

Hi Tonio

Thanks for your quick reply. No, I am not talking about pictures, I mean Headers H1-H6 and normal paragraphed text. You see here Pafuri Lodge is separate H tag when created like this there is a large gap between the header and the paragraphed text below in a separate element. Alternatively is a header is created inside the text editor like the History of etc the gap between the Htag and paragraphed text is good. These are my 2 questions as originally stated.

Thanks Limpopoboy

 

[Tonio]

Ah, now I see, I was totally confused by the term 'header'. A header is the term normally used for the banner at the top of your page.
What you mean are 'headings' or 'HTML tags'. These are just tags that searchengines can read to understand what are the most important things in your text, and have very little to do with how big your text is or the space between the texts. You can totally change all these things to your likings in Elementor, without changing the heading tag (you don't even have to use tags).

While Elementor has default settings for text-size when you set a tag, you don't have to use that. Above the setting for the html-tag in the menu you will see the option 'size' which is set to standard, but can be changed. But even better is to adjust these things in the second tab in the editing menu called 'style' (at least that how it is called in Dutch, so could be little different). There you can choose font type, style, color, spacing etcetera for your headlines and other texts.

Now for the space between your headline and the text. Again this has nothing to do wit your heading-tags. The spacing can be adjusted in the third tab, called "advanced". Adjust the top margin of your text. If you give it a negative number, you will see the text will go up and become closer to your title.
Of course you can also adjust the title and make it go lower on the page. Just use what looks best for you on your page.

Hope this helps!

Tonio

 

[Limpopoboy]

Hi Tonio

Thank you for your help and sorry for my terminology. Yes, the negative margin worked thank you. Is it better to use separate HTML tags then or create them inside text editor? Also using the negative margin took the text just outside the blue element box is that ok? What is the box's purpose?

Regards

Limpopoboy

 

[Tonio]

As for your first question, I don't know. Would really like to know that myself because Elementor is not very clear about it.

For your second question, yes, it is alright for text or pictures to go out of the blue box. It often works that way in Elementor. For example, if you want a picture with a text over it, you need to place two blue boxes underneath eachother, and then change the margins from one box so they will overlap. The blue box is the reference place from where you set the margins.

Note: always check if your margins look right on other devices. It may look good on desktop but messed up on mobile. You may have to set them seperately for different devices, which you can do in Elementor.

 

[Limpopoboy]

Thanks Tonio

I have a problem with the Desktop, Pad and Mobile views. As you say pages designed on the desktop sometimes do not look right on the pad and or mobile. My problem seems to be if I correct the problem on say the pad and save the update. Then go to the mobile and correct the mobile and save the setting, the pad seems to have gone back to or readjusted itself again. I correct it and save and the mobile setting has again gone out. Nothing, seems to stay corrected?

With the HTML tags it would seem better design adjustments on the layouts are much better with a separate HTML tag than if that HTML tag was created within the text editor.

Regards

Limpopoboy