THAY ĐỔI STYLE & LAYOUT CHO FLATSOME

Tùy Biến Style và Layout cho Flatsome

Hôm nay tôi sẽ hướng dẫn cho các bạn cách thay đổi Style và Layout trong theme Flatsome cho các bạn.
Để website được trau chuốt và đẹp hơn, đây là 1 trong những cách đó.

Xem Thêm:

chỉnh sửa style và layout cho flatsome
Chọn Style và Layout trong Theme Options

1. Color

Main Color: tùy chỉnh style cho flatsome bằng màu sắc của website, bao gồm 4 loại màu ( Primary Color: màu chủ đạo của website, Secondary Color: màu nhấn của website , Success Color: màu chữ thông báo thành công, Alert Color : màu chữ thông báo

Type : tùy chỉnh màu chữ website

Base Color : Tùy chỉnh màu chữ toàn bộ website

  • Headline Color : Tùy chỉnh màu chữ tiêu đề website
  • Devider Color : Tùy chỉnh màu đường kẻ website
  • Link : tùy chỉnh màu của link
  • Link colors : tùy chỉnh màu của link
  • Link colors:hover : tùy chỉnh màu của link khi đưa chuột vào link đó

Shop Color :

  • Add to cart / Checkout buttons : màu của nút thêm vào giỏ và thanh toán
  • Sale bubble : màu của nhãn dán Khuyến mãi
  • New bubble : màu của nhãn dán Sản phẩm mới
  • Review Stars : màu của các ngôi sao khi nhận xét

2.  Typography : tùy chỉnh Font Chữ của Website

  • Headlines : tùy chỉnh Font Chữ của các tiêu đề trên website ( Thẻ H1, H2, H3 , … )
  • Base : tùy chỉnh Font Chữ, cỡ chữ,  cho toàn bộ văn bản trên website
  • Navigation : tùy chỉnh Font Chữ cho thanh menu
  • Text Transforms : tùy chỉnh kiểu chữ in hoa

3. Global Styles:

  • Trong này chỉ có một tùy chọn cho Border buttom, Bạn có thể chọn học là tùy chọn trong cách thành phần khác

4. Custom CSS:

  • Nơi bạn có thể thêm nhanh code css để trang trí cho trong web của mình. Hơn thế nữa ở trong này Flatsome đa phân chia thành 3 loại màn hình cho chúng ta code vào. Chúng sẽ được áp dụng vào từng loại màn hình khi responsive về độ phân giải tương ứng với màn hình đó.
Chỉnh sửa Advanced Options trong Flatsome
Chỉnh sửa Advanced Options trong Flatsome

5. Images Lightbox:

Ở đây bạn có thể bật hoặc tắt nó + với việc chọn được màu background cho lightbox hiển thị.Nếu bạn không biết Lightbox  là gì thì nói được định nói như: Về bản chất nó là một thông điệp tương tác xuất hiện để thu hút sự chú ý nhất định nơi khách hàng, người xem.  Thực tế, nó hoàn hảo cho việc quảng cáo bán hàng, thu thập địa chỉ liên lạc mới và khách hàng tiềm năng, hoặc chỉ là một cách hay để chào hỏi.  Các lightbox đi kèm với các thiết kế ấn tượng, bạn có thể cá nhân hoá theo phong cách độc đáo của trang web của bạn. Thiết kế lightbox cần chú ý một mục cụ thể hoặc nhận thêm nhiều mục đăng ký? Không phải là một vấn đề, với Lightbox bạn có thể làm nổi bật những gì quan trọng của bạn với một thông điệp đẹp được bật lên.

Ở mức độ cơ bản, ở phần này các bạn chỉ cần quan tâm tới 3 phần chính cho mình, đó là Colors, Typography và Custom CSS để thay đổi style cho flatsome

Color: Bao gồm các tùy chỉnh về màu sắc của website, có 5 chế độ màu cho một website, các bạn có thể tùy chỉnh theo ý thích.

Typography: Bao gồm các tùy chỉnh về font chữ của website. Tại đây các bạn có thể tùy chỉnh các font của Google.

Custom CSS: Phần này là nơi các bạn thêm vào một số tùy chỉnh Css cho website. Tuy nhiên, mình không khuyến khích các bạn thêm CSS vào phần này, vì sẽ khó để kiểm tra sau này.

Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome:

Sửa Layout Mode trong Flatsome

Trong phần này chúng ta có thể cấu hình một số thành phần cơ bản sau: Layout Mode Bạn có thể chọn Full Width

Site Content Width Chọn chiều rộng tối đa cho trang web của mình

Background color  Chọn màu nền cho trang web.

Background Image Hình nền cho trang web là gì.

Background Repeat Hình nền có repeat hay không.

Content color Màu chữ

Content Background Màu nền của khối nội dung.

Trên đây tôi đã hướng dẫn cho các bạn cách thay đổi style cho flatsome và thay đổi layout trong themes Flatsome, nếu có thắc mắc gì, vui lòng để lại câu hỏi bên dưới.

5/5 - (5 bình chọn)

Có thể bạn quan tâm

  • Hướng dẫn chèn fanpages vào website

    Hướng Dẫn Cách Chèn Fanpage Vào Website

    Nội Dung ChínhTùy Biến Style và Layout cho Flatsome1. Color2.  Typography : tùy chỉnh Font Chữ của Website3. Global Styles:4. Custom CSS:5. Images Lightbox:Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome: Hiện tại thì gần như 100% các website đều nhúng Fanpage Facebook vào website để thu hút người dùng theo dõi kênh …

  • tạo bài viết liên quan trong flatsome

    Thêm Bài Viết Liên Quan Trong Flatsome

    Nội Dung ChínhTùy Biến Style và Layout cho Flatsome1. Color2.  Typography : tùy chỉnh Font Chữ của Website3. Global Styles:4. Custom CSS:5. Images Lightbox:Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome: Mặc định Flatsome không có bài viết liên quan, chỉ có nút trở lại và xem tiếp phải nói là đơn điệu …

  • cách tạo popup trong flatsome

    Tạo Popup Bằng Lightbox Trong Flatsome

    Nội Dung ChínhTùy Biến Style và Layout cho Flatsome1. Color2.  Typography : tùy chỉnh Font Chữ của Website3. Global Styles:4. Custom CSS:5. Images Lightbox:Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome: Bài viết này mình sẽ hướng dẫn cách tạo popup trong flatsome để báo giá, popup báo giá kèm URL , popup …

  • cai-dat-smtp-wordpress-gmail

    Cách Cấu Hình SMTP Cho WordPress

    Nội Dung ChínhTùy Biến Style và Layout cho Flatsome1. Color2.  Typography : tùy chỉnh Font Chữ của Website3. Global Styles:4. Custom CSS:5. Images Lightbox:Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome: Khi xây dựng một website wordpress, bắt đầu vào hoạt động nhưng không thể gửi/nhận email như email thông báo, khách gửi …

  • seo tổng hợp

    Cách Đưa Google Analytics Vào Website

    Nội Dung ChínhTùy Biến Style và Layout cho Flatsome1. Color2.  Typography : tùy chỉnh Font Chữ của Website3. Global Styles:4. Custom CSS:5. Images Lightbox:Tùy chỉnh Style, Layout – 2.Cơ bản trong Layout trong Flatsome: Cách Đưa Google Analytics Vào Website Sau khi có một website với đầy đủ sản phẩm, thông tin đã được update, vậy …