Cách làm đẹp cho accordion flatsome bằng css đơn giản

Mặc định accordion dạng Hiển thị câu hỏi thường gặp (FAQ) khá đơn giản,nếu bạn muốn nhìn đẹp và chuyên nghiệp hơn giúp tăng trải nghiệm người dùng cho website WordPress dùng theme Flatsome.Chỉ cần chỉnh vài dòng code CSS, bạn có thể biến phần accordion (nội dung xổ xuống) trở nên đẹp hơn, chuyên nghiệp hơn và đồng bộ với màu thương hiệu.

Nếu website của bạn đang dùng accordion mặc định của theme Flatsome và cảm thấy:

• Nhìn hơi “nhạt”, chưa nổi bật
• Màu sắc chưa đồng bộ thương hiệu
• Hiệu ứng mở ra – đóng lại chưa mượt
• Icon mũi tên nhìn thô

Thì bài viết này Sơn Web sẽ giúp bạn xử lý gọn trong vài phút, không cần biết code nhiều.

1. Accordion trong Flatsome là gì? Vì sao nên làm đẹp?

Accordion trong website thường dùng để:

• Hiển thị câu hỏi thường gặp (FAQ)
• Ẩn/hiện mô tả chi tiết dịch vụ sản phẩm
• Tạo khối nội dung gọn gàng cho trang dịch vụ
• Tối ưu trải nghiệm đọc trên thiết bị mobile

Tuy nhiên, giao diện accordion mặc định flatsome thường:

• Ít hiệu ứng
• Màu sắc đơn giản
• Chưa tạo điểm nhấn thị giác

👉 Làm đẹp accordion web bằng CSS giúp:

• Website trông chuyên nghiệp hơn
• Giữ chân người dùng lâu hơn
• Tăng tỉ lệ chuyển đổi
• Tạo cảm giác “web xịn” dù chỉ chỉnh giao diện

2. Thêm CSS ở đâu trong theme Flatsome?

Bạn có thể dán CSS tại:

Flatsome → Advanced → Custom CSS
hoặc
Giao diện → Tùy biến → Additional CSS

Nên dùng Custom CSS của Flatsome để tránh mất khi cập nhật theme

3. CSS làm đẹp accordion Flatsome đơn giản

✅ Bo góc + nền + đổ bóng nhẹ

.accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

📌 Tác dụng:

Accordion nhìn mềm mại hơn

Tạo cảm giác “card UI” hiện đại

✅ Đổi màu tiêu đề accordion + hover

.accordion .accordion-title {
    background: #f8f9fa;
    padding: 14px 16px;
    font-weight: 600;
    transition: 0.3s;
}

.accordion .accordion-title:hover {
    background: #e9f2ff;
    color: #0066ff;
}

✅ Icon mũi tên xoay mượt khi mở

.accordion .accordion-title i {
    transition: transform 0.3s ease;
}

.accordion .active .accordion-title i {
    transform: rotate(180deg);
}

📌 Tác dụng:

Cảm giác web “xịn” hơn

Tăng trải nghiệm người dùng

✅ Nội dung accordion đẹp và dễ đọc

.accordion .accordion-inner {
    padding: 15px 20px;
    background: #fff;
    line-height: 1.7;
    font-size: 15px;
}

📌 Tác dụng:

Nội dung dễ đọc hơn

Khoảng cách thoáng, không bí

Css mẫu bạn có thể dùng sau cho toàn bộ

sw-accordion .accordion-item{
  margin: 14px 0;
  border: 0;
}
.accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.sw-accordion .icon-angle-down {
	font-size: 1.2rem;
}
.sw-accordion .icon-angle-down:before {
	content: "\f0fe" !important;
    font-family: "FontAwesome";
}
.sw-accordion .accordion-title{
  background: #f3f3f3;
  padding: 8px 40px;
  border-radius: 2px;
  font-weight: 600;
  position: relative;
}

.accordion .accordion-title:hover {
    background: #e9f2ff;
    color: #0066ff;
}
.sw-accordion .accordion-title .toggle{
  top: .1em !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
}

/* mũi tên bên phải */
.sw-accordion .accordion-title::after{
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 20px;
  opacity: .6;
  transition: all .25s ease;
}
/* khi accordion mở */
.sw-accordion .accordion-item.active .accordion-title::after{
  transform: translateY(-50%) rotate(-90deg);
  opacity: .9;
}
.sw-accordion .accordion-inner{
  padding: 18px 20px 0;
  color: #777;
  line-height: 1.7;
}
.accordion-title.active {
	background-color: #0066CC !important;
    border-color: #0066CC;
	color: #fff !important;
}
/* Item đang mở: nền xanh, chữ trắng */
.sw-accordion .accordion-item.active .accordion-title{
  background: #0b66b2;
  color: #fff;
}
.sw-accordion .accordion-item.active .accordion-title .toggle{
  background: rgba(255,255,255,.25);
}

.sw-accordion .accordion-item.active .accordion-title i.icon-angle-down{
  opacity: .9;
  transform: translateY(-50%) rotate(180deg);
}

Note: thêm class sw-accordion cho ux builder accordion

4. Mẹo tối ưu UX cho accordion Flatsome

✅ Không nên nhồi quá nhiều accordion trên 1 trang
✅ Nội dung tiêu đề nên ngắn gọn
✅ Mỗi accordion chỉ nên chứa 1 chủ đề
✅ Trên mobile nên tăng padding cho dễ bấm
✅ Kết hợp màu thương hiệu để đồng bộ UI

Kết luận

Cách làm đẹp cho accordion Flatsome bằng CSS đơn giản là thủ thuật rất đáng áp dụng nếu bạn muốn website:

• Nhìn chuyên nghiệp hơn
• Trải nghiệm người dùng tốt hơn
• Không cần cài thêm plugin nặng
• Dễ tuỳ biến theo thương hiệu
• Chỉ cần vài dòng CSS là giao diện đã “lên đời” rõ rệt.