Neste tutorial você vai aprender como embedar um Quiz do Merlin como página inteira no seu site feito com Elementor.

<aside> 💡

Esse processo foi feito utilizando o Elementor, mas a lógica é a mesma para qualquer construtor de site.

</aside>

Passo a passo:

1. Com a página (em branco) criada, procure pelo widget "HTML"

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/15505fd0-ce7b-49d3-8226-3fa078d84b80/bc3a0114-48a8-4e24-b905-5a863d400a45.png?crop=focalpoint&fit=crop&fp-x=0.1408&fp-y=0.1398&fp-z=1.7687&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=17&mark-y=141&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NjMmaD02OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw

2. Quando encontrar o widget, clique nele para colocá-lo na página

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/826c5742-66eb-4d18-8a68-5bb5222e7bfd/2d603e51-be85-467b-8caf-e46618f57f2b.png?crop=focalpoint&fit=crop&fp-x=0.1473&fp-y=0.5006&fp-z=1.0058&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=4&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNDcmaD03MDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D

3. No Merlin, clique na aba 'Compartilhar'

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/2bbe0d77-71da-4f7c-ae3f-9881ea1be01c/7f61b0a4-78c8-4b9d-813c-8a4e4e06abd2.png?crop=focalpoint&fit=crop&fp-x=0.5802&fp-y=0.0506&fp-z=2.5506&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=501&mark-y=8&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xOTkmaD0xNjYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D

4. Copie o código que aparece disponível para você

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/80ea1b20-3eb7-43f2-8b79-a77069767d80/571ced04-5e1c-4cef-b466-9a3dc8fa531a.png?crop=focalpoint&fit=crop&fp-x=0.5708&fp-y=0.3878&fp-z=1.3830&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=112&mark-y=241&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz05NzUmaD0yMjUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D

5. Cole o código no componente de HTML

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/465ae6ed-6b67-4191-9ff6-84d19b6aa6ea/15c916d3-24a4-490d-8333-12d37314620e.png?crop=focalpoint&fit=crop&fp-x=0.1473&fp-y=0.5006&fp-z=1.0058&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=4&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNDcmaD03MDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D

6. Clique no código e altere o tamanho do Quiz no 'height' (sublinhado abaixo)

https://images.tango.us/workflows/589eed23-1372-4ba1-81a7-edca38ecdc31/steps/6668a6e5-2183-41fc-adde-3ece4b8b4380/4750c57f-391b-49f1-95ae-ded74620cb9f.png?crop=focalpoint&fit=crop&fp-x=0.0518&fp-y=0.2612&fp-z=3.0523&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=169&mark-y=323&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MiZoPTYwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D