Hamburger Menu with Elementor Page Builder and JetBlocks Add-on

안녕하세요,이 튜토리얼을 환영합니다! 이 비디오에서 우리는 한 번 살펴볼 것입니다 엘리멘터 페이지 빌더를 사용하여 유사한 햄버거 메뉴를 만드는 방법 이 햄버거 아이콘을 클릭하면 보시다시피 메뉴의 내용이 팝업의 일종으로 나타납니다

엘리먼트 페이지 빌더를 사용하여 나중에 사용자 정의 할 수있는 모양 비슷한 햄버거 메뉴를 만들려면 사용자 정의 머리말 및 꼬리말 작성에 액세스해야합니다 몇 가지 방법으로이 가능성을 얻을 수 있습니다 첫 번째는 무료 솔루션을 찾는 것입니다 일부 무료 WordPress 플러그인을 찾는 의미 그러나 항상 안전한 해결책은 아닙니다 아무도 완벽한 성능과 기술 지원을 보장 할 수 없으므로 다른 방법은 Elementor Pro에 가입하는 것입니다

그리고 사용자 정의 머리말과 꼬리말을 편집 할 수 있습니다 세 번째 것은이 비디오에서 사용하는 것입니다 그리고 그것은 Monstorid2 WordPress 테마를 받고있다 그러면 맞춤 헤더와 바닥 글을 만들 수 있습니다 그리고 다른 이점들 Jet 플러그인과 같은 12 가지 Elementor를위한 훌륭한 기능 및 성능이 뛰어난 애드온은 무엇입니까? 또한 당신은 수백 가지를 얻고 있습니다

웹 사이트 어디에서나 사용할 수있는 기성품 페이지 및 섹션 한 곳에서 액세스 할 수 있습니다 Monstroid2 WordPress 테마에 더 많은 기능이 있습니다 이 물건을 확인하는 것을 잊지 마라 그리고이 비디오 아래의 설명을 뽑은 링크를 따라 가십시오 Monstroid2를 사용하지 않는다면 하나의 추가 플러그인이 필요할 것입니다

그것은 햄버거 메뉴를 만드는 데 도움이 될 것입니다 이 플러그인은 Elementor 머리글 및 바닥 글 추가 기능인 JetBlocks라고합니다 이 플러그인에는 여러 위젯이 함께 제공됩니다 기능적인 머리말과 꼬리말을 만드는 데 필요한 것입니다 JetBlocks 플러그인에 대한 자세한 내용을 보려면 설명의 링크를 따르십시오

templatemonstercom의 라이브 데모 및 제품 페이지에 액세스하려면 Monstroid2를 사용하는 경우 Monstroid2에있는 모든 Jet 애드온에 액세스 할 수있는 장소가 있습니다 2 Monstroid2 레이블을 클릭하기 만하면됩니다 플러그인으로 이동하면 설치되어 활성화 된 플러그인을 볼 수 있습니다 Monstroid2를 사용하지 않는다면 – 별도로 JetBlocks 플러그인을 다운로드 할 수 있습니다 설명의 링크를 클릭하면 실제 햄버거 메뉴 만들기에 뛰어 들자

이제 헤더에 액세스하여 사용자 정의를 시작하는 방법에는 여러 가지가 있습니다 도서관에서 올 수 있습니다 모든 테마 부분에 액세스 할 수있는 곳 또는 쉬운 방법으로 할 수 있습니다 요소로 편집을 가리키면됩니다 Monstroid2를 사용하고 있다면 – 머리말 편집, 꼬리말 편집을 보게 될 것입니다

Elementor로 헤더 편집을 클릭하면 Elementor 편집기로 이동합니다 헤더를 사용자 정의 할 수있는 곳 그리고 그것이 Monstroid2라면 엘리터 에디터에 들어가면 마술 버튼을 볼 수 있습니다 수백 가지와 같은 아이템 컬렉션입니다 합계로 그들은 거의 천개의 항목을 만든다 당신이 그들 모두에 접근 할 수 있다는 것은 아름답게 디자인되어 있고, 빠른 로딩입니다

그리고 여기있는 모든 요소를 ​​사용할 수 있습니다 여기에는 페이지, 머리글, 바닥 글, 섹션, 아카이브 및 단일 페이지가 포함됩니다 따라서 헤더가 이미 생성되었으므로 여기서 우리는 이미이 햄버거 메뉴를 볼 수 있습니다 햄버거 메뉴를 만드는 데 사용되는이 위젯은 햄버거 패널이라고합니다 그리고 그것은 실제로 작은 두 가지로 이루어져 있습니다

첫 번째는 토글입니다 햄버거 아이콘이있는 버튼은 순서대로 클릭합니다 햄버거 패널이 나타나려면 패널은 이제 오른쪽에 나타납니다 패널은 실제로 메뉴가 포함 된이 섹션 또한 모든 스타일 설정에 액세스 할 수 있습니다 그리고 나는 그것들을 자세히 공유 할 것입니다 당신이 Elementor의 스타일 설정에 익숙하고 자신이 이것을 이해할 수 있다고 확신합니다 여기에서 패널 너비를 변경할 수 있습니다

사실 사실에주의를 기울여주세요 이 햄버거 패널의 내용 단순한 템플릿입니다 이 패널 내부의 내용을 편집하려면 여기에 템플릿을 추가해야합니다 웹 사이트에 이미 생성되어 이미 생성 된 템플릿에 액세스 할 수 있습니다 그리고 선택한 현재 템플릿을 편집하려면 이 햄버거 패널의 경우 템플릿 편집 버튼을 클릭하기 만하면됩니다

이제 Elementor 편집기로, 다른 창으로 이동합니다 이 템플릿을 실제로 편집하고 모양을 바꿀 수있는 곳 그래서 여기에있다 이 섹션의 배경색을 변경해야하기 때문에 실제로 아무것도 볼 수 없습니다 그렇게 텍스트가 흰색이고 원하는 부분의 배경이 투명합니다 우리는 패널의 색상을 변경할 수 있기를 원합니다

햄버거 메뉴에서 일하는 동안 여기에서 이 템플릿 설정에서 배경을 투명하게 유지합니다 그래서 여기 당신이 원하는 대로이 템플릿을 사용자 정의 할 수 있습니다 또한 원하는 유형의 모든 유형의 요소를 추가 할 수 있습니다 예를 들어 간단한 위젯을 여기에 놓아 보겠습니다 Banner라고 불리는 JetElements 플러그인의 일부입니다

JetElements 플러그인에 대해 가장 많이 들었던 것을 들었을 것입니다 그리고 Elementor를 위해 끝났습니다 그리고 당신은 그것을 추측했습니다 그것은 Monstroid2와 절대적으로 무료입니다 뿐만 아니라 12 개의 다른 Jet 애드온 그래서 여기에 배너 위젯을 추가했습니다

그리고 보시다시피 거기에 아주 잘 앉습니다 이제 우리가 할 일은이 템플릿을 저장하는 것입니다 이제 토글 아이콘을 클릭하면 여기서 모든 내용을 볼 수 있습니다 우리가 템플릿에 넣은 것 약간의 패딩 작업을 해봅시다 저기있어

모바일보기 또는 태블릿보기에서 작동하는 방식을 살펴 보겠습니다 데스크톱 모드에서 완벽하게 작동합니다 하지만 태블릿 모드에서도 훌륭하게 작동합니다 그리고 모바일보기 패딩이나 여백에 대해 조금이라도 작업하고 싶다면 태블릿 모드 또는 모바일 모드를 선택하는 동안 모든 것을 할 수 있습니다 Elementor 설정에서 초등학교에서 바로 패딩 값과 마진 값을 설정하십시오

휴대 기기 및 태블릿 기기에서 완벽하게 잘 어울립니다 그래서 거의 Elementor page builder 및 JetBlocks 플러그인을 사용하여 햄버거 메뉴를 만드는 방법 Monstroid2 WordPress 테마, JetBlocks 플러그인을 확인하는 것을 잊지 마십시오 우리 채널을 구독하는 것을 잊지 마세요 시청 해주셔서 감사합니다!

Template Elementor WordPress | Como salvar importar e exportar templates – Aula 5

안녕하세요 여러분 여기 어떻게 확실한 워드 프레스 코스에서 다른 수업을 위해 여기에서하고 있습니까? 이 수업에서는 요소 또는 무료 요소 또는 템플릿을 사용할 것입니다 또한 프리미엄 요소 또는 템플릿에 대해 알아야 할 모든 것을 가르쳐 줄 것입니다

요소에 대한 템플릿 또는 내가 템플릿 템플릿을 저장하는 방법을 가르쳐 것입니다 템플릿을 저장하고 마지막에 템플릿으로 할 수있는 작업은 매우 완전한 교훈입니다 그리고 그것은 elementro와 함께 일하고 싶은 당신에게 많은 지식을 추가 할 것입니다 wordpress 이것은 아직 액세스하지 못하는 br를 가진 확실한 wordpress 플랫폼입니다 몇 가지 무료 및 유급 수업을 알고 있으므로 여기에 대한 계획을 세웠습니다 지금까지 엘리먼트에서 템플릿이 무엇인지를 보여주고 지금까지는 텍스트 블록을 가져 와서 프로덕션 환경으로 끌어다 놓는 모듈 위젯 요소에서 또는 이미지 모듈을 가져와 아이콘 모듈을 가져오고 놓으십시오 그러면 블록의 끝에 페이지 블록을 끝까지 조립할 것입니다

템플릿은 무엇입니까? 템플릿은 단지 블록 집합입니다

Add Instagram Feed to WordPress Page with Elementor Page Builder

안녕하세요,이 튜토리얼에 오신 것을 환영합니다 이 비디오에서 나는 당신에게 어떻게 보여줄 것인가? 의 도움으로 워드 프레스 페이지에 Instagram 피드를 추가하십시오

엘리멘터 페이지 빌더 이를 위해 JetElements 부가 기능이 필요합니다 Elementor의 훌륭한 플러그인이며 JetElements에 대해 더 많이 배울 수 있습니다 이 비디오의 설명에있는 링크를 클릭하십시오 그러니 처음에는 요소 패널을 열고 Instagram 위젯을 검색하십시오

이 위젯은 안으로 들어갑니다 JetElements 애드온 그리고이 위젯을 잡고 새 섹션에 놓습니다 여기에 몇 가지 옵션이 제공됩니다 태그가 추가 된 특정 해시 태그가있는 사진 또는 특정 계좌

따라서 해시 태그를 입력 할 때 어떤 일이 일어나는지 보여 드리겠습니다 이리 따라서 해시 태그가 없으면 WordPress로 입력하십시오 wordpress 해시 태그가있는 모든 이미지를 추출합니다 그럼 네가 원한다면 내 사진을 선택하는 특정 Instagram 계정의 사진 표시 이 드롭 다운과 사용자 이름 입력란에 귀하의 이름을 입력하십시오

계정 예를 보여주기 위해 나는 TemplateMonster의 사용자 이름을 사용할 것이다 공식 Instagram 계정 사용자 이름을 복사하고, Elementor로 돌아가십시오 편집기로 복사 한 다음이 필드에 붙여 넣으면 이미지가 추출됩니다

특정 계정 우리의 경우 TemplateMonster 캐시에 있습니다 제한 시간 : 분, 시간, 일, 주 또는 없음 즉,이 피드는 매일, 매시간, 매일 또는 매주마다 자동으로 업데이트됩니다

여기 있네 이 그리드에서 사진의 크기를 설정하십시오 좋아, 여기에있는 Instagram 게시물의 번호입니다 표시됩니다 지금은 6 명이지만 원하는 경우 더 쉽게 할 수 있습니다

좋아, 여기있어 원하는 사진을 연결할지 여부 또는 사진 연결 여부를 선택하거나 캡션 사용 가능 여부 이제 자막이 없다는 것을 알 수 있습니다 여기에 사진의 캡션을 사용하도록 선택한 경우 캡션 길이 활성화 할 수 있습니다

댓글 및 좋아요 수를 표시하여 여기에 표시됩니다 그리고 여기에 간다 레이아웃 설정 레이아웃 유형을 선택하면 선택할 수 있습니다 벽돌, 그리드 및 목록을 제공하므로 세 가지 옵션이 있습니다 지금 우리는 스타일 탭으로 가서이 그리드 스타일을 바꿀 수 있습니다

그래서 여기에 항목 높이와 항목 여백을 설정합니다 나는 여백을 조금 작게 만들 것이다 패딩을 늘릴 수도 있습니다 당신 테두리를 설정할 수 있습니다, 테두리 반지름을 추가 할 수 있습니다 다음은 캡션을 누르면 메타가 나타납니다

이 경우 메타는 좋아요 및 코멘트 이제 오버레이 탭에서 오버레이를 표시할지 여부를 설정할 수 있습니다 호버에서만 또는 항상 거기에 있기를 원합니다 배경 유형 옵션을 사용하면 콘텐츠 순서에 따라 오버레이의 색상을 선택할 수 있습니다 및 정렬 탭을 사용하여 캡션 및 메타가 이동하는 순서를 변경할 수 있습니다 알았어

이 비디오는 Instagram 피드를 추가하는 방법에 관한 내용이다 Elementor page builder 및 JetElements의 도움으로 WordPress 페이지로 이동하십시오 부가 기능 이 비디오가 마음에 듭니다 도움이 되었기를 바랍니다

그것이 있었다면 엄지 손가락을 올려 채널에 가입하십시오 지켜봐 줘서 고마워

Hestia & Elementor: How To Edit Or Recreate Hestia With A Page-builder

WordPress 웹 사이트에서 Hestia 테마를 사용하면 앞에있는 내용을 편집 할 수 있습니다 정보 섹션이 활성화 된 경우에만 Elementor와 같은 페이지 작성 도구가있는 페이지로 이동하십시오

그 중 Pro 버전의 테마를 사용하면 페이지 전체를 복제 할 수 있습니다 같은 페이지 빌더, 섹션별로 안녕 모두, 내 이름은 ThemeIslecom의 Robert이고이 비디오에서는 모든 것을 보여 드리겠습니다 당신은 단계적으로해야합니다

더군다나, 나는 Elementor와 함께 Hestia의 섹션을 복제하는 방법에 대한 힌트를 제공 할 것입니다 준비된? 시작하자 Elementor로 전체 앞 페이지를 복제하는 가장 쉬운 방법은이 단축 코드를 사용하는 것입니다 액세스 할 수있는 문서에서 쉽게 복사하여 붙여 넣을 수 있습니다 설명 상자

먼저 Page Builder Full-Width 레이아웃으로 새 페이지를 만들고 요소로 편집을 클릭하십시오 그러면 Elementor의 편집기 영역이 열립니다 새 섹션 추가를 클릭하고 전체 너비 레이아웃을 선택하십시오 새로 추가 된 섹션에 새로운 Shortcode 위젯을 추가하십시오 여기서 우리는 각 섹션에 대한 단축 코드 중 하나를 입력해야합니다

개별 연락처 페이지의 연락처 섹션을 사용하십시오 (예 : 우리에 관한 페이지 등등 원하는만큼 여러 번 사용할 수 있습니다 추가 CSS 조정을 위해 모든 섹션을 전체 너비로 만들려면 패딩이 필요하지 않습니다 각 섹션과 열에 대한 Elementor의 작은 변화 이제 레이아웃 탭으로 이동하여 내용 너비를 전체로 설정 한 다음 머리 위로 넘기십시오

고급 탭으로 이동하고 요소 스타일 열의 여백 및 여백을 0으로 설정합니다 각 섹션에 대해이 작업을 수행하거나 단순히 첫 번째 섹션을 복제 한 다음 단락 코드를 변경하십시오 이내에 표제를 추가하려면 표제 유형 h2 및 h5가있는 요소 표제 위젯을 사용하거나 가능한 한 빨리 원본과 완전히 똑같은 모양을 유지해야합니다 "HTML 편집기"위젯의 코드를 따르십시오 위젯의 고급 설정의 CSS 클래스 필드에이 클래스를 넣습니다

이 섹션의 내용을 변경하려면 여전히 사용자 정의 프로그램으로 돌아 가야합니다 Elementor를 사용하여 열심히 일 해보고 처음부터 페이지를 만들려면 다음을 수행 할 수 있습니다 큰 제목 섹션부터 전체 페이지를 복제하십시오 이 섹션에 대한 몇 가지 기본 지침을 제공 할 것이며, 나만의 상상력을 사용할 수 있습니다 내가하는 일을주의 깊게 따라 헤세이아를 복제하려면 섹션별로

새로운 페이지를 추가하고 그 페이지를 Elementor로 편집 해 봅시다 이 팝업에서 예를 클릭하고 peg 작성기 전폭 레이아웃이 선택되어 있는지 확인하십시오 여기 단일 열이있는 새 섹션을 추가하고 높이를 최소 80 %로 설정하십시오 스타일 탭으로 이동하여 이미지를이 섹션의 배경으로 업로드하십시오

배경 오버레이는 검정색이어야하며 여기에서 조정할 수있는 불투명도가 있어야합니다 그런 다음 제목 요소를 검색하여 섹션의 가운데로 드래그하고 정렬합니다 텍스트를 화면 중앙에 놓고 색상을 흰색으로 변경하십시오 제목 아래에 내부 섹션 요소를 추가하고 버튼 위로 드래그합니다 버튼을 오른쪽으로 정렬하고 복사 한 다음 사본을 오른쪽 열로 드래그하고 이번에는 버튼을 왼쪽으로 정렬하십시오

이 섹션을 위해 남아있는 또 하나의 점은 복제함으로써 쉽게 만들 수있는 자막입니다 제목과 크기 조정 등 진정해? 나는 당신이 이미 다음에 무엇을 알고 있으며 서비스를 복제하는 방법에 대한 모든 단서를 가지고 있다고 생각합니다 섹션, about us section 등등 그렇다면, 나는 그것을 시도해 볼 것을 권유합니다

질문이 있으시면 라이브 웹 사이트 링크와 함께 아래에 의견을 남기십시오 나는 그것을 행복하게 보게 될 것이다 YouTube의 테마가 최신인지 확인하고 YouTube에서 더 많은 정보를 얻으실 수 있습니다 워드 프레스 다음 비디오에서 만나요

Comment utiliser le CSS avec Elementor gratuit ?

CSS로 Free Elementor를 사용자 정의하는 방법 이 비디오에서 보도록하겠습니다 안녕하세요

webmarketing-beginnerfr, 제 이름은 마크입니다 이 비디오가 마음에 들면 망설이지 말고 주저하지 말고 구독하거나 댓글을 쓰십시오 그러는 동안 우리는 가야합니다 따라서 가장 먼저 할 일은 우리 웹 사이트입니다

워드 프레스와 여기에 우리가 페이지에 있다면 우리는 새 페이지를 만들 것입니다 우리는이 페이지에 제목을 부여해야합니다 예를 들어 내 텍스트라고합니다 우리는 그 초안을 기록 할 것입니다 우리가 수정할 수 있도록 페이지가 생성되었습니다 Elementor와 여기에 우리가 제공하는 다양한 옵션이 있습니다

Elementor 보시다시피 여기에 통합 할 수있는 모든 요소가 있습니다 드롭을 끌어서 그래서 우리가 할 수있는 것을 보여 드리겠습니다 이론적으로는 계획 대로만 CSS에 액세스합니다 프로 버전

그래서 우리는 예를 들어 텍스트를 취할 것입니다 이것이 제가 작성한 텍스트입니다 고급 탭으로 이동합니다 우리는 그에게 ID 또는 클래스를 줄 것입니다 예를 들어 여기서 우리는 Class Elementor라고 말하십시오

일단 그것이 끝나면 텍스트와 우리 클래스, 초안을 저장할 수 있습니다 페이지 미리보기를 통해 일반적으로 표시되는 페이지입니다 요소에 클래스를 부여 했으므로 해당 요소에 속성을 부여 할 수 있습니다 디스플레이의 다른 형식 이를 위해 우리는 다시 WordPress blog

우리는 페이지를 떠날 것이고 우리는 여기에 올 것이다 그래서 WordPress 메뉴 레벨에서 메뉴에서 선택할 수 있습니다 모양 "사용자 정의"옵션 일단 옵션에 들어가면 "사용자 정의", 여기에 모든 추가 CSS가 있습니다 실제로 CSS입니다

전체 사이트에 사용됩니다 따라서 Elementor 요소는 다음과 같이 수정할 수 있습니다 클릭하면이 부분에 CSS가 추가됩니다 그래서 내가 내려갈거야 아래로 내려 가면 클래스로 시작하여 포인트

"Elementor"를 표시 할 것입니다 괄호와 여기에 예를 들어 우리가 측근을 원한다고 말할 수 있습니다 텍스트 주위 우리는 측근을 검게 칠 것이다 우리는 무엇을 추가 할 수 있습니까? 우리는 할 수 있었다

예를 들어 파란색 배경을 추가하십시오 음, 목표는 무언가를하지 않는 것입니다 예외적 인 것은 CSS를 변경할 수 있다는 것을 보여주는 것입니다 Elementor의 프로 버전이 필요하지 않습니다 그래서 여기, 후에, a 일단 그렇게하면 "게시"를 클릭하고 지금 우리는 페이지로 돌아갈 수 있고 우리는 그것을 새롭게 할 것입니다

그게 전부입니다 그래서 당신은 엘리멘터의 CSS가 수정되었습니다 이 동영상에 모두 포함됩니다 그래서 나는 희망한다 이 비디오가 마음에 들면 주저하지 말고 그녀가 너를 더 가질거야

좋아하는 사람, 구독 또는 댓글 달기를 망설이지 말고 그 동안 곧 다음 비디오를 보러 갈께 차오, 차오

How To Add Custom Fonts To Elementor Free Or Pro For Better WordPress Webdesign

웹 사이트를 눈에 띄게 만드는 가장 쉬운 방법 중 하나는 맞춤 글꼴을 추가하는 것입니다 이 비디오 자습서 저는 Elementor의 무료 버전에 사용자 정의 글꼴을 추가하는 방법을 보여 드리겠습니다

Elementor Pro의 천체 자존심 프로 버전과 함께 좋아, 그럼 WordPress가 그렇게 작동하는 방식으로 사용자 정의 글꼴에 대해 조금 이야기 해 봅시다 서로 다른 변수가 많기 때문에 이해할 수 있습니다 상황 나는 무례하다 나는 비디오를 찍은 후에 실제로 이것을 찍고있다 나는 방금 기억했다

나는 완전히 편집자를 잊어 버렸다 내 이름은 안녕하세요 WordPress를 만드는 WPCraftercom의 아담입니다 비 기술적 인 사람들을위한 튜토리얼 동영상 버튼을 놓치고 싶지 않으면 벨을 클릭하십시오

언제 가지고 있는지 알려줍니다 새 비디오 내가 이야기 한 내용은 비디오 설명 상자에 링크됩니다 지금 아래로 지금 우리의 일정한 Lee 일정한 프로그램에 이렇게 언제 다시 말하고 있 었는가 사용자 정의 글꼴 사용에 관해서는 두 가지 주제가 있습니다 WordPress 웹 사이트 그리고이 경우 Elementor가 작동하는 페이지 작성기가 있습니다 두 가지 모두에 대해 사용자 정의 글꼴 추가와 테마를 만들고 페이지 빌더에 추가 한 다음 두 가지 유형의 사용자 정의 글꼴 기존 사용자 정의 글꼴을 사용하면 사용자 정의를 제공하는 여러 웹 사이트가 있습니다

당신이 다운로드 한 사용자 정의 글꼴을 구입할 수있는 글꼴 실제로 귀하의 웹 사이트에 업로드 한 다음 타입 킷 글꼴이라고하는 다른 것이 있습니다 type kit는 서로 다른 두 가지 서비스에 글꼴을 제공하는 서비스입니다 우리가 가지고있는 Elementor의 두 가지 버전이 있습니다 무료 버전 인 Elementor를 무료로 다운로드하여 여러 버전에서 사용할 수 있습니다 사람들은 실제로 50 만 명의 사람들이고 그 다음에 Pro 버전이 추가되었습니다 Elementor에 대해 살펴보고 다양한 시나리오에서이 모든 것에 대한 최상의 옵션을 살펴 보겠습니다 그 다음에 어떻게해야하는지 알게 될거야 그래서 내가 말하려고하는 세 가지 사용자 정의 글꼴입니다

이것은 무료 플러그인 사용자 정의 유형 키트입니다 글꼴 또한 무료 플러그인이며 새롭게 출시 된 Elementor Pro에는 사용자 정의 글꼴이 내장되어 있으므로 내가 맞춤 글꼴을 가지고 가장 좋은 길로 인도 해 줄 방법을 보여 주겠다 그렇게하면 여기에 사용자 정의 글꼴이라는 무료 플러그인이 있습니다 이제이 플러그인이하는 일이 있습니다 사용자 정의 글꼴을 추가하는 인터페이스를 제공하며 Elementor와 함께 무료 버전을 사용할 수 있습니다

그리고 유료 버전뿐만 아니라 그것은 또한 아스트라 테마와 함께 작동합니다 그래서이 플러그인 Elementor의 무료 버전을 사용하는 사람에게 이상적입니다 Elementor의 무료 버전이며 사용자 정의 글꼴을이 스킨에 연결하고 쉽게 만들 수 있습니다 이제 아스트라 테마 사용자라면로드 할 수 있기 때문에 더 좋습니다 한 위치에 사용자 정의 글꼴이 있고 테마와 사용 가능한 글꼴이 있습니다 Elementor에서이 방법에 대해 정말 멋진 점은 테마를 변경 한 경우입니다

사용자 정의 글꼴은 여전히로드되고 여전히 Elementor의 무료 버전에서 작동합니다 이제는 사용자 정의 유형 키트 글꼴에이 플러그인이 사용됩니다 바로이 플러그인과 같습니다 이 키트를 제외하고는 Elementor의 무료 버전 인 elemental에서 작동합니다 Pro는 물론 물론 Astra Theme 사용자라면 추가 혜택을 얻을 수 있습니다 또한 지금 막 출시 된 WordPress 테마로 이월됩니다 Elementor Pro 새로운 업데이트 그게 사용자 정의 글꼴을 가지고 있지만 그것은 Elementor Pro만을위한 것입니다

그래서 당신이 가지고 있다면 당신에게 알려줍니다 Elementor Pro와 당신은 당신이 원하는 곳으로 가길 원하는 방식으로 Astra Theme를 사용하지 않고 있습니다 플러그인 사용자 정의 글꼴을 사용하거나 Elementor Pro에서 제공하는 것을 사용하고 싶습니다 Elementor Pro에서이 블로그 게시물에 대해 좋아하는 것들 중 하나는 기능은 그들이 여기에 당신의 글꼴을 가지고 몇 가지 모범 사례의 목록을 가지고있다 Elementor에 넣으므로이 모범 사례는 관례에 계속 적용될 것입니다 글꼴 플러그인과 Elementor에 사용자 정의 글꼴을 추가하는 Elementor Pro의 방법으로 이제는 내가 바로 여기로 돌아 오지 만, 여기에 WordPress가 설치되어 있습니다

이미 설치되어 있다고 생각합니다 플러그와 내가 단지 두 번 확인해 보자이 주제에서 나는 덩어리가 생긴다 Elementor가 설치되어 있습니다 Elementor가 아직 활성화되어 있지 않습니다 이미 설치했습니다

플러그 – 인 글꼴의 습관은 아스트라 테마를 지금 사용하고 있는지 확인해 봅시다 if Elementor를 무료로 가지고있을 때 당신은 이것에 대해 갈 것입니다 이 방법은 사용자 정의 글꼴 플러그를 활성화 한 후에 사용하는 글꼴입니다 이미 이진 고객 글꼴을 나타내는 외양 아래 이노 신 옵션에서 앞서 한 가지 Bulimic을 추가하고 그것을 삭제하고 함께 그렇게 할 것입니다 Elementor Pro에는 잠시 후 사용자 지정 방식을 나타내는 번호가 있습니다 사용자 정의 글꼴을 추가 할 때 글꼴은이 무료 플러그인이 아닙니다 이름을 지정하면 당신이 원하는대로 이름을 붙일 수 있습니다

그리고 파일의 여기에이 옵션이 있습니다 지금 우리는 W0 FF에서 W0 FFT TF EOT SVG를 업로드 할 수 있습니다 오, 이런 세상에 이것은 압도적 인면에서 조금있다 나는 무엇을해야할지조차 알지 못한다 Elementor Pro 블로그 포스트로 돌아가 실제로 W3 학교에서이 웹 사이트를 가져 왔습니다

바로 여기 여기에 이러한 다양한 글꼴 형식 유형이 있으므로 열려있는 글꼴이 있습니다 웹은 글꼴 형식을 위해 열리고 그것은 왜 당신이 사용하고 싶어하는지에 대한 설명을 제공합니다 이 연금을 왜 사용하고 싶으신가요? 이것들 전부 또는 아닙니다 당신만큼이나 많은 것들이 당신이 본질적으로 그렇게 할 수 있습니다 당신이 좋아하는 글자에이 W0 FF를 쓰면 좋겠다

여기 WOFF1보다 나은 압축을 제공하는 TrueType 오픈 타입 폰트 여기에 가장 권장되는 형식이지만이 두 번째 버전의 글꼴 파일은 사실 작아서 버전 2가 이상적 인 이유가 여기 있습니다 그리고 저는 여기 사용자 정의에서 생각합니다 글꼴 플러그 플러그 및 그 이유는 아마도 당신이 볼 수 여기에 여기에 나열된 이들은 우선 순위의 순서에 따른다 나는 TT가이 폰트를 붙였다 고 생각한다 애플 마이크로 소프트가 80 년대 후반에 개발 했으니 까

다른 글꼴 형식은 너무 많은 웹 브라우저가 있기 때문에 있습니다 크롬뿐만 아니라 Safari Firefox와 Opera 당신은 인터넷 익스플로러를 가지고 있습니다 이러한 서로 다른 웹 브라우저의 서로 다른 버전으로 수년간 왜 당신이 괜찮은지 그리고 바로 여기에 이것은 실제로 COT 형식이 중요합니다 임베디드 오픈 타입 글꼴 및이 글꼴 파일이 Internet Explorer에서 작동하지만 다른 브라우저에서는이 형식을 사용하여 이전 버전의 IE를 지원할 수 없습니다 당신이 이상적으로 W0 FF 버전과 EOT 버전 방문을 추가 할 것입니다 최대 커버리지 그래서 누군가가 당신의 웹 사이트를 방문 할 경우 EOT를 제공합니다 인터넷 익스플로러의 구버전에서 그렇습니다

그래서 당신은이 다른 폰트를 가지고 있습니다 이제 괜찮아요 그러면 이제 어떻게하면 더할 지 보여 드리겠습니다 고통을 줘서 그냥 줘요 그것의 이름과 나를 위해 나는 그냥 가서 이름을 채울 것이다

버스 또는이 글꼴의 이름이 무엇이든간에 제공되며 PDF 글꼴을 업로드 할 예정입니다 이제 여기에 약간의 뉘앙스가 있습니다 업로드를 클릭하면 일반적으로 클릭 할 수 있습니다 파일을 업로드 한 다음 파일 선택을 클릭하고 컴퓨터의 파일을 탐색하여 그것을 찾으십시오 그러나 WordPress는 단지 특정한 파일 유형을 원하고 당신이 그것을 올려주기하게하지 않을 것이다 그래서 당신은이다 그냥 드래그 앤 드롭해야합니다 끌어서 놓기 만하면됩니다

그런 다음 그것을 받아 들일 것입니다 그래서 당신이 선택 파일을하려고한다면 그것은 작동하지 않을 것입니다 Elementor Pro 버전에서 실제로 테스트 할 것입니다 select in을 클릭합니다 거기에 지금 내가 필요로하는 모든 것이 있다면 나는 그것을 추가 할 다른 형식을 가지고있다

어쨌든이 그래픽을 사용하기 때문에이 글꼴을 사용하고 있습니다 새 글꼴 추가를 클릭하면 거기에 새로운 글꼴이 생깁니다 Elementor 페이지에 들어가서 내가 우리에게 연락하도록 선택할 것입니다 contact us page click Elementor로 편집하고 여기를 보면서 작업 할 때 클릭하면 제목이 나타납니다 작풍에 가고 그 때 여기 나의 지세는 나가 여기에서 그리고 글꼴 가족 I를 위해 바로 갈 수있다 이것 같이 갈 수 있고 다만 지금 그것을 타자를 치는 시작하기 것은 쉽다 이름은 아마 이름을 당기고있다 내가 사용자 정의 글꼴을 만들 때 이름을 넣은 것에서부터 입력 해 봅시다

여기에는 BEA BAS가 있으며 바로 시스템 글꼴이 나열되어 있으며 클릭하면 그것은 당신이 그것을 볼 수 있습니다 바로 그 글꼴로 전환했습니다 정말 간단했습니다 간단하고 나는 그것을하는이 방법을 좋아한다 나는이 사용자 정의 글꼴을 좋아한다

당신은 하나의 작은 요트와 함께 이것은 직접적인 페이지를 추가하기위한 플러그인의 새로운 업데이트였습니다 빌더 통합 이미 지원 티켓을 열었습니다하지만 오른쪽 클릭하면 여기 Elementor가 사용할 기본 글꼴을 설정하려고하면 기본 글꼴로 이동합니다 제목과 당신은 그것을 찾을 수 없다는 것을 알게 될 것이다 나는 이것이 가능할 것이라고 생각한다

플러그 인을 사소한 감독 만하면됩니다 이미 그들은 아마 당신이이 비디오를보고있을 때 업데이트가 될 것입니다 여기에서 기본값으로 바로 설정할 수 있으므로 사용자 정의가됩니다 글꼴 플러그인 당신이 나에게 여기에 남겨 줬다면 환상적이다 당신은 아스트라 테마 사용자입니다

무료 테마입니다 프로 버전은 59 달러에 불과합니다 WB craftcom/Astra Theme를 방문하여 확인해보고 싶었지만 커스터마이져 중 일부는 당신에게 이것을 보여 주며, 여기서 이점은 단지로드해야한다는 것입니다 한 위치에서 글꼴을 테마 및 페이지 작성 도구에서 사용할 수있게하려면 날짜가 거기에 대한 다른 해결책은 없지만 당연히 당신은 아스트라 테마를 사용해야합니다 그래서 내가 여기에 있으면 지형을 클릭 할 수 있고 기초 지형을 클릭 할 수 있습니다

놀이 박람회를 설정하는 표제 그러나 나는 위로 움직일 수 있었다 그리고 만일 내가 상단으로 스크롤하면 바로 여기에 표시되며 대신에이 글꼴 모음을 사용할 수 있습니다 내 머리글 괜찮아 그리고 네가 거기서해야만하는 모든 것이 내가 출판 할 수있게 한 다음 나 여기서 나가서 그렇게하는 사용자 정의 글꼴 방법을 사용하고 그것은 꽤 많이있다 동일한 방법으로 사용자 정의 글꼴을 사용하십시오 안녕하세요, 아이 글꼴 플러그인을 바로 여기에서 사용할 수 있습니다

계속 진행하여 Elementor Pro를 활성화하고 잠깐 살펴 봅니다 비슷하지만 Elementor Pro 웹 사이트에 관한 튜토리얼도 있습니다 나는 라이센스를 터뜨릴 시간을 갖지 않을 것이지만, 무슨 일이 일어나는지는 Elementor 밑에있다 메뉴에는 사용자 지정 글꼴 인 새로운 옵션이 있습니다 여기에 클릭 만하면됩니다

새 것을 추가하면 그곳에있는 가족의 제목이나 이름을 입력하고 글꼴 변형을 추가하고이 인터페이스가 정말 매끄럽다는 것을 분명히 좋아합니다 그리고 나는 그것이 나에게주는 글꼴을 추가하는 것이 내가있는 곳인 바로 여기 에서처럼 좋아한다 약간의 정보가 있으므로 여기를 언급하기 전에 내가하고있는 일을 알고 있습니다 여기에 갈 수 있습니다 왜 내가이 다른 버전을 갖고 싶어하는지 알기 때문에 앞으로 가고 싶습니다

여기서 보자 Bass 나 Bev의 것이거나 오, 내가 그것을 내러티브가 추가되어 스타일에서 가중치를 선택해야하므로 이걸 가져 오지는 않습니다 직접 글꼴에서 정보를 얻으려면 실제로 무엇인지 말해야합니다 나는 두꺼운 글씨라고 생각합니다 이것은 당신의 판단에 달려 있습니다

바로 여기 Elementor Pro에서 각 글꼴을 넣을 수있게 해주기 때문입니다 폰트 패밀리에서 나는 이것이 폰트 패밀리라고 말했고 다섯 가지 후원자가있다 탈레반은 완다에게 정말로 두꺼운 무게의 하나와 정말로 얇은 하나의 빛을 집계했다 하나는 가족에게 그 각각을 추가 할 수 있으므로 계속해서 게시하고 거기를 클릭하십시오 그게 내게 무슨 일이 일어날 지 간략한 작은 스냅 샷을 준 것 같아

멋진 글꼴로 보이고 그런 다음 글꼴 변형을 계속 추가 할 수 있습니다 그래서 나는 업데이 트를 클릭하게하고 나는 실제로 이것을 한 적이 없다 나는이 모든 것을하고있다 오프 – 더 – 커프스 그래서 가서 페이지에 뛰어 가서 그게 맘에 드는지 보자 연락처 페이지로 돌아가 편집 또는 문의하기 페이지를 클릭하면 거기서 괜찮아요

Rh가 바로 여기 가버 렸어요 지형은 사라 졌어요 우리 글꼴이 여기에 있습니다 바로 여기에 가서 내가 들어가서 그것을 입력 해 보자 그것과 우리는 실제로 단지 하나의 엔트리를 보았을 것입니다

왜냐하면 아마도 사용자 정의 글꼴을 추가하는 방법은 Elementor와 같은 방법이지만 재미있을 것입니다 만약 내가 지금 여기에서 기본 폰트로 돌아 간다면 그것 옙 거기서 그가 지금 그것을하고 있었던 주문의 폰트 다 Elementor Pro 길 어쨌든 여기로 들어가서 나는 단지 너에게 네가 할 수있는 두 가지 다른 방법을 보여주고 싶었다 내 아이들은 Elementor에 맞춤 글꼴을 추가하고 기억하는 가장 좋은 방법은 두 가지 이상입니다 Elementor 무료 버전을 사용하고 있다면이 사용자 정의 글꼴을 계속 사용할 수 있습니다 비록 당신이 Astro와 Elementor를 사용한다면 당신이 사용하고있는 테마는 중요하지 않습니다

당신은 단지 하나의 장소에 그것을 추가해야만합니다 당신이 아스트라를 가지지 않았다면 큰 이익이 있습니다 또는 Elementor를 방문하면 WPCraftercom/Elementor 또는 WPCraftercom/Astra를 방문 할 수 있습니다

해당 제품에 대한 추가 교육을 받고있는 웹 사이트 페이지로 그 정보를 당신을 위해 거기에 당신이 몇 가지 리소스가 무엇인지 물어보고 싶었어요 인터넷에서 무료 글꼴 또는 어떤 종류의 글꼴 조합을 다운로드하고 있는지 알고 있습니다 사용자 정의 글꼴을 사용하면 정말 잘 어울리는 글꼴을 찾았습니까? 그래서 댓글 섹션에서 아래의 몇 가지 장소에서 여러분의 의견을 듣는 것이 좋습니다 너는 내가 알기를 원하는 커스텀 폰트를 보았고 나는이 비디오를 본 사람이라 확신한다 이 비디오와 모든 지원에 감사드립니다

다음 비디오에서 보도록하겠습니다

How to Add Image Lightbox to WordPress Using Elementor

이 비디오에서는 Elementor에서 사용할 수있는 모든 옵션에 대해 알아 봅니다 WordPress에 라이트 박스 팝업을 추가하십시오

시작하겠습니다 이미지에 라이트 박스 추가 1 번 Lightbox 추가는 Elementor의 모든 이미지에 대해 자동으로 설정됩니다 그래서 당신이 이미지를 가지고 있다면, 당신이 할 일은 그것이 링크되어 있는지 확인하는 것입니다 미디어 파일

지금 그것을 클릭하면 라이트 박스가 나타납니다 2 번은 모든 글로벌 라이트 박스 설정을 제어합니다 이것은 햄버거에가는 것으로 이루어집니다 아이콘, 전체 설정을 클릭하고 라이트 박스에서 클릭하면 글로벌 설정

여기에서 이미지 라이트 박스를 끄고 편집기에서 활성화하고 배경색을 변경하십시오 번호 3은 모든 라이트 박스를 끕니다 그래서이 일은 끝났어 단순히 이미지를 클릭 할 때이 스위치를 끄는 것으로 라이트 박스를여십시오 번호 4는 단일 이미지에 라이트 상자를 추가합니다

따라서 이미지 라이트 박스를 끄면 단일 라이트 박스의 라이트 박스를 열 수 있습니다 이미지로 이동하여 라이트 박스에서 yes로 설정하십시오 이제 내가 열리는 이미지를 클릭하십시오 숫자 5는 라이트 박스 배경색을 변경합니다 이것은 전 세계적으로 행해지기도합니다

원하는 색상을 선택할 수 있으며 클릭하면 이미지에서 배경색이 선택한 색상으로 바뀝니다 숫자 6은 편집기에서 라이트 박스 미리보기를 비활성화합니다 이것은 전원을 끈다 이 설정은 라이트 박스가 열리지 않도록합니다 편집기에서 클릭하면 라이브 사이트에서 열립니다

7 번 갤러리 및 회전 목마 슬라이더 라이트 박스 이것은 이미지 라이트 박스와 매우 비슷하게 작동합니다 나는 갤러리를 클릭하고 미디어 파일에 링크한다 회전 목마에 대해서도 똑같이 할 것입니다 슬라이더

갤러리를 클릭하면 열립니다 원하는 모든 이미지를 탐색 할 수 있습니다 번호 8 비디오 라이트 박스입니다 비디오 라이트 박스를 전환하려면 비디오를 클릭하고 이미지 오버레이를 클릭하십시오 라이트 박스를 켭니다

이제 비디오를 누르면 라이트 박스 팝업 Elementor의 라이트 박스 기능에 사용할 수있는 8 가지 옵션이 있습니다 이 튜토리얼을 즐겁게 사용하시기 바랍니다 구독 해 주시기 바랍니다 다음 번까지 더 많은 비디오와 튜토리얼을 얻을 수 있습니다

엘리멘터의 벤입니다

Block Editor [Gutenberg] VS Elementor VS Divi: Quick Comparison ⚡

안녕하세요 제 이름은 로버트입니다

이 동영상에서는 내가 가질 수있는 몇 가지 질문에 답변 해 드리겠습니다 블록 편집기 (일명 구텐베르크)와 엘리멘탈 대 디비 빌더 도구가 어떻게 비교되고 어느 것이 당신에게 옳은가? 전체 비교가 나오므로 계속 지켜보십시오 새로운 Gutenberg 블록 편집자가 더 많은 시각적 디자인과 드래그 앤 드롭 기능을 제공하지만 편집, 그것은 꽤 아직 페이지 빌더 플러그인을 대체하지 않습니다 이는 많은 사용자가 추가 도구를 사용해도 여전히 이점을 누릴 수 있음을 의미합니다

일반적으로 Gutenberg 블록 편집기는 기본 콘텐트와 레이아웃을 대체 할 수있는 좋은 대안입니다 그러나 원하는 경우 Elementor 또는 Divi Builder와 같은 페이지 작성기로 더 행복해집니다 디자인에 대한 스타일 및 간격 조절을 정확하게 나타낼 수 있습니다 실제로 Otter Blocks라는 매우 훌륭한 도구가 있습니다 블록 편집기를 사용할 때 페이지 및 게시물을보다 쉽게 ​​만들 수 있으며 템플릿을 사용하는 경우 예를 들어 라이브러리에서 미리 정의 된 섹션을 사용하여 멋진 방문 페이지를 만들 수 있습니다

블록 쿨, 맞지? 이 플러그인은 콘텐츠 제작에 사용할 수있는 다양한 요소와 템플릿을 제공합니다 무료 버전을 사용하면 드래그 앤 드롭 시스템을 사용하여 페이지와 게시물을 디자인 할 수 있습니다 예를 들어 Neve WordPress 테마와 원래 데모 컨텐츠를 사용하는 경우 Neve 옵션 패널에서 한 번 클릭으로 가져 오기 기능을 사용하면 쉽게 컨텐츠를 사용자 정의 할 수 있습니다 앞 페이지에 섹션별로 섹션이 있습니다 이것은 모든 WordPress 테마에 사용할 수있는 비주얼 한 드래그 앤 드롭 페이지 빌더입니다

여기에서는 커스터마이징과 함께 많은 요소 라이브러리에 액세스 할 수 있습니다 옵션 및 거의 모든 레이아웃을 만들 수있는 기능을 제공합니다 이제 각 도구와 함께 제공되는 기능을 비교해 보겠습니다 구텐베르크 차단 편집기에서 할 수있는 일은 다음과 같습니다 끌어서 놓기 편집기를 사용하여 페이지, 게시물 및 사용자 지정 콘텐츠 형식을 만들 수 있습니다

텍스트 및 이미지와 같은 필수 요소를 포함하여 콘텐츠를 만들려면 25 개 이상의 블록을 사용하십시오 테이블과 버튼과 같은 좀 더 고급 옵션입니다 더 많은 옵션이있는 블록을 원한다면 오터 블록 플러그인을 설치하고 고급 제목 블록, 버튼 그룹 블록, 글꼴 멋진 아이콘, 가격 책정 블록, 공유 아이콘 및 훨씬 더 위의 추천 동영상이나 아래의 설명 상자를보고 어떻게 할 수 있는지 알아보십시오 이 블록을 사용하여 WordPress 웹 사이트에서 멋진 콘텐츠를 만들 수 있습니다

또한 블록 편집기를 사용하여 각 블록에 대해 몇 가지 옵션을 사용자 정의 할 수 있습니다 문서 전체 설정과 마찬가지로 Neve WordPress 테마를 사용하면 설정을 변경하는 옵션이 더 많이 생기고 예를 들어 사이드 바를 제거 할 수 있습니다 새 항목을 처음부터 새로 만들려는 경우 유용 할 수 있습니다 그러나 표시 할 내용 원하는대로 블록을 다시 정렬하고 원하는만큼 추가하거나 삭제하십시오

아주 기본적인 다중 열 레이아웃을 만들 수도 있습니다 오터 블럭스 플러그인으로 더욱 복잡한 레이아웃 전반적으로 블록 편집기는 기능 드래그 앤 드롭 시스템을 제공합니다 그러나 이러한 기능은 대부분의 페이지 빌더 플러그인에서도 표준입니다 이 점을 고려하여 구텐버그 대 엘리멘틀 대 Divi Builder만의 독특한 점을 살펴 보겠습니다

예를 들어, Elementor를 사용하면 약 30 가지의 '요소'에 액세스 할 수 있습니다 블럭의 플러그인 이름 사용할 수있는 페이지 및 섹션 템플리트의 라이브러리 여러 열 및 훨씬 더 많은 컨트롤을 사용하여보다 복잡한 레이아웃을 만드는 옵션 여백과 안쪽 여백과 같은 간격 위에 각 위젯 및 섹션에 대한 더 많은 스타일 옵션과지도, 이미지와 같은 고급 기능 회전 목마 및 아코디언 탭이 있습니다

머리글, 바닥 글 및 사이트의 다른 부분을 디자인하는 기능을 사용할 수 있습니다 프리미엄 버전에서만 가능합니다 Divi는 어떨까요? 이 페이지 빌더를 사용하면 45 개 이상의 사용자 정의 모듈, 요소 또는 블록의 다른 이름, 귀하의 콘텐츠를 구축하십시오 포트폴리오, 회원 평가,지도, 양식, 카운터 등의 고급 기능 중에서 선택하십시오 더

여러 열 및 심지어 전체 너비와 다중 열이 혼합 된 복잡한 레이아웃 만들기 행 간격을 제어하기 위해 사용자 정의 여백 및 패딩을 추가하십시오 나중에 쉽게 다시 사용할 수 있도록 디자인을 저장하고 많은 스타일 컨트롤을 사용하여 방법을 변경하십시오 모듈보세요 보시다시피 Elementor와 Divi가 비교되는 영역 중 일부는 Gutenberg 블록 편집기는 열, 간격 및 스타일과 같은 것들에 관한 것입니다

통제 수단 이미 Divi 또는 Elementor를 사용하여 사이트에서 작업하는 경우 권장하지 않습니다 대신 Gutenberg를 사용하여 전환 이것은 기존 레이아웃에 혼란을 야기 할뿐만 아니라 현재의 레이아웃에도 영향을 미칠뿐만 아니라 버전의 새로운 블록 편집기는 너무 단순하여 대부분의 사용자를 대신 할 수 없습니다 반면에 페이지 작성기를 사용한 적이없는 경우 차단 편집기는 다음과 같습니다

시작하는 좋은 방법 간단하고 사용하기 쉽고 드래그 앤 드롭 방식을 사용하는지 여부를 결정하는 데 도움이됩니다 시스템으로 콘텐츠를 만듭니다 구텐베르크가 일하는 방식을 좋아하지만 더 많은 유연성을 원한다면 Otter Blocks 플러그인과 Neve WordPress 테마를 사용해보세요 더 많은 도구를 제공합니다

가능성 권장 비디오에서 이들이 어떻게 작동하는지 확인하거나 아래의 설명 상자에있는 링크를 확인하십시오 마지막으로 Elementor는 직관적이고 사용하기 쉬운 인터페이스를 원할 때 이상적입니다 Divi는 옵션과 디자인 가능성을 극대화하려는 경우 가장 좋은 방법입니다 또한 반드시 한 명 또는 다른 한 명을 선택할 필요는 없습니다

Gutenberg 블록 편집기를 사용하여 일상적인 디자인을하고 Elementor로 전환 할 수 있습니다 또는 Divi를 선택하십시오 또는 Elementor의 덕택으로 구텐베르그 디자인에 Elementor 템플릿을 삽입 할 수도 있습니다 무료 공식 블록 플러그인 WordPress의 새로운 블록 편집기에 대해 어떻게 생각하십니까? Elementor 및 Divi와 비교해 볼 때 이제는 차이점을 명확하게 볼 수 있습니다 블록 편집기 및 페이지 빌더

궁금한 점이 있거나 이러한 콘텐츠 제작에 대해 나에게 이야기하고 싶다면 대안, 아래에 의견을 남겨 주시면 최대한 빨리 답변을 드리겠습니다 WordPress에 대한 최신 업로드를 자유롭게 확인하십시오 다음 비디오에서 만나요 건배!

How to Create Advanced MegaMenus with Elementor Page Builder – Tutorial

안녕하세요이 자습서에 오신 것을 환영합니다

이 비디오에서 우리는 당신을 어떻게 보는지 알게 될 것입니다 메가 메뉴를 사용하면서 기능적이고 유익한 메뉴를 만들 수 있습니다 그래서 이 비디오는 당신이 어떻게 비슷한 메가 메뉴를 만들 수 있는지 보여줄 것입니다 제품의 쇼케이스, 블로그 게시물, 블로그의 섹션에 게시물을 올릴 수있는 메가 메뉴 및 일종의 연락처 페이지가 모두 메가 메뉴에 들어 있습니다 그래서 여기에 우리가있어

연락처 양식 및지도가 완전히 기능적인 일반지도로 당신은 페이지의 아무 곳이나 두십시오 그래서 우리는 Elementor의 도움으로 그것을 할 것입니다 페이지 빌더는 레이아웃을 사용자 정의 할 수 있으므로 굉장합니다 Elementor의 도움으로 당신의 메가 메뉴 항목에있는 모든 것들, 익숙한 모든 도구를 사용하십시오 그래서 다른 도구는 무엇입니까? 엘리멘탈, 우리가 필요할거야? 그것은 JetMenu라고 불리는 플러그인입니다

이 비디오의 설명에있는 링크를 따라 가면 얻을 수 있습니다 그래서 이 플러그인을 사용하면 다양한 종류의 메가를 만들 수 있습니다 메뉴를 만들고 가능한 한 많은 것을 넣으십시오 여러분이 상상할 수있는 모든 것, 당신의 메가 메뉴 항목 수평 메뉴 일 수도 있고 또한 수평 메뉴 일 수도 있습니다

이 같은 수직 메뉴 그래서 복잡한 드롭 다운 메뉴가 있습니다 정교하고 복잡한 멀티미디어 메가 메뉴, 당신이 거기에 갤러리를 추가 할 수있는 것처럼, 내가 말했듯이 당신은 거의 모든 것을 추가 할 수 있습니다 당신은이 플러그인의 도움으로 메가 메뉴에 무엇이 필요하고 무엇이 필요할까요? Elementor 편집기 내부에서 작업 할 수 있기 때문에 정말 쉽습니다 그리고 다른 플러그인을 추가해야합니다

예에서 본 것은 Elementor 용 JetElements 플러그인입니다 이것은 부가 기능입니다 Elementor page builder에 약 50 개의 새롭고 새로운 위젯을 추가하고 불가능했던 것을 만들 수있게 해줍니다 전에 Elementor 안에 그리고이 플러그인을 체크 아웃하는 것이 좋습니다

이 플러그인 아래의 설명에서이 플러그인에 대한 링크를 찾을 수도 있습니다 비디오 그리고이 아름다운 피부는 Monstroid 2 Elementor의 일부입니다 미리 만들어진 완전히 재사용 가능한 섹션 수천 개가 넘는 WordPress 테마 수백 페이지가 사전 제작되어 아름답게 디자인되었으며 완전히 완성되었습니다 기능적인 권리를 얻을 수 있습니다

그래서 당신이 더 알고 싶다면 Monstroid 2 WordPress의 테마는 설명에서 그것을 확인하십시오 그럼 우리 가게로 돌아 가면 메가 메뉴의 세 부분이 어떻게 나타나는지 보여 드리겠습니다 이 한 비디오에서 할 수 있습니다 여기에서 보았 듯이 아이콘을 아이콘에 추가 할 수도 있습니다 메뉴 항목을 추가하고 배지를 추가 할 수도 있습니다

나의 예에서 당신은 내가 예를 들어 수집 할 수있는 아이콘과 아이콘 중 하나만 다른 아이콘에 아이콘을 추가했습니다 '가장 인기있는 제품'또는 '신종'또는 '인기 급상승'등의 배지를 추가합니다 우리는 WordPress 대시 보드에 가서 시작할 것입니다 우리의 메가 메뉴 항목을 만드는 작업 그래서 거기에 우리가 간다

여기에 우리는 "외양"-> "메뉴"이것은 당신이이 메뉴에 갈 곳입니다 테마의 기존 메뉴로 작업하거나 새 것을 만드십시오 여기에서 알다시피 편집 할 메뉴를 선택하십시오 여기서 괄호 안에이 메뉴의 위치를 ​​알 수 있습니다 이 메뉴가 특정 위치에 부착되어있는 것을 볼 수 있듯이 대괄호 안에 표시됩니다

내 경우에는 메뉴 메인이라고 불리는 "main"이 메인 위치에 붙어 있습니다 페이지 상단 그래서 여기에 이미 링크가 있습니다 여기이 제품에는 메가 메뉴가 있습니다 그리고 그냥 내버려둬 빨리 열어서 블로그를 삭제하면 처음부터 새로 만들 것입니다

또한 연락처가 있고 그것을 제거 할 것입니다 그럼 상상해 봅시다 우리는 처음부터 시작하고 있으므로 블로그 페이지를 만들고 연락처 페이지를 처음부터 다시 가져 와서 수집하고 볼 수 있습니다 그것이 어떻게 이루어 졌는지 먼저 페이지로 이동하고 블로그를 만들고 추가를 클릭합니다

메뉴 그래서 여기에서 우리는 당신이 원하는 곳 어디든지 이동할 수 있습니다 이제 당신이해야 할 일은 JetMenu를 활성화하는 것입니다 현재 위치 나중에 선택할 수있는 사전 설정을 만들면 기존의 프리셋이 여기 있습니다

하지만 우리가 할 일은 여기 괜찮아 여기에서 탐색 라벨을 변경할 수 있지만 클릭 만하면됩니다 JetMenu 아이콘을 클릭하면 Elementor로 가려면 여기를 클릭해야합니다 메가 메뉴 항목의 레이아웃 작업을 시작하십시오 하지만 먼저 설정으로 이동하여 우리가 할 수있는 것을 확인하십시오

그래서이 선택은 이 메가 메뉴 항목이 메뉴에서 열리는 방법을 결정하십시오 메뉴 전체에서 상대적으로 메뉴 중간에서 오른쪽으로 열거 나 메뉴 항목을 기준으로합니다 나는 그것을 기본값으로 남겨두고 여기서 당신이 선택할 수 있습니다 메가 메 뉴 항목의 사용자 정의 너비 그래서 당신이 그것을 더 넓게 만들거나 더 만들고 싶다면 좁게 여기에 놓으십시오

이 슬라이더를 만지지 않으면 그냥 설정합니다 기본값으로 설정하면 콘텐츠의 크기에 따라 항목이 늘어납니다 그래서 여기에 아이콘이있는 곳입니다 그래서 아이콘 색상을 선택합니다 지금은 배지가 있습니다

과정은 거의 같습니다 배지 이름과 같이 입력하고 입력하면 자동으로 생성됩니다 색상 또는 배경색을 선택하지 않은 경우 일부 텍스트가 표시됩니다 텍스트의 색상과 배경을 삭제하면 텍스트가 아무 것도 나타나지 않습니다 배지의 장소

블로그 메뉴 항목의 경우 배지를 선택하지 않습니다 잡다하고 거기에 무엇이 있는지 보자 그래서 여기에 당신이 어떤 이유로 든 이 옵션을 사용하도록 설정 한 항목 탐색 라벨을 숨기고 싶을 때 이 셀에이 메뉴 항목의 패딩을 설정할 수 있습니다 그리고 함께 일하는 경우 이 옵션이 필요할 수도있는 수직 메뉴이지만 우리는 우리가 규칙적인 수평 메뉴로 작업하고 있기 때문에 그것을보십시오 그리고 여기에 콘텐츠 탭에서이 옵션을 활성화하고 메가 메뉴 항목 내용 편집을 클릭하십시오

이제 레이아웃 작성을 시작할 수있는 Elementor 편집기 창에서 열립니다 당신의 메가 메뉴 항목의 내가 여기서하려고하는 것은 게시물을 검색하는 것입니다 그래서 지금이 JetElements 플러그인이 필요한 곳입니다 당신이 그렇게 설치했다면 이 위젯을 바로 여기에서 볼 수 있습니다

그래서 바로 그 자리에 놓을 수 있습니다 귀하의 레이아웃,하지만 난 쉽게 갈거야 Monstroid 2를 사용하고 있기 때문에 WordPress theme 나에게 접근 할 수있는 마법의 버튼이있다 이미 선택할 수있는 수천 개의 미리 만들어진 섹션 (섹션뿐만 아니라 또한 페이지)하지만이 경우에는 섹션 만 있으면됩니다 쇼케이스 섹션 내 메가 메뉴 항목의 게시물

그래서 저는 섹션과 왼쪽에 있습니다 네비게이션 메뉴를 선택합니다 블로그를 선택하면 다른 선택권이 생깁니다 블로그 레이아웃 그래서 나는 그것들 중 하나를 골라 내 페이지에 둘 수 있습니다

그래서 여기서하는 일은 당신이 좋아하는 레이아웃 중 하나를 선택하고 클릭하는 것입니다 끼워 넣다 미리보기를 원하면 아이콘을 클릭하기 만하면됩니다 미리보기를 누른 다음 여기에 삽입을 클릭하면 거기에 우리가 간다 하지만 Monstroid 2를 가지고 있지 않아도됩니다

아름답게 미리 만들어진 페이지와 섹션은 있지만 JetElements를 다운로드했다고 말합니다 플러그인을 사용하거나 JetElements 플러그인이있는 테마를 다운로드하면 갈 수 있습니다 Elementor에 여기에 템플릿을 넣고 "블록"으로 이동하고 여기에서 "카테고리" 드롭 다운으로 JetElements 내부에 들어있는 미리 만들어진 요소를 볼 수 있습니다 플러그인 그래서 각 특정 위젯에 대해 미리 만들어진 디자인을 볼 수 있습니다

우리가 알아야 할 것은 "포스트 그리드"입니다 거기에 그것은 간다 나는 이것을 생각한다 레이아웃은 괜찮아 보일 것입니다 따라서 우리는 단순히 삽입을 클릭하고 우리의 페이지

그래서 지금은 아무 것도 표시하지 않습니다 왜냐하면 여기 "query post by -"때문에 "카테고리에서"선택 되었으나 카테고리가 설정되지 않았습니다 분명히 내 게시물에 대한 카테고리가 없으므로 간단하게 '최신 소식'을 선택하면 최신 소식을 모두 표시합니다 우리의 주제가 있습니다 포스트 오프셋

좋아, 우리가 간다 이제 당신이 바꿀 수있는 것은이 블록의 스타일입니다 그것은 귀하의 웹 사이트의 일반적인 스타일과 더 관련이 있습니다

잠시만 기다려주세요 그리고 나는 약간의 재 설계된 포스트 블록으로 당신에게 돌아갈 것이다 그래서 거기에 우리가 간다 내가 한 일은 제목과 모든 텍스트에서 글꼴을 변경 한 것입니다 이 블로그에 등장했으며 일부 액센트 색상도 변경했습니다 이제 당신이해야 할 중요한 일은이 섹션이 메가 메뉴 항목에 넣으려는 콘텐츠가 포함되어 있습니다

섹션에 배경이 생겼습니다 여기에 배경을 설정하지 않으면 여기에 배경을 설정하지 않으면 "스타일"-> "배경색"-> "흰색" 당신이 여기에 넣는 모든 것이 투명하게 될거야 투명 배경 및 일반적으로 이것은 메가 메뉴에 대해 원하는 것이 아닙니다 그래서 우리가 가고자하는 모든 것을 여기에 추가했습니다 어쩌면 거기에있을 수있다

실제로 제목이되어야합니다 그런 표제를 붙이자 나에게 괜찮아 보인다 그래서 업데이트 할 시간이고 업데이트를 클릭하는 것을 잊지 말고 기다려야합니다 업데이트가 완료되면이 화살표를 클릭하여 다시 돌아옵니다

여기를 클릭해야합니다 작은 틱이 나타날 때까지 "저장"을 한 다음이 창을 닫은 다음 "저장 메뉴"를 클릭하십시오 좋아, 그러면 메뉴가 업데이트 된 것을 볼 수 있습니다 지금 이 두 메가 메뉴를 삭제했기 때문에 새로 고침 페이지로 돌아갈 수 있습니다 이제 새로 만든 블로그 메가 메뉴 항목을 보도록하겠습니다

이제 텍스트를 포함 할 것이고, 그것은 "Latest posts"텍스트를 포함하게 될 것입니다 당신 이제 "연락처"가 사라지고 "블로그" 메가 메뉴 항목 우리가 본 것은 제목과 우리가 거기에 넣은 게시물입니다 상단과 하단에 너무 많은 패딩이 있습니다 당신이 원한다면 당신은 앞서 가서 그것을 제거 할 수 있지만 예제의 목적을 위해 당신은 알고있다 완벽하게 작동합니다

이제 메가 메뉴에 게시물을 올릴 수있는 방법을 알았습니다 항목은 JetMenu 플러그인을 사용하고 JetElements 플러그인은 Elementor 및 엘리먼트 에디터에서 여러분이 사용하는 모든 툴을 사용하여 작업하고 있습니다 편안한 작업 이제 게시물에 대한 것이므로 이것이 어떻게 가능합니까? 당신의 메가 메뉴에 귀하의 웹 사이트에 최신 게시물을 전시하십시오 다음 단계 "연락처"페이지를 만들고 연락처 양식과지도를 메가 메뉴 항목으로 사용자가 항목에 마우스를 가져 가면서 액세스 할 수 있습니다

메뉴 이제 새 페이지 "연락처"를 만들고 "메뉴에 추가"를 클릭하십시오 당신은 당신을 압니다 구매할 필요가있는 것이면 "맞춤 링크", "카테고리"또는 "전자 상거래 엔드 포인트"를 사용할 수 있습니다 여기 내 목적은이 페이지를 사용하는 것이 가장 쉬운 방법이기 때문에 그것을 만들 수 있습니다

여기에서 레이블을 변경할지 확인합니다 나는하지 않는다 JetMenu 버튼을 클릭하면 다시 우리를 불러옵니다 여기서 당신은 모든 것을 알고 있습니다 동일한 설정을 클릭 한 다음 "메가 하위 메뉴"를 클릭하고 "메가 메뉴 항목 편집"을 클릭하십시오

콘텐츠 "를 선택하십시오 그냥 가도록하겠습니다 섹션 레이아웃으로 가보겠습니다

고급지도 모듈을 검색하십시오 거기는 나는 거기에 놓을거야 너 여기있어 지도의 중심을 설정합니다

당신은 간단히 말해서, 나는 잘 모르겠다 뉴욕과 너는 입력 한 위치를 즉시 찾습니다 이제 여기에 초기 줌의 레벨 슬라이더를 늘리면 가까이오고 뒤로 따라서 스크롤 휠을 사용할 때 "스크롤 휠 확대 / 축소"를 알 수 있습니다

마우스를 가까이에 가면지도를 확대 할 수 있습니다 이제는 사용할 수 없습니다 "줌 컨트롤 "을 선택 했으므로 여기에서 이러한 컨트롤을 표시할지 여부를 선택하십시오 일반적으로 Google지도가 있어야합니다 당신은 그들이 단지 지도, 당신은 그들 중 많은 것을 볼 수 있습니다

그래서 당신은 정말로 당신의지도를 사용자 정의하고 원하는 모든 설정 및 기능이 있으므로 가장 중요합니다 귀하의 방문자를위한 편안하고 즐거운 경험 이제지도 스타일 이리 당신은지도의 높이를 바꾸지 만 나중에 어떻게 조정할 것인가? 우리의 접촉 형식이 취할 많은 공간 그리고 이제지도 스타일

너는 여기 스타일의 톤 너는 일반 google에서 알듯이 정말 흥미로운 것들을지도 스타일로 맵핑하고 나는 이것과 함께 갈거야 하나는 정말로 최소한의 것 같습니다 그리고 나서 핀을 추가하십시오 그래서 거기에 우리는 주소와 설명을 입력합니다

맞춤 아이콘을 선택하면 그 가능성이 있습니다 우리는 여기에서 그것을 보지 못한다 런던 아이 (London Eye)에 설정되어 있기 때문에 우리가 볼 수 있도록 뭔가를 설정하려고합니다 그것 오, 우리가 간다

그리고 거기에 런던이 다시있다 그래서 거기서 나는 당신의 도서관에서 단순히 이미지, 이미지를 선택할 수 있습니다 괜찮아 거기에 우리는 "고급지도"에 가서 당신이 연락처 양식을 만들고 싶다면 우리는 다시 "연락처 양식 7"위젯과이 두 가지 모두를 입력해야합니다 "연락처 양식 7 "과"고급지도 "는 JetElements 플러그인의 일부이므로 내부에 있습니다 이 플러그인

JetElements를 사용하지 않으면 위젯을 사용할 수 없습니다 요소를 설치하고 활성화하면 자동으로 추가됩니다 JetElements 플러그인 하지만 그걸 여기에 놓아두고 이 같은 일반적인 디자인은 접근 할 수 있지만 다른 방법은 갈 수 있습니다 다시 마법의 버튼으로

Monstroid 2를 사용하고 있기 때문에 나는이 옵션을 가지고 있습니다 미리 만들어진 수천 개의 섹션 중 하나를 선택하십시오 그렇게 사용하지 않으십시오 가자 우리가 할 수있는 일은 "연락처 양식"또는 "연락처"도 찾는 것입니다

그래서 여기에서 우리는 지도, 문의 양식으로 페이지의 전체 섹션을 볼 수는 있지만 괜찮습니다 이미지도를 만들었습니다 이제 연락 양식 만 있으면됩니다 그래서 적합한 레이아웃 그래서 내 양식을 위해서 나는 이것을 골랐다

그래서 "자주 묻습니다" 질문 "탭의 도움으로 만든 멋진 기능입니다 JetElements 플러그인 및이 멋진 외관의 문의 양식을 찾을 수 있습니다 그래서 처음부터 다시 설계 할 필요가 없습니다 나는 그것을 페이지에 간단히 삽입 할 수있다

그리고 당신은 더 멀리 나아가는 것을 압니다 내가하는 일은이 위젯을 여기로 끌어다 놓는 것입니다 연락처 양식 자체 그리고 나는이 미리 만들어진 섹션을 삭제합니다 다른 건 필요해

이제는 어떤 종류의 양식을 사용할지 선택할 수 있습니다 실제로 디자인을 사용자 정의하여 전체 디자인과 상호 연관 시키십시오 저희 웹 사이트를 조금 더 내가하고 싶은 것은 그 사이에 약간의 공간을 추가하는 것입니다 지도 자체와 연락 양식 또한 이제지도를 클릭 할 수 없습니다

다시 "지도 스타일"에서 높이를 변경할 수 있습니다 우리가 간다 이제 그들은 같은 높이 이제 섹션에서 우리가해야 할 일은 다시 배경 때문에 우리 메뉴에 완전히 나타나지 않을거야 투명한 배경과 우리는 그것을 원하지 않는다

그래서 나는 배경을 설정하고 이제 약간의 여백을 추가하여 약간의 공백이 생길 것입니다 모든 바로 그걸로 끝이야 "업데이트"를 클릭합시다 이제는 잊지 마라 다시 한번 "업데이트"를 클릭 한 다음 "저장"을 클릭하고, 진드기가 나타날 때까지 기다리십시오

닫고 "메뉴 저장"을 다시 클릭하십시오 이제 메뉴가 업데이트되었다는 알림이 표시됩니다 이제 메뉴로 돌아갑니다 우리의 홈페이지를보고 새로 고침하고 우리가 여기서 본 것은 연락처 링크가 등장하고 일단 우리가 그 위에 마우스를 가져 가면, 우리는 우리가 메가 주요 항목, 우리의지도, 전적으로 작동하고 우리가 할 수있는 문의 양식 바로 여기에 기입하십시오 별도의 페이지로 이동하지 않고 해당 페이지 위로 마우스를 이동하십시오

메가 메뉴 항목 우리가해야 할 일은이 항목이 어떻게 할 수 있는지 살펴 보는 것입니다 만들 수 있습니다 이제 우리는 이것이 어떻게 작동하는지 알게되었습니다 : JetMenu 버튼으로 가서, "Edit 콘텐츠 "와 같은 제품을 만들기 위해 레이아웃에는 JetWooBuilder 플러그인이 필요하지만이 플러그인을 사용하는 것은 선택 사항입니다 JetElements를 사용하고 있다면 "WooCommerce 최신 제품"에 액세스 할 수도 있습니다

'WooCommerce 특집 상품', '최고 평점'및 '판매 상품'이 JetElements 플러그인 그래서 당신이 그것을 바로 떨어 뜨리면 꽤 비슷합니다 형세 이것을 시도하고 삭제하십시오 페이지 당 제품 수 : 알겠습니다

이 열을 삭제합시다 그리고이 위젯이 필요하다고 가정 해 봅시다 내 메가 주요 항목의 모든 공간을 그래서 거기에 간다 주문하신대로, 너는 그리드의 항목에 대한 기본 쿼리를 설정하기 만하면됩니다

과 거기서 제목을 편집하고이 섹션을이 섹션에 드롭합니다 배경이 있는지 확인하십시오 바로 거기에 우리가 간다 이제 업데이트 할 차례입니다 "저장"을 클릭 한 다음 "메뉴 저장"을 클릭하십시오

그럼 우리 페이지로 돌아가서 홈페이지를 새로 고쳐 봅시다 제품 격자가있는 업데이트 된 "콜렉션"메가 메뉴 항목을 확인하십시오 그래서 그 위에 마우스를 올려 놓으면 거기에 메뉴가 나타납니다 사용자가 가져다 놓을 모든 구색을 볼 수 있습니다 거기에 당신이 선물하고 싶은 모든 제품들이 있습니다

이렇게 쉬운 방법입니다 메가 메뉴를 추가하고 웹 사이트에 메가 메뉴 항목을 추가하려면 당신이 당신의 메가 메뉴 항목에서 상상할 수있는 거의 모든 것, 최신 블로그 게시물과 마찬가지로 연락처 양식 및 고급지도 및 메가에 넣을 수있는 것들의 목록 메뉴 항목을 실제로 계속 사용할 수 있습니다 그리고 그것의 도움으로 가능한 모든 것 JetMenu 플러그인과 Elementor 용 JetElements 플러그인 둘 다 얻을 수 있습니다 이 플러그 접속 식 및 Monstroid 2 WordPress 주제의 당신이 연결을 따르는 경우에 아래에 설명 상자에 넣었습니다

이것이 바로 이것입니다 JetMenu 플러그인을 사용하여 메가 메뉴를 만드는 방법에 대한 자습서 Elementor 용 JetElements 플러그인 이 튜토리얼이 유용했기를 바랍니다 매우 고맙습니다 많이 보게

How to Design & Customize Blog Posts in WordPress Using Elementor

– 안녕하세요 YouTubers, 엘리멘터의 Noah입니다

오늘 저는 환상적인 Posts Widget에 대해 알려 드리겠습니다 이 위젯을 사용하면 페이지, 그리고 나는 수많은 레이아웃의 커스텀 포스트 타입을 반복한다 매우 중요하고 실용적인 위젯, 그래서 시작합시다 먼저 위젯을 검색합니다 안으로 드래그하고 일단 드래그하면 내용 탭과 스타일 탭이 나타납니다

콘텐츠 영역에서 모든 권한을가집니다 위젯의 레이아웃 및 쿼리를 통해 첫째, 레이아웃 영역에서 우리는 Columns, 열의 양을 설정할 수있는 곳 위젯에 표시되는 당신은 1과 6 사이에서 선택할 수 있습니다, 그래서 내가 두 가지를 선택한다고 말하면서, 2 열 또는 4 열, 기타 다음으로 우리는 금액을 설정할 수있는 게시 횟수를 가지고 있습니다 위젯에 표시 할 게시물의 정확한 양 예를 들어 삽입하면 하나의 게시물 만 보입니다 또는 20, 당신은 20 개의 게시물을 보게 될 것입니다

기타 그런 다음 이미지 위치를 설정하고 내용에 대한 이미지의 위치 위의 내용과 마찬가지로 Top이 있습니다 왼쪽, 권리 또는 전혀 그런 다음 이미지 크기를 설정할 수 있습니다 미리보기 이미지의 크기 ~ 전체

이미지 비율이 있습니다 여기에서 설정할 수 있습니다 위젯에 표시된 이미지의 정확한 비율 그리고 나서 우리는 Image Width, 여기서 이미지의 정확한 너비를 설정할 수 있습니다 위젯에 표시됩니다 이제 픽셀 단위 또는 백분율로 설정할 수 있습니다

다음에는 제목 및 발췌문 설정이 있습니다 위젯의 경우, Title에 대해 설정할 수 있습니다 여기를 클릭하여 그것을 보이거나 숨길 지 여부 그것을 보여 주기로 선택하면, 다음과 같은 설정, 제목 HTML 태그, 여기서 제목에 HTML 태그를 설정할 수 있습니다 제목, div, 범위 또는 일반 텍스트로 사용됩니다

발췌문도 같으므로 여기를 클릭하여 그것을 보이거나 숨길 지 여부 그것을 보여 주기로 선택하면, 당신은 다음과 같은 설정, 발췌 길이, 단어의 정확한 양을 설정할 수있는 곳 위젯의 발췌 부분에 표시됩니다 기본값은 25로 설정되어 있으며 5로 설정할 수 있습니다 또는 10, 어떻게 변화하는지 보아라 기타 이제 우리는 메타 데이터를 가지고 있습니다

여기에서 메타 데이터를 선택할 수 있습니다 위젯에 표시됩니다 이 필드를 클릭하면 옵션 목록이 열리고, 그래서 저자, 날짜, 시간 또는 코멘트가 있습니다 여기에 추가 할 수 있습니다 여기를 클릭하여 제거 할 수 있습니다

다음으로 세퍼레이터를 사이에두고, 여기에 정확한 구분 기호를 삽입 할 수 있습니다 당신이 메타 데이터 사이에 표시하고 싶은, 바로 여기 말해봐, 나는 단지 그것을 준다 삭감, 어떻게 변하는 지 여기에서 볼 수 있습니다 다음으로 Read More 설정이 있습니다

어디서 볼 것인지 선택할 수도 있습니다 여기를 클릭하여 숨기거나 표시하도록 선택한 경우, 당신은 다음과 같은 설정, Read More Text, 정확한 텍스트를 삽입 할 수있는 곳 여기에 표시됩니다 위젯의 더 많은 부분을 읽으십시오 예를 들어, 나는 이것을 삭제한다 여기 어떻게 변하는 지보십시오

그것은 위젯의 레이아웃 설정입니다 위젯의 쿼리 설정으로 이동합니다 첫째, 여기에 근원이 있습니다 소스를 선택할 수있는 곳 위젯이 내용을 표시합니다 우리는 포스트, 페이지, 제품, 갤러리를 가지고 있습니다

및 Manual Selection (수동 선택)을 참조하십시오 소스 설정 후에는 필터 설정이 있습니다 첫째, 우리는 카테고리, 카테고리별로 표시된 게시물을 필터링 할 수 있습니다 예를 들어 패션 카테고리가있는 경우 내 웹 사이트에서 나는 유행, 패션 게시물 만 표시되는 방법보기 태그에도 동일하게 적용됩니다 예를 들어 내 웹 사이트에 devices 태그가있는 경우 나는 장치, 장치 게시물 만 위젯에 표시되는 방법을 확인하십시오

이 두 필터를 제외하고, 우리는 매우 유용한 Authors Filter도 가지고 있습니다 많은 저자와 함께 웹 사이트를 만드는 사람들을 위해 특정 저자의 게시물 만 표시하려고합니다 여기를 클릭하면 내 웹 사이트에서 저자 목록이 열립니다 이제 돌아가서 너에게 보여 줄게 소스, 수동 선택 옵션

여기에 소리가 나는대로 수동으로 삽입 할 수 있습니다 표시하려는 정확한 게시물을 선택하십시오 예를 들어 휴가를위한 팁이라는 게시물이 있습니다 이것을 삽입하면, 목록에 자동으로 표시되어야합니다 나는 그것을 클릭한다

방학 팁 (Tips for Vacation) 게시물 만 표시되는 방법을 참조하십시오 이것이 수동 선택 출처 옵션이었습니다 다음으로 고급 옵션이 있습니다 여기에 주문을 할 수있는 주문 바이가 있습니다 날짜, 제목, 메뉴 순서 또는 무작위

그런 다음 주문을 할 수 있습니다 오름차순 또는 내림차순 옵셋을 삽입 할 수 있습니다 게시물의 건너 뛰기 양 예를 들어, 두 개를 삽입하면 위젯이 시작됩니다

그 표시는 세 번째 게시물부터 시작됩니다 이제 모든 콘텐츠 옵션을 살펴 보았습니다 포스트 위젯의 경우 스타일 영역으로 이동합니다 여기서 우리는 레이아웃, 이미지 및 위젯에서 컨텐츠 스타일 옵션을 선택하십시오 Layout에는 먼저 Column Gap이 있고, 정확한 간격을 설정할 수있는 곳 위젯의 열 사이

우리는 당신이 설정할 수있는 Row Gap을 가지고 있습니다 위젯의 행 사이의 정확한 간격 우리는 정렬을 할 수 있습니다 위젯에서 컨텐츠의 정렬은 Left, 가운데 또는 오른쪽 다음으로 이미지 스타일 옵션이 있습니다

테두리 반경을 설정할 수있는 곳 픽셀 또는 백분율로 우리가 100 달러를주고, 또는 50, 기타 간격을 설정할 수있는 간격이 있습니다 이미지 간의 정확한 간격 그리고 위젯의 내용 레이아웃과 이미지 스타일 옵션이었습니다 다음으로 컨텐츠 스타일 옵션의 경우, 우리는 당신이 설정할 수있는 제목 색을 가지고 있습니다

제목의 색 및 지형 (Topography)을 활성화 (Activated)로 설정할 수 있습니다 그렇게한다면 표준 토포 그래피 옵션을 사용할 수 있습니다 크기, 글꼴 패밀리, 무게, 변형, 스타일, 라인 높이 및 문자 간격 지형 후에, 우리는 제목 간격, 사이에 공간을 설정할 수있는 곳 제목과 내용의 나머지 부분 그런 다음 메타 색상을 설정할 수 있습니다

여기 메타 데이터의 색상, 분홍색 우리는 Meta Separator Color, 구분자의 색을 설정할 수있는 곳 지형도 열립니다 지형도 작성 점 설정 간격을 설정하기위한 메타 간격 메타 데이터와 나머지 콘텐츠 사이에 그런 다음 발췌 색상이 있습니다 발췌의 색을 설정할 수 있습니다

및 그것의 지형과 발췌 공간 발췌문과 Read More 텍스트 사이에 마지막으로, 우리는 Read More Color, 당신은 Read More의 색상을 설정할 수 있습니다 그리고 그것의 지형도 마찬가지다 그것들은 포스트 위젯의 스타일 옵션이었습니다 이제 위젯의 기본 사항을 살펴 보았습니다 몇 가지 간단한 예를 보여 드리겠습니다

당신이 설정할 수있는 모든 디스플레이에 대해 아래로 스크롤하여이 첫 번째 섹션에서 우리는 포스트 위젯을 가지고 있습니다 이제 여기에서 Image Width (이미지 너비) 내가 설정 했어 말의 폭, 50 또는 49 과 스타일 영상, 테두리 반지름을 100 픽셀로 설정했습니다 그것은 그것을 완전히 둥글게 만들었다

내가 50로 설정했다고 말하면, 조금 둥근 것입니다, 하지만 나는 그것을 100으로 정했다 스타일 옵션의 레이아웃에서, 정렬을 위해 나는 센터로 설정, 왼쪽이나 오른쪽과 달리, 나는 그것을 중심으로했다 다음 섹션에서, 우리는 정말 멋진 섹션을 가지고 있습니다 게시물 위젯의 표시와 같은 격자가 있습니다 어떻게 우리가 이것을 했습니까? Content 영역의 Layout에서 Columns를 설정합니다

3 개의 게시물 수로서, 또한 3 이미지 비율, 우리는 주위에 놀았 당신이 볼 수있는 조금 있습니다 Image Width, 우리는 그것을 Full Width라고했습니다 우리는 색채로 조금 놀았습니다 및 내용 그 자체의 지형 섹션에서 멋진 배경색을주었습니다

이 마지막 절에서, 우리는 위젯을위한 더 많은리스트 디스플레이를 가지고있다 여기서 우리는 Columns를 두 개로 설정합니다 게시물 개수는 4입니다 이미지 위치에 대해 Left, 그래서 Top 대신에 Left로 설정했습니다 및 이미지 크기, 축소판

자, Image Ratio, 우리도 함께 조금 놀았습니다 이미지 너비도 지정했습니다 보시다시피,이 위젯을 사용하면 페이지에 맞춤 게시물 유형을 창의적으로 추가하는 방법 특별한 터치와 디스플레이 나는이 비디오를 즐겼기를 바랍니다 더 많은 비디오 및 자습서를 보려면, YouTube 채널 구독 또는 docs

elementorcom을 방문하십시오