ledu STUDIO

ledu STUDIO란?

사이트 관리자에게 사이트를 자유롭게 설정할 수 있도록 도와주는 기능입니다.

만들고 싶은 랜딩 페이지 및 클래스를 자유롭게 만들 수 있습니다.

ledu STUDIO

여백 컴포넌트 종류

여백 컴포넌트란?

페이지 내 구분감을 주기 위해 사용되는 컴포넌트입니다.


여백 컴포넌트

페이지 내 여백을 추가하여 공간의 구분감을 줄 수 있습니다.

여백 컴포넌트 설정 방법

순번
필드 명
설명

1

여백의 크기

페이지 내 여백의 공간 크기 만큼 입력해주세요. (픽셀 단위로 입력해주세요.)

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


구분자 컴포넌트

페이지 내 구분자를 넣어 구분감을 줄 수 있습니다.

구분자 컴포넌트 설정 방법

순번
필드 명
설명

1

구분선 길이

페이지 내 구분선 길이 만큼 입력해주세요.

2

구분선 타입

(2-1)

대쉬형

선의 모양 - - - - - - - - -

(2-2)

솔리드형

선의 모양 ───────────

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


텍스트 컴포넌트 종류

텍스트 컴포넌트란?

페이지 내 텍스트를 입력 및 글자 강조를 위해 사용되는 컴포넌트입니다.


1 그리드 컴포넌트

제목 및 내용을 1개를 하나의 형태로 보여주는 컴포넌트입니다.

1 그리드 컴포넌트 설정 방법

순번
필드 명
설명

1

강조 텍스트

메인 텍스트를 입력해주세요.

2

보조 텍스트

보조 텍스트를 입력해주세요.

3

정렬

(3-1)

좌측 정렬

모든 텍스트를 좌측 정렬로 변경합니다.

(3-2)

중앙 정렬

모든 텍스트를 중앙 정렬로 변경합니다.

(3-3)

우측 정렬

모든 텍스트를 우측 정렬로 변경합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


2 그리드 컴포넌트

제목과 내용이 분리되어 구분감 있는 컴포넌트입니다.

2 그리드 컴포넌트 설정 방법

순번
필드 명
설명

1

강조 텍스트

메인 텍스트를 입력해주세요.

2

보조 텍스트

보조 텍스트를 입력해주세요.

3

정렬

(3-1)

좌측 정렬

모든 텍스트를 좌측 정렬로 변경합니다.

(3-2)

우측 정렬

모든 텍스트를 우측 정렬로 변경합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


3 그리드 컴포넌트

제목과 내용이 3가지로 분류되어 나타내는 컴포넌트입니다.

3 그리드 컴포넌트 설정 방법

순번
필드 명
설명

1

강조 텍스트

1번 메인 텍스트를 입력해주세요.

2

보조 텍스트

1번 보조 텍스트를 입력해주세요.

3

강조 텍스트

2번 메인 텍스트를 입력해주세요.

4

보조 텍스트

2번 보조 텍스트를 입력해주세요.

5

강조 텍스트

3번 메인 텍스트를 입력해주세요.

6

보조 텍스트

3번 보조 텍스트를 입력해주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


강조형 컴포넌트

배경색을 추가하여 더욱 강조 된 제목과 내용을 보여주는 컨포넌트입니다.

강조형 컴포넌트 설정 방법

순번
필드 명
설명

1

강조 텍스트

메인 텍스트를 입력해주세요.

2

보조 텍스트

보조 텍스트를 입력해주세요.

3

정렬

(3-1)

좌측 정렬

모든 텍스트를 좌측 정렬로 변경합니다.

(3-2)

중앙 정렬

모든 텍스트를 중앙 정렬로 변경합니다.

(3-3)

우측 정렬

모든 텍스트를 우측 정렬로 변경합니다.

4

배경색

원하시는 색상을 골라 체크 해주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


앵커 컴포넌트

아이콘을 이용한 강조 된 텍스트 입력이 가능한 컴포넌트입니다.

앵커 컴포넌트 설정 방법

순번
필드 명
설명

1

아이콘 선택

텍스트 앞 이용 할 아이콘을 체크해주세요.

2

텍스트

강조할 텍스트를 입력해주세요.

3

컬러 선택

원하시는 색상을 골라 체크해주세요.

4

id 입력

사이트 내 페이지 단락 id를 입력해주세요. (ex. 랜딩페이지(#1) -> #1 입력)

개별 아이콘 등록

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


제목 컴포넌트

영역 내 간단하게 제목을 삽입할 수 있는 컴포넌트입니다.

제목 컴포넌트 설정 방법

순번
필드 명
설명

1

제목

제목을 입력해주세요.

2

글씨 크기

(2-1)

sm

small – 작은 글씨

(2-2)

md

medium – 중간 글씨

(2-3)

lg

large – 큰 글씨

(2-4)

xlg

xlarge – 매우 큰 글씨

3

타이틀정렬

(3-1)

좌측 정렬

제목을 좌측 정렬로 변경합니다.

(3-2)

중앙 정렬

제목을 중앙 정렬로 변경합니다.

(3-3)

우측 정렬

제목을 우측 정렬로 변경합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


배너형 컴포넌트 종류

배너형 컴포넌트란?

페이지 내 이미지를 이용하여 이용자가 간편하게 이용할 수 있게 사용되는 컴포넌트입니다.


단일 이미지 배너

단일로 이미지에 링크 삽입 할 수 있는 배너입니다.

단일 이미지 배너 설정 방법

순번
필드 명
설명

1

PC 이미지 업로드

PC 화면에서 보여질 이미지를 업로드해주세요.

2

모바일 이미지 업로드

모바일 화면에서 보여질 이미지를 업로드해주세요.

3

링크

배너에 삽입할 링크를 넣어주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


단일 슬라이드 배너

영역 내 풀 사이즈 배너를 넣어 슬라이드 형식으로 사용할 수 있는 배너입니다.

단일 슬라이드 배너 설정 방법

순번
필드 명
설명

1

자동 슬라이드 여부

(1-1)

활성화

슬라이드가 자동으로 3초 간격으로 변경됩니다.

(1-2)

비활성화

슬라이드를 수동으로 움직여줘야합니다.

2

무한 슬라이드 여부

(2-1)

활성화

슬라이드를 반복적으로 넘길 수 있습니다.

(2-2)

비활성화

슬라이드를 반복적으로 넘길 수 없습니다.

3

PC 이미지 업로드

PC 환경에서 보여질 이미지를 업로드 해주세요.

4

모바일 이미지 업로드

모바일 환경에서 보여질 이미지를 업로드 해주세요.

5

노출기간 설정

노출 기간 설정 시 기간 내에만 노출됩니다.

6

링크

배너에 삽입할 링크를 넣어주세요.

7

추가하기

슬라이드 배너를 추가로 만들 수 있습니다.

8

좌,우 네비게이션 여부

(8-1)

선택안함

배너를 드래그하여 변경할 수 있습니다.

(8-2)

선택

배너의 네비게이션을 클릭하여 변경할 수 있습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


메인 슬라이드 배너

영역 내 단일 또는 다중의 배너를 노출이 가능한 슬라이드 배너입니다.

메인 슬라이드 배너 설정 방법

순번
필드 명
설명

1

화면 별 컬럼 수

(1-1)

1

영역 내 1개의 컬럼만 노출합니다.

(1-2)

2

영역 내 2개의 컬럼만 노출합니다.

(1-3)

3

영역 내 3개의 컬럼만 노출합니다.

2

자동 슬라이드 여부

(2-1)

활성화

슬라이드가 자동으로 3초 간격으로 변경됩니다.

(2-2)

비활성화

슬라이드를 수동으로 움직여줘야합니다.

3

무한 슬라이드 여부

(3-1)

활성화

슬라이드를 반복적으로 넘길 수 있습니다.

(3-2)

비활성화

슬라이드를 반복적으로 넘길 수 없습니다.

4

페이지 도트 표시

(4-1)

활성화

문의

(4-2)

비활성화

문의

5

PC 이미지 업로드

PC 환경에서 보여질 이미지를 업로드 해주세요.

6

모바일 이미지 업로드

모바일 환경에서 보여질 이미지를 업로드 해주세요.

7

노출기간 설정

노출 기간 설정 시 기간 내에만 노출됩니다.

8

링크

배너에 삽입할 링크를 넣어주세요.

9

추가하기

슬라이드 배너를 추가로 만들 수 있습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


슬라이드 블록 배너

열과 행을 변경 할 수 있는 슬라이드 배너입니다.

슬라이드 블록 배너 설정 방법

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


아이콘 네비게이션 배너

아이콘을 사용하여 이용자가 간편하게 사이트를 이동할 수 있는 배너입니다.

아이콘 네이게이션 배너 설정 방법

순번
필드 명
설명

1

공통 테마 선택

원하시는 색상을 골라 체크해주세요.

2

아이콘 선택

원하시는 아이콘을 골라 체크해주세요.

3

제목

아이콘 하단에 나타낼 아이콘 이름을 입력해주세요.

4

링크

원하시는 링크를 입력해주세요.

5

추가하기

아이콘을 추가로 만들 수 있습니다. (최대 아이콘 10개 제한)

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


2 그리드 이미지 배너

그림을 삽입하여 제목과 내용을 작성 할 수 있는 배너입니다.

2 그리드 이미지 배너 설정 방법

순번
필드 명
설명

1

PC 배너 이미지 업로드

PC 환경에서 보여질 이미지를 업로드 해주세요.

2

모바일 배너 이미지 업로드

모바일 환경에서 보여질 이미지를 업로드 해주세요.

3

강조 텍스트 입력

메인 텍스트를 입력해주세요.

4

보조 텍스트 입력

보조 텍스트를 입력해주세요.

5

정렬

(5-1)

좌측 정렬

모든 텍스트를 좌측 정렬로 변경합니다.

(5-2)

우측 정렬

모든 텍스트를 우측 정렬로 변경합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


3 그리드 블록 배너

3개의 블록 유형으로 간단한 설명이 노출 가능한 배너입니다.

3 그리드 블록 배너 설정 방법

순번
필드 명
설명

1

이미지 배너 업로드

배너에 보여질 이미지를 업로드 해주세요.

2

타이틀 입력

메인 텍스트를 입력해주세요.

3

디스크립션 입력

보조 텍스트를 입력해주세요.

4

버튼 명 입력

노출 될 버튼 이름을 입력해주세요 (버튼 명을 입력시에 5,6,7번이 활성화 됩니다.)

5

버튼 타입

(5-1)

모서리 둥근 테두리형

모서리가 둥근 네모난 버튼 모양

(5-2)

원형

원형 버튼 모양

6

링크

버튼에 삽입할 링크를 입력해주세요.

7

버튼 색상

원하시는 색상을 체크해주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


그리드 배너

2열구조 형식으로 다양한 이벤트를 노출이 가능하며 제한 없이 생성이 가능한 배너입니다.

그리드 배너 설정 방법

순번
필드 명
설명

1

제목

배너의 제목을 입력해주세요.

2

이미지 업로드

배너에 사용할 이미지를 업로드해주세요. (최소 4개부터 사용 가능)

3

이미지 추가

배너를 제한없이 추가 생성 가능합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


게시판형 컴포넌트 종류

게시판형 컴포넌트란?

페이지 내 게시글 또는 리뷰를 이용자가 간편하게 볼 수 있게 사용되는 컴포넌트입니다.


게시글 선택기

원하는 게시글 및 리뷰를 선택하여 노출 시킬 수 있는 컴포넌트입니다.

게시글 선택기 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

컴포넌트의 제목을 입력해주세요.

2

게시글 선택

노출하기 원하시는 게시글을 선택해주세요.

3

프로필 노출 여부

(3-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(3-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

4

버튼 노출 여부

(4-1)

활성화

게시글 바로가기 버튼 만들어집니다.

(4-2)

비활성화

게시글 바로가기 버튼 만들어지지 않습니다.

5

글 내용 노출 여부

(5-1)

활성화

글 내용을 노출 시킵니다,

(5-2)

비활성화

글 내용을 노출시키지 않습니다.

6

글 내용 길이

문의

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


갤러리형 게시글 선택기

원하시는 게시글 이미지 갤러리 유형으로 노출 시킬 수 있는 컴포넌트입니다.

갤러리형 게시글 선택기 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

컴포넌트의 제목을 입력해주세요.

2

게시글 선택

노출하기 원하시는 게시글을 선택해주세요.

3

프로필 노출 여부

(3-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(3-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

4

버튼 노출 여부

(4-1)

활성화

게시글 더보기 버튼을 생성합니다.

(4-2)

비활성화

게시글 더보기 버튼을 생성하지 않습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


게시판 선택기

원하시는 게시판을 선택하여 노출 시킬 수 있는 컴포넌트입니다.

게시판 선택기 설정 방법

순번
필드 명
설명

1

게시판 갯수

노출하고 싶은 게시판을 1~3개 중 선택해주세요.

2

게시판 제목 노출

(2-1)

활성화

게시판의 제목이 노출됩니다.

(2-2)

비활성화

게시판의 제목이 노출 되지 않습니다,

3

게시판 선택

노출하기 원하시는 게시판을 선택해주세요.

4

정렬 기준

(4-1)

최신순

최신순으로 정렬됩니다.

(4-2)

인기순

인기순으로 정렬됩니다.

5

게시글 더보기 버튼 노출

(5-1)

활성화

게시글 더보기 버튼을 생성합니다.

(5-2)

비활성화

게시글 더보기 버튼을 생성하지 않습니다.

6

프로필 노출

(6-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(6-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

7

글 내용 길이

문의

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


리뷰 게시글 선택기

원하시는 리뷰를 다중으로 노출 시킬 수 있는 컴포넌트입니다.

리뷰 게시글 선택기 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

컴포넌트의 제목을 입력해주세요.

2

리뷰 선택

노출하기 원하시는 리뷰를 선택해주세요.

3

프로필 노출 여부

(3-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(3-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

4

평점 노출 여부

(4-1)

활성화

리뷰 평점을 노출합니다.

(4-2)

비활성화

리뷰 평점을 노출하지 않습니다.

5

버튼 노출 여부

(5-1)

활성화

게시글 더보기 버튼을 생성합니다.

(5-2)

비활성화

게시글 더보기 버튼을 생성하지 않습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


슬라이드 리뷰

원하시는 리뷰를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.

슬라이드 리뷰 선택기 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

컴포넌트의 제목을 입력해주세요.

2

슬라이드당 리뷰 노출 수

슬라이드 당 리뷰를 노출 시킬 수를 선택해주세요.

3

리뷰 선택

노출하기 원하시는 리뷰를 선택해주세요.

4

랜덤 노출 여부

(4-1)

활성화

리뷰를 무작위로 노출합니다.

(4-2)

비활성화

리뷰를 순서대로 노출합니다.

5

프로필 노출 여부

(5-1)

활성화

리뷰 작성자의 프로필을 노출합니다.

(5-2)

비활성화

리뷰 작성자의 프로필을 노출하지 않습니다.

6

평점 노출 여부

(6-1)

활성화

리뷰 평점을 노출합니다.

(6-2)

비활성화

리뷰 평점을 노출하지 않습니다.

7

자동 슬라이드 여부

(7-1)

활성화

리뷰를 자동으로 변경하게 합니다.

(7-2)

비활성화

리뷰를 수동으로 변경하게 합니다.

8

무한 슬라이드 여부

(8-1)

활성화

선택한 리뷰가 반복적으로 노출됩니다.

(8-2)

비활성화

선택한 리뷰가 단일적 노출이 됩니다.

9

네비게이션 여부

(9-1)

활성화

리뷰 이동이 편의한 버튼을 생성합니다.

(9-2)

비활성화

리뷰 이동을 사용자가 직접 드래그합니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


슬라이드 게시글

원하시는 게시글을 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.

슬라이드 게시글 선택기 설정 방법

순번
필드 명
설명

1

타이틀 입력

메인 타이틀 제목을 입력해주세요.

2

보조 텍스트 입력

보조 타이틀을 입력해주세요.

3

슬라이드 당 게시글 노출 수

보여지는 슬라이드의 개수를 선택해주세요.

4

자동 슬라이드 여부

(4-1)

활성화

게시글을 자동으로 변경하게 합니다.

(4-2)

비활성화

게시글을 수동으로 변경하게 합니다.

5

무한 슬라이드 여부

(5-1)

활성화

선택한 게시글이 반복적으로 노출됩니다.

(5-2)

비활성화

선택한 게시글이 단일적 노출이 됩니다.

6

게시글 선택

노출을 원하는 게시글을 선택해주세요.

7

프로필 노출 여부

(7-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(7-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


슬라이드 갤러리형 게시글

원하시는 게시글 이미지를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.

슬라이드 갤러리형 선택기 설정 방법

순번
필드 명
설명

1

타이틀 입력

메인 타이틀 제목을 입력해주세요.

2

프로필 노출 여부

(2-1)

활성화

게시글 작성자의 프로필을 노출합니다.

(2-2)

비활성화

게시글 작성자의 프로필을 노출하지 않습니다.

3

슬라이드 당 게시글 노출 수

보여지는 슬라이드의 개수를 선택해주세요.

4

자동 슬라이드 여부

(4-1)

활성화

게시글을 자동으로 변경하게 합니다.

(4-2)

비활성화

게시글을 수동으로 변경하게 합니다.

5

무한 슬라이드 여부

(5-1)

활성화

선택한 게시글이 반복적으로 노출됩니다.

(5-2)

비활성화

선택한 게시글이 단일적 노출이 됩니다.

6

네비게이션 여부

(6-1)

활성화

게시글 이동 시 편의한 버튼을 생성합니다.

(6-2)

비활성화

게시글 이동을 사용자가 직접 드래그합니다.

7

게시글 선택

노출을 원하는 게시글을 선택해주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


클래스형 컴포넌트 종류

클래스형 컴포넌트란?

페이지 내 클래스를 이용자가 간편하게 볼 수있게 사용되는 컴포넌트입니다.


단일 클래스

하나의 클래스를 노출 할 수 있는 컴포넌트입니다.

단일 클래스 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

메인 텍스트를 입력해주세요.

2

클래스 선택

노출하고 싶은 클래스를 선택해주세요.

3

리뷰 표기 여부

(3-1)

활성화

클래스 리뷰를 노출합니다.

(3-2)

비활성화

클래스 리뷰를 노출하지 않습니다.

4

가격 표기 여부

(4-1)

활성화

클래스 가격을 노출합니다.

(4-2)

비활성화

클래스 가격을 노출하지 않습니다.

5

수강생 수 표기 여부

(5-1)

활성화

클래스의 수강생 수를 노출합니다.

(5-2)

비활성화

클래스의 수강생 수를 노출하지 않습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


다중 클래스

다중의 클래스를 노출 할 수 있는 컴포넌트입니다.

다중 클래스 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

메인 텍스트를 입력해주세요.

2

클래스 선택

노출하고 싶은 클래스를 선택해주세요.

3

강사 사진 표기 여부

(3-1)

활성화

클래스 강사 사진을 노출합니다.

(3-2)

비활성화

클래스 강사 사진을 노출합니다.

4

리뷰 표기 여부

(4-1)

활성화

클래스 리뷰를 노출합니다.

(4-2)

비활성화

클래스 리뷰를 노출하지 않습니다.

5

가격 표기 여부

(5-1)

활성화

클래스 가격을 노출합니다.

(5-2)

비활성화

클래스 가격을 노출하지 않습니다.

6

수강생 수 표기 여부

(6-1)

활성화

클래스의 수강생 수를 노출합니다.

(6-2)

비활성화

클래스의 수강생 수를 노출하지 않습니다.

7

페이지 당 클래스 노출 수

한번에 노출 할 클래스 수를 선택해주세요.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


슬라이드형 클래스

다중의 클래스를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.

슬라이드형 클래스 설정 방법

순번
필드 명
설명

1

컴포넌트 제목

메인 텍스트를 입력해주세요.

2

페이지 당 클래스 노출 수

한번에 노출 할 클래스 수를 선택해주세요.

3

클래스 선택

노출하고 싶은 클래스를 선택해주세요.

4

리뷰 표기 여부

(4-1)

활성화

클래스 리뷰를 노출합니다.

(4-2)

비활성화

클래스 리뷰를 노출하지 않습니다.

5

가격 표기 여부

(5-1)

활성화

클래스 가격을 노출합니다.

(5-2)

비활성화

클래스 가격을 노출하지 않습니다.

6

수강생 수 표기 여부

(6-1)

활성화

클래스의 수강생 수를 노출합니다.

(6-2)

비활성화

클래스의 수강생 수를 노출하지 않습니다.

모든 설정을 마친 후에는 '저장하고 생성하기' 버튼을 눌러주세요.


Last updated

Was this helpful?