제품 목록과 PDF 카탈로그 다운로드 만들기

Summary: 워드프레스와 Elementor가 처음인 사용자를 위해 제품 목록에 PDF 카탈로그 버튼을 추가하는 방법을 안내합니다. 실제 한글 화면을 보며 파일 주소 복사, 버튼 연결, 저장과 모바일 확인까지 따라 해 보세요.

제품 사진과 소개 아래에 버튼을 놓고 PDF 파일을 연결하는 방법입니다. 별도의 다운로드 플러그인이나 상품 관리 기능 없이, 이미지·제목·텍스트 편집기·버튼 위젯으로 구성합니다. 제품은 자동 등록되는 것이 아니라 카드 형태의 영역을 복제하여 직접 추가합니다.

적용 화면: Elementor 4.3.5 한글 편집기. 버전에 따라 메뉴 위치나 이름이 조금 다를 수 있습니다. 아래 화면은 실제 한글 관리자에서 기본 버튼을 추가하고 PDF 주소를 입력하며 촬영했습니다.

완성 예시

1. 준비할 자료

• 제품별 사진, 제품명, 짧은 소개 문구
• 제품별 PDF 카탈로그 또는 공통 종합 카탈로그
• 알아보기 쉬운 파일명. 예: product-a-catalog.pdf

이 기능은 이미 준비된 PDF를 연결합니다. 페이지 내용을 PDF로 자동 제작하는 기능은 아닙니다. 업로드한 PDF는 주소를 아는 사람이 접근할 수 있으므로 내부 자료나 개인정보가 포함된 문서는 올리지 마세요.

2. PDF를 미디어에 올리고 주소 복사하기

1. 워드프레스 관리자에서 미디어 → 새 미디어 파일 추가로 이동합니다. 버전에 따라 ‘새로 추가’로 표시될 수 있습니다.
2. PDF 파일을 선택하고 업로드가 끝날 때까지 기다립니다. 업로드 제한 용량이 표시된다면 그보다 작은 파일을 준비합니다.
3. 미디어 라이브러리에서 올린 PDF를 선택합니다.
4. 파일 형식이 PDF인지 확인하고 클립보드에 URL 복사를 누릅니다.

복사해야 하는 것은 PDF 자체의 주소입니다. 파일 설명 페이지의 주소나 관리자 편집 주소를 넣지 마세요. 일반적인 PDF 파일 주소는 끝이 .pdf로 되어 있습니다.

3. 제품 카드 만들기

본인 사이트의 워드프레스 관리자에 로그인한 상태에서 진행합니다. 화면 구성은 아래 공식 버튼 위젯 안내도 함께 참고할 수 있습니다.

1. 페이지 → 새 페이지 추가에서 제목을 입력하고 임시글로 저장합니다.
2. Elementor로 편집을 누릅니다.
3. 제품 목록을 담을 컨테이너를 만들고, 그 안에 제품 한 개를 담을 컨테이너를 추가합니다.
4. 제품 컨테이너 안에 이미지 → 제목 → 텍스트 편집기 → 버튼 위젯을 순서대로 배치합니다.
5. 이미지에는 제품 사진, 제목에는 제품명, 텍스트 편집기에는 소개 문구를 입력합니다.

카탈로그 파일 형식과 용량을 버튼 근처에 함께 적으면 방문자가 내려받을 자료를 이해하기 쉽습니다. 예: ‘제품 A 카탈로그 · PDF · 2MB’.

4. 버튼을 추가하고 PDF 연결하기 — 처음부터 따라 하기

이미 제품 사진과 설명이 있는 페이지라면 이 단계부터 따라 하세요. 편집 전에 원래 페이지를 백업하거나 연습용 복사본에서 진행하는 것이 좋습니다.

4-1. 왼쪽 위 +를 누르고 ‘버튼’ 검색하기

1. 제품 페이지에서 Elementor로 편집을 누릅니다.
2. 화면 위쪽 왼편의 + (요소 추가)를 누릅니다.
3. 왼쪽 ‘위젯 검색’ 칸에 버튼이라고 입력합니다.
4. 검색 결과에서 이름이 ‘버튼’인 기본 위젯을 찾습니다. 아래 화면의 왼쪽 항목입니다. 이번 안내에서는 오른쪽 ‘KTheme 버튼’을 사용하지 않습니다.

4-2. 제품 설명 아래에 버튼 넣기

‘버튼’ 위젯을 마우스로 누른 채 제품 설명 아래로 끌어 놓습니다. 또는 화면에서 추가할 위치의 기존 요소를 먼저 선택한 뒤 +를 열고 ‘버튼’을 클릭하여 추가할 수 있습니다. 위치가 다르면 추가된 버튼을 원하는 제품 영역으로 옮기세요.

새 버튼에는 처음에 ‘여기를 클릭하세요’라는 문구가 표시됩니다. 버튼을 선택했을 때 왼쪽 제목이 ‘버튼 편집’으로 바뀌면 맞게 선택한 것입니다.

4-3. 버튼 이름 바꾸고 PDF 주소 붙여 넣기

1. 왼쪽 내용 탭을 선택합니다. 다른 버전에서는 ‘콘텐츠’로 표시될 수 있습니다.
2. 텍스트 칸의 ‘여기를 클릭하세요’를 지우고 카탈로그 다운로드 (PDF)를 입력합니다.
3. 링크 칸을 클릭한 다음 기존 #을 지웁니다.
4. 미디어에서 복사한 PDF 주소 전체를 붙여 넣습니다. Windows는 Ctrl+V, Mac은 Command+V입니다.

PDF가 브라우저 화면에 열리는 것도 정상입니다. 이 경우 방문자는 PDF 화면에 표시되는 다운로드 아이콘으로 저장할 수 있습니다. 새 창에서 열기를 선택하면 제품 페이지를 유지하면서 PDF를 볼 수 있습니다.

선택 사항: 바로 저장하도록 요청하기

1. ‘링크’ 입력칸 오른쪽의 링크 옵션 아이콘을 누릅니다. 마우스를 올리면 이름이 표시됩니다.
2. 펼쳐진 사용자 정의 속성 칸에 아래 내용을 입력합니다.

download|space-planning-guide.pdf

세로선 앞의 download는 그대로 두고, 뒤의 space-planning-guide.pdf를 원하는 저장 파일명으로 바꾸세요. 예: download|product-a-catalog.pdf. 가운데 문자는 /가 아니라 세로선 |입니다. 어렵다면 위 예시를 복사한 뒤 파일명만 바꾸세요. 이 칸은 PDF 주소를 대신하지 않습니다. 위의 ‘링크’ 칸에도 PDF 주소가 반드시 들어 있어야 합니다.

브라우저와 모바일 기기, 파일이 저장된 서버에 따라 PDF가 먼저 열릴 수 있습니다. 외부 사이트에 있는 파일에는 바로 저장 요청이 적용되지 않을 수 있으므로 같은 홈페이지의 미디어에 업로드한 PDF를 사용하는 편이 좋습니다. 모든 환경에서 강제 다운로드를 보장하는 설정은 아닙니다.

4-4. 저장한 다음 실제 페이지에서 눌러 보기

1. 새 연습 페이지를 아직 공개하지 않으려면 오른쪽 위 ‘공개’ 옆 아래 화살표 → 임시글로 저장을 선택합니다.
2. 이미 공개된 페이지라면 ‘업데이트’ 등 변경 사항 저장 버튼을 사용합니다. 처음 공개할 때는 방문자에게 노출되어도 되는지 먼저 확인하세요.
3. 위쪽 눈 모양 아이콘(변경 사항 미리보기)을 눌러 실제 페이지를 엽니다.
4. 미리보기에서 카탈로그 다운로드 (PDF) 버튼을 누릅니다. 편집 화면에서는 버튼을 눌러도 파일이 열리지 않고 위젯만 선택될 수 있습니다.
5. 파일이 저장되면 다운로드 폴더에서 열어 올바른 PDF인지 확인합니다. PDF 화면이 열리면 그 화면의 다운로드 아이콘으로 저장합니다.

5. 제품을 더 추가하거나 종합 카탈로그 연결하기

1. 제품 한 개를 담은 컨테이너를 우클릭하고 복제합니다.
2. 복제된 카드의 사진, 제품명, 소개를 바꿉니다.
3. 버튼의 PDF 주소도 해당 제품 파일로 변경합니다. 사진만 바꾸면 이전 제품의 PDF가 그대로 연결됩니다.
4. 종합 카탈로그를 공통 제공한다면 목록 위나 아래에 버튼을 하나 추가하고 종합 PDF를 연결합니다.

6. PC와 모바일에서 확인하기

PC에서는 카드를 두 열로, 모바일에서는 한 열로 배치하면 읽기 편합니다. Elementor의 모바일 보기에서 제품 영역이 화면 밖으로 넘어가지 않는지, 좌우 여백이 각각 16px 이상인지 확인하세요. 실제 휴대전화에서도 버튼을 눌러 PDF 열기 또는 저장을 확인합니다.

• 모든 제품 버튼이 올바른 파일로 연결되는가?
• PDF의 제품명·버전·내용이 최신인가?
• 로그아웃 상태에서도 열리는가?
• 모바일에서 글자와 버튼이 잘리지 않는가?
• 새 PDF를 올렸다면 연결된 버튼 주소도 바꿨는가?

기존 PDF는 다른 페이지에서도 사용 중일 수 있습니다. 새 파일로 교체한 뒤 관련 링크를 모두 확인하기 전에는 이전 파일을 삭제하지 마세요.

자주 묻는 질문

다운로드 대신 PDF 화면이 열려요.

브라우저 설정에 따라 정상적으로 발생합니다. 열린 PDF 화면의 다운로드 아이콘을 사용하세요.

버튼을 누르면 파일을 찾을 수 없다고 나와요.

미디어 라이브러리에서 파일이 남아 있는지 확인하고 URL을 다시 복사해 연결합니다.

상품 관리나 결제 기능이 필요한가요?

단순 제품 소개와 공개 카탈로그 제공에는 필요하지 않습니다. 검색·필터·회원 전용 다운로드·다운로드 통계는 이 예시의 범위에 포함하지 않습니다.

참고 자료

• Elementor 공식 안내: PDF 다운로드 버튼 바로가기
• Elementor 공식 안내: 다운로드 링크 바로가기