Elementor에서 입자 배경을 추가하는 방법(단계별 가이드)

입자 배경은 Elementor 섹션에 마우스 움직임에 따라 움직이고 연결되며 반응하는 애니메이션의 부동 모양을 추가합니다. 정적 섹션을 즉시 주의를 끄는 눈길을 끄는 대화형 영역으로 바꿉니다.

이 가이드에서는 무료를 사용하여 웹 사이트의 모든 섹션에 Elementor 파티클 배경을 추가하는 방법을 알아봅니다 입자 확장 에서 Elementor용 마스터 애드온. 기본 설정,particles.js 생성기 (NASA,Bubble, Snow) 의 사전 설정,particles.js JSON 구성을 사용하여 자신만의 사용자 정의 파티클 효과를 만드는 방법에 대해 다루겠습니다.

코딩 필요 없음 전체 과정은 약 5 분 정도 소요됩니다.

입자 배경이란 무엇입니까?

입자 배경은 섹션을 가로질러 떠다니는 작은 모양 (점,원, 별 또는 사용자 지정 모양) 을 표시하는 애니메이션 효과입니다. 이 입자는 서로 다른 속도로 움직이고 서로 가까울 때 얇은 선과 연결되며 호버링 시 커서에 반응할 수 있습니다.

효과는 다음에 의해 구동됩니다 파티클.js는 인기있는 자바스크립트 라이브러리입니다. 마스터 애드온은 particles.js 를 Elementor 에 직접 통합하므로 코드를 건드리지 않고도 효과를 활성화하고 사용자 정의할 수 있습니다.

Particles 패널에서 링크된 particles.js 생성기는 좋은 시작점을 만드는 사전설정을 가지고 있습니다:

또한 자신만의 파티클을 생성하여 완전한 사용자 정의 효과를 만들 수 있습니다.js JSON 구성.

필요한 것

• 워드 프레스 와 함께 엘리멘터 (무료 또는 Pro) 설치됨
• Elementor용 마스터 애드온 설치 및 활성화
• X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 입자 마스터 애드온 설정에서 확장 프로그램이 활성화되었습니다

Particles 확장자가 켜져 있는지 확인합니다: 로 이동 마스터 애드온 → 확장 wordpress 대시보드와 토글에서 입자 ON으로.

Elementor에서 입자 배경을 추가하는 방법: 단계별

다음 단계에 따라 페이지의 Elementor 섹션이나 컨테이너에 입자 배경을 추가하세요.

1단계: 섹션을 만들거나 선택합니다

Elementor 편집기에서 페이지를 엽니다. 새 섹션을 만들거나 파티클 효과를 추가할 기존 섹션을 선택합니다.

원하는 컬럼 구조를 선택하십시오. 파티클 효과는 단일 컬럼이든,두 컬럼이든,또는 그 이상이든 어떤 레이아웃에서도 작동합니다.

2 단계: 섹션에 내용 추가

섹션이 미리보기에서 표시되려면 그 안에 위젯이 하나 이상 필요합니다. 독립형 파티클 섹션을 만드는 경우 (애니메이션 영웅 영역과 같은) a 를 삭제합니다 스페이서 섹션에 위젯을 넣고 높이를 400-600px로 설정합니다.

또한 제목,버튼, 이미지 또는 기타 위젯을 추가할 수 있습니다. 모든 콘텐츠 뒤에 입자가 나타납니다.

3 단계: 섹션을 전체 너비로 설정 (선택 사항)

최상의 시각적 효과를 얻으려면 섹션 레이아웃을 다음으로 설정하십시오 전체 너비. 이것은 입자가 전체 브라우저 너비에 걸쳐있게합니다.

섹션의 편집 아이콘을 클릭하고 다음으로 이동합니다 레이아웃 탭, 그리고 설정 콘텐츠 너비 에 전체 너비.

이 단계는 선택 사항입니다. 입자는 박스 너비 섹션에서도 작동합니다.

4단계: 배경색을 추가합니다

이 단계는 중요합니다. 입자는 기본적으로 흰색이므로 입자를 보이게 하려면 어둡거나 색상이 있는 배경이 필요합니다.

섹션의 편집 아이콘을 클릭하고 다음으로 이동합니다 스타일 탭, 그리고 아래 배경는,단색 또는 그라데이션을 설정합니다. 어두운 파란색,검은색, 진한 보라색은 기본 흰색 입자와 가장 잘 작동합니다.

팁: 좀 더 역동적인 모습을 원하시면 다음을 사용해 보세요 애니메이션 그라데이션 배경 확장 단색 대신 Master Addon 의 (Pro). 입자와 결합된 그라데이션 배경은 놀라운 시각적 효과를 만들어냅니다.

5단계: 입자 효과를 활성화합니다

이제 주요 부분에 대해. 선택 된 섹션으로,에 머물 스타일 탭하고 아래로 스크롤하세요 입자 MA 배지가있는 섹션. 스위치 입자 배경을 활성화합니다 에.

기본 엘리멘터 파티클 효과가 섹션에 즉시 나타납니다. 작은 흰색 점들이 떠다니며 얇은 선으로 연결되는 것을 볼 수 있습니다.

기본 효과가 디자인에 좋아 보이면 끝입니다. 누르십시오 업데이트 저장하려면. 하지만 입자 스타일을 사용자 정의하려면 계속 읽으십시오.

Elementor 입자 효과를 사용자 정의하는 방법

패널에서 링크된 시각적 구성기인 free particles.js generator 로 입자를 사용자 정의합니다. 코드를 작성하지 않고도 입자의 수,모양, 크기,속도, 색상,이동 동작을 모두 변경할 수 있습니다.

1단계: 입자 구성기를 엽니다

입자 토글 아래에는 다음과 같은 메시지가 표시됩니다: “아래 필드에 대한 JSON 을 생성하려면 여기를 클릭하십시오.” 링크를 클릭하여 particles.js 시각적 구성기를 엽니다.

구성자 상단에서 을 클릭합니다 “기본값” 사전설정을 보려면: 기본값,NASA, Bubble,Snow 및 Nyan Cat. 사전설정을 시작점으로 선택하거나 기본 구성에서 시작하십시오.

2 단계: 입자 특성 조정

구성자는 세 가지 주요 섹션으로 구성됩니다. Focus on the 입자 시각적 사용자 정의 섹션:

• 번호 — 나타나는 입자 수를 제어합니다. 값이 높을수록 밀도가 높은 효과가 생성되지만 브라우저 리소스를 더 많이 사용합니다.
• 색상 — 입자 색상을 설정합니다. 어두운 배경에는 흰색을 사용하거나 브랜드 색상과 일치시키세요.
• 모양 — 원, 모서리(사각형), 삼각형, 다각형 또는 별 모양 중에서 선택하세요.
• 크기 — 입자 크기를 설정합니다. 무작위 크기를 활성화하여 보다 자연스러운 모습을 연출합니다.
• 불투명도 — 입자 투명도를 제어합니다. 부분적인 불투명도는 미묘하고 우아한 효과를 만들어냅니다.
• 라인 연결 — 근처 입자 사이의 연결선을 활성화하거나 비활성화합니다.
• 운동 — 입자 이동의 속도와 방향을 설정합니다.

3단계: 구성을 다운로드하세요

라이브 미리보기에서 입자가 어떻게 보이는지 만족하면 구성기 하단으로 스크롤하여 클릭합니다 “현재 구성 (JSON) 다운로드”.

라는 이름의 파일 particlesjs-config.json 컴퓨터에 다운로드됩니다.

4 단계: JSON 코드 복사

다운로드한 열기 particlesjs-config.json 모든 텍스트 편집기 (메모장, VS 코드 또는 TextEdit) 에 있는 파일. 모든 코드를 선택하고 복사합니다.

무엇을 하는지 알지 않는 한 JSON 을 수동으로 편집하지 마십시오. 시각적 구성기는 이미 필요한 정확한 설정을 생성했습니다.

5 단계: Elementor 에 붙여 넣기

Elementor 편집기로 돌아갑니다. 섹션의 스타일 탭, 열기 입자 그리고 찾아라 입자 JSON 필드. 복사한 코드를 붙여넣고 클릭합니다 업데이트.

사용자 정의 입자 효과가 이제 페이지에 생방송됩니다. 미리보기를 통해 모든 것이 제대로 보이는지 확인하세요.

입자 배경을 사용하는 창의적인 방법

다음은 입자가 포함된 요소 또는 애니메이션 배경에 대한 몇 가지 실제 사용 사례입니다:

• 영웅 섹션 — 기술 지향적이고 현대적인 모습을 위해 홈페이지 영웅에 입자를 추가하세요. 헤드라인,하위 텍스트 및 CTA 버튼과 결합하세요.
• 가격 섹션 — 가격표 뒤에 미묘한 저밀도 입자 효과를 사용하여 페이지의 나머지 부분과 차별화하세요.
• 증언 지역 — 사용후기 뒤에 부드러운 눈이나 거품 효과가 있으면 콘텐츠에 방해가 되지 않으면서 시각적 흥미를 더할 수 있습니다.
• 바닥글 섹션 — 페이지 하단을 세련되고 완성된 모습을 보려면 바닥글에 입자를 추가하세요.
• 곧 페이지가 나옵니다 — 입자는 정적인 단일 페이지 레이아웃이 될 수 있는 움직임을 생성합니다. 생성 가이드를 확인하세요 Elementor 곧 페이지.
• 클릭 유도 문구 섹션 — 애니메이션 입자가 있는 섹션에 CTA를 배치하여 CTA에 주의를 환기시키세요.

입자를 위한 성능 팁

입자 효과는 JavaScript 를 사용하여 방문자의 브라우저에서 실행됩니다. 사이트를 빠르게 유지하기 위해:

• 입자 수를 제한합니다. 40-80 개의 입자는 일반적으로 좋은 시각적 효과를 내기에 충분합니다. 150 이상으로 올라가면 오래된 장치의 속도가 느려질 수 있습니다.
• 페이지 당 1-2 섹션에 입자를 사용하십시오. 모든 섹션에 입자를 추가하지 마십시오. 과용되면 효과가 영향을 잃고 처리 오버헤드가 추가됩니다.
• 모바일에서 테스트. 입자 효과는 휴대폰에서 배터리를 소모할 수 있습니다. Elementor 의 반응형 가시성 설정을 사용하여 입자 수를 줄이거나 모바일에서 효과를 비활성화하는 것을 고려해 보십시오.
• 내용이 많은 페이지의 입자를 피하십시오. 긴 블로그 게시물과 문서 페이지에는 애니메이션 배경이 필요하지 않습니다. 방문 페이지 및 주요 섹션에 대한 입자를 저장합니다.

더 많은 성능 팁을 보려면 가이드를 읽어보세요 elementor 웹사이트의 속도를 높이는 방법.

기타 요소 배경 효과

입자는 마스터 애드온에서 사용할 수 있는 여러 Elementor 배경 효과 중 하나일 뿐입니다. 관련 확장 기능을 확인하세요:

• 애니메이션 그라데이션 배경 (Pro): 지속적으로 이동하는 부드러운 색상 그라데이션
• 배경 슬라이더: 전환 효과가 있는 여러 배경 이미지를 순환합니다
• 렐락스 (시차) (Pro): 깊이감을 위한 시차 스크롤
• 드러내다 (Pro): 섹션이 보기로 스크롤될 때 애니메이션을 공개합니다

이 모든 것들이 에 포함되어 있습니다 마스터 애드온의 80+ 위젯 및 확장 기능.

자주 묻는 질문

Master Addons에서는 입자 배경 효과가 무료입니까?

예. 그만큼 입자 확장 particle JSON 필드를 포함하여 무료이므로 Pro 라이센스 없이 particles.js 생성기의 모든 구성을 붙여넣을 수 있습니다.

입자가 Elementor 컨테이너와 함께 작동합니까?

예. Master Addons 의 Particles 확장은 이전 Elementor 섹션과 최신 Flexbox 컨테이너 모두에서 작동합니다. 모든 컨테이너의 스타일 탭에서 동일한 방식으로 활성화합니다.

입자가 내 웹 사이트를 느리게합니까?

입자는 자바스크립트를 사용하여 브라우저에서 실행되므로 클라이언트 측에 약간의 처리 오버헤드를 추가합니다. 40-80 개의 입자를 사용하면 최신 장치에서 영향이 최소화됩니다. 150 개 이상의 입자를 사용하거나 동일한 페이지의 여러 섹션에 효과를 추가하는 것을 피하십시오. particles.js 라이브러리는 가볍기 때문에 (약 25KB) 페이지 로드에 대한 파일 크기 영향은 무시할 수 있습니다.

내 브랜드에 맞게 파티클 색상을 변경할 수 있나요?

예. particles.js 시각적 구성기 (확장 설정에서 연결됨) 를 사용하여 입자 색상,모양, 크기,속도, 불투명도 등을 변경합니다. 입자와 연결 라인에 대해 독립적으로 모든 16 진수 색상 값을 설정할 수 있습니다.

모바일에서 입자를 비활성화하려면 어떻게 해야 하나요?

Elementor 의 내장형 반응형 가시성 설정을 사용하여 모바일 디바이스의 파티클 섹션을 숨길 수 있습니다. 또는 파티클 없이 별도의 모바일 최적화 섹션을 만들 수 있습니다. 이를 통해 휴대폰과 태블릿의 배터리 및 처리 능력이 절약됩니다.

Elementor 사이트에 입자 추가를 시작하세요

요소 입자 배경을 추가하는 것은 마스터 애드온으로 몇 번의 클릭만으로 가능합니다. 빠른 설정을 위해 NASA,Bubble 또는 Snow 와 같은 생성기 사전 설정에서 시작하거나 전체 제어를 위해 particles.js 구성기로 자신만의 사용자 정의 효과를 만드세요.

핵심은 입자를 전략적으로 사용하는 것입니다. 충격이 큰 부분을 한두 개 골라 어두운 배경을 선택하고 입자 수를 합리적으로 유지하세요. 정적인 페이지를 살아있다고 느끼는 것으로 바꾸는데 필요한 것은 그것뿐입니다.

시도해 볼 준비가 되셨나요? Elementor용 마스터 애드온을 다운로드하세요 그리고 5 분 안에 첫 번째 입자 배경을 추가하십시오.