Hi. So I had a look at some code output and noticed that BB wraps H1 content inside Span tags.
I’m not sure why it needs to do this as H1 by itself is less code and more user friendly.
Does this affect SEO? Would it be better to code SEO-vital sections like this with some manual html?
A similar issue is when adding an ID or Class in the Advanced menu of a module. The name you specify gets applied quite a few divs above the actual content you want to modify.
I understand it’s pretty normal for page builders and perfectly clean code will never be possible - but just wondering what may be possible.
Thanks for getting in touch! Regarding your first question, span tags inside h1 tags will not have any negative effect on SEO as span tags have no semantic meaning. You can check this thread on stackexchange for more information.
Regarding your second question, our rows, columns and modules have a lot of wrappers so we can make it more flexible. Despite that, any CSS you apply to each will still be applied to the respective element. Is this not the case for you?
If for example I was choosing to make 3 columns of equal height, the best way for me to do it would be to give each column a custom class say for example “sameheightclass”
then, in my CSS I would say “.sameheightclass{min-height:500px;}” or something like that.
But, if the column has any coloured background, or a background image, it has absolutely no effect on that. Changes made via CSS don’t ‘cascade down’ the wrapped tags.
It would be great to be able to pin point where exactly the custom class or custom css gets applied, otherwise I have to use more verbose selectors such as .samheightclass div div a h1 span{} (you get the idea).
Great questions. The reason we have the div tags that we do is so we can do things like backgrounds, margins and padding. There are four types of “nodes” that get a similar set of div tags. Those are…
Rows
Column Groups (not currently editable)
Columns
Modules
The IDs and classes that you can set in the advanced tab get applied to the top level div tag for each of these page builder nodes. The div tag structure is as follows…
Row
Row content wrapper
Row content
Column group
Column
Column content
Module
Module content
Module markup (depending on the module)
If you would like to explicitly set the height of a column with a background using a custom class, you could do the following as the background is applied to the fl-col-content wrapper…