This documentation provides comprehensive insights into the QR Code Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the QR Code block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the QR Code block.
3. After on the right side, Click on the Block. Then the QR Code details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

QR Code Section

Go to Basic > QR Code

This section provides control for the QR Code,

1. Content: Set content for the QR Code. It might be any content or links.

2. Enable Page Link: Enable the switcher to show the current page set as a link.
3. Size: Set the size for the QR Code.
4. Error Correction Level: Select error correction level for the QR code.

5. Style: Set the style for the QR Code.
6. Alignment: Set alignment for the code.

Logo Section

Go to Basic > Logo

Set Logo in the QR code,

1. Choose Logo: Select logo from the media library.

Badge Section

Go to Basic > Badge

Set badge for the QR code by following,

1. Show Badge: Enable the switcher to show the Badge.
2. Show Badge Icon: Enable the switcher to show the badge icon.
3. Badge Style: Select the badge style (e.g.: Style 1, Style 2, Style 3).

4. Title: Set the title for the badge.
5. Selected Icon: Select the badge icon from the icon library.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Wrapper Section

Go to Style > Wrapper

Make the QR code stylish by following,

1. Border Type: Set the type for the border.
2. Border Radius: Make the border radius.
3. Padding: Set the inner spacing by padding.

4. Background Color: Set the background color of the wrapper.
5. Box Shadow: Make a shadow for the wrapper.

QR Code Section

Go to Style > QR Code

Make the QR code stylish by following,

1. Color: Set the color for the QR code.
2. Eye Color: Set the eye color.
3. Eye Radius: Make the border radius.

4. Background Type: Set the background type.
5. Border Type: Set the border type.
6. Border Radius: Make the border radius.
7. Padding: Set the padding.

Logo Section

Go to Style > Logo

Make the logo stylish by following,

1. Size: Set the logo size.
2. Opacity: Set opacity for the logo.
3. Padding Style: Select padding style (e.g.: Square, Circle).
4. Padding: Set the padding.

Badge Section

Go to Style > Badge

1. Color: Set the color for the badge.
2. Title Typography: Set typography for the title.
3. Margin: Ser the margin.

4. Border Type: Set the type for the border.
5. Border Radius: Make the border radius.
6. Padding: Set the padding.
7. Icon Size: Set the Icon Size.

8. Background Color: Set the background color for the badge.
9. Arrow Color: Set the arrow color.
10. Box Shadow: Set the box shadow.

Video Assist

You can watch the video above to learn about the QR Code block.
Please visit the demo page for examples.

Thanks for staying with us.