How to achieve this effect?

Hi guys,

can someone explain me how to achieve this effect?
I have tried to create two columns and apply a background image through a CSS class but the image looks zoomed in. Also, how can I darken the image?

Thanks for the help.

dark the image with photoshop or another editor, Just add a black layer on top with a 80% opacity. Ad the background image and play with the padding of the text till you get what our want or use card designer


But card designer is not for free so maybe you want to try with the padding - margin :slight_smile:

I would use the “structure 2 column bloc”. This creates 2 blocs side by side. Place your background images in each of the blocs and then use the “Texture/Darken” option in the background section of the properties panel. Add your text and button brics as required to each bloc. How the image displays is really all about the aspect ratio of each image. If it isn’t how you like it, create a custom class for the bloc. In the metrics tab of the class editor select both the top and bottom margin and adjust padding until the image is how you want it. Apply the same class to the other bloc.

You can change the class you created for each device viewport so that it will look correct on all devices. In the example below, I’ve darkened one image only to illustrate that the blocs can be adjusted independently.