Bài Viết, Tất cả bài viết, Thủ thuật wordpress

Sharecode tạo uxbuider element đẹp wordpress

Đăng vào Tháng 4 17, 2025Tháng 4 17, 2025 bởi admin

17/04/2025

3 Phút đọc

47 Lượt xem

Đánh giá

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu tố:

Chữ lớn, gradient rực lửa, hiệu ứng ánh sáng động, bóng đổ mạnh, hiệu ứng rung động khi hover.
Ảnh với hiệu ứng glow đỏ-cam, phản chiếu, border sáng, nghiêng 3D theo chuột, hiệu ứng rung khi hover.
Background động với hiệu ứng sóng lửa hoặc ánh sáng chuyển động.
Tất cả đều responsive, không nghiêng chữ, không cần plugin ngoài.

Dưới đây là code hoàn chỉnh, chỉ cần copy vào Element HTML của UX Builder:

<div class="ux-hero-fire-section">
  <div class="ux-hero-fire-bg"></div>
  <div class="ux-hero-fire-content">
    <div class="ux-hero-fire-title-wrap">
      <span class="ux-hero-fire-title">Sự kiện lịch sử 30/4 & 1/5</span>
      <span class="ux-hero-fire-light"></span>
    </div>
    <div class="ux-hero-fire-img-wrap" id="uxHeroFireImgWrap">
      <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" alt="Sự kiện lịch sử" class="ux-hero-fire-img" id="uxHeroFireImg" />
      <div class="ux-hero-fire-glow"></div>
      <div class="ux-hero-fire-reflect"></div>
    </div>
  </div>
</div>

<style>
.ux-hero-fire-section {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 70px 0;
}
.ux-hero-fire-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 60% 40%, #ff9800 0%, #ff512f 40%, #dd2476 100%);
  animation: fireBgMove 8s linear infinite alternate;
  opacity: 0.95;
}
@keyframes fireBgMove {
  0% { background-position: 60% 40%; }
  100% { background-position: 40% 60%; }
}
.ux-hero-fire-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ux-hero-fire-title-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 54px;
  text-align: center;
}
.ux-hero-fire-title {
  font-size: 3.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #fff700 0%, #ff9800 30%, #ff512f 60%, #dd2476 90%);
  background-size: 300% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 40px #ff512f) drop-shadow(0 2px 0 #fff700);
  text-shadow:
    0 2px 0 #fff700,
    0 8px 32px #ff512f,
    0 16px 64px #dd2476;
  position: relative;
  z-index: 2;
  animation: fireTitleGradient 2.5s linear infinite alternate;
  transition: filter 0.3s, letter-spacing 0.3s, transform 0.2s;
  cursor: pointer;
  user-select: none;
}
@keyframes fireTitleGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.ux-hero-fire-title:hover {
  filter: drop-shadow(0 20px 60px #fff700cc) drop-shadow(0 4px 0 #fff);
  letter-spacing: 8px;
  transform: scale(1.06) rotate(-1deg);
  animation: fireShake 0.3s;
}
@keyframes fireShake {
  0% { transform: scale(1.06) rotate(-1deg) translateX(0); }
  20% { transform: scale(1.08) rotate(1deg) translateX(-4px);}
  40% { transform: scale(1.06) rotate(-2deg) translateX(4px);}
  60% { transform: scale(1.08) rotate(2deg) translateX(-2px);}
  80% { transform: scale(1.06) rotate(-1deg) translateX(2px);}
  100% { transform: scale(1.06) rotate(-1deg) translateX(0);}
}
.ux-hero-fire-title-wrap .ux-hero-fire-light {
  position: absolute;
  left: 0; top: 0; right: 0; height: 100%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, #fff8 40%, transparent 60%);
  mix-blend-mode: lighten;
  animation: fireLightMove 2.2s infinite linear;
  z-index: 3;
}
@keyframes fireLightMove {
  0% { left: -100%; }
  100% { left: 100%; }
}
.ux-hero-fire-img-wrap {
  position: relative;
  perspective: 1200px;
  margin-top: 10px;
  display: inline-block;
}
.ux-hero-fire-img {
  width: 400px;
  max-width: 95vw;
  border-radius: 24px;
  box-shadow: 0 24px 80px #ff512fcc, 0 2px 16px #fff700;
  background: #fff;
  transform: scale(1.01);
  transition: 
    transform 0.5s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.4s;
  z-index: 2;
  position: relative;
}
.ux-hero-fire-img-wrap:hover .ux-hero-fire-img {
  transform: scale(1.12) rotateY(0deg) rotateX(0deg);
  box-shadow: 0 40px 120px #ff9800cc, 0 8px 32px #fff700;
  animation: fireImgShake 0.4s;
}
@keyframes fireImgShake {
  0% { transform: scale(1.12) translateY(0);}
  20% { transform: scale(1.13) translateY(-4px);}
  40% { transform: scale(1.12) translateY(4px);}
  60% { transform: scale(1.13) translateY(-2px);}
  80% { transform: scale(1.12) translateY(2px);}
  100% { transform: scale(1.12) translateY(0);}
}
.ux-hero-fire-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle, #fff70055 0%, #ff9800aa 40%, #ff512f00 100%);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: blur(24px);
  opacity: 0.8;
  animation: fireGlow 2.2s infinite alternate;
}
@keyframes fireGlow {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}
.ux-hero-fire-reflect {
  position: absolute;
  left: 0; right: 0; bottom: -36px;
  height: 70px;
  background: linear-gradient(to bottom, #fff7 0%, #fff0 100%);
  border-radius: 0 0 24px 24px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.ux-hero-fire-img-wrap:hover .ux-hero-fire-reflect {
  opacity: 0.9;
}
@media (max-width: 600px) {
  .ux-hero-fire-title { font-size: 1.4rem; }
  .ux-hero-fire-img { width: 98vw; }
}
</style>

<script>
/* Hiệu ứng nghiêng 3D theo chuột cho ảnh */
(function(){
  var imgWrap = document.getElementById('uxHeroFireImgWrap');
  var img = document.getElementById('uxHeroFireImg');
  if(imgWrap && img){
    imgWrap.addEventListener('mousemove', function(e){
      var rect = imgWrap.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      var cx = rect.width/2, cy = rect.height/2;
      var dx = (x - cx)/cx, dy = (y - cy)/cy;
      img.style.transform = `scale(1.12) rotateY(${dx*16}deg) rotateX(${-dy*10}deg)`;
    });
    imgWrap.addEventListener('mouseleave', function(){
      img.style.transform = 'scale(1.01)';
    });
  }
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

</div>

</div>

<style>

.ux-hero-fire-section {

position: relative;

overflow: hidden;

min-height: 600px;

display: flex;

align-items: center;

justify-content: center;

padding: 90px 0 70px 0;

}

.ux-hero-fire-bg {

position: absolute;

inset: 0;

z-index: 0;

background: radial-gradient(ellipse at 60% 40%, #ff9800 0%, #ff512f 40%, #dd2476 100%);

animation: fireBgMove 8s linear infinite alternate;

opacity: 0.95;

}

@keyframes fireBgMove {

0% { background-position: 60% 40%; }

100% { background-position: 40% 60%; }

}

.ux-hero-fire-content {

position: relative;

z-index: 2;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

.ux-hero-fire-title-wrap {

position: relative;

display: inline-block;

margin-bottom: 54px;

text-align: center;

}

.ux-hero-fire-title {

font-size: 3.6rem;

font-weight: 900;

text-transform: uppercase;

letter-spacing: 3px;

background: linear-gradient(90deg, #fff700 0%, #ff9800 30%, #ff512f 60%, #dd2476 90%);

background-size: 300% auto;

color: #fff;

background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

filter: drop-shadow(0 10px 40px #ff512f) drop-shadow(0 2px 0 #fff700);

text-shadow:

0 2px 0 #fff700,

0 8px 32px #ff512f,

0 16px 64px #dd2476;

position: relative;

z-index: 2;

animation: fireTitleGradient 2.5s linear infinite alternate;

transition: filter 0.3s, letter-spacing 0.3s, transform 0.2s;

cursor: pointer;

user-select: none;

}

@keyframes fireTitleGradient {

0% { background-position: 0% 50%; }

100% { background-position: 100% 50%; }

}

.ux-hero-fire-title:hover {

filter: drop-shadow(0 20px 60px #fff700cc) drop-shadow(0 4px 0 #fff);

letter-spacing: 8px;

transform: scale(1.06) rotate(-1deg);

animation: fireShake 0.3s;

}

@keyframes fireShake {

0% { transform: scale(1.06) rotate(-1deg) translateX(0); }

20% { transform: scale(1.08) rotate(1deg) translateX(-4px);}

40% { transform: scale(1.06) rotate(-2deg) translateX(4px);}

60% { transform: scale(1.08) rotate(2deg) translateX(-2px);}

80% { transform: scale(1.06) rotate(-1deg) translateX(2px);}

100% { transform: scale(1.06) rotate(-1deg) translateX(0);}

}

.ux-hero-fire-title-wrap .ux-hero-fire-light {

position: absolute;

left: 0; top: 0; right: 0; height: 100%;

pointer-events: none;

background: linear-gradient(120deg, transparent 0%, #fff8 40%, transparent 60%);

mix-blend-mode: lighten;

animation: fireLightMove 2.2s infinite linear;

z-index: 3;

}

@keyframes fireLightMove {

0% { left: -100%; }

100% { left: 100%; }

}

.ux-hero-fire-img-wrap {

position: relative;

perspective: 1200px;

margin-top: 10px;

display: inline-block;

}

.ux-hero-fire-img {

width: 400px;

max-width: 95vw;

border-radius: 24px;

box-shadow: 0 24px 80px #ff512fcc, 0 2px 16px #fff700;

background: #fff;

transform: scale(1.01);

transition:

transform 0.5s cubic-bezier(.25,.8,.25,1),

box-shadow 0.4s;

z-index: 2;

position: relative;

}

.ux-hero-fire-img-wrap:hover .ux-hero-fire-img {

transform: scale(1.12) rotateY(0deg) rotateX(0deg);

box-shadow: 0 40px 120px #ff9800cc, 0 8px 32px #fff700;

animation: fireImgShake 0.4s;

}

@keyframes fireImgShake {

0% { transform: scale(1.12) translateY(0);}

20% { transform: scale(1.13) translateY(-4px);}

40% { transform: scale(1.12) translateY(4px);}

60% { transform: scale(1.13) translateY(-2px);}

80% { transform: scale(1.12) translateY(2px);}

100% { transform: scale(1.12) translateY(0);}

}

.ux-hero-fire-glow {

position: absolute;

top: 50%; left: 50%;

width: 130%;

height: 130%;

background: radial-gradient(circle, #fff70055 0%, #ff9800aa 40%, #ff512f00 100%);

transform: translate(-50%, -50%);

z-index: 1;

pointer-events: none;

filter: blur(24px);

opacity: 0.8;

animation: fireGlow 2.2s infinite alternate;

}

@keyframes fireGlow {

0% { opacity: 0.7; }

100% { opacity: 1; }

}

.ux-hero-fire-reflect {

position: absolute;

left: 0; right: 0; bottom: -36px;

height: 70px;

background: linear-gradient(to bottom, #fff7 0%, #fff0 100%);

border-radius: 0 0 24px 24px;

z-index: 3;

pointer-events: none;

opacity: 0.6;

transition: opacity 0.3s;

}

.ux-hero-fire-img-wrap:hover .ux-hero-fire-reflect {

opacity: 0.9;

}

@media (max-width: 600px) {

.ux-hero-fire-title { font-size: 1.4rem; }

.ux-hero-fire-img { width: 98vw; }

}

</style>

/* Hiệu ứng nghiêng 3D theo chuột cho ảnh */

(function(){

var imgWrap = document.getElementById('uxHeroFireImgWrap');

var img = document.getElementById('uxHeroFireImg');

if(imgWrap && img){

imgWrap.addEventListener('mousemove', function(e){

var rect = imgWrap.getBoundingClientRect();

var x = e.clientX - rect.left;

var y = e.clientY - rect.top;

var cx = rect.width/2, cy = rect.height/2;

var dx = (x - cx)/cx, dy = (y - cy)/cy;

img.style.transform = `scale(1.12) rotateY(${dx*16}deg) rotateX(${-dy*10}deg)`;

});

imgWrap.addEventListener('mouseleave', function(){

img.style.transform = 'scale(1.01)';

});

}

})();

</script>

Điểm nhấn khí thế, mãnh liệt, mạnh mẽ:
Chữ cực lớn, gradient rực lửa, bóng đổ mạnh, hiệu ứng ánh sáng động, hover rung chuyển, giãn chữ, chuyển màu vàng rực.
Ảnh glow vàng-cam, phản chiếu, border sáng, nghiêng 3D theo chuột, hover phóng to và rung chuyển.
Background động như sóng lửa, tạo cảm giác khí thế, mãnh liệt.
Tất cả hiệu ứng đều mượt mà, chuyên nghiệp, không nghiêng chữ, không cần plugin ngoài, responsive.

Chỉ cần copy toàn bộ code trên vào Element HTML của UX Builder Flatsome là bạn sẽ có section khí thế, mãnh liệt, mạnh mẽ, cực kỳ bắt mắt cho mọi website sự kiện, lịch sử, landing page!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

10 Mẫu Tiêu Đề SEO Cực Hút Click

Viết tiêu đề SEO như thế nào để người dùng phải nhấp vào bài viết của bạn ngay lập tức?Đây là câu hỏi quan trọng...
Chèn icon trong bài viết SEO là lợi hay hại

Trong quá trình tối ưu nội dung chuẩn SEO, nhiều người viết thường sử dụng icon (emoji, biểu tượng hình ảnh nhỏ) với mong muốn...
Top Những Sai Lầm Khi Viết Tiêu Đề SEO – Tránh Ngay!

Viết tiêu đề sai – Mất top, mất traffic! Tiêu đề là thứ đầu tiên người dùng và Google nhìn thấy. Một tiêu đề sai...
Top 10 Framework JavaScript Phổ Biến Nhất 2025 – Bạn Phù Hợp Với Cái Nào?

Chào bạn, người đang tìm kiếm công cụ phù hợp để phát triển web trong năm 2025! Nếu bạn đang phân vân giữa các framework...
Tự Học JavaScript Từ Con Số 0: Lộ Trình Học, Tài Nguyên, Mẹo Học Dễ Nhớ

Nếu bạn là sinh viên CNTT, hay đơn giản là một người mới bắt đầu học lập trình, thì JavaScript chính là lựa chọn lý...
Tất tần tật về ngôn ngữ lập trình javaScript

Chào mừng bạn đến với bài viết chuyên sâu về JavaScript – ngôn ngữ lập trình không thể thiếu trong mọi trang web hiện đại....
JavaScript SEO: Cách Giúp Website JS Nặng Trình Vẫn Lên Top Google

Khi nói đến việc phát triển website hiện đại, JavaScript đã trở thành công cụ chủ lực. Tuy nhiên, một trong những thách thức lớn...
JavaScript Là Gì? Và Vì Sao Website Thời Nay Không Thể Thiếu Nó?

Nếu ví một trang web là một cơ thể sống, thì HTML là khung xương, CSS là quần áo và ngoại hình, còn JavaScript chính...
Bật tính năng đánh giá sản phẩm WooCommerce chỉ với vài dòng code

Nếu bạn đang sử dụng WooCommerce để xây dựng website bán hàng và muốn bật tính năng đánh giá sản phẩm cho tất cả sản...
Cách Chống Spam Bình Luận Trong WordPress Hiệu Quả Và Chuyên Nghiệp [2025]

Tại sao cần chống spam bình luận trong WordPress? Nếu bạn đang quản lý một website WordPress, chắc hẳn bạn đã từng gặp tình trạng...
Ưu điểm và Nhược điểm của Plugin Nulled WordPress

Trong quá trình xây dựng website bằng WordPress, chắc hẳn bạn đã từng nghe đến cụm từ “plugin nulled WordPress” hay còn gọi là plugin...
Mua Theme WordPress Chính Hãng – Tìm Hiểu Các Loại Theme Hàng Đầu Cho Website Của Bạn

Khi bắt đầu xây dựng một website, việc chọn lựa theme phù hợp là bước đầu tiên cực kỳ quan trọng. Theme không chỉ giúp...
Hướng Dẫn Thêm Mã Script Vào Theme Flatsome Một Cách Khoa Học

Một website tốt không chỉ đẹp – mà còn phải hiểu được chính mình.Để hiểu, bạn cần dữ liệu. Và dữ liệu đến từ đâu?Từ...
Top theme WordPress bất động sản đẹp, chuyên nghiệp và dễ dùng nhất 2025

Trong thời đại mà mọi khách hàng đều “google trước khi gọi”, một website bất động sản đẹp chính là “mặt tiền online” không thể...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
WordPress 6.8 có gì mới? Đánh giá chi tiết & thực tế sau khi trải nghiệm bản cập nhật mới nhất

Tóm tắt nhanh: WordPress 6.8 ra mắt với hàng loạt cải tiến về hiệu suất, bảo mật và trải nghiệm người dùng. Trải nghiệm thực...