뉴스 티커는 바쁜 홈페이지가 발표의 벽으로 바뀌는 것을 막습니다. 모든 업데이트를 쌓는 대신 단일 막대에서 최신 타이틀을 실행합니다. The 뉴스 티커 위젯 에서 Elementor용 마스터 애드온 그 막대를 당신을 위해 구축합니다. 그것은 두 개의 콘텐츠 소스 (자신의 게시물 또는 RSS 피드), 세 개의 스크롤 유형,라벨, 콘텐츠,썸네일 및 화살표에 대한 스타일링이있는 Pro 위젯입니다.
설정 방법은 다음과 같습니다 Elementor 뉴스 티커위젯 패널부터 라이브 페이지까지.
News Ticker 위젯이 수행하는 작업 #
위젯은 컴팩트한 발표 막대를 렌더링합니다. 왼쪽의 컬러 라벨,가운데의 회전 콘텐츠,오른쪽의 선택적 화살표. 항목은 WordPress 게시물 (또는 다른 공개 게시물 유형) 또는 RSS 피드에서 가져온 것입니다. 막대는 클래식처럼 수평으로 슬라이드할 수 있습니다 속보 티커수직으로 굴리거나 천막처럼 논스톱으로 스크롤합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 아직 설치하지 않았다면 다음을 따르십시오 설치 가이드.
- News Ticker는 Pro 위젯이므로 Master Addons Pro 라이센스는 Master Addons 대시보드에서 위젯을 켠 상태입니다.
- 선택 사항: 소스로 사용하려는 경우 RSS 피드 URL 또는 게시된 일부 게시물.
위젯을 페이지에 추가하세요 #
열다 엘리멘터 에디터 그리고 위젯 패널에서 “뉴스 티커”를 검색합니다. 마스터 애드온을 드래그하십시오 뉴스 티커 바를 원하는 섹션으로 위젯. 빨간색 “속보” 라벨과 단일 회전 항목으로 드롭 인되므로 즉시 작동하는 것을 볼 수 있습니다.
티커 소스를 선택합니다 #
콘텐츠 탭에서 뉴스 티커 유형 드롭다운은 아이템이 어디서 왔는지 결정합니다:
- 내용: 자신의 사이트에서 게시물을 가져옵니다. 에서 게시물 유형,범주, 태그,게시물 수 및 순서를 설정합니다 게시물 쿼리 섹션.
- RSS 피드: RSS 피드 URL을 붙여넣으면 위젯이 최신 항목을 자동으로 가져옵니다.
데모는 Content 를 사용하므로 티커는 아무도 건드리지 않고 새 게시물을 선택합니다. 외부 헤드라인을 끌어들이는 경우 RSS 피드가 더 빠른 설정입니다. RSS 에서 하나의 헤드업: 피드가 다운되거나 구조가 변경되면 티커가 비어 올 수 있으므로 새 소스를 가리킨 후에 확인할 가치가 있습니다.
디자인 옵션 #
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 디자인 옵션 섹션은 티커의 모양과 각 항목의 표시 내용을 제어합니다:
- 쇼 라벨? 왼쪽 레이블을 켜거나 끕니다.
- 라벨: 라벨 텍스트. 데모는 “BREAKING NEWS”를 “LATEST NEWS.”로 전환합니다
- 뉴스 유형: 각 항목의 제목이나 발췌문을 표시합니다.
- 썸네일 표시: 각 제목 옆에 작은 이미지를 추가합니다.
- 하이라이트 단어? 티커 텍스트에서 특정 단어를 강조하세요.
- 날짜 표시: 제목 옆에 게시 날짜를 넣습니다. News Type 이 Title 일 때만 나타납니다.
- 높이: 픽셀 단위의 막대 높이입니다. 데모에서는 이것을 50 에서 85 까지 가져갑니다.
썸네일을 켜면 각 항목 옆에 작은 이미지가 표시됩니다. 이는 막대를 더욱 시각적으로 만들어 일반 텍스트 막대가 무시되는 경향이 있는 미디어가 많은 사이트에 도움이 됩니다.
높이 슬라이더를 사용하여 막대의 크기를 조정합니다. 썸네일을 켜면 위로 밀어 올리십시오. 그렇지 않으면 이미지와 텍스트가 티커 내부에 비좁아집니다.
애니메이션 설정 #
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 애니메이션 섹션은 티커가 이동하는 방법을 제어합니다:
- 스크롤 유형: 가로, 세로 또는 가로 스크롤. 가로 슬라이드 한 번에 하나의 항목, 클래식 웹사이트용 뉴스 티커 보세요. 수직은 물건을 위로 굴리고,수평스크롤은 천막처럼 쉬지 않고 움직입니다.
- 자동 재생: 부하 시 회전을 시작합니다.
- 자동 재생 간격: 항목 사이의 시간, 상자에서 3000 밀리 초.
- 호버링 시 일시 중지: 방문자가 티커 위에 마우스를 올려 놓는 동안 티커를 고정하십시오.
- 애니메이션 속도: 각 전환에 걸리는 시간도 기본적으로 3000밀리초입니다.
A 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 네비게이션 섹션은 막대 오른쪽에 이전 및 다음 화살표를 추가합니다. 전환 탐색을 표시하시겠습니까? 켜거나 끄고 설정합니다 탐색 크기 픽셀 단위. 데모는 14 에서 21 까지의 크기로 범프되므로 화살표를 맞추기가 더 쉬워지며,이는 14px 타겟이 까다로운 터치스크린에서 중요합니다.
화살표는 방문자에게 수동 제어 기능을 제공하며, 누군가가 다시 스크롤하고 싶은 링크가 티커에 있을 때 편리합니다.
라벨을 스타일링합니다 #
에서 스타일 탭, the 라벨 섹션 스타일 왼쪽 배지:
- 텍스트 색상: 라벨 텍스트 색상.
- 배경: 라벨 배경색.
- 리본 각도 색상: 라벨을 콘텐츠 영역에 연결하는 작은 삼각형 액센트입니다.
- 테두리 유형 및 테두리 반경: 라벨의 윤곽선 및 모서리 반올림.
- 각도 여백: 리본 각도 주위의 간격.
- 타이포그래피: 라벨 텍스트의 글꼴, 크기, 무게 및 줄 높이.
데모에서는 왼쪽 테두리 반경을 50픽셀로 설정하여 왼쪽 상단 및 왼쪽 하단 모서리를 알약 모양으로 반올림합니다.
내용과 썸네일의 스타일을 지정합니다 #
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 콘텐츠 섹션은 회전하는 제목을 스타일링합니다. 텍스트 색상,호버 색상,배경, 테두리 유형 및 타이포그래피를 얻습니다. The 섬네일 섹션에서는 정사각형 및 둥근 옵션을 사용하여 이미지 너비와 모양을 처리합니다.
호버 색상에 대비를 부여하여 방문자가 각 제목을 클릭할 수 있음을 알 수 있습니다. 모양 옵션을 사용하면 사이트의 나머지 부분에서 이미 사용하는 이미지 스타일과 썸네일이 일치할 수 있습니다.
탐색 화살표를 스타일링합니다 #
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 네비게이션 스타일 섹션에는 일반 및 호버 탭이 있습니다. 화살표 버튼의 텍스트 색상,배경 색상,경계 유형,경계 반경,패딩 및 간격을 설정합니다. 선택한 항목에 따라 화살표는 티커에 혼합되거나 명백한 컨트롤로 눈에 띕니다.
라이브 페이지의 결과 #
앞쪽 끝에 티커가 깨끗한 막대로 나타납니다: 라벨,섬네일, 회전 제목,화살표. 스스로 애니메이션을 시작하고 해당 옵션을 켜두면 호버에서 일시 중지됩니다.
일반적인 사용 사례 #
- 속보 바: 뉴스 또는 잡지 사이트의 상단에 걸쳐 긴급 업데이트를 실행.
- 공지사항 티커: 영웅 공간을 잡아먹지 않고 표면 판매, 이벤트 또는 출시.
- 최근 게시물: 콘텐츠 유형을 사용하여 모든 페이지에 최신 블로그 제목을 표시합니다.
- RSS 수집기: 외부 소스의 헤드라인을 커뮤니티나 업계 허브로 가져오세요.
- 사이드바 티커: 세로 스크롤로 전환하고 위젯을 좁은 열에 놓습니다.
더 완전한 블로그 레이아웃을 보려면 이를 와 페어링하세요 블로그 위젯. 날짜가 있는 공지사항은 을 살펴보세요 타임라인 위젯.
비디오 자습서 #
보고 싶으세요? 이 비디오는 첫 번째 드래그부터 라이브 페이지의 완성된 바까지 News Ticker 위젯을 통과합니다:
자주 묻는 질문 #
코딩 없이 Elementor 에서 뉴스 티커를 추가할 수 있나요?
예. Master Addons News Ticker 위젯을 레이아웃으로 드래그하고 소스를 선택한 다음 Elementor 패널에서 디자인과 애니메이션을 설정합니다. 사용자 정의 코드 관련 없음.
News Ticker 위젯은 어떤 콘텐츠 소스를 지원합니까?
두 번째: 자신의 사이트에서 게시물, 제품 또는 기타 게시물 유형을 가져오는 콘텐츠와 외부 피드 URL의 항목을 표시하는 RSS 피드입니다.
티커가 세로로 스크롤할 수 있나요?
예. 애니메이션 섹션에서 스크롤 유형을 수직으로 설정합니다. 가로 막대의 공간이 부족한 사이드바 또는 좁은 열에 맞습니다.
티커에 게시물 축소판을 어떻게 표시합니까?
디자인 옵션 섹션에서 썸네일 보기를 켭니다. 그런 다음 스타일 탭으로 이동하여 썸네일 너비를 설정하고 사각형 또는 반올림을 선택합니다.
방문자가 티커를 일시 중지할 수 있나요?
예. 애니메이션 섹션에서 호버의 일시 중지를 켭니다. 탐색 표시가 켜져 있으면 방문자가 탐색 화살표가 있는 항목을 단계별로 살펴볼 수도 있습니다.
감싸는 #
News Ticker 위젯은 Elementor 페이지에 모션과 신선한 콘텐츠를 추가하는 빠른 방법입니다. 두 개의 콘텐츠 소스,세 개의 스크롤 유형 및 바의 모든 부분에 대한 스타일링을 통해 속보부터 최신 블로그 헤드라인까지 모든 내용을 둘러볼 수 있습니다 마스터 애드온 위젯 및 확장 플러그인과 함께 제공되는 다른 항목을 보려면 다음을 참조하세요 뉴스 티커 위젯 페이지 데모를 위해. 뉴스 티커는 프로가 필요하므로,확인 가격 페이지 계획을 위해.
