WeWeb을 사용하여 상호 작용하는 역사적 타임라인을 만드는 단계별 가이드를 탐색해보세요. 그 기능을 효과적으로 활용하고 역사를 생동감 있게 만드는 방법을 배워보세요.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: 새 프로젝트 생성하기 시작하기
WeWeb에서 역사적 타임라인을 만드는 과정은 새 프로젝트를 만들어 시작합니다. 이를 위해 WeWeb 계정에 로그인하거나 계정이 없다면 가입하십시오. 계정에 로그인하면 "+New Website" 버튼을 클릭합니다. 새 페이지가 나타나며 템플릿을 선택하거나 직접 만들어야 합니다. 선호하는 템플릿이 있다면 선택하고 그렇지 않다면 웹사이트를 처음부터 만들 수 있는 "Blank" 옵션을 선택하십시오.
2단계: 새 페이지 설정하기
프로젝트를 생성한 후 타임라인을 위한 새 페이지를 설정해야 합니다. 이를 하려면 왼쪽 패널로 이동하여 "Pages"를 클릭합니다. "+ Add Page" 버튼을 클릭하여 새 페이지를 추가합니다. 이 페이지에 "Historical Timeline"과 같이 적합한 이름을 지정할 수 있습니다.
3단계: 페이지 레이아웃 디자인하기
페이지를 생성한 이후에는 페이지 레이아웃을 디자인해야 합니다. 화면 왼쪽에 "Sections" 탭을 클릭하고, 섹션을 페이지에 드래그 앤 드롭합니다. 각 섹션은 타임라인의 다른 부분에 대한 블록 역할을 합니다. 강조하려는 기간이나 이벤트에 따라 각 블록을 사용자 정의 할 수 있습니다.
4단계: 시대나 이벤트 추가하기
다음 단계는 타임라인을 구성하는 시대나 이벤트를 추가하는 것입니다. 이를 위해서는 화면 왼쪽의 "Elements" 탭으로 이동하여 "Text" 요소를 각 블록에 드래그 앤 드롭하면 됩니다. 그런 다음 이 텍스트를 원하는 날짜나 시기를 나타내도록 편집할 수 있습니다. 타임라인에 포함시키려는 모든 시대나 이벤트에 대해 이 과정을 반복합니다.
5단계: 각 시대나 이벤트에 대한 정보 삽입하기
시대나 이벤트를 설정한 후에는 각각에 대한 더 자세한 정보를 추가해야 합니다. 이 작업을 수행하려면 이전 단계에서 사용한 과정과 비슷한 과정을 따르면 됩니다. "Elements" 탭으로 이동한 다음, 이미 추가된 시대나 이벤트 아래에 "Text" 요소를 드래그 앤 드롭합니다. 그런 다음 이 텍스트를 편집하여 해당 시기 또는 이벤트에 대한 중요하고 흥미로운 정보를 포함시킬 수 있습니다.
6단계: 모양과 느낌 사용자 정의하기
타임라인 정보가 모두 마련된 후에는 타임라인의 모양과 느낌을 사용자 정의 할 수 있습니다. 왼쪽 패널의 "Styles" 탭을 클릭하여 다양한 옵션에 접근할 수 있습니다. 여기에서 색상 스키마, 타이포그래피, 그리고 선택한 미적 또는 테마와 어울리는 기타 디자인 요소를 결정할 수 있습니다.
7단계: 상호 작용하는 역사적 타임라인 저장 및 게시하기
모든 정보가 입력되고 디자인이 설정되면 진행 상황을 저장해야 합니다. 이를 위해 화면 우상단에 위치한 "Save" 버튼을 클릭합니다. 타임라인이 만족스럽다면 "Publish"를 클릭하십시오. 이제 관객이 섬세하게 제작된 역사적 타임라인을 사용할 수 있습니다.
8단계: 상호 작용하는 역사적 타임라인 공유하기
마지막으로, 상호 작용하는 역사적 타임라인이 준비되면 네트워크나 일반 공개를 위해 공유할 수 있습니다. 이를 위해 대시보드에서 "Share" 버튼을 클릭합니다. 여기서 사이트에 대한 직접 링크를 공유하거나 WeWeb에서 직접 소셜 미디어 플랫폼에 공유할 수도 있습니다.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.