[Web30s – v.3] [Page-Editor] Làm việc với Thiết lập giao diện Widget

  • Monday 27/04/2020

Bài viết hướng dẫn cách thức hoạt động và sử dụng chức năng có trong phần tuỳ chỉnh giao diện của Widget. 

Các chức năng của Thiết lập hầu hết đều giống nhau, một số chỉ khác một số chức năng nhất định nên bài viết sẽ hướng dẫn các thành phần chức năng giống nhau và sẽ trình bày các phần phụ trợ khác nhau ở mục II trở đi.

I. Thiết lập chung

1. Nền

Phần thiết lập của giao diện nền có 4 lựa chọn gồm: Không, Màu cơ bản, hình ảnh, Màu Gradient.  

a. Không: là chế độ mặc định của thành phần. không sử dụng nền.
b. Màu cơ bản có 2 dạng mã màu là RGB(0,0,0) và #[Mã màu] có 2 cách gắn vào thành phần tuỳ chỉnh. Trong phần này có 2 tuỳ chọn:

Màu cơ bản: được định nghĩa  là tập hợp các màu có thể kết hợp được với nhau để tạo ra dải màu hữu dụng. Các màu cơ bản, còn gọi là màu gốc, của một không gian màu là các màu sắc không thể tạo ra bằng cách trộn các màu khác trong phổ màu của không gian màu đó. Các màu gốc có thể được trộn với nhau để tạo ra mọi màu khác trong không gian màu của chúng. Nếu không gian màu là một không gian véctơ thì các màu gốc tạo nên hệ cơ sở của không gian đó.

Overlay: lớp màu phủ được sử dụng khi Quý khách đang chọn 1 màu nền gì đó, nhưng lại cần thay đổi 1 màu khác mà vẫn muốn để lại sau này ẩn màu cơ bản thì overlay đè lên màu nền, khi nào Quý khách muốn hiển thị lại thì chỉ cần cho overlay màu trong suốt là được.

Mẹo: Nếu như Quý khách chưa có mã màu thì Quý khách có thể tự thiết lập 1 mã màu mới tuỳ chọn bằng cách click vào phần màu và kéo thả cho đến khi có được mã màu mong muốn.

c. Hình ảnh: Hình ảnh này Web30s có cung cấp một số mẫu ảnh để Quý khách chọn. 


Nếu những hình ảnh này là không đủ. Quý khách chọn Tuỳ chỉnh để đăng tải những hình ảnh của Quý khách. Sau khi chọn phần thiết lập sẽ tự động xuất hiện như hình ảnh dưới đây.

+ Màu nền: Là màu nền của Hình ảnh. Đối với các ảnh dạng không nền sẽ cần điều chỉnh màu để hình ảnh hiển thị rõ nhất.
+ Lặp ảnh: Chức năng này tạo ra nhằm thể hiện hình ảnh đa dạng thay vì giới hạn hình ảnh Quý khách cung cấp là phải thể hiện chính xác hình ảnh như vậy. Công cụ này có 4 kiểu ảnh:

        • Lặp ảnh ngang và dọc. 
        • Lặp ảnh ngang.
        • Lặp ảnh dọc.
        • không.

+  Kiểu: hình thức hình ảnh hiển thị trong khung widget. Công cụ có 6 lựa chọn thể hiện ảnh:

        • Tự động ( lấy chiều cao và chiều rộng ảnh).
        • Lắp đầy khung (hình ảnh sẽ tự kéo dài hình ảnh cho vừa khung widget) (có thể sử dụng cùng với chức năng lặp ảnh).
        • Nằm trong khung (hình ảnh sẽ tự kéo dài chiều cao cho vừa khung widget) (có thể sử dụng cùng với chức năng lặp ảnh).  
        • Vừa khung rộng (hình ảnh sẽ tự kéo dài hình ảnh cho vừa khung widget).
        • Vừa khung cao ( hình ảnh sẽ tự kéo dài chiều cao cho vừa khung widget).
        • Vừa khung rộng và cao (Hình ảnh sẽ tự động biến đổi vừa chiều rộng và chiều cao).

+ Khoảng cách trái và trên: Khoảng cách giữa ảnh và khung. Được tính theo tỉ lệ % của ảnh.
+ Kiểu cuộn: 

        • Cố định: hình ảnh được cố định hiển thị tại 1 vị trí. Hình nền sẽ bị cuốn đi khi ta kéo thanh cuộn.
        • Cuộn theo trang: Hình nền sẽ nằm ở một vị trí nhất đinh mặc cho ta có kéo thanh cuộn
        • Cuộn theo thành phần: Hình nền sẽ bị cuốn đi khi ta kéo thanh cuộn (khi hình nền được thiết lập cho bất kỳ một phần tử nào)

+ Overlay: là lớp màu nền phủ cho hình ảnh.

d. Gradient: là hình nền kết hợp nhiều màu tạo nên. Một dải màu chỉ định một dải các màu phụ thuộc vào vị trí, thường được sử dụng để lấp đầy một vùng.  Có 2 loại Gradient là dạng Linear (Màu dọc) ca radial (màu vòng). Quý khách có thể tạo ra nhiều lớp khác nhau chồng lên nhau. Quý khách chỉ cần chọn màu ảnh theo ý muốn, Màu nào Quý khách muốn tăng giảm mức độ phủ chỉ cần kéo thanh độ phủ là được.

 

2. Thiết lập chữ

+ Kiểu chữ: Định dạng phông chữ hiển thị.

+ Độ đậm: Độ đậm phông chữ.

+ Vị trí chữ: Căn lề cho phông chữ gồm căn trái, phải, giữa và đều.

+ Gạch chân: Có 2 kiểu gạch là gạch chữ chữ và gạch ngang chữ.

+ Định dạng: Có 3 lựa chọn khách ngoài mặc định là In Hoa, Viết thường, In hoa chữ cái đầu tiên.

+ Màu chữ : Cũng như màu cơ bản của Nền. Mã màu chữ có 2 dạng mã màu là RGB(0,0,0) và #fofofo. 

Mẹo: Nếu như Quý khách chưa có mã màu thì Quý khách có thể tự thiết lập 1 mã màu mới tuỳ chọn bằng cách click vào phần màu và kéo thả cho đến khi có được mã màu mong muốn.

+ Kích thước chữ: Kéo thả để tăng giảm kích thước chữ.

+ Khoảng cách dòng: Được tính theo pixel (px). dùng đễ điều chỉnh khoảng cách giữa các dòng.

+ Khoảng cách chữ: Được tính theo pixel (px). Dùng để điều chỉnh khoảng cách giữa các chữ.

3. Bo góc

Tạo góc bo tròn cho widget. Bo góc có 5 thông số tuỳ chỉnh là Tất cả  , Góc trái trên (px) , Góc trái dưới (px),Góc phải trên  (px),Góc phải dưới (px). Tuỳ chỉnh này Quý khách thực hiện kéo thả độ bo góc theo ý muốn.

4. Căn lề

Căn lề thành phần trong widget so với khung. Căn lề cũng có 5 thông số tuỳ chỉnh Tất cả  , Góc trái trên (px) , Góc trái dưới (px),Góc phải trên  (px),Góc phải dưới (px). Tuỳ chỉnh căn lề Quý khách thực hiện kéo thả tăng giảm thông số theo ý muốn.

5. Đường viền

Khi Quý khách sử dụng đường viền chỉ cần chuyển đổi trạng thái sử dụng sẽ xuất hiện các thông sô điều chỉnh đường viền. Đường viền sẽ thực hiện tạo viền cho Widget đã chọn.

+ Kiểu: là định dạng kiểu đường viền mà Quý khách có rất nhiều lựa chọn kiểu dạng đường viền khác nhau.
+ Màu: là màu sắc của đường viền.
+ Độ  rộng hay gọi là độ dày của viền Quý khách thao tác bằng cách kéo thả. Ở đây có 5 thông số điều chỉnh độ rộng viền là Tất cả, Phía trên, bên phải, phía dưới, bên trái.

6. Đổ bóng

Chức năng tạo bóng cho đối tượng, Quý khách có thể tạo nhiều lớp chồng lên dối tượng. Về chi tiết các thành phần chức năng gồm có như sau:

      • Màu sắc: Là màu bóng của đối tượng. Quý khách có thể click vào ô vuông để Tuỳ chỉnh.
      • Kiểu đổ bóng: có 2 loại là đổ bóng vào trong đối tượng và đổ bóng ngoài đối dượng.
      • Độ phủ ngang được tính theo Pixel từ -100px(trái) đến 100px(phải). Quý khách chỉ cần kéo thả về vị trí mong muốn.
      • Độ phủ dọc cũng tương tự phủ ngang từ -100px(trên) đến 100px(dưới). 
      • Độ mờ của bóng được tính theo Pixel. Chỉ số càng cao thì bóng càng mờ dần.
      • Độ phủ rộng hay độ dày của bóng. Chỉ số càng cao thì bóng càng dày.

7. Biểu tượng

Biểu tượng thông thường có 2 loại là nút cho menu và nút chuyển đổi qua lại cho các thành phần. Các thành phần có trong chức năng này là:

      • Màu sắc: của biểu tượng.
      • Chọn biểu tượng: Các biểu tượng Web30s có cung cấp sẵn, Quý khách chỉ cần chọn mẫu yêu thích.
      • Kích thước biểu tượng: Kích cỡ biểu tượng được tính theo Pixel. Chỉ số càng cao kích thước càng lớn.

8. Độ trong suốt

Chức năng này tuỳ chỉnh độ trong suốt của thành phần. Chỉ có 1 thanh kéo thả trong tuỳ chọn được tính theo %. Chỉ số càng càng cao thì càng rõ đối tượng. 

II. Hiệu ứng

Chức năng Hiệu ứng là chức năng tạo hoạt ảnh chuyển động của các thành phần đối tượng.  

Các phần hiệu ứng trên giao diện có tác dụng trên các Widget. Khi thực hiện thêm 1 Widget bất kỳ,trong phần tuỳ chỉnh sẽ có phần thẻ Hiệu ứng. Web30s cung cấp một số hiệu ứng thông dụng trên web để Quý khách chọn và sử dụng. 

Chỉnh hiệu ứng thôi là chưa đủ, Có 1 số hiệu ứng có hiệu ứng chậm hoặc quá nhanh. Do đó nút Tuỳ chỉnh được tạo ra nhầm giải quyết vấn đề này.


    • Chọn loại: có 3 lựa chọn

+ Khởi tạo: Hiệu ứng có tác dụng khi mới vào trang. Hiệu ứng sẽ chạy. 
+ Rê chuột: hiệu ứng có tác dụng khi di chuột vào đối tượng.
+ Nhấp chuột: là hiệu ứng sẽ có tác dụng khi nhấn vào đối tượng.

    • Thời gian hiệu ứng được tính bằng ms (Mili giây): Với mặc định là 1000ms = 1 giây.
    • Hiệu ứng vô tận: nút này có tác dụng lặp lại hiệu ứng khi bật. hành động lặp lại này sẽ không dừng lại cho đến khi Quý khách tắt chức năng.
    • Chạy hiệu ứng khi cuộn trang: Khi bật chức năng thì hiệu ứng chỉ hoạt động khi Web cuộn đến vị trí hiệu ứng.

III. Rê Chuột

Rê chuột cũng là một hiệu ứng nhưng ở mức độ đơn giản hơn Hiệu ứng đã trình bày ở phần 2. Hiệu ứng xảy ra khi dùng chuột máy tính rê vào đối tượng hoạt chạm lâu trên điện thoại. Trong phần này có nhều phần phần thiết lập cho hiệu ứng rê chuột do đó có nhiều sự tương đồng về hiệu ứng.

Mục Thiết lập chung cũng đã có hướng dẫn sử dụng chức năng. cách tuỳ chỉnh màu và tìm hiểu các thành phần chức năng có trong Tuỳ chỉnh. Tuỳ chỉnh tại rê chuột chỉ khác Thiết kế là hiệu ứng này xảy ra khi dùng chuột rê đến đối tượng đã tuỳ chỉnh. 

 

IV. Tab

Các công cụ tuỳ chỉnh cụ thể đã được trình bày cụ thể trong phần mục Thiết lập chung. Tab này chỉ tuỳ chỉnh giao diện các tab qua lại với nhau. Nên để tìm hiểu các thành phần có trong mục Quý khách vui lòng xem lại phần Thiết lập chung

Trên đây là hướng dẫn Quý khách làm quen với các thao tác Widget Hình hộp.

Cảm ơn Quý khách đã sử dụng dịch vụ của PA Việt Nam!

P.A Việt Nam – Web30s