- First of all, you need some kind of mockup.
I took an IMAC image in Canva.
Create a 1400/600 design, add and center your mockup element.
*Make sure the background color is the one in your carousel section.
Download your design as a png file.
- Open photoshop, or go to PhotoPea, a free photoshop like online tool.
- Open your document and select the part you want your images to be seen. Here I selected the inner part of the screen.
- Delete. It is now a transparent part.
- Export this new file as a png.
- Add your Slider in BRIZY and add all the images you want.
- Make it only One column, so you see only one image at a time.
- Remove the padding and the margins of your slider element.
- Adjust your slider settings to your desires. Remove the arrows and the circles that show the number of slides.
- Add your predesigned image below the slider (be careful, not inside the slider). Go to the settings of this image.
- Remove padding and margins
- Make it position absolute
- Adjust its width to 100%
- And the horizontal offset to 0
- Now move it over your slider image, so you can see the image in the frame the way you want. Verify on the front-end if anything is ok. If you see glitches, it's because your design width is not 100%, or you still have margins and paddings.
- Adjust the same image for tablet and mobile.
- Take a coffee and enjoy.
Don't forget to donate if you feel this is valuable ;-)
Slider cache
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want