워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더의 유료 버전에서는 템플릿을 숏코드로 원하는 곳에 추가할 수 있습니다. 이 방법을 이용하면 엘리멘터 탭 안에 아코디언이나 토글, FAQ, 가격표(Pricing Table) 등을 표시할 수 있습니다. 엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시) 엘리멘터 페이지 빌더에서는 탭 기능을 사용하여 각 탭에 여러 가지 콘텐츠를 표시할 수 있습니다. 각 탭 내에 다른 엘리멘터 요소나 섹션을 추가하고 싶은 경우가 있습니다. 예를 들어, 다음 그 avada.tistory.com 엘리멘터 템플릿에 숏코드가 표시되지 않는 경우가 있을 수 있습니다. 이 경우 아래의 내용을 참고해보세요. 엘리멘터 페이지 빌더 템플릿 숏코드가 표시되지 않는 경우..

워드프레스 엘리멘터(Elementor) 페이지 빌더에서는 기기 해상도에 따라 다르게 레이아웃을 설정할 수 있도록 반응형 모드를 지원합니다. 사이트 설정에서 각 기기에 대한 분기점 해상도 범위를 지정할 수 있고, 추가적인 커스텀 분기점(Additional Custom Breakpoints) 기능을 활성화하면 더 많은 기기에 대하여 세부적으로 레이아웃을 지정하는 것도 가능합니다. 엘리멘터 페이지 빌더: 반응형 모드 엘리멘터(Elementor)에서는 기기 해상도에 따라 특정 섹션이나 요소(엘리멘트)를 표시하거나 숨길 수 있는 반응형 옵션을 제공합니다. 해당 요소나 섹션을 선택한 다음, 고급 탭 » 반응형 섹션의 가시성 부분에서 숨기고자 하는 기기 유형을 선택하면 해당 섹션이나 엘리먼트가 선택된 기기에서 표시되..

그림과 같이 페이지 전체 화면을 배경 이미지로 채우고 싶은 경우 HTML/CSS 코드 또는 자바스크립트를 사용하여 구현할 수 있습니다. 워드프레스에서 엘리멘터 페이지 빌더를 사용하는 경우에는 매우 간단한 방법으로 페이지 전체를 배경 이미지로 채울 수 있습니다. 엘리멘터 페이지 빌더에서 페이지 전체 화면을 배경 이미지로 채우는 방법 Elementor 페이지 빌더를 사용하는 경우 섹션에 배경 이미지를 지정하고, 배경 이미지가 화면 전체를 채우도록 설정할 수 있습니다. 1. 페이지 편집 화면에서 페이지 템플릿에 Elementor 캔버스를 지정하도록 합니다. 2. 엘리멘터 페이지 빌더 편집 화면에서 섹션을 추가하고 섹션 편집 패널에서 스타일 탭을 클릭합니다. 위의 그림과 같이 백그라운드 이미지를 지정하고 위치(..

워드프레스 엘리멘터 페이지 빌더의 Tabs 위젯을 사용하여 탭 레이아웃을 쉽게 만들 수 있습니다. 탭은 수평 스타일과 수직 스타일 모두 가능합니다. 하지만 모바일 기기에서는 탭 레이아웃이 유지되지 않고 세로로 쌓이는 형식으로 표시됩니다. 모바일에서 엘리멘터 Tabs 위젯의 탭 레이아웃 유지하기 Elementor 페이지 빌더의 탭 기능을 사용하여 탭을 만들었을 때 모바일에서도 PC에서와 비슷한 레이아웃을 유지하고 싶은 경우 다음 방법을 이용할 수 있습니다. 1. 먼저 Tabs 편집 패널에서 고급(Advanced) 탭을 클릭한 다음, CSS ID 필드에 [**mobile-tabs**]를 입력합니다. 2. 엘리멘터 프로를 사용하는 경우 Custom CSS 섹션에 다음 사용자 정의 CSS 코드를 입력합니다. /..

워드프레스 인기 테마 중 하나인 The7은 꾸준히 베스트셀링 테마 리스트에 이름을 올리고 있습니다. 아바다(Avada) 테마가 10년 이상 판매 1위를 기록하고 있고, 그 뒤를 이어 우커머스용 테마인 Flatsome이 랭크되어 있습니다. The7 테마는 Flatsome에 이어 3위를 차지하고 있습니다. 인기 테마 중에서 더세븐 테마가 39달러로 저렴한 편입니다. 본래는 The7 테마도 다르 테마와 가격이 비슷한 수준이었습니다. The7 테마도 아바다, 엔폴드 등의 테마와 함께 판매 상위를 기록하다가 4~5년 전에 순위가 뒤로 밀려났습니다. The7은 블랙 프라이데이 기간을 맞이하여 가격을 현재의 39달러 수준으로 내린 후에 가격을 유지하고 있습니다. 워드프레스 The7 테마 데모 로드 시 참고 사항 Th..

워드프레스 엘리멘터 이미지 캐러셀(Image Carousel)을 사용하면 고객사 리스트 슬라이드 등을 만들 수 있습니다. 하지만 Elementor의 이미지 캐러셀에 추가한 이미지들에 링크를 설정할 경우 해당 캐러셀 내의 모든 이미지에 동일한 링크가 추가됩니다. 링크 옵션에 대하여 "사용자 URL"을 선택하면 위의 그림과 같이 하나의 링크만 지정이 가능합니다. 개별 이미지에 다른 링크를 설정하고 싶은 경우 Custom links in Elementor Image Carousel이라는 무료 플러그인을 사용할 수 있습니다. 그러나 이미지 캐러셀 한 두 개 때문에 플러그인을 설치하는 것이 마음에 들지 않을 수 있을 것입니다. 아래의 방법을 이용하면 플러그인을 사용하지 않고 자바스크립트(Javascript)로 각..

고객사 소개 페이지에서 고객사 로고들을 왼쪽 또는 오른쪽으로 움직이는 슬라이드(좌우 롤링 배너)로 만들어 표시하는 경우가 많이 있습니다. 쉽게 이해하기 위해 다음 영상을 보시면 기업 로고들이 배열되어 가로로 회전하고 있습니다. 테스트용으로 임의의 이미지를 업로드하여 만들어 보았습니다. 제대로 만들려면 먼저 크기가 일정한 고객사 로고 파일을 준비하면 되겠죠. 위의 영상과 같이 고객사를 소개하는 회전 슬라이더를 워드프레스에서 만들려는 경우, 테마 기능이나 플러그인을 사용할 수 있습니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 이미지 캐러셀(image carousel) 기능을 사용하여 비슷하게 구현할 수 있습니다. 워드프레스 아바다(Avada)에서 Image Carousel 사용하기 - 워드프레스 중..

워드프레스 사이트에서 엘리멘터(Elementor)로 편집 시 "사이트에 기본 키트가 없습니다" 오류가 발생하면서 페이지 편집이 안 되는 경우가 있습니다. 이 에러가 발생하는 경우 대처 방법에 대하여 살펴보겠습니다. 워드프레스 엘리멘터 '사이트에 기본 키트가 없습니다' (Your site doesn't have a default kit) 오류 워드프레스 Jupiter 테마에서 엘리멘터 페이지 빌더로 페이지 편집 시 다음과 같이 "사이트에 기본 키트가 없습니다, 키트가 삭제된 것 같습니다. 새 키트를 만들거나 휴지통에서 복원해 보세요" 에러 메시지가 표시되는 경우가 있습니다. 영문으로는 "Your site does't have a default kit. Seems like your kit was delete..

워드프레스에서 페이지 빌더를 사용하면 코딩 지식이 없어도 쉽게 사이트를 만들 수 있습니다. 여러 가지 페이지 빌더 중에서 현재 엘리멘터(Elementor)가 가장 인기를 얻고 있습니다. 엘리멘터를 이용하여 페이지를 편집한 후에 저장하려고 시도하면 "연결 끊김" 오류가 발생하는 경우가 있습니다. "연결 끊김. Saving has been disabled until you're reconnected"(다시 연결될 때까지 저장이 비활성화되었습니다) 에러가 발생하는 경우 워드프레스 ‘연결 끊김’ 문제 해결 방법을 참고하여 문제 해결을 시도해볼 수 있습니다. 가비아 워드프레스 호스팅에서 호스팅되는 워드프레스 사이트에서 "연결 끊김" 오류가 발생하는 경우 가비아에서는 워드프레스 전용 호스팅인 워드프레스 호스팅 상품..

워드프레스에서 페이지에 따라 다른 헤더나 푸터를 사용하고 싶은 경우가 있습니다. 일반적인 테마에서는 헤더는 사이트 전체에 공통으로 사용되고, 페이지에 따라 다른 헤더를 사용하려면 테마 파일을 수정해야 합니다. 하지만 Divi 테마와 아바다 등 일부 워드프레스에서는 알림판 내에서 헤더 템플릿을 만들어서 페이지마다 다른 헤더를 지정하는 것이 가능합니다. 엘리멘터 페이지의 경우 Elementor Pro의 테마 빌더를 사용하여 헤더를 자유롭게 커스텀하고 위치를 지정할 수 있습니다. 워드프레스에서 페이지마다 다른 헤더 사용하기 일반적으로 페이지마다 다른 헤더를 사용하려면 테마 파일(보통 [**header.php**])을 커스텀해야 합니다. 하지만 워드프레스가 발전하면서 일부 테마와 페이지 빌더에서는 워드프레스 관..