멤버십 영상 페이지 (아임웹) 수정 변경하는 방법입니다.
🫶 썸네일 변경하는 법
완성본 예시
아임웹에서 기본으로 제공하는 디자인을 제공하고는, 코드로 디자인을 추가하고 있어요.코드로 디자인을 변경하는 경우,
들어가는 이미지는 src라는 이미지 고유 주소를 가져다가 사용해야 해요.
현재는 노션을 사용해서 이미지 DB로 활용하고 있어요.
주의사항
코드를 사용하는 경우, 이미지를 사용하는 모든 페이지에서 모두 변경해줘야 해요!
EX) 여행 튜토리얼 썸네일 이미지를 변경하고 싶다면?
→ 1) 여행 튜토리얼 페이지 변경
2) 영상 상세 페이지 목록 변경 (모든 영상 페이지에서 변경해줘야 해요)
주의사항
코드를 사용하는 경우, 이미지를 사용하는 모든 페이지에서 모두 변경해줘야 해요!
EX) 여행 튜토리얼 썸네일 이미지를 변경하고 싶다면?
→ 1) 여행 튜토리얼 페이지 변경
2) 영상 상세 페이지 목록 변경 (모든 영상 페이지에서 변경해줘야 해요)
순서
2.
저장한 이미지를 우피로 켜서 src를 가져옵니다.
3.
가져온 src를 변경하려는 코드 블럭에 추가합니다.
<img src="https://player.vimeo.com/video/962804595?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479">
같은 형태로 되어있어요. “”안에 가져온 src를 붙여넣기 해주세요.
→ 자세한 방법은
🫶 스크립트 변경하는 법
완성본 예시
이 부분을 수정해볼거예요
워킹투어 첫 번째 블럭을 수정합니다.
마우스 오른쪽 클릭 → 코드 설정해당 코드 아래에 스크립트를 붙여넣어 주세요.
전체 코드
1.
<p class=”toggleName”>제목을 써주세요</p>
2.
제목 뒤에 이어서 내용을 써주세요.
3.
<br> 은 엔터와 같습니다.
주의사항1.
코드블럭은 쉼표 하나로 오류가 생기기도 해요. 오타가 나지 않도록 주의해주세요.
2.
아임웹은 코드블럭 저장 후 되돌리기가 어려워요. 수정에 익숙하지 않으신 경우, 수정 전 코드블럭을 다른 곳에 저장(백업)해두고 작업해보시길 추천드려요.
🫶 워킹투어 / 여행 튜토리얼 디자인 변경
완성본 예시
워킹투어와 여행 튜토리얼 내부 디자인을 변경하고 싶다면?
아임웹은 모바일, 데스크톱 버전 두 가지를 모두 관리해줘야 해요.
모바일 버전 섹션 추가, 데스크톱 버전 숨기기(눈 아이콘) 영상 권한 설정
영상을 열람할 수 있는 권한이 중요합니다. 권한 설정할 수 있는 방법을 알려드릴게요!
비메오
절차
임베드
1.
비메오 동영상 선택 → 프라이버시
2.
임베드 → 특정도메인 → 도메인 추가(url입력)
링크 프라이버시
1.
vimeo에서 숨기기
다운로드 허용
1.
아니요
아임웹
정책( 2024/11/08 기준)
1.
워너비는 회원가입시 팀코드를 입력하면, 특정 기간동안 영상을 열람할 수 있어요.
2.
관리자는 회원가입 승인 > 멤버십(월) 권한을 멤버에게 부여해줘야 해요.
3.
멤버십 권한을 부여받은 유저는 워킹투어 모든 콘텐츠에 접근이 가능해요.
영상 수정 방법(트립AtoZ, 트립Zip 버전)
1.
수정하고 싶은 영상 클릭
2.
</> 부분 우클릭 후 코드 설정 클릭
3.
<! 이름 이름 이름 •••> 줄 아래 src 수정
수정할 src 가져오기
1.
src 수정은 비메오 접속, 수정할 영상의 ••• 클릭
2.
“Copy embed code” 클릭
4.
<! 이름 이름 이름 •••> 줄 위, 비메오에서 복사한 코드 붙여넣기 후, src부분의 ? 전까지만 떼오기
5.
복사한 부분을 <!— 이름 이름 이름 이름 이름 > 줄 바로 아래에 있는 src 부분에 갈아끼우기
6.
</div> 3개 있는 부분으로 내려와서 바꿀 영상의 onclick 부분 url 갈아끼우기
7.
url은 메뉴바 → 변경할 부분의 영상 → i 표시 클릭하면, url 번호가 나옵니다.
8.
url 그 번호를 변경할 부분에 넣어줍니다.
9.
저장 버튼을 눌러줍니다.
10.
틈틈의 미리보기 눌러서 확인하기
11.
그리고 이 과정을 같은 카테고리에 있는 모든 영상의 코드에 반복하면 됩니다…
12.
그리고 이것을 모바일 버전으로도•••
워킹투어 지도 수정하기
지도를 수정해봅시다.
1.
구글 맵 embed map 클릭
2.
해당 내용을 복사합니다.
3.
워킹투어 맨 윗 코드블럭, 첫 번째 줄 src를 수정합니다.
4.
두번째 코드 블럭 해당 섹션을 찾아서 &ll전까지 해당 내용을 복사, 붙여넣기 합니다.
5.
메뉴 좌표를 수정해줘야 합니다. 다시 구글 맵으로 이동합니다.
6.view in google maps를 클릭합니다
맨 윗줄을 클릭하면 자동 복사됩니다.
