[Support request] GeneratePress Premium with Elementor

[Daren]

Hi, This is more a question about Elementor than GP. But maybe I can get the answer here. I want to create a circle image box and then have the image with in the circle move down and to the right, masking off the bottom half and the left half of the image. I was able to do it with HTML/CSS no problem when coding the page in with a text editor, but now that I am using WordPress, GP Premium + Elementor I can’t figure it out. I tried modifying the CSS with Simple CSS but no luck there either. I just don’t think I am able to identify the right classes. Any one have an idea? Thank you, appreciate the help.

P.S. Just updated to the latest version of GP today.

[Leo]

Hi Daren,

Sorry little hard to picture what the problem is. A link to your site or what you are trying to accomplish might help?

I’d assume something like this shouldn’t be hard to create using Elementor though.

[Daren]

Hi Leo, thank you. Here is a link to the site on GitHub pages. I did it using HTML and CSS.

https://darenjm.github.io/Point2Point/solutions.html

It’s a combination of 3 over lapping circles.

[Leo]

Sorry I’m confused what the problem is.

You made that in a page using GP but unable to move it?

[Daren]

I originally made the site a static site with HTML and CSS but the client wants to be able to edit it easily with WordPress. So I got GeneratePress and Elementor to recreate the site for WordPress. So now I want to make those circles, one large gray, one smaller with the globe image inside it offset to show only the top right side and then a third one with an image indside. Make sense?

[Leo]

Hmm it depends on if you want to stick with CSS and HTML or use Elementor instead.

The same CSS and HTML should apply in GP. Have you tried that but it’s not working?

Sorry if I’m confused about the question…

[David]

There would be several ways to replicate what you have created so far in Elementor (EL) – although I wouldn’t probably advise you to do so. A few thoughts are:

1. HTML can be placed in the Text Widgets. Each widget (or section or column) can have Custom CSS applied to them under the Advanced tab. If you want to add the CSS outside of the widget/section/column or page (ie. in Simple CSS) then you would then need to assign each element with a custom class, again under Advanced tab and use this as the parent selector in your code.
2. Recreate each element of your design using the EL widgets in their own section (so in a stack) and use the god awful negative margin trick and z-indexes on each section to align how you want them. Then worry a lot about mobile responsiveness…… real bad suggestion, but seems to be the way a lot of EL users work.
3. Create the content within a Post and then use something like WP Show Posts plugin to create a shortcode to display the post. Probably the most sound option.

Personally i wouldn’t let a client anywhere near EL it’s too easy for them to make page structure changes wihtout knowing the repercussions. Looking at your current method, i notice the responsiveness is a bit out of whack as the circles become ellipses on resize and therefore would resort to creating a background image in Photoshop or such like. Then it’s a simple background image in the section containing the heading, text widgets etc.

[Author]

Posts