How do I stack my content (as in layering elements on top of each other)?

Support
#1

Hi,

I’ve been trying how many times to “stack” (layer in design terms) different
elements on top of each other with no success. My understanding is that
I have to have containers before I can add images or text so that z-index
can be applied to the containers. I don’t see any containers in your elements
section?

And I can’t position the images or text themselves on the z index either.

Here I have added two rows. How do I stack them?

Please help.

#2

Hi There,

You can add a background image to a column, row or section or the 3 at the same time.

Also on each column, row or section, you can add 2 background top and lower layer which allow you to do some overlay.

On tp of that you can add your elements.

If you wish to add elements above elements using Z-Index that would include some customization which is not offered outside of the box by the theme.

Hope it helps

#3

Hi @Joao,

Thanks for getting back to me.

I see what you’re saying.

I tried the layering through the methods you suggested but it doesn’t let
you control things. Or its control is very limited. My elements cut off from
the designated row/section boundary and I can’t seem to set it to
overflow either.

I’d presume that if one puts elements in containers it would be the containers
that allow the elements to stack?

#4

Hi There,

Please provide your URL and point the specific section.

Also please provide a mockup and a detail explanation of what you are trying to achieve.

Thanks!

#5

@Joao…

Thanks for your help so far.

I’m trying to layer my Heading, rule, body copy, as well as the clouds and bird over
the grey circle. Ideally—in the end—I’d like for some of these elements to have subtle
animations as one scroll to the section but I realize that I’m already having
a hard time getting them to work in the first place. So I’d be happy if I can just
get the elements positioned properly.

See below:

None of my pages are published but my login details are still the same if
you want to have a look at what I’ve tried so far.

Below is what I am getting so far…

#6

Hi there,

It would be best if you provide us with the URL of the page you are currently working on and the admin details in a Secure Note if you have an under construction page active on the site so that we can check this further and provide some suggestions.

#7

Ok @Jade, I sent u a secure note.

#8

Hi There,

You should create a background imag (

Lets say (1900 x 600) aligning your grey globe on the left and add as a background to your ROW instead of using a image element.

Hope it helps

#9

Do u mean like this?

#10

Hi There,

Thanks for the details and the screen.

I have adjusted your section and element, now it looks similar to what you have in your mockup.

Now you can check the setting and adjust further to make it exactly what you want.
Remember I haven’t added any custom CSS if you want to use any custom CSS you can do that too.

Cornerstone is completely flexible to do any kind of design without customization but it has some limitation which can be achieved through custom CSS.

Hope this helps!

Thanks

#11

Thanks for that @basanta!

Working on the adjustments…

How do I get a line break in the heading?
Looked online but options don’t work.

Tried all the below:

#12

Hi There,

You can use the headline element 3x or you can use the raw code or text element to add html.

Hope it helps

#13

Hi @Joao, please explain what you mean.

#14

Hi there,

Instead of adding your texts all at once in the single headline, you can simply add them as headline element (3 times) and that would create 3 lines of text with line breaks.

Or use raw element to text element to add all of your text and code content with line breaks.

Thanks!

#15

I’m not a programmer, so I don’t understand your advice in this case.

An example demonstration or logging in would provide clarity please.

#16

Hi There,

Sorry for the confusion!

The headline element doesn’t support HTML tag to make the line break.
If you really need multiple lines you can use multiple Headline elements instead of one.
Or you can use Text Element instead of headline which support HTML tags and . custom styling too.

Hope this clear now!

Thanks

#17

Ok @basanta,

I did what you suggested and it worked.

Now my struggle is with that trademark symbol…

Just so you know, I’ve googled and tried some of the html code options
suggested online but I can’t get it to work yet. When I change the font
size, it doesn’t line up horizontally to where it should be.

Any suggestions?

#18

Hi there,

Back again and sorry for the confusion, the instructions provided here doesn’t require any programming knowledge. It just needs a proper use of the correct element depending on your current requirement. :slight_smile:

About your next issue, what do you mean by lining it up horizontally? If you wish to make it the same line along with other texts then you should just add TM text instead of HTML markup for TM.

Thanks!

#19

The problem is that the TM is too big. I need it a bit smaller like this:

#20

Hi there,

Ah, the font size and not the alignment. You should wrap your text with styling like this

<span style="font-size: 12px">™</span>

Hope this helps.