Home Wordpress 워프 일반 워드프레스 비주얼컴포저(Visual Composer)로 그리드 스타일 홈화면 만들기

워드프레스 비주얼컴포저(Visual Composer)로 그리드 스타일 홈화면 만들기

2642
0
SHARE

안녕하세요. 소라토파파 센쇼 입니다.

페이스북을 통해 어떤분께서 워드프레스로 회사홈페이지를 제작해야 하는데 조언을 구해왔습니다.

그래서 이번시간에는 워드프레스로 그리드 스타일(Grid Style) 홈화면을 만드는 방법을 알아볼 건데요~

의뢰인님 께서는 3개의 카테고리를 각각 그리드스타일로 한라인에 3개씩 표시되며, 숫자로 페이지를 넘기는 화면을 구현하기를 원하시면서 테마나 플러그인을 통해 해결하고 싶어하셨습니다.

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지
참고화면

아주 쉽고 간편하게 그리드 스타일 홈화면을 만들기 위해 너무너무 유명한 플러그인이죠. 비주얼 컴포저(Visual Composer)를 준비합니다. 비주얼 컴포저는 워드프레스 필수 플러그인 입니다. 테마 구입시 번들로 제공되는 것을 구매하시면 좋습니다.

비주얼컴포저로 그리드스타일 홈화면 만들기

홈화면을 만들기 위해 먼저 “페이지-새 페이지 추가”를 선택. 비주얼컴포저를 실행합니다. ‘백엔드 에디터’로 진행하도록 하겠습니다.

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

 

‘Add Element’를 선택하여 새 요소 추가를 위한 메뉴창을 띄웁니다.

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

 

‘Post Grid’를 선택합니다.

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

 

Post Grid Settings

의뢰인님이 원하는대로 그리드 포스팅의 설정을 진행하도록 하겠습니다. 옵션설명은 필요한 부분만 설명할게요.

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

General

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

Data Source – 화면에 표시할 소스를 선택합니다. Post, Page, Forum, 커스텀 쿼리 등등 중 소식을 전달하기 위해 Post를 선택합니다.

Narrow Data Source – 여기에 원하는 카테고리, 태그 등을 입력해 줍니다.

Total Item – 조회 가능한 아이템의 최대값을 입력합니다. ‘-1‘을 입력하면 카테고리 내의 모든 글을 조회 가능합니다.

Display Style : 모두 표시할지 화면 넘김을 사용할지를 선택합니다. ‘Load More Button’, ‘Lazy Loading’, ‘Pagination’ 중에 숫자로 다음페이지를 보여주기 위해 ‘Pagination‘을 선택합니다. 안보이던 ‘Pagination’ 탭이 나타납니다.

Items per page : 한 페이지에 몇개의 아이템을 보여줄 지를 입력합니다. 여기서는 ‘3’을 입력해 주었습니다. (기본값 : 10)

Grid elements per row : 한줄에 몇개씩 나타낼지를 선택합니다. ‘3’을 선택하였습니다. ‘Items per page’에서 6을 입력한 경우 3개씩 두줄로 표시되겠죠? 잘 계산하여 입력해줍니다.

Gap : 그리드 스타일에 표시되는 아이템들의 간격을 설정합니다. 기본값 30px로 놔두었습니다.

Data Settings

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

Data Settings에서는 특별히 설정값을 변경 할 것이 없어보입니다. 정렬기준과 정렬방식(오름차순, 내림차순)을 선택하고, 데이터 소스중에 제외할 항목이 있다면 ‘Exclude’에 포스트 또는 페이지의 제목을 입력합니다.

Pagination

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

페이징 스타일을 정의합니다.

Arrow design : 다음페이지 화살표의 모양을 고릅니다.

Arrows postion : 화살표를 그리드의 안쪽 또는 바깥쪽 어디에 배치 할 것인지를 선택합니다.

Arrows color : 화살표의 색상을 선택합니다.

Pagination style : 표시할 페이지의 스타일을 선택합니다. 기본값은 Radio Dots로 되어있네요. 의뢰인 께서는 숫자로 표시하기를 원하셨습니다.  드롭다운 메뉴중 Pagination 단어가 들어가 있는것을 선택합니다. ‘Pagination Default’를 선택하였습니다.

Item Design

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

그리드에 마우스를 가져다 댔을때 어떻게 보여질 지 스타일을 선택합니다. 하나씩 선택해 보면서 맘에 드는 스타일을 고릅니다. ‘Basic Grid : Scale in with roation’을 선택하였습니다.

Design Options

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

테두리 및 배경화면을 지정 할 수 있습니다. 특별히 변경하지 않으셔도 됩니다.

샘플 완성

샘플 사이트와 비슷한 구성으로 Quickly 구현 해 보았습니다. 카테고리 타이틀은 참고하시라고 두개 다른거로 설정해 보았습니다.

상단 싱글 이미지 대신에 레볼루션 슬라이더(Slider Revolution)를 사용하시면 더욱 더 멋진 홈화면이 되겠죠?

워드프레스 비주얼컴포저 그리드스타일 홈화면 회사홈페이지

레볼루션 슬라이더도 필수 플러그인 중의 하나입니다. 마음에 드는 데모 데이터를 다운받아 편하게 편집하여 사용하세요.

완성된 Grid 홈 화면은 ‘여기‘에서 확인하세요. 위쪽은 화살표가 그리드 밖에 위치해 있고, 아래는 안쪽에 위치해 있으니 참고하세요(그리드에 마우스 대면 나타남)

 

추천 Visual Composer Addon

비주얼 컴포저는 코딩없이 초보자도 쉽게 고급진 페이지를 만들 수 있게 도와주기 때문에 필수 입니다. 기본으로 제공되는 기능 외에 더욱 편리하고 강력한 비주얼컴포저가 되기 위해 애드온을 설치 해줍니다.

자세한 사항은 아래 링크를 통해 확인하세요.

 

비주얼 컴포저 튜토리얼

비주얼 컴포저 Grid Elements Builder도 참고하세요.

다음시간엔 회사홈페이지 제작을 위한 추천 프리미엄 테마를 알아보겠습니다.

워드프레스 테마 선택의 기준은 아래의 글을 참고하세요.
웹디자인 & 포토샵 : 프리미엄 테마를 사용한 워드프레스 쇼핑몰/웹사이트 만들기 책 출간예정 – 좋은 테마 선택 방법

 

 

이상으로 이번 포스팅을 마치도록 하겠습니다. 도움되셨길~~~