Question Color gradient to spacer widget

[The Rolling Panda]

Hello everyone,

I would like to add gradient color to the spacer widget. The only solution I've found would be to add some CSS but unfortunately I don't know anything about coding.

I've followed an Elementor tutorial to add color gradient to header and text and it works great:

selector h2 {

background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
-webkit-background-clip: text;
display: inline-block;
padding: 14px;
-webkit-text-fill-color: #00000000;
font-family: 'Stay Out Regular';
}

I post a screenshot of headers with color gradient and the spacers that I'd like to add the same effect:

If someone could give me the CSS code to add color gradient to the spacer, I would gladly appreciate.

Thanks to all and have a great day!

Fred

 

[sms-design]

In the advanced tab of your spacer under advanced give it a css class "panda-spacer"

Then in your custom css add the following

.panda-spacer{
background: rgb(63,94,251);
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}

or using your gradient above
.panda-spacer{
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
}

 

[The Rolling Panda]

Thanks very much for your reply,

Unfortunately, I've already tried something similar, but it changes the background color, not the spacer. And I can't adjust the background size to look like the spacer I want.

Well, you have taught me how to set up a CSS class

Cheers,

Fred

 

[sms-design]

Elementor sets a default height of 10px

add a height to your css
.panda-spacer{
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
height: 4px;
width: 50% !important; /* Adjust width to suit */
}

Don't fall into the trap of making css changes and not seeing the result in your browser, install something like EPIC browser as your test platform browser and set it to not cache anything.

Then once you think you have your design right test mobile > tablet > desktop in that order. Then browser test Chrome > Firefox > Safari > IE (if you have too)

Mobile is 85% + of your audience.

Please mark this as solved

Good Luck & Happy New Year

 

[The Rolling Panda]

Happy new year and thanks very much for your help and all the advice you gave me!

As you can guess, I know nothing about coding.

Does adding custom CSS slow down and add KB to the page?

Do you think that it's worth the benefit compare to having a normal spacer with a single color?

Euh, could you tell me how to mark this post as solved?

 

[sms-design]

I would suggest reading up on the benefits of using a child theme.

Adding css to your child theme stylesheet means that your .panda-spacer styling is called once by the visitor browser as it now cached your following site page loads are marginally fast.

But of course if you start getting over enthusiastic with your css it will of course add weight to your served pages.

Using a child theme means that you are not editing core theme files which are historically overwritten on an update, it also means that you can fall back to the parent theme when things don't go right.

A child theme also allows using a functions files which sounds scary but added a simple function to rename all readmore buttons will save you masses of editing of pages.

So depending on how keen you are on web dev look into running a local dev server, if your on a mac you already have an apache web server, if your pc based look into Laragon.

Now you have a test base to test loads of stuff. One another thing google a plugin called "All In One Wordpress" and you will have a backup plugin for your live site and a plugin to move a dev site from local to live in a matter of minutes.

As you may have guess I've be doing this for nearly 30 years, when windows 2.11 was launched and things came on floppy disks, and I've never really learnt my trade because everyday you learn something new.

All the best

 

[The Rolling Panda]

Wow, thank you so very much for your very detailed answer and all the advice!

You're very helpful and I really appreciate you take the time to give me solutions.

I'm building my first travel website, I've been working on it for 18 months and my website will go live in 6 months, with more than 500 written articles with pictures, videos... I'm learning things every day, and as you know, building a website can be very complex if one wants to do it as best as he can.

I've learned the advantage of having a child theme in my learning research. So far I've added 3 lines of CSS to adapt the theme to my needs.

I am on Mac, but to be honest, I don't want to learn any HTML, CSS, or coding. It's too complex for me, and I already have so much to do to launch my website. That's why Elementor is such a great tool for newbies like me.

I will definitely check "All In One Wordpress" as I know that I would need a tool like that in the future when my website will be live, and I want to make a change.

I've checked my post for 10 good minutes and I don't see how to mark my post as solved. Could you be kind again, and let me know how to do it?

Thanks again for all your help, you are awesome!

Fred

 

[sms-design]

Hi Fred

As I've not actually raised a post of the forum I only came here by chance, and ended up answering a few peoples problems.

So this oracle does not know how to mark it solved, how funny is that