How To Use Dora? Create 3D Animated Websites Effortlessly

Listen to this article

Dora is a no-code platform that allows users to create stunning 3D animated websites effortlessly. It integrates AI to generate entire sites from simple text prompts, making it ideal for designers, freelancers, and beginners without coding skills. Features include drag-and-drop editing, responsive designs, 3D model imports, animations, and AI-driven suggestions. This guide walks you through the process from sign-up to publishing.

Step 1: Sign Up and Create an Account

• Visit the Dora website at https://www.dora.run or the AI-specific page at https://www.dora.run/ai.
• Click “Sign Up” or “Get Started.” You can register using your Google account or email and password—it’s free to start with limited features; upgrade for more via pricing plans.
• After signing up, you’ll be directed to your dashboard, where you can manage projects, explore templates, and access tools.

Tip for Beginners: If you’re new, take a moment to browse the dashboard layout—it’s intuitive, with sections for new projects, templates, and help resources.

Step 2: Explore the Dashboard and Start a New Project

• On the dashboard, click “Create New Project” or “New Project.”
• Name your project (e.g., “My Portfolio Site”) and select a canvas size (desktop, tablet, or mobile) for responsive design.
• Optionally, define your website’s purpose (e.g., portfolio, blog, or e-commerce) and enter a brief description to guide AI generation.
• Browse the template gallery under the “Templates” tab, filtered by categories like Business, Art, or Photography. Preview and select one by clicking “Use for Free” to kickstart your design.

Tip for Beginners: Use the “Surprise Me” button for random AI-generated ideas if you’re unsure where to start. This helps spark creativity without overwhelming choices.

Step 3: Generate a Website Using AI

• In the editor, click the AI button on the top toolbar.
• Enter a text prompt describing your site, such as “A modern photography portfolio with a sleek black and white theme and 3D animations” or “Futuristic blue car product page with industrial design.”
• Click “Generate” to create previews. Review options, select one, and let AI build the site with coordinated layouts, images, text, and UI elements.
• The AI ensures responsive design across devices and can generate original content without templates.

Tip for Beginners: Keep prompts specific but concise—include style, colors, and elements for better results. If unsatisfied, iterate by tweaking the prompt and regenerating.

Step 4: Edit and Customize Your Website

• Use the drag-and-drop editor to modify elements: Click text to edit, drag images or buttons to reposition, and use the side panel for fonts, colors, and sizes.
• Add elements like text, images, videos, or containers via the Tool Menu.
• For responsiveness, apply constraints (e.g., fix navigation to the top viewport) to ensure layouts adapt to different screens.
• Organize content into sections, add pages (e.g., About, Contact), and create links or buttons for navigation.
• Brand your site by uploading logos, defining colors/fonts, and adding media.

Tip for Beginners: Preview often in different device modes (desktop, mobile) to catch issues early. Start with basic edits before advanced features.

Step 5: Add 3D Elements and Animations

• Import 3D models (in GLB or glTF formats) by dragging them into the editor—source free models from sites like Sketchfab.
• Position, rotate, and scale models using the tools. Add animations via the keyframe timeline: Set keyframes at scroll points (e.g., 0vh to 200vh) for effects like spinning or parallax (where elements move at different speeds).
• Create hover effects (e.g., button color changes) and scroll-based animations for interactivity.
• Test animations in preview mode to ensure smoothness.

Tip for Beginners: Begin with simple animations like a rotating logo. Use the constraint layout to keep 3D elements fixed or moving fluidly—avoid over-animating to prevent site overload.

Step 6: Configure Settings and Optimize

• Set up SEO: Add meta titles, descriptions, keywords, and alt text for images.
• Connect a custom domain or use a Dora subdomain.
• Enable analytics to track visitors.
• Optimize for performance: Use fast mode and ensure mobile responsiveness.

Tip for Beginners: Focus on keywords related to your site (e.g., “3D portfolio”) for better search visibility. Join Dora’s Discord community for feedback on optimizations.

Step 7: Preview and Publish

• Switch to preview mode to test on various devices.
• Make final adjustments, then click “Publish” to go live.
• Share your site via Dora’s domain or your custom one. You can update and republish anytime.

Tip for Beginners: Publish a draft first and test links/animations thoroughly. If issues arise, refer to the help center for troubleshooting.

Additional Tips for Beginners

• Learning Resources: Watch official tutorials on YouTube (e.g., building in 15 minutes or AI generation). Explore the Help Center for articles on features like importing from Figma or keyframing.
• Common Pitfalls: Stick to supported file formats for 3D models. If AI output isn’t perfect, edit manually—it’s flexible.
• Upgrading: Free plan has limits; check pricing for more AI credits or advanced features.
• Community: Join Discord for questions, share projects, and get inspiration.
• Best Practices: Keep designs clean, mobile-first, and engaging with subtle 3D effects. Experiment with prompts for unique results.

This guide equips you to build professional 3D sites quickly. Practice with a simple project to build confidence!