자유 요소 입자 배경(particles.js)

파티클은 모든 Elementor 섹션,컬럼 또는 컨테이너 뒤에서 particles.js 애니메이션을 실행하는 무료 Master Addons 확장입니다. 켜면 바로 기본 효과를 얻을 수 있습니다: 섹션을 가로 질러 표류하는 흰색 점,얇은 선으로 결합되고 커서로 밀려납니다. 떨어지는 눈,떠오르는 거품 또는 별 필드와 같은 다른 모든 것을 위해 particles.js 생성기에 구성을 구축하고 JSON 을 패널에 붙여 넣습니다.

파티클 패널과 파티클.js 생성기가 있는 휴일 카드 섹션의 눈 파티클

동영상 파일이 없는 이동 배경

입자는 particles.js 스크립트에 의해 캔버스에 그려지므로 다운로드할 비디오나 이미지가 없습니다. Z-index 설정은 파티클 레이어가 어디에 위치하는지를 결정하므로 제목과 버튼 뒤에 유지할 수 있습니다. 두 개 이상의 섹션에서 파티클을 사용하는 경우 파티클 수를 적당히 유지하고 전화에서 페이지를 확인하십시오.

  • 비디오 또는 이미지 파일 없음: 애니메이션이 브라우저에 그려집니다.
  • 콘텐츠 뒤에 입자 레이어를 유지하기 위한 Z-인덱스 설정입니다.
  • 섹션, 열 및 컨테이너에서 작동하며 각각 고유한 구성이 있습니다.

하나의 JSON 필드에서 모든 particles.js 효과

Particle JSON 필드는 particles.js 가 할 수 있는 모든 것을 제어합니다: 파티클 수,색상, 모양,크기, 불투명도,연결선, 속도 및 방향,더하기 호버링 및 클릭 상호작용. 필드 위의 링크는 particles.js 생성기를 열고 NASA,Bubble 또는 Snow 와 같은 사전 설정을 선택하고 슬라이더로 조정하고 구성을 다운로드합니다. 붙여넣기 및 편집기에 섹션 업데이트.

  • 발전기의 사전 설정: 기본값, NASA, Bubble, Snow 및 Nyan Cat.
  • 모양: 원, 가장자리, 삼각형, 다각형, 별 또는 자신의 이미지.
  • 반발, 잡기, 거품 및 푸시와 같은 모드를 마우스로 가리키고 클릭합니다.
파티클.js 생성기 설정으로 어두운 영웅 섹션에 스타 입자 배경

Elementor에서 입자 배경을 추가하는 방법

기본 흰색 입자가 나타나려면 어둡거나 다채로운 배경이 필요하므로 먼저 설정하세요.

  1. 마스터 애드온 대시보드의 확장 탭에서 입자를 켭니다.
  2. 섹션, 열 또는 컨테이너를 선택하고 어두운 배경색을 지정합니다.
  3. 스타일 탭을 열고 입자를 확장한 후 입자 배경 활성화를 켭니다.
  4. 다른 효과를 보려면 Particle JSON 위의 링크를 클릭하고 생성기에서 사전 설정을 선택한 다음 JSON을 다운로드하여 필드에 붙여넣으세요.
  5. Z-index를 설정하여 파티클 레이어가 콘텐츠 뒤에 유지되도록 한 다음 게시합니다.

우리의 입자 배경 자습서 스크린샷으로 각 단계를 살펴봅니다.

WordPress의 Particles.js: 손으로 또는 확장자를 사용합니다

particles.js 는 무료 JavaScript 라이브러리이며,WordPress 에 직접 추가 할 수 있습니다. 확장 프로그램과 비교하여 필요한 것은 다음과 같습니다.

손으로 particles.js 추가하기입자 확장
스크립트 불러오는 중테마에 라이브러리를 대기열에 추가합니다파티클 섹션이 있는 페이지에만 로드됩니다
입자 층div 를 추가하고 CSS 로 콘텐츠 뒤에 위치시킵니다당신을 위해 섹션에 추가되었습니다
구성스크립트에서 JSON 으로 particlesJS()를 호출합니다JSON 을 패널에 붙여 넣습니다
미리보기프런트 엔드에Elementor 편집기에서 바로
레이어링자신만의 z-index 규칙을 작성한다Z-인덱스 필드

입자는 잘 쌍을 이룹니다 유리형성 위에 카드. 다른 움직이는 배경에 대 한 시도 배경 슬라이더 또는 애니메이션 그라데이션 배경 (프로).

템플릿 뷰어
페이스북
트위터
왓츠앱
링크 복사
지금 구매하기
새해
새해
영웅 섹션이 있는 입자
영웅 섹션이 있는 입자
SaaS 영웅,연결된 노드 네트워크
SaaS 영웅,연결된 노드 네트워크
겨울 세일, 내리는 눈
겨울 세일, 내리는 눈
금 투자, 표류하는 점
금 투자, 표류하는 점
결혼식장, 소프트보케
결혼식장, 소프트보케
사이버 보안, 빠른 메시
사이버 보안, 빠른 메시
축제 라인업, 별 모양
축제 라인업, 별 모양
영향 보고서, 상승 다각형
영향 보고서, 상승 다각형
기관 CTA, 최소 삼각형
기관 CTA, 최소 삼각형

입자에 대해 자주 묻는 질문

사용자가 입자에 대해 가장 많이 묻는 질문을 알아보고 한 곳에서 답변을 찾아보세요.
나는 개발자가 아니다. JSON 물건은 나를 위해 너무 열심히인가?

아니요. 효과를 켜면 JSON 이 전혀 없는 기본 모양이 제공됩니다. 다른 모양에서는 particles.js 생성기가 슬라이더 및 색상 선택기와 함께 작동합니다. 생성한 구성을 다운로드하여 Particle JSON 필드에 붙여넣습니다.

예. particles.js 생성기에서 형상 유형을 이미지로 설정하고 작은 로고와 같은 이미지의 URL 을 입력합니다. config 를 다운로드하여 Particle JSON 필드에 붙여 넣습니다.

이게 휴대폰에서 통할까요?

예,애니메이션은 휴대폰과 태블릿에서 실행됩니다. 높은 입자 수는 오래된 휴대폰의 속도를 늦출 수 있으므로 모바일 방문자가 볼 수 있는 섹션의 수를 적당히 유지하십시오.

예. 각 섹션,열 및 컨테이너에는 자체 Particle JSON 필드가 있으므로 영웅이 별 필드를 표시하고 다른 섹션은 눈을 사용할 수 있습니다.

트렌드 엘리먼트 위젯 및 확장

더 짧은 시간에 정교한 웹사이트를 구축하세요.

Elementor용 Master Addons Glassmorphism 확장: 흐림 값 컨트롤이 20px로 설정된 반투명 유리 카드

유리형성

집 무료 Elementor Glassmorphism 확장: 하나의 토글에서 서리 유리 효과 Glassmorphism 서리입니다...
자세히 보기
Elementor용 마스터 애드온 컨테이너 추가 확장: 최대 너비, 최대 높이, 최소 너비 및 최소 높이 컨트롤이 포함된 컨테이너의 최대 너비는 1400px입니다

컨테이너 엑스트라

홈 Elementor 컨테이너 최대 너비 및 최대 높이 제어 컨테이너 엑스트라는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 패턴 확장: 보라색 그라데이션 그리드 왼쪽 스타일, 세 가지 패턴 스타일 및 패턴 활성화 패널이 있는 영웅입니다

패턴

홈 70+ 무료 Elementor 배경 패턴 패턴은 추가되는 무료 Master Addon 확장입니다...
자세히 보기
Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안

게시물/페이지 복제기

홈 중복 엘리멘터 페이지 및 게시물 한 번의 클릭으로 게시물/페이지 복제기는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 읽기 진행률 표시줄 확장: 활성화, 위치, 높이 및 채우기 색상 설정이 포함된 개인 정보 보호 정책 페이지 상단에 파란색 표시줄 42%가 채워져 있습니다

읽기 진행률 표시줄

홈 WordPress (Elementor) 에서 읽기 진행률 표시 줄 추가 읽기 진행률 표시 줄은 무료입니다...
자세히 보기