3 quick questions about elementor design and what the best approach would be to creating these sections

[xeric]

Hey Babiato.

I have 3 quick questions about creating a design in wordpress and what the best approach to do it would be.

I'm using Elementor Pro with Astra Pro

1. If I want to create a background that has these elements like the curved line and the square type icon on top left and bottom right, what would be the best way to do it? Here's the 2 ways I can think of, but don't know which will be the better way to do it.
- Make an image using photoshop with a transparent background and put the curved line and the other two icons on it, export as png and set it as a background for the section.
- Export each of the background assets individually as a png (curved line separately, other icon separate) and place them on the section as images with absolute position

2. To create this effect of numbers and lines on top of the info boxes in the middle, again I have an idea but I'm not sure about the best way.
- Create the numbers/line in photoshop and export the entire thing as 1 long horizontal image and move it to be on top of the columns using negative margins or absolute position




3. What would be the best and responsive way to create this hero section? Here's what I've tried
- Create the entire thing without the text in photoshop and set it as a background for the section
- Create the red background separately and the image on the right separately (but in this approach, the image is too small and not extending out of the section)

The hero section:


Method 1:


Method 2:

 

[Saint Gabriel]

Create the red background separately and the image on the right separately (but in this approach, the image is too small and not extending out of the section)

Why not create both the image on the left and the red background together?

Then set the image as section background, then set background size to cover.

 

[Saint Gabriel]

1. If I want to create a background that has these elements like the curved line and the square type icon on top left and bottom right, what would be the best way to do it? Here's the 2 ways I can think of, but don't know which will be the better way to do it.
- Make an image using photoshop with a transparent background and put the curved line and the other two icons on it, export as png and set it as a background for the section.
- Export each of the background assets individually as a png (curved line separately, other icon separate) and place them on the section as images with absolute position

Best Method.

 

[xeric]

Why not create both the image on the left and the red background together?

Then set the image as section background, then set background size to cover.

That's what I've done in method 1. Created the entire thing as a static image and set it as section background with size cover.

Best Method.

Sorry, which would be the best method? To create them individually and place them with absolute positioning or to create a big 1920x1080 transparent background with these elements in it?

 

[Medw1311]

Question 2... https://theplusaddons.com/widgets/process-steps/

Question 3... 2 Column Section set background in each section. Position the middle image as desired using negative margin.

 

[frizzel]

You don't need a full Elementor add-on for Question 2, just a plug-in that works with a shortcode, like https://wordpress.org/plugins/process-steps-template-designer/

 

[frizzel]

As for Question 1: your suggestions might work on desktop, but how would this section look in mobile view?

 

[xeric]

You don't need a full Elementor add-on for Question 2, just a plug-in that works with a shortcode, like https://wordpress.org/plugins/process-steps-template-designer/

I ended up using the Ultimate Addons Timeline that came with the Astra theme. Completely different than what I pictured here I know, but seems like a good fit.

As for Question 1: your suggestions might work on desktop, but how would this section look in mobile view?

I have an extremely inefficient way handling it right now. I just hide this entire section on mobile and show a different section with a simple red bg and the image above it. I wonder if it's really THAT bad because it's just an extra 30kb image and some text being loaded and hidden.