How to create text over image with button?

Support
#1

I have successfully created a full-width image. How can I add text on top of it and also include a call-to-action button? Many thanks

#2

Hi,

You need to add your image as background image to be able to put text and button on top.

After that you should be able to add text and button element on top of it.

Thanks

#3

Thanks. How can I make the section longer (like double the size?

Do I only put the image in Background Lower Layer? What’s the difference/meaning of Background Lower Layer and Background Upper Layer?

#4

Hi,

You can add gap element and adjust the size of the gap element to make your section longer.

With regards to background, Lower layer is at the back and upper layer is on the front. See this: https://screencast-o-matic.com/watch/cb6O6BIScN39. See how the content text and the upper background image covers up the parallax lower background image as I scroll down.

Thanks

#5

How can I add an email subscribe box (not button sorry) to my background image?

#6

Thanks for the explanation Paul - sorry that link doesn’t work, do you have another example?

#7

Is the gap element meant to leave faint, thin grey & white horizontal lines? How can I create a gap that matches exactly with the image?

#8

Hi,

  1. To add email subscribe box, you can add a text element with youe email form shortcode in it

  1. The background are stack on top of each other, lower layer at the back and upper layer on front

  1. Please provide us your site url so we can better understand what you are referring to.

Thanks

#9

Thanks. I’ll look into 1) & 2) tomorrow.

Re: 3) Please see screenshot:

#10

Hi there,

Please provide the URL of the site you’re working on so that we can check it.

Thank you.

#11

Once saved, it’s showing correctly on the live page, without the lines, thanks.

However the amount of gaps is not showing properly. Eg. I add & save 10 gaps in Cornerstone but it only shows as 5 gaps on the live page…

#12

Re: 1) Email subscribe box - I don’t have this showing in my dashboard. Is Email Forms the name of the plugin I need to add?

#13

Hi,

  1. Yes the plugin is called Email Forms.

  2. Check the gap elements visibility options, it could be that some gap elements are not visible in desktop

Please also note that you don’t need to add multiple gaps to create a big gap.

You can adjust the size to make it big.

Thanks

#14

Thanks for the Gap info!

There’s no plugin called Email Forms…

#15

Hi There,

Yes its name is Email Forms, it’s under X > Overview > Extensions.


Cheers!

#16

Thanks! Do I need to sign up for a program like Mailchimp before I can add Email Forms? Then will it appear as my Email List for the new form I need to add?

#17

Hi there,

That is correct, the Email Forms plugin is a tool to provide a form which connects to your MailChimp account and you can select a list which you have added to the MailChimp website. For more information:

Thank you.

#18

Thank you! This is how the email form is displaying:

  1. How can I make the boxes horizontal and not vertical?
  2. Can I change the colour of the Subscribe box?
#19

Hi there,

That is the default display of the email form. You can further edit this code as that requires a bit of customization:

.tco-subscribe-form fieldset:nth-child(2),
.tco-subscribe-form fieldset:nth-child(3),
.tco-subscribe-form fieldset:nth-child(4) {
    width: 30%;
    float: left;
    margin-left: 3%;
}

.tco-subscribe-form fieldset:nth-child(2) {
    margin-left: 0;
}

.tco-subscribe-form input[type="submit"] {
    border-color: #ccc !important;
    color: #fff !important;
}

Hope this helps.

#20

Thanks! Where would I put this code? Sorry I’m not very tech-savvy…

I think I am ok with the vertical layout but I would just like to change the colour of the Subscribe box to red. Would I just need to add this code:

.tco-subscribe-form input[type=“submit”] {
border-color: #ccc !important;
color: #fff !important;

Where can I find a list of colours & codes?