블럭(Block)

블럭은 단순히 요소만 올려서 사용할 수 있는 요소가 아닙니다. 기본적인 틀을 제공하고

디자인 구성을 위한 기본 배경 세팅 및 전체적으로 매우 중요한 기본 요소입니다

블럭 전체 메뉴

우측 상단에 메뉴바가 들어난 모양

위의 이미지를 보시면 기본 템플릿 블럭을 가져온 이미지를 확인 할 수 있습니다.

모든 블럭의 우측 상단 모서리 부분에 원으로 된 블럭 메뉴가 존재합니다.

그 메뉴를 클릭하면 이미지 처럼 가로로 메뉴바가 생성이 되는데 이 메뉴로 블럭의 모든 기능을 조정합니다.

블럭 기본설정 메뉴

톱니바퀴 모양을 클릭하면 블럭의 기본설정이 뜹니다.

여러 메뉴가운데 톱니바퀴 모양은 가장 기본이 되는 설정을 조정하는 메뉴 입니다.

블럭의 넓이와 높이를 조정하게 되는데

넓이는 블럭 내에 있는 모든 요소의 최대 넓이를 조정하게 되어 있습니다.

일반적으로 1000px가 되지 않게 설정이 되어 있어 자칫 사이트 제작 후 좌우가 좁아 보여

디자인이 살지 않게 되는 경우가 많습니다

반면 전체넓이로 한 후 잔뜩 이미지나 다양한 요소를 넣어 디자인하게 되면

요새 가로로 훨씬 넓은 게이밍 모니터에서나 핸드폰 모바일 반응 작업 시 문제가 되므로

고정 값으로 1100px~1400px 사이로 설정 후 작업을 하면 전반적인

디스플레이 문제를 해결하는데 도움이 됩니다

반면 높이의 경우 높이는 전체 높이나 또는 표현하고자 하는대로 높이를 정해서 사용할 수 있습니다

기본 설정에는 블럭내 컨텐츠 위치 조정도 가능합니다.

위에서 말했듯이 블럭내에 요소가 움직일 수 있는 공간이 있는데

그 공간내에서 맨위/가운데/아래 를 정할 수 있게 되어 있으며 일반적으로

가운데 위치에 놓고 사용하는 경우가 대부분 입니다.

블럭 기능 설정

블럭의 기능을 먼저 설정해야 합니다.

블럭 메뉴의 맨 앞에는 블럭의 성격을 정하게 되어 있는데

글로벌 블럭 : 모든 페이지 또는 내가 지정한 페이지에서 해당 블럭을 공통적으로 사용하는 블럭으로 설정

멤버십 : 멤버십 기능을 사용하는 내용의 블럭으로 사용

슬라이더로 만들기 : 해당 블럭을 슬라이더 형태로 제작을 원하는 경우 사용.

대부분의 경우 글로벌 블럭은 헤더나 푸터로 사용하고 슬라이더는 메인화면에 디자인요소로 사용합니다

멥버십의 경우는 사실 자주 사용하지는 않으면 페이지 자체를 다른 플러그인을 통해 제어합니다.

블럭 슬라이드 설정

슬라이더 선택 시 메뉴에 탭에 슬라이더 메뉴에서 슬라이더를 조정합니다.

슬라이더 메뉴는

자동재생/ 스탑애니메이션 / 속도 / 애니메이션/ 속도/ 점 / 화살표

이렇게 되며 주로 보면 이해가 되지만

처음 속도는 슬라이더가 넘어가는데 걸리는 속도로 초단위 입니다. 3이면 3초 단위입니다

애니메이션은 좌우로 넘기듯이 할것이냐 아니면 페이드 인아웃 방식으로 할것이냐 이며

그 아래 속도는 슬라이더가 넘길때 속도이며 최대 느린 속도가 1초라고 보시면 됩니다.

일반적으로 0.5초를 설정합니다.

점은 슬라이더 아래 점의 모양이나 존재여부 화살표 또한 모양과 존재를 정할수 있습니다.

블럭 배경 설정

슬라이더 배경 설정

슬라이더 배경 설정은

사진 / 영상 / 지도 / 파일다운 이렇게 4가지로 할 수 있습니다.

사진은 일반적으로 이미지를 사용하는데 특이점은 너무 작거나 크면 문제가 있습니다.

일반적인 사이즈는 1280*720 정도가 적당한 사이즈 입니다.

하단의 사이즈는 커버로 두는 것을 추천드립니다.

중요한 부분은 영상인데 영상의 경우

유튜브 / 비메오 / URL / CUSTOM 4가지 업로드 방식이 있습니다

유튜브나 비메오 그리고 URL의 경우 영상의 URL을 넣어 주면 자동 설정됩니다

하지만 커스텀은 직접 영상을 업로드 할 수 있는데 장점은 사이트가 열릴때 로딩지연을 줄일 수

있다는 것이고 그렇게 하기 위해 5~8메가의 용량이 적은 영상만 사용이 가능하다는 것입니다.

블럭 복사

블럭의 복사는 자주 사용하는 기능입니다.

블럭 복사의 경우 복사 모양의 이모티콘을 클릭하면 가능합니다.

블럭 삭제

제작 내용이 변경 되거나 더 이상 블럭의 내용이 적용되지 않을 시

간단하게 휴지통모양을 클릭해 블럭을 삭제합니다

혹시 잘못 지웠을때는 윈도우는 control+z 맥의 경우 command+z로 원상복구합니다

하지만 업데이트가 완료된 후 복구는 서버에서 특정시간으로 복구하는 방법이 있습니다

여기까지 블럭에 대한 기능에 대해 정리해 보았습니다.

기능을 알아도 활용도에 대해 모르면 사이트 제작이 쉽지 않습니다.

플러그인에 대해

폴리랭 플러그인 (POLYL...
워드프레스 웹사이트 하나로 한국어, 영어, 일본어 등 여러 언어를 동시에 지원하는 다...
스마트 슬라이더 3 플러그인...
웹사이트 첫 화면의 메인 비주얼 배너나 이미지 슬라이드를 코딩 없이 전문 디자이너 수...
요스트SEO 플러그인(Yoa...
내 웹사이트와 블로그 글이 구글, 네이버 등 주요 검색엔진 결과 상위에 노출될 수 있...

참고 사이트 소개

SVG Repo
웹사이트를 제작할 때 메뉴 아이콘, 버튼 심볼, 서비스 특징을 설명하는 일러스트는 방...
리무브비지(Remove BG...
웹사이트를 제작할 때 상품 사진, 인물 프로필, 브랜드 로고를 깔끔하게 배치하려면 불...
캔바(Canva)
웹사이트를 만들 때 가장 큰 난관 중 하나는 로고, 메인 비주얼 배너, 블로그 썸네일...