오늘의 튜토리얼에서는 채용 페이지에 공석을 동적으로 표시하는 방법을 보여 드리겠습니다. 시작하자.

결과 개요

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 빠르게 살펴 보겠습니다.

1. 채용 페이지 만들기

새 페이지를 추가하고 Visual Builder로 전환

새 페이지를 작성하여 시작하고 페이지 제목을 지정한 다음 Visual Builder로 이동하십시오.

2. 프론트 엔드에서 채용 페이지 작성을 시작하십시오.

첫 번째 섹션 추가

그라데이션 배경

첫 번째 섹션을 페이지에 추가하고 섹션 설정을 열고 그라데이션 배경을 사용하십시오.

• 색상 1 : # ff6600
• 색상 2 : # fbff30
• 그라데이션 방향 : 126deg

하부 분배기

더 낮은 섹션 분배기를 사용하십시오.

• 분리 스타일 : 목록에서 검색
• 분배기 높이 : 8vw
• 디바이더의 수평 반복 : 3x
• 칸막이 배열: 아래 내용 섹션의

간격

더 낮은 패딩을 추가하여 섹션 매개 변수를 완료하십시오.

• 하단 패딩 : 200px

새 행 추가

기둥 구조

다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.

열에 텍스트 모듈 추가

H1 콘텐츠 추가

다음을 사용하여 행 열에 텍스트 모듈을 추가합니다. 내용 당신이 선택한 H1.

H1 텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 H1 텍스트 설정을 변경합니다.

• 제목 글꼴 : Montserrat
• 제목 글꼴 무게 : Heavy
• 헤더 텍스트 색상 : #ffffff
• 헤더 텍스트 크기 : 8rem (데스크톱), 4rem (태블릿), 2.5rem (휴대폰)

컬럼에 분리 모듈 추가

시계

텍스트 모듈 바로 아래에 구분 모듈을 추가합니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

• 구분 기호 표시 : 예

라인

그런 다음 모듈의 선 색상을 변경하십시오.

• 선 색상 : #ffffff

크기 조정

치수 매개 변수를 수정하여 모듈 매개 변수를 완료하십시오.

• 분배기 무게 : 8px
• 너비 : 30 %

섹션 2 추가

다른 일반 섹션을 페이지에 추가하십시오.

새 행 추가

기둥 구조

다음 열 구조를 사용하여 섹션에 새 줄을 추가하십시오.

열에 텍스트 모듈 추가

H2 콘텐츠 추가

행 열에 텍스트 모듈을 추가하고 텍스트를 삽입합니다. 내용 당신이 선택한 H2.

H2 텍스트 설정

다음과 같이 모듈의 H2 텍스트 매개 변수를 수정하십시오.

• 제목 2 경찰 : Montserrat
• 항목 2 정책의 무게 : 무겁다
• 항목 2의 텍스트 색상 : # ffa500
• 제목 2 텍스트 크기 : 2.3rem

컬럼에 분리 모듈 추가

시계

이 칼럼에서 필요한 다음 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

• 구분 기호 표시 : 예

라인

그런 다음 모듈의 선 색상을 변경하십시오.

• 선 색상 : # ffa500

크기 조정

그리고 디바이더의 무게와 치수 매개 변수의 최대 너비를 수정하여 모듈 매개 변수를 완성하십시오.

• 분배기 무게 : 6px
• 최대 너비 : 80 픽셀

열에 블로그 모듈 추가

내용

다른 공석을 표시하기 위해 필요에 따라 사용자 정의 할 블로그 모듈을 사용합니다. 다음 콘텐츠 설정이 적용되는지 확인하십시오.

• 메시지 유형 : 메시지
• 카테고리 포함: 마케팅
• 추출 길이 : 150

요소

요소의 매개 변수에서 우리가 활성화하는 두 가지 옵션은 다음과 같습니다.

• 더 많은 버튼 표시 : 예
• 쇼에서 발췌 : 예

규정

모듈 디자인 탭으로 전환하고 전체 너비 레이아웃을 사용하고 있는지 확인하십시오.

• 레이아웃 : 전체 폭

제목 텍스트 설정

제목 텍스트 설정도 변경하십시오.

• 타이틀 레벨 : H3
• 제목 글꼴 : Montserrat
• 제목 텍스트 크기 : 1.5rem

본문 텍스트 설정

그런 다음 본문 설정을 변경하십시오.

• 경찰 : Raleway
• 텍스트 본문 크기 : 1.1rem
• 바디 라인의 높이 : 2.1em

더 알아보기 텍스트 설정

텍스트 설정으로 자세히 알아보십시오.

• 더 읽어보기 Police : Montserrat
• 글꼴 스타일 : 대문자
• 자세히 알아보기 텍스트 색상 : #ffffff
• 더 읽기 텍스트 크기 : 1rem

간격

간격 설정에 사용자 정의 여백 및 패딩 값을 추가합니다.

• 왼쪽 여백 : 100px (데스크톱), 50px (태블릿), 0px (전화)
• 상단 패딩 : 0px
• 하단 패딩 : 0px

더 알아보기 Button CSS

고급 탭에서 CSS 재생 버튼을 추가하여 모듈 설정을 완료합니다.

max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

필요한만큼 라인을 복제하십시오

회선과 모든 모듈을 완료 한 후에는 회사의 부서 수에 따라 원하는 횟수만큼 복제 할 수 있습니다.

텍스트 모듈의 내용 편집

각 중복 줄의 H2 내용을 편집하십시오.

블로그 모듈 카테고리 편집

블로그 모듈의 범주와 함께.

마지막 줄의 열에 코드 모듈 추가

개별 개방형 워크 스테이션을 스타일 화하기 위해 CSS 코드 삽입

디자인을 마치려면 페이지의 마지막 줄에 코드 모듈을 추가하고 다음 CSS 코드 줄을 삽입합니다.

<style>.et_pb_posts .et_pb_post {box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);padding: 50px;border-radius: 20px;background-color: #fff;}</style>

3. 페이지 디자인을 저장하고 결과를 표시하십시오

페이지 디자인을 마치면 모든 변경 사항을 저장하고 Visual Builder를 종료하고 결과를 볼 수 있습니다!

최종 결과

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

마지막 생각

이 자습서에서는 Divi. 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요.