[BladeParticipant]

Hello!

I’ve searched for a separator or divider, however do you wish to call it, but didn’t find any. I assume none are implemented in the theme’s features, or I’m not looking properly.

I’d like to add different dividers after the headings (H1 and H2), like the one you have on your homepage (http://themeforest.net/item/x-the-theme/full_screen_preview/5871901) under THE FIRST OF ITS KIND, but with different icons (maybe).

Now, I’ve seen this https://community.theme.co/forums/topic/how-can-i-display-the-same-divider-as-on-your-home-page/, but does this mean I have to add chunks of CSS code for every separator, especially if I want different icons, under different heading sizes, and so on?

If so, is there a more practical way to add separators, without implementing code all the time? If not, is that code on that forum thread above still available, so I can implement it on our website?

I’d also like to add separators (simple horizontal lines) after certain columns, like you have on your homepage after the Integrity stack presentation, then after the Renew part, etc. Do I need to add code for that too?

Thanks in advance!

[FriechModerator]

Hi There,

Thanks for writing in! You can use the Custom Headline element for that. Setup your custom headline like this:

Then use any icons from here: http://theme.co/x/demo/renew/1/shortcodes/icons/ as the content of that custom headline. Make sure it is on a one column row (obviously) so it would look like a separator.

For the simple horizontal line. Cornerstone has a Line element.

Hope it helps, Cheers!

[BladeParticipant]

Hello and thanks for your reply!

I would have never thought of that :). I turned the Accent button ON before, but nothing happened. I believe it’s because I already had implemented the H1 heading and saved, etc. I noticed that if I insert another custom headline and turn the Accent button ON from the start, then it appears.

I have a couple of issues that I can’t figure out, though:

1. The space between the headline and separator is pretty big, as you can see in the image I attached. Same goes for the space above the headline (between the image and the headline), but I could live with that one, though, especially if it needs coding.

I noticed that they are not vertically centered inside the column (see attached); that could have solved the problem, I believe. I “played” with padding and stuff, but nothing happened. They just go down, and I can’t use negative padding. I tried using a negative gap shortcode inside a text, because it doesn’t work in the Gap feature itself, but it doesn’t go up from that point, no matter what negative value I insert.

I also tried this https://community.theme.co/forums/topic/space-above-custom-heading/ but didn’t worked.

Am I doing something wrong? How can I decrease those gaps (hopefully without coding)?

2. Yes, the Line works, because I looked carefully now :). The first time I added it, I thought it only adds a blank space, because I honestly didn’t see it. Is there a way to change its color and/or width? I’m using the Integrity dark version, that’s why it’s barely visible.

Also: I assume there’s no other way to add a separator, no? Because adding an H6 is not good for SEO, or at least is definitely not the best practice. First of all, subheadings are used to structure the content into subtopics/subtitles, creating an hierarchy, not for separators and stuff. Also, using an H6 will create a broken heading structure. A proper structure should be H1, H2, H3, etc. If you skip one, then it will break the structure, which is not the best practice for SEO.

If I use the H6 as an separator, then the page will have a structure like this: H1, H2, H4 (for widgets), H6. It also jumps from H2 to H4, but I’m planning to use an H3.

If you don’t believe me, here’s Google on the matter – http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf. At page 20, under Avoid, it mentions:

erratically moving from one heading tag size to another

placing text in heading tags that wouldn’t be helpful in defining the structure of the page

And also Yoast – https://yoast.com/blog-headings-structure/.

I’ve noticed on your homepage, that you don’t use any subheadings for the separator, you simply use <span> or something. I’m not so code savvy.

I used Inspect Element on the separator and it shows this:

<h2 style="font-size: 64px;" class="h-custom-headline resp-h h-accent stacks mvn center-text"><span>THE FIRST OF ITS KIND<i></i></span></h2>

On my site it shows this:

<h6 class="h-custom-headline center-text h6 accent"><span><i class="x-icon x-icon-bars" data-x-icon=""></i></span></h6>

You also have a correct headings structure on your homepage, from H1 to H4. I’d like to have that too, but the H6 will break it :(.

Any alternatives are welcome!

Sorry for writing so much :P.

Thanks!

[ZeshanMember]

Hi there,

Thanks for updating the thread!

#1: Please add mtn to the Custom Headline element under Class field of its settings (see: http://prntscr.com/7qeolc). This will remove the top margin from the headline. Please refer to our knowledge base article on Element Spacing for more details.

#2: You can use line element instead of heading accent. To change line element color and width, add following CSS under Style field of its settings (see: http://prntscr.com/7qeof1):

text-align: left; border-color: #ddd; max-width: 800px; margin-left: auto; margin-right: auto;

Replace #ddd with your desired line color (you can generate hex color codes from here).

And 800px with your desired line width.

Thank you!

[BladeParticipant]

Hello and thank you for your time and help!

We’re starting to get there. Two problems down, one to go 😀

1. There’s no Class field in the Custom Headline (as you can see in the screenshot you provided in your first reply) nor Text element. I managed to figure out a workaround, though, which requires a little more work, but at least it does the job. I added a Text element, then went to the Insert Shortcodes button, chose Custom Headline, added the proper settings and inserted the shortcode. After that, I added the ‘mtn’ class manually, because the Class field was missing in the shortcode box as well.

This goes for #2 as well, the line issue. There’s no Style field anywhere. The Line only has an ID field in the Shortocdes area, that’s it. I managed to change the color by adding ‘style..’ in the shortcode itself.

I thought the CSS and Style fields were disabled or something, so I checked the Cornerstone settings, but nothing. Any idea why are they missing?

2.1 I added the mtn class to the Accent as well, and managed to get it up a bit, but the space is still big. It’s still twice as big as the one on your homepage. I tried negative gap again, but it still doesn’t move. Any way I can decrease the space between it and the headline?

I decided to keep the H6 separator for now, because just adding a simple line under the headings will not look so good. Hope you guys will really consider adding a separator feature that uses any other type of tags besides headings.

Thank you in advance!

[ChristopherModerator]

Hi there,

#1 & #2 You need to enable ‘Advanced controls’ option, please see the attachment.

#2.1 Please provide us with URL of page in question.

To add border please add following CSS in section’s style field :

border-bottom: 1px solid #e5e5e5;box-shadow: 0 1px 0 0 #fff;

Thanks.

[BladeParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please remove empty <p></p> tags from text elements which wrap the headlines, also change your headline code to :

<h1 class="h-custom-headline mtn center-text h1 mbn"><span>Professional Diablo & WoW Unban Service</span></h1>

Please clear cache on IE and check again as I’m not able to replicate the issue, see the attachment.

Hope it helps.

[BladeParticipant]

There were no <p></p> in the text element, it was just the shortcode [x_custom_headline type="center" level="h1" looks_like="h1" class="mtn"]Professional Diablo and WoW Unban Service[/x_custom_headline]. I assume the theme automatically added them or something.

Anyway, the new code you provided did the trick! Thank you!

About the IE issue. I don’t use it, I just like to check the sites on different browsers, so there wasn’t any caching involved, but I cleared it anyway, and the problem still persists. I also asked my colleague to check it out on his computer, using IE, and the same issue appears. Works fine on Mozilla, Opera and Chrome.

Update: Also, on IE, the card’s back text inherits the front’s text color, even though I’ve set different text colors, one for the front and on one for the back.

I’m not using a caching plugin at the moment, no minify and stuff like that.

[Rue NelModerator]

Hello There,

WordPress will automatically convert new lines and line breaks to p and br tags respectively. In your case, you can simply use the custom headline element to avoid the empty p tags. As an alternative, you can remove this empty p tags by using this custom css in your customizer or your child theme’s style.css file

p:empty { 
    display: none; 
}

We will have more testing on the cards element in IE. There were issues in this element and our developers is already looking into it. Once they place a fix, it will be updated and rolled out in our next update release.

Thank you for your understanding.

[Author]

Posts