About moving an element outside the margins of others

[Ogalla]

Hi!

I want to add a new element (like a button) but I don’t want this will be align to the column (which has got a white background). I would like to move this element whenever side I want to, out of the margins if it’s necessary. How can I do it? I add a picture that shows the current situation and the one I would like to show.

Thanks so much!

Kind regards.

[Prasant]

Hello Jorge,

Thanks for writing in!

To mimic the changes and position the button that you are looking for, you will have to use Position absolute CSS in element CSS of button element. After that you will also have to position the button using top, right, buttom, left CSS.

I am sharing the resources that you can take a look to get started.

https://www.w3schools.com/css/css_positioning.asp

https://www.w3schools.com/css/css_positioning.asp

Thanks.

[Ogalla]

Hi @Prasant.

I checked the resources you said.

I understand these, but I don’t know how to use it correctly. I did everything about these articles. But, for example, do I have to write something in the ‘CLASS’ section? I think here is my main mistake.

[christopher]

Hi Jorge,

The fature that you are after is not available using the standard options of our theme. You need to add custom CSS code and that is outside of our support scope. We will do our best to guide you but we will not be able to implement the feature.

As my colleague mentioned you need to use the absolute positioning on the button element. You do not need any classes and you can use the Element CSS feature. You can read more about the Element CSS feature here:

Element CSS | Themeco Docs

The code should be something like this:

$el {
   position: absolute; 
   bottom: -20px;
   right: 0;
}

The code above is not the working code as we do not know the URL of the page you gave the screenshot. It can be used as a boilerplate for your customization.

Thank you for your understanding.

[Ogalla]

Hi @christopher.amirian.

I read this and solved my question!

Thank you very much for your reply. This code works.

Best regards.

[Prasant]

You are most welcome.