u/d-iverqent

https://preview.redd.it/87343tomqtah1.png?width=2632&format=png&auto=webp&s=eaaf7bd70f666e8b613117d7d3fa23f2097dc3d6

I know these type of questions must be asked a lot here but since I have already set up my alternative through Wordpress and am mostly happy with it (save for wanting some images and a tagline above the buttons), I am now doubting if I should learn a bit of coding or outsource this, so that I don’t have to use Wordpress. Reason I’m asking is some people told me that Wordpress isn’t safe, needs to be updated constantly, and is very heavy.

I'm not sure how easy it is to recreate what I have here with just coding, and also don’t know how to code a safe website (if that’s a thing?).

What would you all advise me to do while keeping this reference in mind?

TL;DR:
How do I create a “mobile phone” shape in Elementor?
How do I place that shape at the background of all other elements?
How do I get that shape to be my current background image?
How do I get that shape to always be the full background on any mobile phone, but showing a solid color surrounding it on desktop? (See last image for photoshop end result example)

For the last few days I have been trying to setup and design my own Linktree-like webpage on my own domain.
The result of that can be seen above, which is already way better than the actual Linktree page ever was.
The only thing I do like about the original Linktree page, is that on the desktop version it has this “mobile phone” shape in the center of the screen, with a solid color surrounding it. On a mobile phone, this “shape” is always the full background image. Since my webpage is only a linking page, mostly catered to mobile phone users, I’d like to copy that behaviour.
How do I accomplish that? I want the purple/pink background that I’m currently using to be the background within this “phone” shape, so that it will always show that background on every mobile phone screen, but whenever someone looks at my page on desktop, it will have a solid color surrounding that shape (which I assume also mitigates any risk of the image not being large enough for large monitors). See laste image for a photoshop result example.

Setting up my first, simple webpage as an alternative to using Linktree: do I keep using Wordpress that came included with my host, or should I start learning code to accomplish what I have just made (image for reference)?

How to accomplish “mobile phone” shape only for desktop version of webpage within Elementor?