Introducing Image & Gallery Lightbox: Easily Pop Up Images on WordPress!

오늘 우리는 두 가지 강력한 새로운 디자인 기능을 소개합니다 Elementor에 들어가서 어떻게 작동하는지 정확하게 볼 수 있습니다

로드하는 동안로드가 향상되었음을 알 수 있습니다 로딩이보다 빠르고 안정적이되도록 변경했습니다 첫 번째 기능은 라이트 박스이며 이미지가 사이트에 표시되는 방식에 영향을 미칩니다 편집기에 이미지 위젯을 추가하고 이미지를 선택하고, 미디어 파일 링크를 변경하는 것을 잊지 마십시오 그렇지 않으면 라이트 박스가 작동하지 않습니다

이미지를 클릭하면 라이트 박스가 팝업되어 이미지를 전체보기로 표시합니다 갤러리의 라이트 박스를 설정할 수도 있습니다 왼쪽 및 오른쪽 화살표를 클릭하여 갤러리의 모든 이미지를 탐색합니다 몇 달 전에 우리는 비디오 라이트 박스를 소개했습니다 이렇게하면 동영상에 동일한 라이트 박스 팝업을 추가 할 수 있습니다

라이트 박스는 기본적으로 작동하며, 그러나 당신은이 햄버거 아이콘으로 이동하여 그것을 켜고 끌 수 있습니다, 그런 다음 전체 설정을 클릭하고 라이트 박스를 켭니다 이 설정 페이지에서 배경색을 변경할 수도 있습니다 라이트 박스가 열릴 때 표시됩니다 전역 설정에서 라이트 박스를 비활성화하면, 이미지 내용으로 이동하고 라이트 박스를 예로 설정하여 특정 이미지에 대한 라이트 박스를 열어 볼 수 있습니다 그 반대도 마찬가지입니다 따라서 전역 라이트 박스를 설정 한 다음 단일 이미지에 대해 사용하지 않도록 설정할 수 있습니다

우리가 추가 한 또 다른 기능은 Elementor에서 재생 버튼 디자인을 사용자 정의하는 기능입니다 사람들이 내 동영상을 클릭하도록 유도하기 위해 이미지와 재생 버튼을 추가 할 수 있습니다 재생 버튼을 켜면 스타일, 그리고 재생 아이콘의 색상과 크기를 변경하고 그림자를 추가하십시오 세심한 눈을 가진 사람이라면 기본 재생 아이콘 디자인을 개선 한 것을 눈치 챘을 것입니다 뿐만 아니라 여러 다른 Ui 컨트롤 아이콘 이 버전에서는 zip 파일을 사용하여 Elementor 템플릿을 대량 업로드하는 옵션을 추가했습니다

템플릿 파일이 포함 된 zip을 업로드하기 만하면 업로드됩니다 마지막으로 텍스트 그림자를 살펴 보겠습니다 이 기능을 사용하면 멋진 텍스트 그림자 효과를 페이지 헤드 라인에 추가 할 수 있으며, 그들을 더 재미 있고 눈길을 끌기 나는이 제목 위젯을 가지고 있습니다, 당신이 향하는 스타일로 간다면, 텍스트 그림자를 활성화하고 그림자 색상, 흐리게, 수평 및 수직 설정을 조정할 수 있습니다 다음은 WordPress의 제목 텍스트 그림자를 사용하는 4 가지 예입니다

여기에 기본 텍스트 그림자가 있습니다 그런 다음 흐림을 0으로 설정하면이 예에서와 같이 요율표 효과를 얻을 수 있습니다 블러 (Blur)를 사용하여이 라이트 글로우 효과를 만들 수도 있습니다 거리와 흐림을 결합하여 이러한 유형의 구성을 얻을 수 있습니다 컨트롤과 함께 놀고 다른 재미있는 조합으로 놀라게하고, 가능성은 정말로 끝이 없습니다

새로운 버전의 Elementor 버전 16으로 업그레이드 할 것을 권합니다 아래 코멘트에서 가장 좋아하는 기능이 무엇인지 알려 주시기 바랍니다 Elementor의 새로운 업데이트 및 기능 릴리스에 대해 처음으로 소식을 듣고 구독하는 것을 잊지 마십시오 다음 번엔 Elementor의 벤입니다

Jetpack Carousel

JetPack Carousel은 게시물 및 디스플레이에 포함 된 표준 WordPress 갤러리를 사용합니다 이미지 중 하나가 클릭 될 때 그 이미지의 회전 목마

하지만주의 할 점은 사용하는 테마에 맞춤 갤러리 기능이있는 경우 테마 자체가 사이트에 이미지가 표시되는 방식에 영향을 줄 수 있지만 테마가 캐 러셀이 예상대로 작동해야하는 사용자 정의 갤러리 기능이 없습니다 만약 테마 개발자에게 문의하지 말고 갤러리가 테마로 어떻게 처리되는지에 대해 물어보십시오 JetPack 회전식 이미지는 이미지만으로 작동하지만 크기는 다양 할 수 있습니다 표시된 이미지 여기에 105 킬로바이트에서 229 메가 바이트까지 있으며 일부는 초상화이고 일부는 가로입니다

회전 목마 자동으로 화면에 맞도록 이미지를 조정합니다 캐 러셀 이미지를 클릭하거나 방향 화살표를 클릭하면 다음 이미지로 넘어갑니다 왼쪽 아래의 이름은 이미지에 할당 된 이름이며 변경할 수 있습니다 이미지를 편집하여 각 이미지 하단에는 교환 가능한 이미지 파일을 나타내는 메타 데이터 또는 Exif가 있습니다 형식 및 옵션을 사용하여 별도의 브라우저에서 이미지를 여는 전체 화면을 볼 수 있습니다

캐 러셀을 닫으려면 왼쪽 상단의 작은 x를 클릭하십시오 회전식 슬라이드 쇼는 이미지를 볼 때 사이트 방문자에게 좋은 경험을 제공합니다

Create an image carousel: WordPress plugin

오늘의 튜토리얼에서는 WordPress에 Magic Scroll을 설치하는 방법을 보여 드리겠습니다 주요 제품 페이지로 이동하면 오른쪽에 WordPress 아이콘이 표시됩니다

WordPress 용 Magic Scroll 페이지로 이동합니다 Magic Scroll은 완벽합니다 깔끔하게 제한된 공간에서 많은 이미지를 스크롤합니다 그래도 이미지가 아닙니다 텍스트도 스크롤 할 수 있습니다

따라서 홈페이지 슬라이드 쇼가 필요하거나 원하는 경우 최신 뉴스 헤드 라인을 스크롤하십시오 Magic Scroll을 사용하여 둘 다 할 수 있습니다 우리를 시작하려면 우리는 WordPress 플러그인의 데모 버전을 다운로드해야합니다 다음으로, 당신의 워드 프레스로 이동하십시오 관리 영역을 열고 플러그인을 선택하십시오

새로 추가를 클릭 한 다음 업로드를 클릭하십시오 이것은 당신을 데려 갈 것입니다 업로드 페이지로 이동하십시오 컴퓨터에서 방금 다운로드 한 플러그인을 검색하면 모드 워드 프레스 마법 스크롤이라는 zip 파일이 될 수 있습니다 그리고 지금 설치를 선택하십시오

완료되면 선택하십시오 플러그인 활성화 플러그인 아래에 Magic Scroll이 표시됩니다 우리가 스크롤 막대를 추가하면 이미지를 표시하는 가장 쉬운 방법은 갤러리로 첨부하는 것입니다 에 먼저 게시물이나 페이지에 첨부해야합니다

이것은 미디어에서 이루어집니다 섹션 당신은 이미 내 이미지에 어떤 것을 붙인 것을 볼 수 있습니다 나는 마지막 것을 첨부 할 것이다 어떻게 완료되었는지 보여줄 수 있습니다

관련 이미지로 이동하여 첨부를 선택하십시오 첨부하겠습니다 이 이미지를 Magic Scroll 예제라는 포스트에 추가합니다 결과에서 원하는 것을 표시하고 클릭하여 선택하십시오 다음으로 작업중인 페이지 또는 게시물로 이동하십시오

내가 일하고있어 시각적보기가 아닌 HTML보기 수동으로 각 이미지를 추가하는 대신 갤러리 이미지 아이콘을 선택하고 갤러리 탭을 선택하십시오 모든 이미지를 볼 수 있습니다

내 게시물에 첨부했습니다 여기에 나와 있습니다 내 이미지 중 하나에 제목이 있음을 알 수 있습니다 그건 이해가 안되네 그래서 나는 이것을 바꿀거야

이 제목에 나타나는 텍스트 필드가 스크롤 막대의 이미지 아래에 자동으로 나타납니다 일단 저장하면 우리는 이제 갤러리를 삽입 할 수 있습니다 그리고 내 글에서 단어 갤러리를 볼 수 있습니다 모든 이미지 참조가 아닌 등장했습니다 지금까지 해왔 던 것을 미리 들여다 보면 Magic Scroll이 설치되어 있는지 확인하십시오

여기에 추가하고 몇 가지 맞춤 설정을 해봅시다 경계를 추가하고, 속도를 변경하고, 항목을 3에서 4로 늘리고, 변경합니다 스크롤의 방향 이렇게하려면 WordPress 관리 영역으로 돌아 가야합니다 이전에 설치 한 Magic Scroll 플러그인을 선택하십시오 전화가 걸린 페이지로 이동하게됩니다

Magic Scroll 설정 여기서 당신은 당신의 컴퓨터에 실제로 효과적인 변경을 할 수 있습니다 스크롤 바 먼저 스크롤 속도를 5,000으로 변경하여 테두리를 추가 할 것입니다 2 천 명에게 스크롤을 더 빨리 할 수 ​​있습니다

다음으로 표시되는 이미지를 증가시킵니다 3 ~ 4 명 마지막으로 방향을 바꾸어 내 스크롤이 오른쪽이 아닌 바닥 이 페이지를 변경하면 항상 기억합니다 설정을 저장합니다

이제 웹 페이지를 새로 고침하면 스크롤 막대가 변경된 것을 볼 수 있습니다 방향과 속도가 훨씬 빠릅니다 테두리가 추가 된 것을 볼 수도 있고 3 대신에 4 개의 이미지가 한 번에 표시됩니다 어떻게 확신 할 수 없다면 스크롤 막대를 표시하려면 Magic Scroll Examples 페이지로 이동하십시오 원하는지 여부 이미지 나 텍스트를 스크롤하려면이 페이지에서 원하는 모양의 아이디어를 얻을 수 있습니다

모든 HTML 예제 및 더 많은 코드는 통합 페이지에서 찾을 수 있습니다 그리고 잊지 마세요 Magic Scroll 설정 페이지 모든 옵션을 시도하여 자신의 WordPress에 가장 적합한 것이 무엇인지 확인하십시오 웹 사이트

모든 우리 웹 페이지의 맨 위에 Contact Us 링크가 있습니다 그래서이 비디오 자습서가 Magic Scroll에 관한 모든 질문에 답변하지 않았거나 질문이있는 경우 다른 도구 중 하나에 대해 알아보십시오 메시지를 보낼 때 온라인 상태가 아닌 경우 끝까지, 우리는 바로 그 다음날 당신에게 돌아갈 것입니다 그리고 그것으로 우리는이 마지막에 도달하게됩니다 지도 시간

지켜봐 줘서 고마워

How to Add a Beautiful Gallery Carousel in WordPress without Jetpack

WPBeginner를 시청 해 주셔서 감사합니다 오늘은 아름다운 것을 추가하는 방법을 보여 드리겠습니다

jetpack없이 WordPress의 갤러리 회전 목마 참고 : 이것은 WordPresscom의 Jetpack 플러그인을 사용하지 않으려는 사용자를위한 것입니다 만약 너라면 귀하의 사이트에 연결되어 있다면이 회전식 슬라이드 쇼가 필요하지 않습니다 먼저 Jetpack없이 플러그인 갤러리 캐 러셀을 설치하고 활성화하십시오

설정 -> 미디어로 이동하면이 섹션이 표시됩니다 검은 색 또는 흰색 배경을 원할 경우 전체 크기로 이미지를 표시하려는 경우 선택하십시오 회전식 슬라이드 쇼 및 메타 데이터를 표시하려는 경우 그런 다음 페이지 나 게시물을 만들고 갤러리를 추가 할 수 있습니다 페이지에 원하는 모든 이미지가 있으면 게시를 클릭하십시오

이제 사이트 앞쪽으로 가서 실제 상황을 볼 수 있습니다 이미지를 클릭 할 수있는 방법을보고 회전 목마를 시작하고 화살표 버튼을 사용할 수 있습니다 길을 찾다 X 또는 여기를 클릭하여 빠져 나올 수도 있습니다 이 비디오가 마음에 들었고 도움이 되셨기를 바랍니다

그랬 으면 아래 버튼을 클릭하고 의견을 남겨주세요 더 유용한 동영상을 받고 싶다면 채널을 구독하는 것을 잊지 마세요 WordPress에 대한 유용한 정보를 보려면 WPBeginner를 확인하십시오

Soliloquy Carousel Addon

안녕하세요 Soliloquy에 오신 것을 환영합니다

이 비디오에서 우리는 Soliloquy의 회전 목마 추가 기능을 살펴볼 것입니다 캐 러셀 애드온 슬라이더를 반응 형 회전 장치로 전환 할 수 있습니다 너비를 설정하기 만하면됩니다 여백, 슬라이드 수 등을 고려해야합니다 우리는 고통을 WordPress 슬라이더 생성에서 제거하고 쉽게 만들었습니다

오늘 독주회를 시작하고 몇 분 안에 아름다운 슬라이더를 만들기 시작하십시오

How to Add Image Carousel in WordPress With Elementor

– 얘들 아, 엘리멘터의 니라 오늘 우리는 이미지 회전식 위젯을 살펴볼 것입니다

그것으로 흥미롭고 역동적 인 갤러리를 추가 할 수 있습니다 귀하의 페이지로 이동하십시오 이 페이지에서 볼 수 있듯이, 우리는 갤러리 이미지 회전 목마, 3 열 회전 목마, 로고 스트립 회전 목마 시작하려면 요소로 편집 버튼을 클릭하십시오 먼저, 검색 창에서 위젯을 검색해 보겠습니다

파란 선이 표시된 곳으로 드래그하십시오 이제 위젯이 배치되면, 이미지 회전식 메뉴 영역 수정이 표시됩니다 콘텐츠, 스타일 및 고급 탭이 있습니다 콘텐츠 영역에서 모든 권한을가집니다 이미지 회전식 콘텐츠 위에 콘텐츠 영역에는 이미지 회전식 메뉴 옵션이 있습니다

및 추가 옵션 이미지 회전식 메뉴 옵션에서 이미지를 추가 할 수 있습니다 WordPress 갤러리를 사용하여 미디어 라이브러리에서 이제 이미지가 페이지에 표시되는 것을 볼 수 있습니다 이미지 크기가 있습니다

여기에 나열된 이미지 크기 웹 사이트에 대해 설정 한 이미지 크기 설정> 미디어에서 여기에 미리보기 이미지, 중간 이미지, 보통 이미지, 크고, 완전하며, 사용자 정의 할 수 있습니다 이제 사용자 정의하면 너비를 설정할 수 있습니다 및 높이, 그것을 적용하십시오 이제 슬라이드를 선택하여 보여줄 수 있습니다 하나 골랐어

이미지 스트레치는 이미지를 늘리는 것을 의미합니다 위젯에서 항해 화살표와 점 표시 여부를 선택할 수 있습니다 또는 화살표 만, 점 만 또는 없음, 컨베이어에 링크를 추가 할 수 있습니다

미디어 파일 링크를 선택할 수 있습니다 모든 이미지를 미디어 파일에 연결하며, 또는 맞춤 URL 그것들은 이미지 회전 목마 옵션들이었습니다 추가 옵션으로 이동합니다 마우스를 올리면 일시 중지할지 여부를 선택할 수 있습니다 또는 페이지를 입력 할 때 자동 재생, 그것이 스스로 연주를 시작하든, 자동 재생 속도, 무한 루프, 효과, 슬라이드 또는 페이드, 애니메이션 속도, 또는 방향을 지정합니다

괜찮아 그것들은 이미지 회전 목마의 콘텐츠 옵션들이었습니다 이제 스타일 옵션으로 넘어갈 것입니다 탐색 스타일을 완벽하게 제어 할 수 있습니다 및 이미지 스타일

탐색 스타일에서 화살표 스타일을 설정할 수 있습니다 및 도트 스타일 화살표 스타일 옵션 아래에서 선택할 수 있습니다 회전 목마 안의 화살표 위치, 또는 그 바깥 쪽, 그리고 당신은 화살표 크기를 선택할 수 있습니다, 및 그것의 색깔 도트 스타일 옵션에서 동일한 옵션을 사용할 수 있습니다

도트의 위치는 회전식 바깥 쪽을 의미합니다 또는 회전 목마 안에, 그리고 도트의 크기, 및 그것의 색깔 이제 이미지 스타일 옵션 경계 유형이 있습니다 여기서 이미지의 테두리 유형을 선택할 수 있습니다

및 그 폭, 당신의 회전 목마에 매우 시원한 터치를주는, 및 그것의 색깔, 및 경계 반경 20 점을 주자 보시다시피, 회전 목마의 모서리가 둥글게 보입니다 그것들은 이미지 회전 목마의 스타일 옵션이었습니다 이제 회전식 캐 러셀을 설정하는 방법을 보여 드리겠습니다

3 개의 열로 구성됩니다 먼저 위젯을 다시 검색해 보겠습니다 그것을 페이지로 드래그하십시오 이미지를 삽입 해 봅시다 크기를 설정하십시오

이제 슬라이드를 표시하려면 3 단계로 남겨 두십시오 스크롤하여 스크롤하면, 우리는 그것을 줄 것이다 이미지 스트레치를 위해, 우리는 그것을 no로 남겨 둘 것이다 그리고 탐색, 우리는 화살과 점을 둘 다 남겨 둘 것입니다 이제 더 큰 공간을 설정하는 방법을 보여 드리겠습니다

이미지들 사이 스타일 탭으로 넘어갈 것입니다 이미지 스타일 옵션을 볼 수 있습니다 간격 옵션이 추가되었습니다 여기에는 기본값이 있습니다

또는 사용자 정의 할 수 있습니다 맞춤 설정은 항상 20시에 열리 며, 그러나 당신은 더 큰 공간을 설정할 수 있습니다, 또는 더 작은 것 그리고 이제 저는 그들에게 약간의 경계 반경을 줄 것입니다 미리보기 모드로 설정해 보겠습니다 우리가 간다

이 비디오를 즐겼 으면합니다 더 많은 비디오 및 자습서를 보려면, YouTube 채널 구독 또는 docselementorcom으로 방문하십시오

WordPress video slider with thumbnails

WordPress에 로그인 admin 플러그인 -> 새로 추가를 클릭하십시오 플러그인 업로드를 클릭하십시오

zip 파일로 가지고있는 프로 버전을 선택하십시오 지금 설치를 클릭하십시오 플러그인 활성화를 클릭하십시오 이제 고토 메뉴 왼쪽에있는 비디오 슬라이더와 미리보기 이미지 비디오 슬라이더 관리를 클릭하십시오 새로 추가를 클릭하십시오

비디오 슬라이더 정보를 채우고 저장하십시오 이제 미디어를 추가하려면 미디어 관리를 클릭하십시오 비디오 / 이미지 등을 선택할 수 있습니다 이제 여기에서 비디오 사이트 또는 사용자 정의 비디오를 선택할 수 있습니다 사용자 정의 비디오를 추가하고 mebm / mp4 파일 등을 선택할 수 있습니다

비디오 또한 대체 지원 프런트 엔드에 비디오 슬라이더를 추가하기 전에 미리 볼 수 있습니다 이제 프런트 엔드에이 비디오를 추가하십시오 촬영 코드를 복사하여 페이지 / 포스트에 붙여 넣기 만하면됩니다 비디오를 시청 해 주셔서 감사합니다