CSS :
.hero-full {
position: relative;
width: 100vw;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url(‘https://smartceilingdecor.com/wp-content/uploads/2024/07/IMG_1075-mini-1280-720.jpg’);
background-size: cover;
background-position: center;
margin-left: calc(-50vw + 50%);
}
.hero-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero-container {
position: relative;
z-index: 1;
text-align: center;
color: white;
padding: 20px;
width: 90%; /* Limite la largeur pour garder une marge */
}
.hero-sub { color: #d4af37; font-weight: bold; letter-spacing: 3px; font-size: 14px; }
/* Titre sur une ligne */
.hero-container h1 {
font-size: clamp(2rem, 5vw, 4rem); /* S’adapte à la taille de l’écran */
white-space: nowrap; /* Force la ligne unique */
margin: 20px 0;
color: #fff;
}
.hero-container p { font-size: 18px; margin-bottom: 30px; }
.btn-main {
background: #d4af37; color: black; padding: 15px 40px;
text-decoration: none; font-weight: bold; display: inline-block;
}
PHP :
function shortcode_bandeau_pro_ligne() {
return ‘
<div class= »hero-full » style= »background-image: url(\’https://smartceilingdecor.com/wp-content/uploads/2024/07/IMG_1075-mini-1280-720.jpg\’); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; width: 100vw; height: 60vh; display: flex; align-items: center; justify-content: center; margin-left: calc(-50vw + 50%); overflow: hidden; »>
<div class= »hero-overlay » style= »position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; »></div>
<div class= »hero-container » style= »position: relative; z-index: 2; text-align: center; color: white; padding: 20px; width: 90%; »>
<span class= »hero-sub » style= »color: #d4af37; font-weight: bold; letter-spacing: 3px; font-size: 14px; »>MIAMI · SOUTH FLORIDA · PALM BEACH</span>
<h1 style= »font-size: clamp(2rem, 5vw, 4rem); white-space: nowrap; margin: 20px 0; color: #fff; »>Ceilings that redefine your space</h1>
<p style= »font-size: 18px; margin-bottom: 30px; »>Professional stretch ceiling installation — flawless finishes, precise execution, zero mess.</p>
<div class= »hero-cta »>
<a href= »tel:7863340392″ class= »btn-main » style= »background: #d4af37; color: black; padding: 15px 40px; text-decoration: none; font-weight: bold; display: inline-block; »>CALL US NOW</a>
</div>
</div>
</div>’;
}
add_shortcode(‘bandeau_pro’, ‘shortcode_bandeau_pro_ligne’);
code court :