토글 메뉴

Beaver Builder와 Hestia를 사용하여 페이지 정보 머티리얼 디자인을 만드는 방법

게시 됨: 2018-05-03

Beaver Builder 제품 25% 할인! 서둘러 판매가 종료됩니다... 더 많은 것을 기대해 보세요!

Creating a material design about page
  • 비버 빌더

Beaver Builder와 Hestia를 사용하여 페이지 정보 머티리얼 디자인을 만드는 방법

오늘 포스팅에서는 ThemeIsle의 친구 Karol을 소개하게 되어 기쁩니다. Karol은 Beaver Builder를 사용하여 머티리얼 디자인 접근 방식으로 정보 페이지를 구축하는 방법에 대한 매우 자세하고 철저한 튜토리얼을 작성했습니다. 튜토리얼에는 헤스티아 테마가 포함되어 있지만, 기술과 전략은 어떤 ​​테마에도 적용할 수 있습니다. 고마워요, 카롤!

정보 페이지를 적절하게 디자인하면 온라인 비즈니스의 전반적인 이미지에 많은 영향을 미칠 수 있습니다.

하지만 문제가 있습니다…

현실을 직시하자면, WordPress가 제공하는 표준기본페이지 모양은 당신이 목표로 하는 것이충격이라면 잘리지 않을 것입니다. 기본적으로 얻을 수 있는 것은 페이지 본문에 하나의 기본 콘텐츠 블록이 있는 고전적인 페이지 레이아웃입니다(사용 중인 테마와는 관계 없음).

우리는 더 잘할 수 있어요! 그리고 여러분이 예상한 대로 우리는 다음을 사용하여 이를 수행할 것입니다.

  • 여러분이 가장 좋아하는 페이지 빌더(그리고 저희도 마찬가지),
  • 무료 Hestia 테마(Hestia는 Beaver Builder 호환성을 염두에 두고 제작되었지만 이 방법은 모든 품질 테마에서 작동해야 합니다).

이 가이드에서는훌륭한 머티리얼 디자인 정보 페이지를 만드는 방법을단계별로 보여 드리겠습니다. 우리가 원하는 최종 효과는 다음과 같습니다.

이와 같은 페이지를 만드는 것은 처음에 보이는 것보다 훨씬 간단합니다. 단계별 방법은 다음과 같습니다.

좋은 About 페이지에 필요한 것

정보 페이지를 구축할 때 몇 가지 주요 목표를 달성하는 것을 목표로 해야 합니다.

  • 방문자에게 귀하의 비즈니스/브랜드를 소개하고,
  • 당신의 이야기를 들려주세요,
  • 사업이 하는 일을 간략하게 요약하고,
  • 최고의 제품 및/또는 콘텐츠를 선보이고,
  • 사람들에게 당신에 대해 더 많은 정보를 얻을 수 있는 곳을 알려주세요.

모든 것이 제자리에 들어가는 방법은 다음과 같습니다.

Beaver Builder와 Hestia 테마를 받아 시작하세요.

아직 사용하지 않으셨다면 여기를 클릭하여 Beaver Builder를 사용해 보세요. 여기에서 무료 버전을 사용할 수도 있지만 이렇게 하면 정보 페이지에 배치할 수 있는 콘텐츠 블록 유형이 제한됩니다.

Hestia는 무료 테마이며 여기에서 다운로드할 수 있습니다(또는 WordPress 대시보드를 통해 직접 찾을 수 있습니다).

그렇다면 왜 헤스티아일까요? 전체 공개, 저는 테마를 만든 회사에서 일합니다. 이것이 바로 Hestia가 Beaver Builder와 매우 훌륭하게 통합된다는 사실(실제로는 페이지 빌더를 염두에 두고 만들어졌음)과 Beaver Themer가 공식적으로 지원하는 몇 안 되는 테마 중 하나라는 것을 아는 이유이기도 합니다.

메모.앞서 언급했듯이 이 방법은 Hestia에만 적용되는 것이 아니며 다른 테마의 90%,적어도 고품질 테마에서도 작동합니다(윙크!).

Beaver Builder(프로 또는 무료)와 Hestia를 사이트에 설치하면 실제 페이지 생성을 시작할 수 있습니다.

빈 정보 페이지 만들기

한동안 WordPress를 사용해 왔다면 초기 단계는 놀랄 일이 아닙니다.

정상적으로 새 페이지를 만드는 것부터 시작하세요.

Beaver-Builder에 최적화된 전체 경험을 얻으려면 페이지 템플릿을 "페이지 빌더 전체 너비"로 전환하세요. 초안을 저장합니다.

이렇게 하면 테마의 기본 스타일이 대부분 제거되고 머리글과 바닥글만 남습니다.

이제 Beaver Builder를 시작할 차례입니다.

기본 제목과 환영 블록 만들기

첫째, 페이지 상단 어딘가에 "회사 소개"를 넣는 것이 좋습니다.

새로운 1열 행을 만들어 보겠습니다.

멋지게 보이도록 고정 콘텐츠 너비가포함된전체 너비로 설정해 보겠습니다. 다음과 같습니다:

또한 배경에 보기 좋은 이미지를 배치해 보겠습니다.

좀 더 균일하게 보이도록배경 오버레이를추가해 보겠습니다. 색상은 귀하와 귀하 브랜드의 공식 색상에 달려 있습니다.

일반적으로불투명도를80%-90%로 설정하는 것이 가장 좋습니다.

이 행에 대한 마지막 사항입니다. 탭을 Style에서Advanced로 전환하고위쪽 여백을조정해 보겠습니다. Hestia 테마의 경우 새 블록이 상단 메뉴 표시줄부터 끝까지 확장되도록 하려면상단 여백을-50px로 설정해야 합니다. 행을 조금 더 크게 만들려면상단하단패딩 값을 설정할 수도 있습니다.

다음으로 행에 실제제목블록을 추가해 보겠습니다. 여기에 "회사 소개"를 입력할 수 있습니다. 또한 가시성을 높이기 위해 텍스트 색상을 흰색으로 설정하겠습니다.

기본 페이지 제목이 완료되었으면 환영 블록을 추가해 보겠습니다.

이를 위해 또 다른1열 행을포함하겠습니다. 이번에는 너비를고정으로 설정하겠습니다.

해당 행 안에 두 개의 모듈을 추가해 보겠습니다.

  • 제목– 환영 메시지의 제목
  • 텍스트 편집기- 실제 메시지용

Hestia와 Beaver Builder 통합의 가장 큰 장점은 해당 모듈을 멋지게 보이도록 하기 위해 해당 모듈의 설정을 조정할 필요가 없다는 것입니다. 필요한 것은 사본을 추가하는 것뿐입니다. 내가 여기서 했던 것처럼:

귀하의 제품이나 서비스에 대해 알려주십시오.

이제 귀하의 비즈니스가 무엇인지 사람들에게 알릴 시간입니다. 여기에는 일반적으로 귀하의 제품, 서비스를 소개하거나 사람들에게 일반적으로 귀하와 거래해야 하는 이유를 알려주는 것이 포함됩니다.

이를 수행하는 인기 있는 방법은 세 개의 시각적 콘텐츠 블록을 나란히 배치하는 것입니다. 다음과 같은 것 :

이 효과를 얻으려면 새 행을 추가하는 것부터 시작하겠습니다. 이번에는3열행입니다.

모든 내용을 더 읽기 쉽게 만들려면 전체 행의 너비를 늘리는 것도 좋은 생각입니다. 제 경우에는 고정1100px이 딱 맞는 것 같습니다.

이제 개별 열 채우기를 시작해 보겠습니다. 내가 사용한 정확한 모듈은 다음과 같습니다.

  • 사진
  • 표제
  • 텍스트 편집기

각 모듈의 설정은 거의 기본값입니다. 멋지게 보이도록 많은 조정이 필요하지 않습니다. 물론 해당 블록에 넣을 정확한 이미지와 사본은 귀하에게 달려 있습니다.

이것이 첫 번째 열입니다. 나머지 두 개를 만드는 가장 쉬운 방법은 실제로 각 모듈을 복제하고 제자리에 끌어다 놓는 것입니다. 다음과 같습니다:

당신의 이야기를 들려주세요

우리가 만들고 있는 정보 페이지이므로 페이지에 별도의 섹션을 할당하여 비즈니스가 어떻게 시작되었는지, 팀의 구성원은 누구인지 등에 대한 이야기를 전하는 것이 좋습니다.

전체 페이지의 디자인을 일관되게 유지하기 위해 페이지의 기본 제목이 있는 첫 번째 행을 재사용할 수 있습니다.

페이지 상단으로 스크롤하고 첫 번째 행을 복제하기만 하면 됩니다. 그런 다음 필요한 곳으로 바로 드래그하세요. 다음과 같습니다:

이제 제목을 편집하고 "정보"에서 "우리 이야기"와 같은 제목이나 다른 의미가 있는 제목으로 변경할 수 있습니다.

좀 더 멋을 더하기 위해 제목 바로 아래에 구분 기호를두는 것도 좋아합니다.

내가 변경하는 유일한 설정은 다음과 같습니다.

  • 색상-흰색(#ffffff)
  • 높이4px
  • 너비- 사용자 정의
  • 사용자 정의 너비10%

이는 위에서 볼 수 있는 효과를 제공합니다.

내 스토리 섹션을 구성하는 마지막 두 모듈은 간단한텍스트 편집기(실제 스토리용, 텍스트 색상이 흰색으로 변경됨)와버튼(행동 유도용)입니다.

전체 블록은 다음과 같습니다.

최고의 콘텐츠를 선보이세요

정보 페이지는 귀하의 주요 콘텐츠를 홍보하기에 좋은 장소입니다. 결국 방문자가 클릭하여 귀하의 정보 페이지를 보기로 결정했기 때문에 그들은 사이트 뒤에 누가 있는지에 대해 높은 참여도와 관심을 갖고 있음이 입증되었습니다. 따라서 그들은 아마도 귀하의 콘텐츠, 특히 최고의 콘텐츠를 보는 데 관심을 가질 것입니다!

이를 보여주기 위해 몇 가지 멋진 Beaver Builder 트릭을 사용할 수 있습니다.

먼저 새 브라우저 탭에서 기본 WordPress 대시보드를 다시 열고 게시물로 이동합니다. 게시물에 대한 새 카테고리를 만들고 이름을'추천'또는'최고'로 지정하세요. 게시된 게시물을 살펴보고 최고라고 생각되는 게시물 3~6개를 선택하세요. 새 카테고리에 추가하세요.

비버 빌더로 돌아갑니다. 새로운1열 행을만듭니다. 먼저 거기에 새제목구분 기호를추가하면 됩니다.

제목은기본 설정이고구분 기호는높이4px ,사용자 정의 너비10% 로 다시 설정됩니다. 이번에는 구분 기호의 색상을 검정색(#000000)으로 설정했습니다.

이제 가장 중요한 부분은 Posts라는 모듈을 통해 추가할 실제 게시물입니다.

이 모듈은 정말 영리합니다. 게시물의 레이아웃을 선택하고, 게시물의 추천 이미지를 표시할지 여부를 결정하고, 표시할 게시물 수를 설정하고, 실제 게시물을 필터링하는 등의 작업을 수행할 수 있습니다.

내 페이지의 최종 효과는 다음과 같습니다.

내가 사용한 설정;레이아웃탭에서 시작:

  • 레이아웃벽돌
  • 동일한 높이
  • 기둥 정렬중심
  • 이미지표시
  • 이미지 크기헤스티아 블로그
  • 작성자숨기기
  • 날짜숨기기
  • 댓글숨기기
  • 내용숨기기

스타일탭:

  • 포스트 테두리 유형없음

콘텐츠탭:

  • 필터카테고리'추천'(해당 카테고리에 할당된 게시물만 표시됩니다)

페이지매김탭:

  • 페이지 매김 스타일없음
  • 페이지당 게시물 수6

위의 설정 중 많은 부분(특히 마지막페이지 매김탭)은 표시하고 싶은 게시물 수와 함께 사용할 매력적인 추천 이미지가 있는지 여부에 따라 결정됩니다.

사람들이 소셜 미디어에서 귀하를 팔로우하도록 장려하십시오.

마지막으로, 전체 페이지를 닫으려면 방문자가 소셜 미디어에서 귀하를 팔로우하도록 권장하십시오. 이를 실현하기 위해 1분 전에 작업했던 "스토리" 블록을 재사용해 보겠습니다.

먼저 전체 "스토리" 행을 복제하고 맨 아래까지 드래그합니다.

다음으로 제목 복사본을 소셜 미디어와 관련된 내용으로 변경하고 원본 텍스트 편집기버튼모듈도 삭제합니다.

그 자리에 새 모듈인Icon Group을추가해 보겠습니다. 이것은 소수의 개별 소셜 미디어 아이콘을 보여주고 이를 귀하의 프로필에 연결할 수 있기 때문에 작업에 적합합니다.

전체 모듈의 설정부터 시작해 보겠습니다. 특히스타일탭으로 전환하여 다음을 설정해 보겠습니다.

대부분의 설정과 마찬가지로 이는 개인 취향에 따라 결정되지만 위의 값은 전체 블록의 좋은 명확성과 가독성을 보장하는 것 같습니다.

다시아이콘탭으로 전환해 보겠습니다. 여기에서 개별 아이콘을 추가할 수 있습니다.

그렇게 하려면아이콘 편집을 클릭한 다음아이콘 선택을 클릭하세요. 여러분이 보게 될 것은 선택할 수 있는 수많은 아이콘이 포함된 멋진 검색 가능한 패널입니다. 가장 먼저 필요한 것은 Facebook아이콘입니다.

아이콘을 선택한 후에는Link매개변수가 귀하의 특정 소셜 미디어 프로필을 가리키도록 설정하는 것을 잊지 마세요.

마지막으로스타일탭으로 전환하여 아이콘의 다양한 색상 설정을 조정하여 모든 것이 잘 어울리도록 할 수 있습니다.

완료되면저장을 클릭하세요.

아이콘 추가를 클릭하고 프로세스를 반복하여 여기에 여러 아이콘을 추가할 수 있습니다. 결국Facebook,Twitter,YouTube의 세 가지 아이콘을 사용하게 되었습니다.

최종 효과는 다음과 같습니다.

완료!

이 시점에서 머티리얼 디자인 정보 페이지가 완료되었습니다!

여기에 다시 모든 영광이 있습니다.

또 다른 보너스는 해당 페이지를 다른 목적으로도 재사용할 수 있다는 것입니다. 약간만 수정하면 제품 랜딩 페이지나 홈페이지로 사용할 수 있습니다.

캐롤 K 소개

Karol K.는 WordPress 피규어 아웃터이자 블로거이며 "WordPress Complete"의 저자입니다.

댓글 10개

  1. 압둘라 프렘 2018년 5월 30일 오전 3시 34분

    정보 페이지는 모든 종류의 블로그에서 중요한 역할을 합니다. 블로그가 나타내는 내용에 대한 블로그의 목적을 반영해야 합니다. 그런데 귀하의 페이지 빌더는 훌륭하고 내 친구 중 일부가 그것을 사용하고 있다는 것을 알고 있습니다.



  2. Kodi Adams 2018년 7월 10일 오후 5:24

    "정보" 페이지뿐만 아니라 초보 웹 개발자를 위한 일반적인 Beaver Builder 사용에 대한 훌륭한 글입니다. 나는 한동안 헤스티아를 사용해왔지만 통제력이 부족하다고 생각하여 제작자를 피했습니다. 이것은 매우 친절하게 설명합니다. 감사해요!



  3. Roque Frogosa 2018년 10월 9일 오후 12:02

    이 좋은 튜토리얼에 감사드립니다.
    위에서 언급한 Beaver Builder 템플릿을 다운로드하고 싶었지만 기사의 두 링크 모두 404페이지로 연결됩니다.



    • Robby McCullough 2018년 10월 17일 오후 1:07

      흠. 알려주셔서 감사하고 죄송합니다. 링크를 수정할 수 있는지 확인하겠습니다.



  4. 2018년 10월 14일 오전 2시 40분 방송

    기사 주셔서 감사합니다. 행 설정에서 불투명도 설정이 회색으로 표시되는 이유가 있나요? 슬라이더를 움직일 수 없는 것 같습니다.



  5. Todd MacDonald 2019년 1월 20일 오전 10:30

    바쁜 비버 여러분께 감사드립니다. 여러분은 계속해서 이 일을 쉽고 가치 있게 만들 것입니다.



  6. 크리스틴 베이커 2019년 2월 7일 오후 6시 48분

    나는 완전히 혼란스러워요.

    거의 1년 전 저는 Headway 재난 이후 웹사이트를 마침내 고칠 수 있기를 바라면서 프로 버전을 구입했습니다.

    바쁘기 때문에(그리고 알츠하이머병을 시작하기 시작하면서) 어디서부터 시작해야 할지 모르겠습니다.

    YouTube에서 튜토리얼을 찾아봤는데 전혀 아무것도 없었습니다!

    여기에 있는 이 게시물은 뭔가를 구입하고 설치하고 다른 것을 배워야 하는 최악의 악몽입니다! 왜????

    나는 적어도 몇 가지 현재 튜토리얼을 기대했습니다. 내가 보는 것은 "Get Beaver Builder Now" 버튼이 눈에 띄게 배치되어 있다는 것뿐입니다. 200달러를 더 지불하는 것이 나에게 도움이 될 것이라고 생각하지 않습니다.



    • Robby McCullough 2019년 2월 8일 오후 2:01

      안녕 크리스틴. 불편을 끼쳐드려 죄송합니다. 현재 비디오 튜토리얼은 많지 않지만 광범위한 기술 자료를 보유하고 있습니다. 기본 사항Beaver Builder의 새로운 기능 섹션을 확인해 보세요.

      여기에는 오래된 비디오 튜토리얼이 있습니다. BB 사용자 인터페이스는 이전 버전이지만 대부분의 정보는 여전히 적용됩니다. 피드백을 보내주셔서 감사합니다. 우리는 새로운 비디오를 만드는 작업을 할 수 있습니다.



  7. 2019년 10월 23일 오후 5시 39

    저는 Hestia와 Beaver Builder를 사용하고 있습니다. 새 페이지를 만들 때 페이지 제목(이 경우 About)이 포함된 Hestia 헤더가 꽤 커서 이동이나 변경이 불가능합니다. 색상은 변경할 수 있지만 크기나 글꼴 등은 변경할 수 없습니다. 표시되지 않거나 더 작게 만들려면 어떻게 해야 하나요? 페이지가 끔찍해 보여서 게시하지 않았습니다.



    • Anthony Tran 2019년 11월 8일 오전 8:31

      안녕하세요 Pat, 이것은 Hestia 테마 개발자에게 해당되는 질문처럼 들립니다. 도움을 받을 수 있는지 알아보기 위해 연락해 보셨나요?



우리의 뉴스레터

우리의 뉴스레터는 개인적으로 작성되어 한 달에 한 번 정도 발송됩니다. 조금도 짜증나거나 스팸이 아닙니다.
우리는 약속합니다.

뉴스레터에 가입하세요

지금 Beaver Builder를 사용해 보세요

Beaver Builder