Objet : Méthode exacte pour une bannière responsive comme H&M

Bonjour,

Je souhaite créer sur nysalia.com, avec WoodMart et Elementor, une grande bannière responsive comme sur le site H&M : image pleine largeur, mannequin proche, cadrage fluide sur ordinateur, tablette et mobile, sans saut d’affichage.

J’ai déjà rencontré le même problème avec le slider du modèle Fashion Flat. Je n’avais pas obtenu de réponse claire et j’ai finalement changé de modèle à cause du mauvais cadrage des images.

Pouvez-vous répondre directement à ces questions :

Quel élément dois-je utiliser : Bannière promotionnelle, Slider WoodMart ou autre ?
Une seule image peut-elle réellement fonctionner sur tous les écrans ?
Faut-il préparer une image pour ordinateur, une pour tablette et une pour mobile ?
Si oui, où attribuer chaque image dans WoodMart ?
Peut-on régler séparément la hauteur, la position et le point focal selon l’appareil ?
Quelles dimensions recommandez-vous pour chaque support ?
Comment éviter les sauts d’image pendant le chargement ?
Quelle est la procédure exacte, étape par étape, sans dupliquer plusieurs sections et sans CSS personnalisé ?

J’ai besoin d’une réponse technique, claire et directement exploitable : le bon widget, son emplacement et les réglages précis à appliquer. Merci de ne pas répondre uniquement par un lien vers la documentation. Un lien peut être ajouté en complément, mais il ne remplace pas l’explication concrète de la méthode adaptée à ma configuration.

Hello,

Thank you for your detailed questions.

For a large, responsive hero banner, we recommend using the WoodMart Slider. It is specifically designed for responsive hero banners and provides device-specific image support and content positioning without requiring duplicate sections or custom CSS.

Here are the answers to your questions:
1. Which element should I use?
Use the WoodMart Slider. It offers the best control for responsive full-width banners and allows you to configure images and content for different devices.

2. Can a single image work across all screen sizes?
Technically, yes. However, because desktop and mobile screens have very different aspect ratios, a single image will often be cropped differently, making it difficult to keep the subject framed correctly on every device.

3. Do I need separate images for desktop, tablet, and mobile?
For the best responsive experience, yes. We recommend preparing separate images optimized for each device size.

4. Where do I assign each image?
Navigate to Slides > All Slides, edit the slide with Elementor, then open Slide Settings (top-left corner). There you can upload dedicated images for Desktop, Tablet, and Mobile devices: https://postimg.cc/tYZqQ79k

5. Can the height, position, and focal point be adjusted independently?
Yes. Within the slide settings, you can assign different images for each device and adjust the content position. You can also configure height for different devices to achieve the desired layout: https://postimg.cc/cvVHNJ9h

6. Recommended image dimensions
– Desktop: 1920 × 980 px (the same dimensions used in the WoodMart demos)
– Mobile: approximately 800 × 1000 px (or anywhere between 750–900 px wide and 900–1200 px high)
– Tablet: Use an image sized between your desktop and mobile versions with a similar composition.

7. How can I prevent layout shifts?
– Use properly optimized images.
– Set the slider height instead of relying on the image’s natural dimensions.
– Upload images with the recommended sizes and aspect ratios for each device.

8. Step-by-step procedure
1. Navigate to Slides > All Slides.
2. Edit the desired slide with Elementor.
3. Open Slide Settings (top-left corner).
4. Upload separate images for Desktop, Tablet, and Mobile.
5. Adjust the content position for each device if needed.
6. Configure the slide height or responsive padding for desktop, tablet, and mobile.
7. Save the changes and test the slider on different screen sizes.

Using separate images for each device is the recommended approach because it provides the best framing and user experience across desktop, tablet, and mobile devices without requiring duplicate sections or custom CSS.

Best Regards

[Author]

Posts