사용자 지정 WordPress 404 오류 페이지를 만드는 방법

귀하가 404 페이지를 방문하고 웹사이트가 도움이 되지 않았기 때문에 즉시 웹사이트를 떠났을 가능성이 높습니다. 404 페이지는 누군가가 귀하의 웹사이트에 존재하지 않는 URL을 입력하거나 클릭할 때 WordPress에 표시되는 페이지입니다. 이 페이지는 방문자에게 페이지를 찾을 수 없음을 알리는 일반적인 오류입니다. 이 기사에서는 WordPress용 사용자 지정 404 페이지를 만드는 방법을 살펴보겠습니다. 그 과정에서 우리는 좋은 디자인과 나쁜 디자인을 모두 보게 될 것입니다.

WordPress용 맞춤형 404 페이지를 만드는 이유는 무엇입니까?

아무도 보지 않기를 바라기 때문에 404 페이지 디자인을 건너뛰고 싶을 것입니다. 그러나 방문자에게 도움이 되어야 합니다. 다른 페이지만큼 중요할 수 있습니다. 일반적인 메시지는 나쁜 사용자 경험입니다. 보기 좋지 않으며 웹 사이트에 머물 이유가 없습니다.

먼저, 피하려고 하는 일반 페이지를 살펴보겠습니다.

일반 404 페이지

WordPress에 표시되는 표준 404 페이지는 오류 메시지일 뿐입니다. 본문 콘텐츠 영역에 배치되며 머리글, 바닥글 및 사이드바가 있는 경우 이를 표시합니다.

안타깝게도 도움이 되지 않습니다. 그것은 당신이 찾고 있는 것이 당신이 있는 통로에 있는지 상점 직원에게 묻는 것과 같습니다. 그리고 그들은 단지 거절합니다. 당신은 그들이 당신을 올바른 통로로 안내하기를 원합니다. 더 많은 정보를 원합니다.

404 페이지에서 더 많은 정보를 얻을 수 있습니다. 도움이 될 것입니다. 도구, 링크, 조언 또는 어떤 형태의 도움을 제공해야 합니다. 다음에 어디로 가야할지 모르는 통로에 혼자 남겨지고 싶지 않습니다.

사용자 정의 404 페이지 예

웹에는 수천 개의 놀라운 404페이지가 있습니다. 일부는 웃기고 일부는 진지합니다. 일부는 다른 것보다 더 도움이 됩니다. 일부는 평범하고 다른 일부는 화려합니다. 디자인 방법에 대한 아이디어를 얻으려면 몇 가지 404 페이지를 살펴보십시오. 일부는 간단하고 지루하지만 다른 일부는 유용하고 멋지게 보입니다.

1. 구글

Google(WordPress 아님) 404 페이지는 간단합니다. 화면 중앙에 있는 작은 콘텐츠 영역입니다. 메시지는 오류가 있음을 알려주고 로봇의 그래픽을 조각으로 제공합니다. 다른 정보는 제공하지 않지만 Google이므로 검색창에 다른 정보를 입력하기만 하면 됩니다.

2. 워드프레스닷컴

WordPress.org의 404 페이지에는 표준 머리글과 바닥글이 표시됩니다. 본문에는 페이지를 찾을 수 없음을 나타내는 제목, 유머가 있는 짧은 설명, 안내하는 데 도움이 되는 링크 목록이 포함되어 있습니다. 링크는 도움이 되는 데 중점을 둡니다.

3. 워드프레스닷컴

WordPress.com의 404 페이지는 머리글과 바닥글을 제거합니다. 그래픽, 제목, 클릭 가능한 링크가 있는 설명, 검색 상자 및 WordPress.com 로고가 표시됩니다. 링크가 도움이 됩니다.

4. 우아한 테마

우아한 테마의 404 페이지(어쨌든 보게 될 것이라는 것을 알고 있기 때문에)에는 ET 헤더, 작은 설명이 포함된 큰 제목 및 CTA로 버튼이 표시됩니다. 여기에서 거의 모든 것에 액세스할 수 있습니다.

5. 스물 스물한

WordPress의 Twenty Twenty-One 테마에는 기본 및 바닥글 메뉴를 사용하는 404 페이지가 있습니다. 큰 제목을 가지고 있습니다. 본문에는 짧은 설명과 검색창이 있습니다. 라인은 스타일링에 사용됩니다. 배경이 사이트와 일치합니다.

6. 스물 스물

WordPress의 Twenty Twenty 테마는 머리글과 바닥글을 표시합니다. 본문은 중앙에 큰 제목과 설명, 검색창을 보여줍니다. 모두 테마의 색상을 사용합니다.

7. 여유

Slack(WordPress 제외) 404 페이지에는 도움말 센터 링크와 함께 오류에 대한 정보가 있는 상자가 중앙에 표시됩니다. 여기도 메뉴가 다 있어요. 흥미로운 부분은 배경입니다. 마우스를 따라 오른쪽 또는 왼쪽으로 스크롤하는 만화 배경입니다. 애니메이션 동물이 화면을 가로질러 움직입니다.

8. 아마존

Amazon(WordPress도 아님) 404 페이지에는 검색 상자가 있는 Amazon 로고, 큰 메시지, 홈페이지 링크가 있는 작은 메시지, 자세히 알아볼 수 있는 링크가 있는 동물 사진이 포함됩니다. 여기에는 표시할 수 있는 다양한 사진이 포함되어 있습니다. 그들은 무작위로 선택됩니다.

404 페이지 콘텐츠

그렇다면 404페이지에 필요한 것은 무엇일까요? 위의 예에서 몇 가지 공통 요소를 볼 수 있습니다.

첫째, 도움이 되어야 합니다. 방문자에게 오류가 있다고 알려주면 안 됩니다. 오류가 무엇을 의미하는지 알려야 합니다. 자동차에 오류 표시등이 켜진다고 상상해 보십시오. 첫 번째 질문은 "그게 무엇을 의미합니까?"입니다. 오류에 대한 유용한 정보를 제공하지 않으면 답답합니다.

방문자는 자신이 뭔가를 잘못했는지 또는 콘텐츠가 존재하지 않는지 알아야 합니다. 그들이 알지 못한다면, 그들은 웹사이트를 맹렬히 떠날 때까지 콘텐츠를 계속 찾을 것이고 다시는 돌아오지 않겠다고 맹세할 것입니다. 이것은 간단한 메시지와 눈을 사로잡는 이미지로 가장 잘 수행됩니다. 청중에게 어필할 수 있는 일반적인 콘텐츠에서 눈에 띄는 것.

다음으로, 다음에 해야 할 일에 대한 방향을 제시해야 합니다. 이것은 기사 목록, 검색 상자, 카테고리 목록, 가장 인기 있는 게시물, 가장 최근 게시물, 연락 방법 등이 될 수 있습니다.

간단합니다. 404페이지는 많은 내용이 필요하지 않습니다. 도움이 되기에 충분합니다.

위의 예에는 다음이 포함됩니다.

• 웹사이트에 어울리는 배경색과 패턴/
• 오류에 대한 짧은 메시지가 포함된 제목입니다.
• 404 페이지임을 나타내는 큰 텍스트입니다.
• 방문자에게 몇 가지 방향을 제공하는 몇 개의 버튼.

간단하지만 세련되고 유용합니다. 그게 다야.

방금 논의한 콘텐츠 아이디어를 사용하여 WordPress용 맞춤형 404 페이지를 만드는 방법을 살펴보겠습니다.

Divi 테마 빌더를 사용하여 WordPress에서 사용자 정의 404 페이지를 만드는 방법

Divi 테마 빌더를 사용하면 404 페이지를 쉽게 만들고 할당할 수 있습니다. 우아한 테마에는 무료로 다운로드할 수 있는 미리 만들어진 404 페이지가 여러 개 있습니다. 원하는 방식으로 사용자 정의할 수 있습니다. 404페이지 디자인을 시작하기에 좋은 방법입니다. 원하는 경우 처음부터 새로 만들 수 있습니다.

위의 예는 네 번째 테마 빌더 레이아웃 팩에서 가져온 것입니다. ET 블로그에는 404페이지가 많이 있습니다. 그것들을 찾으려면 "테마 빌더 레이아웃 팩"을 검색하거나 여기에서 확인하십시오:

• Divi용 첫 번째 무료 테마 빌더 팩 다운로드
• Divi용 두 번째 무료 테마 빌더 팩 다운로드
• Divi용 세 번째 무료 테마 빌더 팩 다운로드
• Divi용 네 번째 무료 테마 빌더 팩 다운로드
• Divi용 다섯 번째 무료 테마 빌더 팩 다운로드
• Divi용 여섯 번째 무료 테마 빌더 팩 다운로드

사용자 정의 404 페이지를 Divi 테마 빌더로 가져오기

Divi > Theme Builder 로 이동하여 WordPress 대시보드에서 Divi Theme Builder를 찾을 수 있습니다. 그러면 템플릿을 만들거나 가져오고 할당할 수 있는 페이지가 열립니다. 오른쪽 상단에 가져오기 아이콘이 표시됩니다. 404 페이지 템플릿을 가져오려면 이 아이콘을 클릭하세요.

참고 – Divi 테마 빌더 사용에 대한 자습서를 보려면 여기 우아한 테마 블로그에서 "테마 빌더"를 검색하십시오.

템플릿을 가져올 수 있는 모달이 열립니다. 가져오기 를 선택하고 파일 선택 아래에서 파일로 이동 합니다 . 기본값 및 할당을 재정의하는 옵션이 기본적으로 선택됩니다. 선택한 상태로 두는 것이 좋습니다. 클릭하여 모달 하단에 있는 템플릿을 가져옵니다. Crowdfunding Layout Pack용 404 페이지를 가져오고 있습니다.

404 페이지를 가져오면 자동으로 할당됩니다. 그런 다음 편집 아이콘을 클릭하여 빌더를 엽니다.

이제 링크, 이미지, 색상, 텍스트 등을 추가하여 각 모듈 내에서 편집을 수행합니다. 레이아웃을 저장하고 오른쪽 상단 모서리에 있는 x를 클릭하여 빌더를 닫습니다.

마지막으로 변경 사항을 저장하여 템플릿을 적용합니다. 이제 사용자 정의 404 페이지가 있습니다.

Divi 테마 빌더로 사용자 정의 404 페이지 만들기

테마 빌더에서 새 템플릿을 추가하도록 선택합니다.

템플릿 설정이 열립니다. 맨 아래로 스크롤하여 기타 아래에서 404 페이지를 선택합니다. 그런 다음 템플릿 만들기 를 클릭합니다. 템플릿 설정이 닫힙니다.

이제 404 페이지를 만들 수 있습니다. 대부분 머리글이나 바닥글을 사용하지 않습니다. 사용자 정의 본문 추가 를 선택 하십시오 .

여기에는 사용자 정의 본체를 만들거나 라이브러리에서 추가할 수 있는 두 가지 선택 항목이 표시됩니다. 사용자 정의 본문 작성 을 선택 하십시오 .

Divi Builder를 사용하여 404 페이지를 정상적으로 빌드합니다. 저장 및 종료.

마지막으로 변경 사항을 저장합니다. 당신은 끝났습니다.

WordPress용 사용자 지정 404 페이지 만들기에 대한 생각 끝내기

WordPress용 사용자 지정 404 페이지를 만드는 방법을 살펴보겠습니다. 404페이지가 도움이 되어야 합니다. 불행히도 일반 WordPress 404 페이지는 도움이 되지 않으며 열악한 사용자 경험을 제공합니다. 다행히 Divi 테마 빌더를 사용하여 자신만의 404 페이지를 만들 수 있습니다.

여기에서 제공한 정보를 사용하여 사용자에게 훌륭한 경험을 제공하고 이를 수행하는 동안 멋지게 보이는 아름다운 404 페이지를 만드는 방법에 대해 잘 알고 있습니다.

우리는 당신의 의견을 듣고 싶습니다. WordPress 웹사이트를 위한 맞춤형 404 페이지를 만드셨습니까? 의견에서 우리의 경험에 대해 알려주십시오.

Letters-Shmetters/Shutterstock.com을 통한 주요 이미지