Divi로 중간 스타일 블로그를 만드는 방법

게시 됨: 2017-07-06

오늘의 Divi 블로그 게시물에서는 Medium 블로그와 같은 스타일로 자신의 블로그 웹사이트를 만드는 방법에 대한 몇 가지 훌륭한 팁을 공유할 것입니다.

Medium은 블로그에 가장 많이 사용되는 플랫폼 중 하나로 알려져 있습니다. 정기적으로 청중과 소통하는 대규모 블로거 커뮤니티가 있을 뿐만 아니라 블로깅 플랫폼도 매우 훌륭한 사용자 경험을 제공합니다. 그것이 바로 모든 블로거가 원하는 것입니다. 그들은 독자가 편안하게 느끼는 환경에서 명확한 방식으로 메시지를 전달하기를 원합니다.

그러나 Medium의 블로그에는 한계가 있습니다. 예를 들어 SEO와 관련된 이점은 없습니다. Medium 블로그 스타일에서 영감을 받은 나만의 블로그를 만들어 Medium 블로그에서 이미 가지고 있는 친숙한 느낌을 계속 유지하고 자신의 웹사이트로 가져올 수 있습니다.

시작하자

YouTube 채널 구독

미디엄 스타일의 블로그를 만드는 데 있어 가장 중요한 부분과 중요한 부분을 만드는 방법을 단계별로 보여드리겠습니다. 예를 들어; 모든 게시물에 사용할 수 있는 미디엄 스타일의 블로그 게시물 템플릿을 만드는 방법입니다. 템플릿은 다음과 같습니다.

또한 Worth Read 및 Highlight 및 Share 플러그인을 추가하여 더 비슷하게 보이도록 하는 방법도 보여줍니다. 읽을 가치가 있는 결과는 다음과 같습니다.

하이라이트 및 공유는 다음과 같은 효과를 가집니다.

미디엄 블로그처럼 단순한 메뉴 만들기

Medium 웹사이트를 방문할 때 분명히 알 수 있는 것 중 하나는 메뉴의 단순성입니다. 방문자가 탐색하기 쉽게 즉시 사용할 수 있는 옵션이 너무 많지 않습니다. 방문자는 홈페이지에서 강조 표시된 블로그 게시물을 탐색하고 그곳에서 계속 머무를 수 있습니다.

메뉴 요소

나머지 웹 사이트의 단순성과 일치하는 로고를 선택하고 메뉴에서 작은 크기를 지정하여 미묘하게 만드십시오. 로고가 웹사이트에서 공유하는 콘텐츠를 압도하는 것을 원하지는 않을 것입니다.

다음으로 탐색에 너무 많은 페이지를 포함하지 마십시오. 귀하의 웹사이트는 모두 블로깅에 관한 것이므로 홈페이지로 충분할 것입니다. 방문자에게 자신에 대해 조금 더 알리고 싶다면 정보 페이지를 추가하는 것도 고려해 볼 수 있습니다.

계속해서 사람들이 몇 가지 키워드로 블로그 게시물을 쉽게 검색할 수 있도록 검색 아이콘을 포함하세요. 제작하고 쉽게 찾을 수 있도록 하는 콘텐츠에 관한 모든 것입니다.

위의 예에서는 테마 사용자 지정 프로그램의 기본 메뉴 모음에 대해 다음 설정을 사용했습니다.

메뉴 높이: 54
로고 최대 높이: 37
텍스트 크기: 18

대비 및 간단한 글꼴이 있는 색상표 사용

Medium 블로그는 콘텐츠를 쉽게 읽을 수 있도록 플랫폼 전체에 세 가지 기본 색상을 사용합니다. 두 가지 색상이 흑백처럼 보일 수 있지만 눈에는 약간 더 부드럽습니다. 세 번째는 밝은 회색이지만 읽을 수 있는 색상입니다. 테마 사용자 정의 도구의 기본 메뉴 모음을 다음과 같이 조정하여 기본 메뉴에서 사용되는 색상과 글꼴을 변경합니다.

글꼴: 소스 산스 프로
텍스트 색상: rgba(0,0,0,.44)
활성 링크 색상: rgba(0,0,0,.44)
배경색: #fbfcfd

검색 아이콘 포함

또한 기본 메뉴에 검색 아이콘을 포함하려면 헤더 및 탐색 > 헤더 요소 > 검색 아이콘 표시로 이동합니다.

고정 탐색 모음 비활성화

Medium 블로그가 하는 또 다른 일은 페이지 상단에 탐색 모음을 유지하는 것입니다. 그렇게 하면 방문자가 읽을 때 불필요하게 방해받지 않습니다. Divi 웹사이트에서 고정 탐색 모음을 비활성화하려면 WordPress 패널 > Divi > 테마 옵션 > 일반 설정 > 고정 탐색 모음 비활성화로 이동합니다.

카테고리별로 홈페이지 블로그 모듈 스타일 지정

다음으로 카테고리별로 웹사이트의 홈페이지 스타일을 지정하려고 합니다. 만들고 있는 블로그에 따라 방문자가 가장 읽고 싶어하는 내용에 부합하는 다양한 섹션을 홈페이지에 만들 수 있습니다. 인기 카테고리, 최신 카테고리, 추천 카테고리는 최소한 사용하는 것이 좋습니다. WordPress 메뉴에 있는 '게시물'의 '카테고리' 페이지에서 다른 범주를 만들고 각 게시물을 게시물 자체 내에서 하나 이상의 범주에 할당하여 이러한 범주에 블로그 게시물을 할당할 수 있습니다.

정말 하고 싶은 또 다른 일은 홈페이지의 다양한 블로그 모듈과 섹션을 따라하기 쉽게 만드는 것입니다. 이를 달성하기 위해 Divi 빌더에서 표준 블로그 그리드를 사용하거나 조금 더 고급을 검색할 수 있습니다. 사용을 고려할 수 있는 세 가지 플러그인을 아래에 나열했습니다.

Divi 기사 카드 플러그인

Divi Article Card 플러그인은 Divi 100 기간 동안 블로그에서 공유되었던 무료 플러그인입니다. 이 플러그인에서 사용된 스타일은 깨끗하고 호버 효과가 좋습니다. 간단한 효과지만 블로그에 약간의 터치를 추가할 수 있습니다.

플러그인은 완전히 무료입니다. 게시물로 이동하여 다운로드하세요!

Divi 사용자 정의 블로그 모듈

멋진 블로그 모듈 레이아웃을 만든 또 다른 플러그인은 Divi Custom Blog Module입니다. 이것은 왼쪽에 추천 이미지를 배치하여 이전보다 미디엄 블로그 게시물과 더 비슷합니다.

플러그인 가격은 $20입니다.

Divi 블로그 추가 기능

블로그를 Medium 블로그처럼 보이게 만드는 데 도움이 되는 마지막 플러그인은 Divi Blog Extras입니다. 이 플러그인에는 Medium 스타일의 블로그를 구축하는 데 도움이 되는 다양한 블로그 모듈 레이아웃도 있습니다.

플러그인은 단일 사이트 라이선스의 경우 $15, 확장 라이선스의 경우 $30입니다.

블로그 게시물 템플릿 만들기

Medium에는 생성되는 모든 게시물에 대한 표준 블로그 게시물 형식이 있습니다. 디자인은 게시물의 본질인 콘텐츠에 중점을 둡니다. 사용 중인 블로그 게시물 형식은 웹사이트의 나머지 부분이 단순합니다. 게시물 전체에 삽입할 수 있는 서면 콘텐츠와 미디어의 조합을 사용하여 추적합니다.

Divi는 동일한 가능성을 제공합니다. Divi 빌더가 제공하는 다양한 모듈을 사용하여 블로그 게시물을 원하는 만큼 간단하게 또는 섬세하게 만들 수 있습니다. 다음은 단계별로 생성하는 방법을 보여주는 예제 레이아웃입니다.

디비 포스트 설정

새 게시물을 추가하고 제목을 지정하고 Divi 빌더를 활성화하여 시작하십시오. 다음으로 Divi Post 설정이 다음과 같은지 확인하십시오.

페이지 레이아웃: 전체 너비
점 탐색: 끄기
스크롤하기 전에 탐색 숨기기: 기본값
게시물 제목: 숨기기

작성자(데스크톱)

레이아웃을 만들기 위해 Visual Builder로 전환하겠습니다. 두 개의 행이 있는 새 섹션을 추가하여 시작합니다. 계속해서 첫 번째 열에 이미지 모듈을 추가하고 두 번째 열에 두 개의 텍스트 모듈을 추가합니다. 섹션의 설정을 열고 '#fbfcfd'를 배경색으로 선택하여 추가합니다.

이미지 모듈

이미지 모듈을 열고 콘텐츠 탭에 이미지를 업로드하고 디자인 탭에서 이미지 정렬을 '왼쪽'으로 설정합니다. 계속해서 디자인 탭의 간격 하위 범주에서 상단 여백에 '-5%'를 추가하고 왼쪽 여백에 '25%'를 추가합니다.

그런 다음 고급 탭의 사용자 지정 CSS 하위 범주에 있는 기본 요소에 다음 코드를 추가합니다.

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

첫 번째 텍스트 모듈

콘텐츠 탭의 콘텐츠 상자에 작성자 이름을 추가하고 디자인 탭의 텍스트 하위 범주를 다음과 같이 조정합니다.

텍스트 방향: 왼쪽
텍스트 글꼴: Source Sans Pro
텍스트 글꼴 크기: 18
텍스트 색상: rgba(0,0,0,0.8)
텍스트 줄 높이: 1.7em

동일한 탭을 아래로 스크롤하여 상단 여백에 '-3%'를 추가하고 왼쪽 여백에 '-70%'를 추가합니다.

두 번째 텍스트 모듈

두 번째 텍스트 모듈에 태그라인을 입력하고 디자인 탭의 텍스트 하위 범주를 다음과 같이 조정합니다.

텍스트 방향: 왼쪽
텍스트 글꼴: Source Sans Pro
텍스트 글꼴 크기: 14
텍스트 색상: rgba(0,0,0,0.44)
텍스트 줄 높이: 1.7em

또한 동일한 탭을 아래로 스크롤하여 Spacing 하위 범주의 상단 여백에 '-5%'를 추가하고 왼쪽 여백에 '-70%'를 추가합니다.

행 가시성

마지막으로 행 설정을 열고 고급 탭의 가시성 하위 범주에서 휴대폰 및 태블릿의 행을 비활성화합니다.

작성자(모바일)

전체 너비 행이 있는 동일한 섹션에 다른 행을 추가합니다. 계속해서 이전 행의 이미지 모듈 및 텍스트 모듈을 복제하고 전체 너비 행에 배치합니다. 누군가가 모바일이나 태블릿에서 페이지를 열 때 화면 중앙에 위치하도록 각 모듈을 약간 수정해야 합니다.

이미지 모듈

이미지 모듈을 열고 이미지 정렬을 '중앙'에 놓습니다.

첫 번째 텍스트 모듈

첫 번째 텍스트 모듈을 열고 디자인 탭의 텍스트 하위 카테고리에서 텍스트 방향을 '중앙'으로 변경합니다.

같은 탭을 아래로 스크롤하여 왼쪽 여백을 삭제하고 상단 여백을 유지합니다.

두 번째 텍스트 모듈

또한 두 번째 텍스트 모듈에 대해서도 동일한 작업을 수행합니다. Text Orientation을 'Center'에 놓고 Content 탭의 Spacing 하위 범주에서 Left Margin을 삭제합니다.

행 가시성

마지막으로 행 설정을 열고 데스크톱의 행을 비활성화합니다.

게시물 제목 모듈

Divi 게시물 설정에서 게시물 제목을 비활성화했기 때문에 지금까지 사용한 동일한 섹션 내의 전체 너비 행에 게시물 제목 모듈을 추가할 것입니다.

콘텐츠 탭의 요소 하위 범주에서 표시할 요소를 선택할 수 있습니다. 저자를 이미 언급했기 때문에 제목을 제외한 모든 항목을 비활성화했습니다.

뿐만 아니라; 디자인 탭의 텍스트 및 제목 텍스트 하위 범주를 다음과 같이 조정합니다.

텍스트 방향: 중앙
제목 글꼴: Source Sans Pro
제목 글꼴 스타일: 굵게
제목 글꼴 크기: 47px(데스크톱), 40(태블릿), 35(휴대폰)
제목 텍스트 색상: rgba(0,0,0,0.8)

전각 이미지

우리가 추가할 첫 번째 전각 이미지는 추천 이미지의 표현입니다. 전체 너비 섹션을 추가하고 여기에 전체 너비 이미지 모듈을 배치한 다음 콘텐츠 탭에 이미지를 업로드합니다. 그것만큼 간단합니다.

텍스트 모듈

계속해서 블로그 게시물에 사용되는 텍스트 모듈을 생성하겠습니다. 전폭 행이 있는 표준 섹션을 추가하고 여기에 텍스트 모듈을 넣습니다. 이 예에서는 단순히 'Cardo'가 내장된 글꼴 패밀리이기 때문에 'Georgia' 대신 'Cardo' 글꼴 패밀리를 사용하고 있습니다.

또한 텍스트 모듈의 설정을 열고 내용 상자에 샘플 텍스트를 입력한 다음 디자인 탭으로 이동합니다. 텍스트 하위 범주 내에서 다음과 같이 조정합니다.

텍스트 방향: 왼쪽
텍스트 글꼴: Cardo
텍스트 글꼴 크기: 25px(데스크톱), 19px(태블릿), 17px(전화)
텍스트 색상: rgba(0,0,0,0.8)
텍스트 줄 높이: 1.8em

같은 탭을 아래로 스크롤하여 Sizing 하위 범주의 Max Width에 '800px'를 추가하고 Spacing 하위 범주의 왼쪽 여백에 '10%'를 추가합니다.

비디오 모듈

블로그 게시물에 부가 가치를 줄 수 있는 마지막 것은 비디오를 통합하는 것입니다. 이렇게 하려면 이전에 만든 섹션을 텍스트 모듈로 복제하고 가지고 있는 전체 콘텐츠를 두 텍스트 모듈로 나누어야 합니다. 두 섹션 사이에 전체 너비 행이 있는 다른 섹션을 추가할 것입니다. 전폭 행에 비디오 모듈을 추가할 것입니다.

백엔드에서 구조는 다음과 같이 표시되어야 합니다.

URL을 추가하는 것 외에는 비디오 모듈을 조정하지 않았습니다.

템플릿 저장

다른 섹션을 복제하고 콘텐츠를 변경하여 만들고 있는 블로그 게시물에 맞게 다시 사용할 수 있습니다. 완료되면 '라이브러리에 저장'을 클릭하고 이름을 지정하여 블로그 게시물 템플릿을 저장할 수 있습니다.

다음에 템플릿을 사용하려면 '라이브러리에서 로드'를 클릭하고 템플릿을 로드하기만 하면 됩니다.

읽을 가치

Medium 블로그를 만드는 데 있어 일반적인 것은 특정 블로그 게시물을 읽는 데 몇 분이 걸린다는 것입니다. 이것은 일반적으로 페이지 시작 부분에 나타나며 사용자와 읽기를 완료하는 데 걸리는 예상 시간을 제공합니다. 시간이 가장 소중한 시대에 블로그 글을 읽을지 말지를 결정하는 데 도움이 됩니다.

거기에 도달하는 데 도움이 되는 무료 WordPress 플러그인은 Well Done Marketing에서 읽을 가치가 있습니다. 링크한 페이지에서 다운로드하거나 플러그인에서 검색할 수 있습니다. 이 플러그인의 좋은 점은 읽는 시간을 표시할 위치를 선택할 수 있다는 것입니다. 페이지, 게시물 또는 둘 다. 배치 및 형식을 선택할 수도 있습니다.

플러그인을 다운로드하고 활성화한 후 메뉴에서 '읽기 진행률' 옵션을 클릭합니다. 필요한 사항을 변경하십시오. 읽기 시간을 지정하는 것은 일반적으로 게시물에만 사용되므로 대부분의 사람들은 해당 옵션만 선택할 것입니다.

스타일 탭에서 사용하려는 스타일을 선택할 수 있습니다. 제목과 동일한 글꼴을 사용하십시오. 추가로 수정하려는 경우 사용자 정의 CSS 코드를 추가할 수도 있습니다.

강조 표시 및 공유

Medium의 또 다른 전형적인 특징은 강조 표시하거나, 공유하거나, 마음에 들면 댓글을 달 수 있다는 것입니다. 블로그 게시물을 읽는 사람들과 소통할 수 있도록 함으로써 블로그 게시물에 부가 가치를 제공합니다. 유사한 작업을 수행하는 데 도움이 되는 플러그인을 찾았습니다. 또한 무료로 사용할 수 있는 하이라이트 및 공유 플러그인입니다.

설정 > 하이라이트 및 공유 > 사용하려는 소셜 미디어 채널 활성화 로 이동하여 사람들이 공유할 수 있는 소셜 미디어 채널을 결정할 수 있습니다 .

마무리

이 게시물을 읽은 후에는 Medium의 가장 관련성이 높은 부분이 포함된 Medium 스타일 블로그를 구축할 수 있을 것입니다. Medium 블로그처럼 단순하게 유지할 수 있는 가능성이 많이 있지만 여전히 개인적인 손길을 불어넣을 수 있습니다. 질문이나 제안 사항이 있는 경우 멋진 Divi 커뮤니티와 계속 연락할 수 있도록 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

Julia Tim의 주요 이미지 / shutterstock.com