Tạo và chỉnh sửa bố cục Landing page

Khái niệm cơ bản về Block và Column

Để tạo bố cục cho landing page các bạn hãy sử dụng phần tử Block và Column.

Block là các khối chứa 1 đoạn nội dung trên landing page.

Như ảnh trên các bạn có thể thấy bố cục Block có thể là dạng 1 cột,2 cột hoặc nhiều cột. Mỗi cột trong Block được gọi là 1 Column.

Cách tạo bố cục landing page bằng Block.

Trước hết các bạn hãy hình dung landing page của mình sẽ có bố cục như thế nào. Sẽ có bao nhiêu Block và bố cục của Block đó sẽ là dạng 1 cột,2 cột,3 cột,4 cột...

Sau khi đã hình dung ra thì các bạn hãy vào mục Block trong phần tay phải màn hình,chọn vào định dạng Block mà các bạn muốn thêm vào, kéo và thả nó vào khu vực mà bạn muốn đặt Block đó trong landing page.

Chỉnh sửa thông số cho Block.

Chỉnh sửa cột.

Để chỉnh sửa cột các bạn vào mục Column Properties và chọn cột mà bạn muốn chỉnh sửa.

• Background Color: Màu nền của cột.

• Padding: Khoảng cách giữa vùng content và biên giới của cột, các bạn có thể chỉnh sửa từng cạnh theo 4 góc Trên, dưới, trái phải bằng cách ấn nút More option và điều chỉnh kích thước theo các ô Top, Bottom, Left, Right hoặc chỉnh sửa nhanh bằng cách không chọn nút More option, và chỉnh sửa 4 kích thước giống nhau cùng 1 lúc.

• Boder: Các bạn có thể chỉnh sửa độ dày, màu sắc của viền, kiểu viền tại đây.

Nếu không tick vào More option các bạn có thể chỉnh sửa chung viền cho 4 cạnh của cột.

Có thể chọn kiểu viền : Solid là nét liền, Dotted là nét đứt kiểu dấu chấm, Dashed là nét đứt gạch ngang.

Nếu muốn tuỳ chỉnh viền cho từng cạnh thì hãy tick chọn More option và cài đặt thông số cho từng cạnh.

Tương tự các bạn có thể chỉnh sửa cho cột Column 2.

Chỉnh sửa hàng

Chỉnh sửa hàng là chỉnh sửa chung cho cả block chứa các cột.

• Background Color: Màu nền chung cho cả Block

• Content Background Color: Màu nền của vùng hiển thị nội dung.

• Content Alignment: Căn chỉnh vị trí vùng nội dung.

• Background Image: Ảnh nền cho cả Block, có thể tải từ thiết bị lên bằng nút Upload Image hoặc dán link vào Image URL

• Padding: Khoảng cách các ô với biên giới của Block, có thể chỉnh sửa từng phía hoặc cả 4 phía cùng lúc giống cách chỉnh padding trong cột.

• Hide on desktop: Nếu tick chọn mục này sẽ ẩn Block này trong giao diện Desktop.

Để chuyển sang giao diện Mobile, các bạn nhấn nút hình điện thoại góc trái bên dưới. Tại đây các bạn có thể chỉnh sửa giống như cach chỉnh sửa trên giao diện Desktop.

Nhân bản,xoá Block

Click chuột vào Block của bạn,sau đó chọn vào biểu tượng thùng rác hoặc nhân bản và thực hiện hành động bạn muốn.

Biểu tượng thùng rác: Xoá block

Biểu tượng nhân đôi: Nhân bản block

Cách tạo và chỉnh sửa bố cục bằng phần tử Column

Để sử dụng được phần tử Column các bạn hãy vào mục Content,chọn vào phần tử Column,kéo và thả nó vào khu vực bạn mong muốn. Phần tử này cũng giống như phần tử Block nên cách chỉnh sửa giống hệt như Block,các bạn tham khảo cách làm bên trên.