How to set up and style the QR Code widget in Elementor.
QR Code makes a QR code for a web address, this page, text, an email, a phone call, a text message, a Wi-Fi login or a contact card. Style the dots and corners, add a logo in the middle and a download button. The code is made in the visitor’s browser with no outside service.
Part of: Bright Addons (free).
| Option | What it does |
|---|---|
| The Code Opens | A web address, this page, plain text, an email, a phone call, a text message, Wi-Fi login or contact card. |
| Web Address | The address to open. |
| Text | Plain text. Keep it short so the code stays easy to scan. |
| Email Address | The email recipient. |
| Phone Number | Number for a call or a text message. |
| Network Name | Wi-Fi network name. |
| Security | WPA, WEP or no password. |
| Password | Wi-Fi password. Anyone who can see the page can read it. |
| Full Name | Name on the contact card, with Company, Job Title, Phone, Email, Website and Address. |
| Caption | Text under the code. |
| Download Button | Adds a button to save the code. |
| File Type | PNG or SVG. |
| Description for Screen Readers | What the code does, for people who cannot see it. |
| Option | What it does |
|---|---|
| Dots | Squares, rounded or circles. |
| Corner Squares | Square, rounded or circle. |
| Code Color | Color of the dots. |
| Corner Color | Color of the three corner squares. |
| Background | Keep strong contrast with the code color. |
| Logo in the Middle | An image in the center of the code. |
| Error Correction | Low to highest. Codes with a logo always use highest. |
| Quiet Border (dots) | Empty space around the code. |
| Size | Size of the code. |
Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
padding, border, radius and shadow.
color, typography and spacing.
typography, normal and hover colors, border, radius and padding.
No. The code is made in the visitor’s browser with a bundled library.
Yes. Codes with a logo always use the highest error correction.
Yes. Switch on Download Button and choose PNG or SVG.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide