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 đó.

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 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 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.

Có thể bạn quan tâm

  • cach-viet-content-chuan-seo-cau-truc-viet-content

    Cách Viết Content Hay, Viết Content Chuẩn SEO: 8 Cấu Trúc Thường Dùng (Phần 2)

    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: Trong bài viết trước, tôi đã giới thiệu đến các bạn những nền tảng cơ bản để tham khảo trước khi bắt …

  • cach-viet-content-hay-phan-1

    Cách Viết Content Hay, Chuẩn SEO (Phần 1)

    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 Viết Content Hay, Viết Content Chuẩn SEO Viết Content hay, chuẩn SEO chưa bao giờ là điều dễ dàng. Tuy nhiên …

  • Cach-them-Google-Analytics-vao-website

    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 …

  • Google-Top

    SEO Là Gì? Khái Niệm Và Thực Hành Để Hiệu Quả

    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 bạn đã có 1 website, ít nhất 1 lần các bạn đã nghe nói về SEO hoặc Quảng Cáo Google. Ở …

  • website-la-gi-tai-sao-can-website

    Website Là Gì? 9 Lý Do Tại Sao Cần Có 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: Ngày nay khi nhắc đến Website, gần như không ai không biết khái niệm website. Tuy nhiên, web là gì, tại sao …

  • tao-usb-boot-bang-rufus

    Công Cụ Tạo USB Cài Windows Rufus

    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: USB boot giúp chúng ta có thể khởi động vào máy tính từ USB để sửa lỗi máy, cài đặt Windows vô …