Support Centre

Search

Add a custom QR code to your accessible design

Renée Meloche
Renée Meloche
  • Updated

Generate and edit the color of an interactive QR code that viewers can scan to access a custom link. Users can scan the QR with their smart device, and they'll be redirected to the URL you added. 

Select QR Code in the left sidebar to expand the QR tool. 

Enter the web address URL in the URL text field by typing or pasting it in. The Preview will show the QR code shape according to the web address. 

When you're ready, click Generate QR Code to create the QR code on your design canvas. 

In a presentation template in the upgraded Editor, a user clicks on 'QR Code' at the bottom of the left sidebar. The left sidebar opens in a panel overlaying the design canvas, and the user types a URL into the text field and clicks the 'Generate QR code' button underneath. A QR code appears on the canvas and the user resizes it and repositions it on the canvas.

Customize QR code color

Resize or reposition the QR code on the canvas the way you want. 

Select the QR code on the canvas. Click the color tiles in the top toolbar and use the Color Tool to customize its appearance. Choose from Project or Brand Kit colors, or customize with the color picker.

A canvas with a blue-green background appears in the upgraded Editor, with a pie chart in the center of the canvas partially visible, and a black and white QR code at the top-right corner. A user clicks on the QR code on the canvas to select it. When the QR code image is selected, it appears with a light-blue bounding box. Tools appear in the top toolbar, including two color tiles, a link icon, and an Alt Text button. The user clicks on the first color tile in the top toolbar. The Color Tool widget opens; on the widget are different headings with color swatch tiles underneath them, including Project Colors and Brand Kit Colors. Under a divider is a section with a color picker window, sliders for hue and black/white values, and text fields for HEX code and Opacity. The user clicks on a color tile under the Project Colors heading, and the part of the QR code that appeared in white now appears in the same blue-green color as the canvas background. The user then clicks on the hue slider and uses the color picker to change the color to a light yellow-green. The user closes the Color Tool widget, then clicks the second color tile in the top toolbar and changes the part of the QR code to a light blue-green using one of the Project Color swatches.

Edit QR code link

Select the QR code on the canvas, then click the URL Tool in the top toolbar. 

A modal (box) will pop up, at the top of the screen, with the link address you added to the QR code; type into the modal text field to change it.

Click "OK" to save your changes and close the modal.

A canvas with a blue-green background appears in the upgraded Editor, with a pie chart in the center of the canvas partially visible, and a QR code at the top-right corner. A user clicks on the QR code on the canvas to select it. When the QR code image is selected, it appears with a light-blue bounding box. Tools appear in the top toolbar, including two color tiles, a link icon, and an Alt Text button. The user clicks on URL (the link icon) in the top toolbar and a pop-up modal appears over the canvas at the top of the screen, with the heading 'URL'. In the text field of the modal, the address 'piecharts.com' appears. The user clicks into the text field and changes the URL to 'barcharts.com', then clicks OK on the modal to close it. When the user clicks on OK, the modal closes and the arrangement of the QR code changes to reflect the URL change; the user clicks on URL in the top toolbar again, and when the modal appears, the URL in the text field is 'barcharts.com'.

The QR code shape on the design canvas will change to fit the updated URL. 

Add Alt Text

Describe QR codes that appear on your design canvas to users with visual impairments or readers with other accessibility needs.

Select the QR code. Click "Alt Text" in the top toolbar; add your descriptive text. A simple description to let the user know that the image is a QR and what site it links to is perfect. Here's an example: 

"A QR code that links to the site venngage.com."

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request