Beaver Builder 1.6.4에는 새로운 색상 선택기, 전체 높이 행, 숫자 카운터 모듈 등이 포함되어 있습니다!
게시 됨: 2015-09-15Beaver Builder 제품 25% 할인! 서둘러 판매가 종료됩니다... 더 많은 것을 기대해 보세요!
Beaver Builder 플러그인 버전 1.6.4가 현재 베타 단계에 있으며 시험해 볼 준비가 되었음을 알리게 되어 기쁩니다! 아직 다운로드하지 않았다면 계정 영역으로 이동하여 베타 버전을 다운로드하여 테스트해보세요.
여기에서 우리가 작업해 온 세부 사항과 베타에서 기대할 수 있는 사항을 살펴보겠습니다.
이전 색상 선택기는 그 목적을 달성했지만 약간 복잡하고 몇 가지 버그가 있었습니다. 새로운 색상 선택기(아래 그림)는 Automattic의 Iris 색상 선택기를 기반으로 구축되었으므로 이것이 합법적이라는 것을 알 수 있습니다. 결국 핵심 WordPress 색상 선택기도 여기에 구축되었습니다!
새로운 색상 선택기에는 16진수 코드에 대한 입력 하나, 채도/밝기 조정 영역 및 색조 슬라이더가 포함되어 훨씬 깔끔한 인터페이스가 있습니다. 그 외에도 일반적으로 웹의 색상 선택기에서 볼 수 없는 새로운 기능도 있습니다. 사전 설정을 저장하는 기능!
사전 설정을 저장하는 것은 쉽습니다. 원하는 색상을 선택하고 더하기 아이콘을 클릭하면 사전 설정이 추가되었음을 알리는 메시지가 나타납니다. 사전 설정을 사용하려면 색상 선택기 하단에 있는 색상 사전 설정 버튼을 클릭하면 사전 설정 목록이 위로 올라갑니다. 사전 설정 창이 나타나면 사전 설정을 클릭하여 선택하거나 삭제 아이콘을 클릭하여 목록에서 제거할 수 있습니다.
브라우저 창 높이를 채우는 행을 만들고 싶었다면 전체 높이 행이 적합합니다! 행을 전체 높이로 만들려면 행에 대한 설정을 열고 새 높이 설정을 전체 높이 로 변경합니다(아래 그림 참조). 정말 쉽습니다!
높이 설정을 전체 높이 로 설정하면 행 높이가 브라우저 창의 크기에 따라 자동으로 조정되고 열이 수직으로 중앙에 배치됩니다.
전체 높이 행 외에도 이제 열 그룹을 모두 동일한 높이로 만들 수 있습니다. 이는 배경이 있는 열이 여러 개 있는 경우(위 그림 참조) 정말 유용한 기술입니다. 기둥 그룹의 높이를 동일하게 만들려면 아래 그림과 같이 기둥 설정에서 새로운 Equalize Column Heights 설정을 Yes 로 변경합니다.
열 높이 균등화를 예로 설정하면 열의 내용 양에 관계없이 열 높이가 항상 동일해집니다!
Beaver Builder의 열 작업은 항상 다소 제한적이었습니다. 오늘부로 그런 일은 더 이상 없습니다! 열에 대한 설정 아이콘을 클릭하면 모듈이 있는지 여부에 관계없이 열을 편집, 삭제 및 삽입하는 기능을 포함하여 여러 가지 새로운 옵션이 있는 드롭다운(위 그림 참조)이 표시됩니다.
앞에 열 삽입을 클릭하면 강조 표시된 열 앞에 새 열이 삽입되고, 뒤에 열 삽입을 클릭하면 강조 표시된 열 뒤에 새 열이 삽입됩니다. 이제 이 새로운 기능을 사용하면 최대 12개의 열을 행에 추가할 수 있습니다!
목록의 마지막 옵션인 열 너비 재설정을 사용 하면 그룹에 있는 모든 열의 너비를 동일하게 재설정할 수 있습니다. 이 게시물의 다음 기능인 드래그로 열 크기를 조정하는 기능과 함께 사용할 때 유용합니다.
이번 릴리스에 포함된 UserVoice 페이지에서 많은 요청을 받은 또 다른 기능은 드래그하여 열 크기를 조정하는 기능입니다. 이제 새 너비가 만족스러울 때까지 열이나 모듈의 왼쪽 또는 오른쪽 가장자리를 끌 수 있습니다. 이 방법으로 열 크기를 조정하면 크기가 조정되는 열의 새 너비를 알려주는 두 개의 표시기가 나타납니다(위 그림 참조).
드래그 가능하고 크기 조정이 가능한 열이 @BeaverBuilder에 등장합니다! https://i.imgur.com/56p7iJW.jpg X에 공유비교적 사소하지만 위 스크린샷에서 볼 수 있듯이 UI를 정리하기 위해 몇 가지 작은 변경 사항을 적용했습니다. 특히 글꼴 크기를 약간 줄이고 간격을 좁히고 모듈 이름을 삭제하여 행, 열 및 모듈 오버레이의 작업 아이콘을 정리했습니다.
이는 처음 오버레이를 디자인했을 때 작업 아이콘이 적었기 때문에(중복 및 열 설정이 존재하지 않음) 상황을 덜 어수선하게 보이도록 하기 위한 노력의 일환이었습니다. 또한 모듈 오버레이의 모든 아이콘은 한데 모여 작은 열의 두 번째 줄로 떨어지는 경향이 있었습니다. 훨씬 더 작은 열에서도 이런 일이 발생할 수 있지만, 모듈 이름이 삭제되었으므로 훨씬 더 좋아 보입니다.
우리는 핵심 빌더를 개선하는 데 바쁜 동시에 새 모듈을 몰래 도입하기로 결정했습니다. 그 모듈은 애니메이션 숫자(Animated Numbers) 모듈인데 정말 멋지네요! 숫자를 입력하고 페이지에서 모듈을 스크롤할 때 입력한 숫자까지 0부터 애니메이션되는 것을 지켜보세요.
다양한 스타일 및 텍스트 설정 외에도 애니메이션 숫자 모듈을 사용하면 숫자만 표시하거나 애니메이션 원으로 둘러싸인 숫자 또는 애니메이션 막대에 숫자를 표시할 수 있습니다.
백분율을 표시하고 싶지 않더라도 문제 없습니다! 표준 숫자를 표시하도록 선택하고 애니메이션 비율을 계산하는 데 사용할 합계를 입력할 수도 있습니다. 예를 들어 이렇게 하면 숫자 250과 500을 입력할 수 있으며 텍스트는 250으로 애니메이션되지만 원이나 막대는 50%로 애니메이션됩니다. 애니메이션 숫자 모듈의 이러한 기능을 사용하면 애니메이션으로 만들 수 있는 데이터 유형이 거의 무한해집니다!
이번 릴리스에서 마지막으로 중요한 것은 새로운 글꼴 설정입니다. 이는 개발자가 Google 글꼴에 대한 기본 지원 및 실시간 미리보기를 통해 모듈에 글꼴 모음 및 글꼴 두께 선택(아래 참조)을 표시하는 데 사용할 수 있는 특수 설정입니다.
우리는 일반적으로 글꼴 모음과 같은 것이 테마에 따라 결정되어야 한다고 생각하지만, 일회성 제목을 만드는 데 이 설정을 사용하는 것이 합리적이기 때문에 이 새로운 설정을 제목 모듈에 추가했습니다. 이 설정을 다른 모듈에 추가하는 것이 타당한지 확인하기 위해 피드백을 모니터링할 예정입니다. 하지만 Beaver Builder 모듈에서 항상 글꼴 모음을 설정하는 경우에는 설정하는 것이 더 나을 수도 있다는 점을 명심하세요. 대신 테마에 넣으세요.
이 릴리스를 가능하게 하는 데 도움을 준 모든 놀라운 작업에 대해 Favolla의 Diego 팀과 Thais 팀에 감사의 말씀을 전하고 싶습니다. 행/모듈 템플릿 업데이트를 마무리하는 동안 여기에 표시된 많은 기능을 개발하는 중입니다. 그들이 최근에 약혼했다고 제가 언급했었나요? 그 두 사람이 굴러 가고 있다고 말하는 것이 안전합니다!
아직 듣지 못하셨다면 Robby와 저는 다음 주 CaboPress에 참석하여 WordPress 커뮤니티의 뛰어난 사람들로부터 배울 것입니다. 우리는 그 경험이 우리가 비즈니스로 성장하고 Beaver Builder의 미래에 대한 비전을 형성하는 데 어떻게 도움이 될지 정말 기대하고 있습니다. 따라서 이 베타 기간은 다른 릴리스의 일반적인 2주보다 길 수 있습니다. 큰 문제가 없다면 10월 5일 주에 출시될 것으로 예상됩니다.
지난 로드맵 게시물에서 이미 많은 항목을 완료했지만 아직 해야 할 일이 많이 남아 있습니다! 아마도 조만간 또 다른 로드맵 게시물을 작성하겠지만 그동안 우리가 현재 작업 중인 내용은 다음과 같습니다.
이번 업데이트에서 가장 마음에 드는 부분은 무엇인가요? 내 것은 아마도 새로운 색상 선택기나 열 개선 사항일 것입니다. 아래 댓글을 통해 알려주세요! 언제나 그렇듯이 피드백이 있거나 문제가 발생하면 주저하지 말고 알려주시기 바랍니다.
놀라운 새로운 기능. 항상 전체 높이 행이 필요한 프로젝트로 작업합니다.
@Desmond에게도 같은 질문이 있습니다. 헤더 높이를 빼고 상단에 전체를 원합니다.
그런데 새로운 기능을 제공해 주셔서 감사합니다. 계속 훌륭한 일을 하세요!
좋은 소식입니다!
행과 열의 개선이 마음에 들었습니다. 이제 거의 완벽해지기 위해서는 https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/6694111-columns-inside-columns에서 제안한 대로 열 내부에 열을 허용하면 됩니다.
정말 잘했어요! 당신은 바위!
이 커뮤니티에 참여하게 되어 정말 기쁩니다!
문안 인사
환상적이네요. 또 당황스럽네요. 여기서 제가 가장 좋아하는 것은 Equal Column Heights입니다. 감사합니다.
안녕하세요 저스틴, 아주 좋아요! 이러한 새로운 기능을 생산 현장에서 언제 100% 사용할 수 있고 안전하게 사용할 수 있을지 예상하십니까?
이 새로운 기능은 정말 대단해요!!!
BB가 업데이트될 때마다 작업이 점점 더 쉬워집니다!
모두들 환상적인 출시! 잘했어요!
비전을 갖고, 훌륭한 피드백을 모두 들어주시고, 무엇보다도 BeaverBuilder를 WordPress 사이트 구축을 위한 최고의 솔루션으로 만들어주셔서 감사합니다.
저스틴 꼭 해야 할 말은... 너희들이 새 업데이트를 출시할 때마다 소름이 돋는다. 내 투자는 계속해서 그 자체로 비용을 지불하는 것 같습니다. 얼마 전 고객과 함께 비버 빌더로 웹사이트를 업데이트하는 방법에 대해 교육했는데 스카이프를 통해 일반적으로 2시간이 걸리는 작업이 30분이 걸렸습니다. 나는 놀랐고 고객은 매우 흥분했습니다. 나는 단지 당신들이 훌륭하다고 말하고 싶습니다….저는 베타 버전을 다운로드하여 가지고 놀 것입니다.
헤더의 글꼴 설정은 기본적으로 테마를 사용하도록 설정한 다음 글꼴 설정 옵션을 제공해야 합니다. 스테이징 사이트에서 테스트한 결과 나머지 테마와 일치하는 제목이 즉시 helvetica로 변경되었습니다. 기존 사용자에게는 예상되지 않는 동작입니다.
그 외에는 편리한 기능인 것 같습니다.
WOWzer 정말 멋진 업데이트네요. 내가 해킹했거나 기다려온 많은 것들이 있습니다! 훌륭한 작업입니다. 정말 마음에 듭니다.
좋아요. 비버 빌더.
안녕,
아직 고객은 아니지만 데모를 시도하고 귀하의 블로그에서 업데이트를 확인했으며 리뷰 및 기타 빌더를 조사하여 정보에 입각한 결정을 내렸습니다.
나는 확신한다고 말해야합니다 !!!
당신들은 나를 위해 이 플러그인/테마 빌더를 디자인하고 구축하고 있는 것 같습니다.
그것은 모두 매우 직관적이고 잘 생각된 것 같습니다.
나는 매우 단순하고 깨끗한 경험을 좋아합니다.
“SIMPLISTIC”에 대해서는 아무리 강조해도 지나치지 않습니다.
결국 대부분의 최종 사용자와 사이트/비즈니스 소유자는 개발자가 아니므로 최대한 사용하기 쉬워야 합니다.
우수한 제품 !!!
통계가 정말 좋아 보이는군요. 더 이상 내 모듈을 업데이트할 필요가 없을 것 같습니다. 열과 색상 선택기에 대해서도 정말 펌핑되었습니다. 이것은 업데이트의 짐승입니다.
[...] 이 업데이트에 대한 자세한 내용은 Beaver Builder 블로그에서 Justin의 게시물을 참조하세요. […]
좋은 업데이트입니다! 동일한 열을 좋아합니다! 하느님 감사합니다!
환상적인 개선! 또한 색상 선택기에 문제가 거의 없었습니다. ETA는 얼마나 남았나요?
현재 베타 버전을 테스트 중인데 버그를 어디에 보고해야 할지 모르겠습니다. 여기를 클릭하세요. 내 Safari(버전 8.0.4(10600.4.10.7))에서는 색상 선택기가 작동하지 않습니다. 색상 상자를 클릭하여 색상 선택기를 활성화하면 맨 오른쪽에 잠시 열렸다가 사라집니다. 다른 사람이 그렇게 보고한 적이 있나요? 스크린캐스트 비디오가 필요한지 알려주세요. 그 외에 다른 문제는 발견하지 못했습니다. 이번 릴리스는 정말 놀랍습니다. 매우 만족스럽습니다!
여러분 – 제가 놓쳤다면 사과드립니다 – 하지만 새로운 색상 선택기 업데이트/재작성은 알파 투명성을 허용합니까 – 최신 베타 릴리스가 마음에 듭니다 – 그 어느 때보다 강력합니다!!
이제 잘 완성된 비디오 모듈이 필요합니다. 그것은 매우 도움이 될 것입니다.
안녕 나의 위대한 친구들!
1.6.4를 간절히, 애타게 기다리고 있습니다. 훌륭하고 아름다운 새 기능과 향상된 기능을 모두 갖추고 있습니다.
당신은 나를 BB 광신자로 만들었고 나는 그것을 사랑하는 것을 멈출 수 없습니다.
계속 훌륭한 일을 하세요.
당신은 최고입니다!
정말 대단해요 저스틴. 아이러니하게도 오늘 아침에는 절대 위치에 있는 콘텐츠가 포함된 전체 높이 행을 만들기 위해 사용자 정의 CSS 작업을 하고 있었습니다.
몇 가지 질문:
전체 높이 행에 이전 브라우저에 대한 대체 기능이 있나요? 다른 페이지 요소를 염두에 두고 높이도 계산합니까? 예:
.awesome-마스트헤드 {
최소 높이: 600px;
최소 높이: calc(100vh – 300px);
}
어쨌든, 좋은 업데이트입니다. 여전히 포스트/아카이브 템플릿을 찾아 헤매고 있습니다. (패딩/여백을 사용하는 대신) 구조적 요소에 특정 높이를 설정할 수 있는 것도 좋을 것입니다!
너희들은 흔들린다.