Conversation
supportHi, On our webpage, undernearth “Choose Your Hideaway”, is it possible to have the Book Now button over the top/superimposed on the image (above “Queen & Single Room with Shared Bathrooms”)? Thanks This topic was modified 1 day, 5 hours ago by SRD75 . The page I need help with: [ log in to see the link]
Hi @srd75 Yes, this layout is definitely possible in Elementor. To place the “Book Now” button superimposed over the image (specifically above the “Queen & Single Room with Shared Bathrooms” section), you can use any of the following approaches depending on how precise you want the placement to be:1. Negative Margin (Quick Method) Select the Book Now button widget Go to Advanced → Margin Unlink the values Apply a negative Top margin (e.g. -50px or adjust as needed) until the button overlaps the image Then increase the Z-Index (Advanced tab, e.g. 10) so the button stays on top of the image 2. Absolute Positioning (Most Precise) Select the Book Now button Go to Advanced → Positioning Set Position → Absolute Adjust the horizontal and vertical offsets to place it exactly where you want over the image 3. Background Image Method (Clean Structure) Set the room image as the background of the container/column Place the Book Now button inside that same container This naturally layers the button over the image without needing positioning tweaks Whichever method you use, please also check the tablet and mobile views in Elementor, as overlays may need slight adjustments for responsiveness. Kind regards,
Hi @srd75 Yes, this layout is definitely possible in Elementor. To place the “Book Now” button superimposed over the image (specifically above the “Queen & Single Room with Shared Bathrooms” section), you can use any of the following approaches depending on how precise you want the placement to be:1. Negative Margin (Quick Method) Select the Book Now button widget Go to Advanced → Margin Unlink the values Apply a negative Top margin (e.g. -50px or adjust as needed) until the button overlaps the image Then increase the Z-Index (Advanced tab, e.g. 10) so the button stays on top of the image 2. Absolute Positioning (Most Precise) Select the Book Now button Go to Advanced → Positioning Set Position → Absolute Adjust the horizontal and vertical offsets to place it exactly where you want over the image 3. Background Image Method (Clean Structure) Set the room image as the background of the container/column Place the Book Now button inside that same container This naturally layers the button over the image without needing positioning tweaks Whichever method you use, please also check the tablet and mobile views in Elementor, as overlays may need slight adjustments for responsiveness. Kind regards,