"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[9303],{462:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghiblititle-9d82fb1acc819eea694f84e1a3c87465.png"},1229:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>a,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"usecase","title":"Use Case","description":"How to Create a Unique Ghibli Style website with : A Beginner\'s Guide in 2025","source":"@site/userGuide/usecase.md","sourceDirName":".","slug":"/usecase","permalink":"/guides/user/usecase","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":13,"frontMatter":{"sidebar_position":13},"sidebar":"sidebar","previous":{"title":"Design Style Guide","permalink":"/guides/user/design-style"},"next":{"title":"Crash Course","permalink":"/guides/user/category/crash-course"}}');var t=s(4848),l=s(8453),r=(s(1463),s(8175));const a={sidebar_position:13},o="Use Case",d={},h=[{value:"How to Create a Unique Ghibli Style website with <CompanyNameDisplay></CompanyNameDisplay>: A Beginner&#39;s Guide in 2025",id:"how-to-create-a-unique-ghibli-style-website-with--a-beginners-guide-in-2025",level:2},{value:"Key Takeaways",id:"key-takeaways",level:3},{value:"Understanding Ghibli Design Principles",id:"understanding-ghibli-design-principles",level:4},{value:"Storytelling techniques: Kish\u014dtenketsu and &#39;Ma&#39;",id:"storytelling-techniques-kish\u014dtenketsu-and-ma",level:4},{value:"Emotional design: Soft curves, colors, and character growth",id:"emotional-design-soft-curves-colors-and-character-growth",level:4},{value:"The role of detailed backgrounds and world-building",id:"the-role-of-detailed-backgrounds-and-world-building",level:4},{value:"Planning Your Ghibli-Inspired Website",id:"planning-your-ghibli-inspired-website",level:3},{value:"Defining your website&#39;s narrative",id:"defining-your-websites-narrative",level:4},{value:"Sketching your vision using Ghibli&#39;s storyboarding process",id:"sketching-your-vision-using-ghiblis-storyboarding-process",level:4},{value:"Crafting effective prompts for Ghibli-style visuals",id:"crafting-effective-prompts-for-ghibli-style-visuals",level:4},{value:"Step-by-Step Guide to Building with EZsite",id:"step-by-step-guide-to-building-with-ezsite",level:3},{value:"Using GPT-4o to generate character concept",id:"using-gpt-4o-to-generate-character-concept",level:4},{value:"Step 1: Upload an image",id:"step-1-upload-an-image",level:5},{value:"Step 1: Example Prompt for GPT-4o:",id:"step-1-example-prompt-for-gpt-4o",level:5},{value:"Step 3: Save the image as femalesoftwaredeveloper.png",id:"step-3-save-the-image-as-femalesoftwaredeveloperpng",level:5},{value:"Starting your project and picking Ghibli-inspired themes",id:"starting-your-project-and-picking-ghibli-inspired-themes",level:4},{value:"Step 1: Create a project for your website",id:"step-1-create-a-project-for-your-website",level:5},{value:"Step 2: Refine details: Text, visuals, and atmosphere",id:"step-2-refine-details-text-visuals-and-atmosphere",level:4},{value:"Publishing your website and checking responsiveness",id:"publishing-your-website-and-checking-responsiveness",level:4},{value:"Add Signup/SignIn Module on Your Website",id:"add-signupsignin-module-on-your-website",level:3},{value:"Step 1: Enable Database",id:"step-1-enable-database",level:4},{value:"Step 2: Create a signup/signin module for your website",id:"step-2-create-a-signupsignin-module-for-your-website",level:4},{value:"Responsive Design Tips for Ghibli Websites",id:"responsive-design-tips-for-ghibli-websites",level:4},{value:"Keeping the Ghibli magic on all devices",id:"keeping-the-ghibli-magic-on-all-devices",level:5},{value:"Adjusting illustrations and keeping colors consistent",id:"adjusting-illustrations-and-keeping-colors-consistent",level:5},{value:"Making designs simple for smaller screens",id:"making-designs-simple-for-smaller-screens",level:5},{value:"FAQ",id:"faq",level:3},{value:"What makes a Ghibli-inspired website special?",id:"what-makes-a-ghibli-inspired-website-special",level:4},{value:"Can I make a Ghibli-style website without being a designer?",id:"can-i-make-a-ghibli-style-website-without-being-a-designer",level:4},{value:"How do I make my homepage feel magical?",id:"how-do-i-make-my-homepage-feel-magical",level:4},{value:"Will my Ghibli-style website work on all devices?",id:"will-my-ghibli-style-website-work-on-all-devices",level:4},{value:"How do I keep my website looking consistent?",id:"how-do-i-keep-my-website-looking-consistent",level:4}];function c(e){const i={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.header,{children:(0,t.jsx)(i.h1,{id:"use-case",children:"Use Case"})}),"\n",(0,t.jsxs)(i.h2,{id:"how-to-create-a-unique-ghibli-style-website-with--a-beginners-guide-in-2025",children:["How to Create a Unique Ghibli Style website with ",(0,t.jsx)(r.A,{}),": A Beginner's Guide in 2025"]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.img,{src:s(462).A+"",width:"1658",height:"797"}),"\nCreating a Ghibli-inspired website design is now super easy with ",(0,t.jsx)(r.A,{}),". This simple tool helps you make Ghibli magic, even if you can\u2019t draw. Why is this style loved by many? People enjoy soft, natural visuals that feel calm and peaceful."]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Designers now like smooth, flowing shapes instead of stiff ones."}),"\n",(0,t.jsx)(i.li,{children:"Natural looks connect better with people."}),"\n",(0,t.jsx)(i.li,{children:"Soft visuals make websites relaxing, keeping users interested."}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:["With ",(0,t.jsx)(r.A,{}),", you can showcase Ghibli-inspired website design and build a site that feels magical and alive."]}),"\n",(0,t.jsx)(i.h3,{id:"key-takeaways",children:"Key Takeaways"}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:["Use ",(0,t.jsx)(r.A,{})," to make a Ghibli-style website easily, even if you can't design."]}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Add storytelling ideas like Kish\u014dtenketsu and 'Ma' to keep visitors interested and create a peaceful vibe."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Use smooth shapes and warm colors to make your site friendly and happy."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Include detailed backgrounds and tiny animations to make your site feel alive and fun to explore."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Make sure your site works well on all devices, so it looks great and keeps visitors excited."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.h4,{id:"understanding-ghibli-design-principles",children:"Understanding Ghibli Design Principles"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.youtube.com/watch?v=jDvhaz_iql0",children:(0,t.jsx)(i.img,{src:s(2231).A+"",width:"885",height:"493"})})}),"\n",(0,t.jsx)(i.h4,{id:"storytelling-techniques-kish\u014dtenketsu-and-ma",children:"Storytelling techniques: Kish\u014dtenketsu and 'Ma'"}),"\n",(0,t.jsx)(i.p,{children:"Storytelling is key in every Ghibli movie. Ghibli films don\u2019t need big conflicts to keep you watching. Instead, they use a Japanese story method called Kish\u014dtenketsu. This style has four steps: start, build, twist, and end. It focuses on making you curious and letting the story flow smoothly."}),"\n",(0,t.jsx)(i.p,{children:'Another important idea is \'Ma,\' meaning "pause" or "empty space." It\u2019s like the quiet parts in Ghibli movies. For example, a character might stare at the sky or walk in a forest. These pauses give you time to enjoy the beauty and feel connected. When making your Ghibli-style website, use these ideas. Let your story unfold slowly and add calm moments to highlight your visuals.'}),"\n",(0,t.jsx)(i.h4,{id:"emotional-design-soft-curves-colors-and-character-growth",children:"Emotional design: Soft curves, colors, and character growth"}),"\n",(0,t.jsx)(i.p,{children:"Ghibli\u2019s designs make you feel happy, calm, and safe. They use soft, round shapes that feel friendly and trustworthy. Warm colors like yellow and orange bring joy. Cool colors like blue and green feel peaceful. Together, these details create a relaxing vibe."}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.strong,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1",children:"Here\u2019s how these design choices affect feelings:"})})}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Design Element"}),(0,t.jsx)(i.th,{children:"Emotional Response"}),(0,t.jsx)(i.th,{children:"Study Reference"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"Soft Curves"}),(0,t.jsx)(i.td,{children:"Feel friendly and safe"}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1#bib.bib113",children:"113"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"Circular Shapes"}),(0,t.jsx)(i.td,{children:"Feel comforting and positive"}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1#bib.bib61",children:"61"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"Warm Colors"}),(0,t.jsx)(i.td,{children:"Bring happiness"}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1#bib.bib19",children:"19"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"Cool Colors"}),(0,t.jsx)(i.td,{children:"Feel calm and relaxed"}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1#bib.bib112",children:"112"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"Rounded Shapes"}),(0,t.jsx)(i.td,{children:"Build trust"}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://arxiv.org/html/2502.16038v1#bib.bib162",children:"162"})})]})]})]}),"\n",(0,t.jsx)(i.p,{children:"When designing your site, think about these ideas. Use soft curves in your layout. Add warm colors to buttons to make your site welcoming."}),"\n",(0,t.jsx)(i.h4,{id:"the-role-of-detailed-backgrounds-and-world-building",children:"The role of detailed backgrounds and world-building"}),"\n",(0,t.jsx)(i.p,{children:"Ghibli movies are known for their detailed backgrounds. Every scene feels alive, from busy towns to quiet forests. These backgrounds tell stories. They show the world where characters live, making it feel real."}),"\n",(0,t.jsx)(i.p,{children:"For your Ghibli-style website, focus on creating a rich world. Add small details to your backgrounds, like textures or tiny animations. These touches make your site feel alive. For example, your homepage could show a hand-drawn village with moving clouds or trees. This makes visitors want to stay and explore."}),"\n",(0,t.jsx)(i.h3,{id:"planning-your-ghibli-inspired-website",children:"Planning Your Ghibli-Inspired Website"}),"\n",(0,t.jsx)(i.h4,{id:"defining-your-websites-narrative",children:"Defining your website's narrative"}),"\n",(0,t.jsxs)(i.p,{children:["Every amazing ",(0,t.jsx)(i.strong,{children:"Ghibli-inspired website"})," starts with a story. Think about how you want visitors to feel. Should your site feel calm, like a quiet forest? Or should it feel lively, like a busy town with fun characters? A clear story helps you design better and keeps visitors interested."]}),"\n",(0,t.jsx)(i.p,{children:"Telling a story makes your website more special. It helps people connect and remember it. For example:"}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"A simple layout helps visitors find things quickly."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Clear sections make it easy to focus on important content."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Smart design choices, based on research, keep users happy and returning."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:["By planning your story early, you build a strong base for a friendly ",(0,t.jsx)(i.strong,{children:"Ghibli-style UI"}),"."]}),"\n",(0,t.jsx)(i.h4,{id:"sketching-your-vision-using-ghiblis-storyboarding-process",children:"Sketching your vision using Ghibli's storyboarding process"}),"\n",(0,t.jsx)(i.p,{children:"Studio Ghibli\u2019s storyboards are famous for their creativity. They don\u2019t just plan; they bring ideas to life. You can use this method to plan your website. Start by drawing simple sketches or diagrams. Think about how users will move through your site, like Ghibli characters exploring their worlds."}),"\n",(0,t.jsxs)(i.p,{children:["Take ideas from the ",(0,t.jsx)(i.a,{href:"https://www.bokksu.com/blogs/news/exploring-the-magic-a-guide-to-the-ghibli-museum-in-japan?srsltid=AfmBOoooxZiiLBuBhENOB1elK8SI4KN4cK9tm5nc2Fx4kcRINqOdNtrJ",children:"Ghibli Museum"}),", created by Hayao Miyazaki. Its design lets visitors explore freely, sparking curiosity. Spiral stairs and colorful ceilings make it magical. Use this idea for your site by adding fun, interactive features that encourage exploration."]}),"\n",(0,t.jsx)(i.h4,{id:"crafting-effective-prompts-for-ghibli-style-visuals",children:"Crafting effective prompts for Ghibli-style visuals"}),"\n",(0,t.jsxs)(i.p,{children:["When using ",(0,t.jsx)(r.A,{}),", clear prompts are very important. Be specific about what you want. Instead of saying \u201ca village,\u201d try \u201ca hand-drawn village with soft shapes, warm colors, and playful characters.\u201d Detailed prompts help the AI match your vision perfectly."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Ghibli-style UI"})," loves detailed backgrounds and natural designs. Use prompts that highlight textures, like mossy rocks or swaying trees. These small details make your site feel alive. Don\u2019t forget to add magical touches, like glowing lights or floating clouds, for extra charm."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Tip:"})," Websites with Ghibli-inspired designs can boost customer loyalty by 25%. Adding soft visuals and storytelling makes your site unforgettable."]}),"\n",(0,t.jsx)(i.h3,{id:"step-by-step-guide-to-building-with-ezsite",children:"Step-by-Step Guide to Building with EZsite"}),"\n",(0,t.jsx)(i.h4,{id:"using-gpt-4o-to-generate-character-concept",children:"Using GPT-4o to generate character concept"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:s(6052).A+"",width:"1536",height:"1024"})}),"\n",(0,t.jsx)(i.p,{children:"GPT-4o helps bring your Ghibli-inspired UI to life once you have your narrative and sketches ready."}),"\n",(0,t.jsx)(i.p,{children:'Clear context in prompts leads to better character generation. Specific prompts guide the AI toward your desired look. "A serene Ghibli-style character with flowing hair under a cherry blossom tree" works better than vague descriptions.'}),"\n",(0,t.jsx)(i.p,{children:"GPT-4o creates consistent characters\u2014a must-have for cohesive website elements. Each generation stands unique, but you can improve consistency by:"}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Adding detailed physical descriptions"}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Including emotional qualities that match your brand"}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Looking at specific Ghibli films that share your esthetic vision"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.p,{children:"Steer clear of requesting specific individual likenesses as it might not meet AI guidelines. Focus on Ghibli's character design elements\u2014round features, expressive eyes, and that perfect mix of realism and stylized charm."}),"\n",(0,t.jsxs)(i.p,{children:["This planning phase sets you up to use ",(0,t.jsx)(r.A,{}),"'s user-friendly platform. Your defined narrative, sketched vision, and character concepts will help build your Ghibli-inspired website smoothly."]}),"\n",(0,t.jsx)(i.h5,{id:"step-1-upload-an-image",children:"Step 1: Upload an image"}),"\n",(0,t.jsx)(i.h5,{id:"step-1-example-prompt-for-gpt-4o",children:"Step 1: Example Prompt for GPT-4o:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:"Make the attached image a ghibly style picture with blue sky floating clouds, trees and winds. remove the window and wall, add more elements of blossom flowers with trees and lovely dog on the side. make the female more kawayi and adorable, less flowers but more trees and blue skys with cotton like clouds.\n"})}),"\n",(0,t.jsx)(i.h5,{id:"step-3-save-the-image-as-femalesoftwaredeveloperpng",children:"Step 3: Save the image as femalesoftwaredeveloper.png"}),"\n",(0,t.jsx)(i.h4,{id:"starting-your-project-and-picking-ghibli-inspired-themes",children:"Starting your project and picking Ghibli-inspired themes"}),"\n",(0,t.jsx)(i.h5,{id:"step-1-create-a-project-for-your-website",children:"Step 1: Create a project for your website"}),"\n",(0,t.jsxs)(i.p,{children:["Your website creation starts with setting up a project in ",(0,t.jsx)(r.A,{}),":"]}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:["Visit ",(0,t.jsx)(i.a,{href:"https://ezsite.ai/",children:"https://ezsite.ai/"})," to sign up or login with your email address."]}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Write a detailed prompt about your Ghibli-style website in the input box. Example:"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:'"a whimsical landing page inspired by Studio Ghibli, with soft watercolor backgrounds, nature elements, and hand-drawn character illustrations."\n'})}),"\n",(0,t.jsxs)(i.ol,{start:"3",children:["\n",(0,t.jsx)(i.li,{children:"Upload the Ghibli image created by GPT4o and add a description of the image (FemaleSoftwaredeveloper) under Project->Settings->Assets->Images->Add Files. Note: Description and image file name will be used within prompt for AI to recognize the image."}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.img,{src:s(4888).A+"",width:"1662",height:"815"})," 4. Add structure by describing your sections:"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:'"Create a Ghibli-inspired website with Hero section featuring forest spirits, Features section with floating elements, How it works section with animated transitions, and a Contact section with nature-inspired forms."\n'})}),"\n",(0,t.jsx)(i.p,{children:"Use the FemaleSoftwaredeveloper image in asset to generate a ghibli studio animation style image and put it on hero section as background"}),"\n",(0,t.jsxs)(i.ol,{start:"5",children:["\n",(0,t.jsxs)(i.li,{children:['it "Send" and watch ',(0,t.jsx)(r.A,{})," create your ",(0,t.jsx)(i.strong,{children:"Ghibli-style website"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:["Making a ",(0,t.jsx)(i.strong,{children:"Ghibli-style website"})," with ",(0,t.jsx)(i.strong,{children:(0,t.jsx)(i.a,{href:"https://ezsite.ai/blog/build-website-with-relume-ai-builder/",children:(0,t.jsx)(r.A,{})})})," is easy. Begin by starting a new project on the platform. There are many themes to choose from. Focus on ones with soft curves, warm colors, and detailed backgrounds. These features create the Ghibli look"]}),"\n",(0,t.jsx)(i.p,{children:"Think about your story when picking a theme. Should your site feel calm like a forest? Or lively like a village with fun characters? Your theme sets the mood for your story. Explore the choices carefully and pick one that fits your idea."}),"\n",(0,t.jsx)(i.h4,{id:"step-2-refine-details-text-visuals-and-atmosphere",children:"Step 2: Refine details: Text, visuals, and atmosphere"}),"\n",(0,t.jsx)(i.p,{children:"Set up the Ghibli Design Theme with prompt:"}),"\n",(0,t.jsxs)(i.p,{children:["Studio Ghibli-Inspired Illustration Brief**\n",(0,t.jsx)(i.strong,{children:"Scene:"})," A female engineer works at a wooden desk in a sunlit meadow.\n",(0,t.jsx)(i.strong,{children:"Visual Style:"})]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["Soft pastel colors (",(0,t.jsx)(i.em,{children:"Howl's Moving Castle"})," skies, ",(0,t.jsx)(i.em,{children:"Totoro"})," greenery)"]}),"\n",(0,t.jsx)(i.li,{children:"Whimsical details: glowing leaves, kodama spirits in the grass"}),"\n",(0,t.jsxs)(i.li,{children:["Dynamic perspective highlighting the contrast between tech (retro computer) and nature (ancient tree)\n",(0,t.jsx)(i.strong,{children:"Key Elements:"})]}),"\n"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-plaintext",children:"1. Billowy clouds with sunlight rays\n2. Flowing meadow with dandelions\n3. Oak tree with bioluminescent foliage\n4. Engineer (glasses, cozy sweater) typing with magical keyboard sparks\n5. Robot companion shaped like a Studio Ghibli soot sprite\n"})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Mood:"})," Peaceful innovation \u2013 technology and nature coexisting harmoniously."]}),"\n",(0,t.jsx)(i.p,{children:"After setting up the theme, work on the details. Start with the text. Use simple words that feel friendly and welcoming. Don\u2019t add too much information. Let your visuals tell the story instead."}),"\n",(0,t.jsxs)(i.p,{children:["For visuals, aim for a ",(0,t.jsx)(i.strong,{children:"Ghibli-style UI"}),". Include hand-drawn designs, soft textures, and natural elements. Add small magical details like glowing lights or moving grass. These make your site feel alive and special."]}),"\n",(0,t.jsxs)(i.p,{children:["Create a good atmosphere too. Use ",(0,t.jsx)(r.A,{})," to add animations like floating clouds or swaying leaves. These movements make your site exciting and unique. They also grab attention."]}),"\n",(0,t.jsx)(i.p,{children:"Your design needs some polishing to perfect those Ghibli-inspired elements:"}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Click the Select button in the top-right corner of the preview panel to activate the Select function."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Click any element you want to change after seeing its boundaries while hovering."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:["Tell ",(0,t.jsx)(r.A,{}),' what changes you want: "Make the header illustration more dreamlike with soft lighting and floating particles, like in scenes from Spirited Away."']}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:['Request text changes that capture Ghibli\'s storytelling magic: "Revise the copy to feel more whimsical and mysterious, leaving room for imagination."\n',(0,t.jsx)(i.img,{src:s(6735).A+"",width:"1665",height:"843"})]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.h4,{id:"publishing-your-website-and-checking-responsiveness",children:"Publishing your website and checking responsiveness"}),"\n",(0,t.jsx)(i.p,{children:"Your Ghibli-inspired creation is ready to meet the world:"}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:["Check if your website works well on all devices. ",(0,t.jsx)(r.A,{}),' makes mobile-friendly sites, but you can ask to "Optimize the floating elements for mobile viewing without losing their magical quality."']}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Make sure your site looks great on different screen sizes."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsx)(i.p,{children:"Click the Deploy button to deploy your website."}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:["Share your Ghibli-inspired creation ",(0,t.jsx)(i.a,{href:"https://001-8337-sx44082p91d6-deployed.ezsite.ai/",children:"https://001-8337-sx44082p91d6-deployed.ezsite.ai/"})," with everyone."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:["Once your Ghibli-style website is ready, publish it. ",(0,t.jsx)(r.A,{})," makes this step quick and simple. Your site will be live in no time."]}),"\n",(0,t.jsx)(i.p,{children:"Check how your site looks on different devices. It should feel magical on phones, tablets, and desktops. Adjust layouts and visuals for smaller screens. Keep colors and designs clear and simple. This ensures your story looks great everywhere."}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Tip:"})," A ",(0,t.jsx)(i.a,{href:"https://ezsite.ai/blog/top-10-ai-website-builders-2025/",children:"responsive Ghibli-style website"})," keeps visitors interested and eager to explore."]}),"\n",(0,t.jsx)(i.h3,{id:"add-signupsignin-module-on-your-website",children:"Add Signup/SignIn Module on Your Website"}),"\n",(0,t.jsx)(i.h4,{id:"step-1-enable-database",children:"Step 1: Enable Database"}),"\n",(0,t.jsxs)(i.p,{children:["Click Database on the right corner of your project\n",(0,t.jsx)(i.img,{src:s(1784).A+"",width:"1643",height:"841"})]}),"\n",(0,t.jsxs)(i.p,{children:['Toggle the Switch, Select your database then click "Save":\n',(0,t.jsx)(i.img,{src:s(2277).A+"",width:"1631",height:"851"})]}),"\n",(0,t.jsx)(i.h4,{id:"step-2-create-a-signupsignin-module-for-your-website",children:"Step 2: Create a signup/signin module for your website"}),"\n",(0,t.jsx)(i.p,{children:"In the Prompt window on the lef panel, type in:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:"Create a signup/signin\n"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:s(5918).A+"",width:"1677",height:"837"})}),"\n",(0,t.jsx)(i.p,{children:"A Signup/Signin button will be added on the top menu. After you click it, a signup process with verificatin link sent to user's email will be conducted for user authorization."}),"\n",(0,t.jsx)(i.h4,{id:"responsive-design-tips-for-ghibli-websites",children:"Responsive Design Tips for Ghibli Websites"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:s(462).A+"",width:"1658",height:"797"})}),"\n",(0,t.jsx)(i.h5,{id:"keeping-the-ghibli-magic-on-all-devices",children:"Keeping the Ghibli magic on all devices"}),"\n",(0,t.jsxs)(i.p,{children:["A responsive ",(0,t.jsx)(i.strong,{children:"Ghibli-inspired website"})," should feel magical everywhere. It must look great on phones and desktops. Use soft curves, warm colors, and detailed backgrounds that adjust easily. These features keep the ",(0,t.jsx)(i.strong,{children:"Ghibli aesthetic"})," alive across all screen sizes."]}),"\n",(0,t.jsx)(i.p,{children:"Think about how hand-drawn designs or glowing lights will appear on small screens. Simplify visuals without losing their charm. For example, reduce tiny details but keep the mood intact. This way, your storytelling stays consistent and engaging on every device."}),"\n",(0,t.jsx)(i.h5,{id:"adjusting-illustrations-and-keeping-colors-consistent",children:"Adjusting illustrations and keeping colors consistent"}),"\n",(0,t.jsxs)(i.p,{children:["Scaling illustrations is important for responsive design. You don\u2019t want stretched or blurry images. Use scalable vector graphics (SVGs) for sharp and clear visuals. These work well for ",(0,t.jsx)(i.strong,{children:"Ghibli-style UI"})," elements on any screen size."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.a,{href:"https://uxdesign.cc/designing-a-scalable-and-accessible-color-system-for-your-design-system-f98207eda166",children:"Keep colors consistent by creating a color system"}),". Pick specific shades for buttons, backgrounds, and text. This makes your design look neat and easy to update. Follow accessibility rules too. Choose colors that are easy to see and welcoming for everyone. This keeps your site user-friendly while staying true to the ",(0,t.jsx)(i.strong,{children:"Ghibli aesthetic"}),"."]}),"\n",(0,t.jsx)(i.h5,{id:"making-designs-simple-for-smaller-screens",children:"Making designs simple for smaller screens"}),"\n",(0,t.jsx)(i.p,{children:"Small screens need simpler designs. Show the most important information first. Highlight your main story or magical visuals. Clear menus and buttons make navigation easy. Break content into small sections for better readability."}),"\n",(0,t.jsxs)(i.p,{children:["Responsive layouts help your site look good on all devices. ",(0,t.jsx)(i.a,{href:"https://www.theedigital.com/blog/why-mobile-design-matters",children:"Start with mobile-first design"}),". Focus on key content and create a clean interface. This improves usability and speeds up loading times. Visitors will stay longer and enjoy exploring your site."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Tip:"})," A responsive ",(0,t.jsx)(i.strong,{children:"Ghibli-inspired website"})," makes your storytelling fun and accessible everywhere."]}),"\n",(0,t.jsxs)(i.p,{children:["Telling stories and using emotions are key to a ",(0,t.jsx)(i.strong,{children:"Ghibli-inspired website"}),". These features make your site magical and keep visitors interested. Websites with these ideas are ",(0,t.jsx)(i.a,{href:"https://ecommercegermany.com/blog/how-storytelling-and-emotional-engagement-can-transform-customer-loyalty",children:"306% more likely to be shared"}),". They are also 44% less likely to lose visitors to other sites. Plus, 58% of people will pay extra for such unique experiences."]}),"\n",(0,t.jsxs)(i.p,{children:["With ",(0,t.jsx)(r.A,{}),", anyone can add Ghibli magic to their site. It\u2019s simple to use and gives helpful tips. Over 2.5 million people have made amazing websites without knowing how to code. This tool helps you design a site that feels alive, like a Ghibli movie."]}),"\n",(0,t.jsxs)(i.p,{children:["Want to make your own magical website? Try ",(0,t.jsx)(r.A,{})," and let your creativity shine."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Tip:"})," A ",(0,t.jsx)(i.strong,{children:"Ghibli-inspired website"})," isn\u2019t just a design\u2014it\u2019s a story to share."]}),"\n",(0,t.jsx)(i.h3,{id:"faq",children:"FAQ"}),"\n",(0,t.jsx)(i.h4,{id:"what-makes-a-ghibli-inspired-website-special",children:"What makes a Ghibli-inspired website special?"}),"\n",(0,t.jsx)(i.p,{children:"A Ghibli-style website feels magical and full of life. It uses soft designs, detailed scenes, and stories to connect with visitors. This style gives your site a unique and unforgettable Studio Ghibli-like charm."}),"\n",(0,t.jsx)(i.h4,{id:"can-i-make-a-ghibli-style-website-without-being-a-designer",children:"Can I make a Ghibli-style website without being a designer?"}),"\n",(0,t.jsxs)(i.p,{children:["Yes, you can! ",(0,t.jsxs)(i.a,{href:"https://ezsite.ai/blog/top-5-website-maker-ai-tools-2025/",children:["Tools like ",(0,t.jsx)(r.A,{})]})," make it easy. Just plan your story and pick simple templates. The AI does the hard work, creating a beautiful design with little effort."]}),"\n",(0,t.jsx)(i.h4,{id:"how-do-i-make-my-homepage-feel-magical",children:"How do I make my homepage feel magical?"}),"\n",(0,t.jsx)(i.p,{children:"Focus on visuals and storytelling. Use warm colors, smooth shapes, and Ghibli-style art. Add small animations, like glowing lights or moving clouds, to make it lively and fun for visitors."}),"\n",(0,t.jsx)(i.h4,{id:"will-my-ghibli-style-website-work-on-all-devices",children:"Will my Ghibli-style website work on all devices?"}),"\n",(0,t.jsx)(i.p,{children:"Yes! Responsive design makes your site look great everywhere. Adjust visuals for smaller screens but keep the magical feeling. This way, your story stays clear and works on phones, tablets, and computers."}),"\n",(0,t.jsx)(i.h4,{id:"how-do-i-keep-my-website-looking-consistent",children:"How do I keep my website looking consistent?"}),"\n",(0,t.jsx)(i.p,{children:"Use the same colors, fonts, and designs on every page. This keeps your site neat and helps visitors stay connected to your story. A consistent look makes your website feel complete and professional."})]})}function u(e={}){const{wrapper:i}={...(0,l.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},1463:(e,i,s)=>{s(6540),s(4848)},1784:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghiblidatabase1-fdcf7018e89d3bd035a588656a52b7d0.png"},2231:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghibliyoutube-d00548e647bdf2b6b372a6ce77b0c47b.png"},2277:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghiblidatabase-43dfa5689cb4b74f1fe23d759e60dd38.png"},4888:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghibliasset-4c63de475cfcce19d12ae95b41db3860.png"},5918:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghiblisignup-cd319df77b275cb4cef12142d7607feb.png"},6052:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghibligirl-10a23541fc6ef24f8cee073d8c91af1c.png"},6735:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/ghiblistory-af38db00957a7ab8d18c45cbe51f13a1.png"},8175:(e,i,s)=>{s.d(i,{A:()=>t});s(6540);var n=s(4848);function t(){return(0,n.jsx)("code",{children:"EZsite"})}},8453:(e,i,s)=>{s.d(i,{R:()=>r,x:()=>a});var n=s(6540);const t={},l=n.createContext(t);function r(e){const i=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function a(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),n.createElement(l.Provider,{value:i},e.children)}}}]);