Computer >> 컴퓨터 >  >> 네트워킹 >> 인터넷

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

내용이 왕이지만 외모가 여왕이라는 말이 있다. 오늘날의 웹 자산 상태에서는 이보다 더 사실일 수 없습니다. 눈길을 끄는 디자인은 웹 소유자가 방문자의 관심을 끄는 데 도움이 됩니다. 세심한 레이아웃, 조화로운 색상 조합 및 아름다운 글꼴 외에도 웹 소유자가 방문자의 즉각적인 주목을 얻기 위해 사용할 수 있는 방법 중 하나는 움직이는 타자기와 같은 텍스트를 사용하는 것입니다. WordPress 사용자인 경우 Typed Js라는 플러그인을 사용하여 이 효과를 쉽게 얻을 수 있습니다. .

참고 :효과는 움직이는 텍스트이고, 단어나 정지된 그림으로 "멋짐"을 설명하기 어렵기 때문에 개인 웹 사이트 프로젝트에서 사용하기로 결정하고 결과를 볼 수 있습니다.

플러그인 설치 및 설정

WordPress에 플러그인을 설치하는 것은 매우 쉽습니다. 관리 영역에 로그인하고 왼쪽 사이드바에서 "플러그인 -> 새로 추가" 메뉴를 사용하기만 하면 됩니다. 플러그인 저장소에서 "Typed Js"를 검색한 후 설치 및 활성화합니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

이제 새로운 Typed Js 효과를 추가할 준비가 되었습니다. 이 과정은 새 게시물을 추가하는 것과 거의 비슷합니다. 먼저 왼쪽 사이드바에서 "Typed -> Add New" 메뉴로 이동한 다음 새 Typed 효과에 이름을 지정합니다.

중요한! '생성된 단축 코드'에 주의하세요. "[대괄호]" 사이의 문자열입니다. 대괄호를 포함한 모든 항목을 복사하고 표시할 위치에 단축 코드를 삽입합니다. 다른 문자열 집합은 다른 단축 코드를 갖습니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

"입력된 옵션"에서 원하는 순서를 사용하여 표시하려는 단어/구/문장의 문자열을 추가할 수 있습니다. 새 문자열을 추가하려면 '더하기(+)' 버튼을 사용하고 항목을 삭제하려면 '빼기(-)' 버튼을 사용하세요.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

문자열 아래에는 효과의 모양을 조정하는 다양한 설정이 있습니다. 입력 속도, 시작 지연, 뒤로 속도, 뒤로 ​​지연을 맞춤설정할 수 있습니다. 모든 숫자는 밀리초 단위입니다. 문자열이 루프에 나타나도록 설정하고, 커서를 표시하고, 문자를 커서로 선택하고, 깜박이게 할 수도 있습니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

조정할 수 있는 또 다른 것은 글꼴 및 색상과 같은 디스플레이입니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

모든 설정이 끝나면 '게시' 또는 '업데이트'를 누르세요.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

WordPress에서 효과 사용하기

앞서 언급했듯이 Typed 효과를 사용하려면 단축 코드를 복사하여 표시하려는 위치에 붙여넣어야 합니다. 내 웹사이트의 경우 SiteOrigin Page Builder를 사용하여 생성한 방문 페이지에서 사용할 것입니다.

먼저 "페이지 -> 새로 추가"를 통해 새 페이지를 만듭니다. 그런 다음 '페이지 작성기' 탭으로 전환하고 새 '행'을 추가하고 이를 하나의 열로 설정하고 행 안에 'SiteOrigin Hero' 위젯을 추가합니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

그런 다음 프레임을 열고 일반적인 WordPress 게시물과 동일한 방식으로 콘텐츠를 편집합니다. 이전 포스트에서 생성한 숏코드를 삽입합니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

디자인을 완성하기 위해 이전에 설정한 '문의하기' 페이지로 연결되는 '버튼'을 추가하고 맞춤설정하여 서비스가 필요한 방문자가 저에게 연락할 수 있도록 합니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

그리고 여기 최종 결과가 있습니다. 실제 효과의 예를 실시간으로 보고 싶으시다면 제 사이트를 방문하시면 됩니다.

WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법 WordPress 사이트에 멋진 타이핑 효과를 추가하는 방법

원하는 만큼 Typed Js 항목을 만든 다음 단축 코드를 복사하여 붙여넣고 게시물이나 페이지 내 아무 곳에나 효과를 삽입할 수 있습니다. 아주 멋질 텐데, 제목에 효과를 사용할 수 없습니다. 시도했습니다.

Typed J 효과에 대해 어떻게 생각하십니까? WordPress 사이트에서 사용 중인 자신을 볼 수 있습니까? 아래 의견을 사용하여 생각과 의견을 공유하십시오.