[카테고리:] WP Effect
-
6._2 워드프레스 엘리멘터 프로 고급 캐로셀 슬라이드_3
—
워드프레스 홈페이지나 블로그에서 아래와 같이 고급 캐로셀 슬라이드 효과를 만드는 방법에 대해 안내 드립니다. 3. 워드프레스 홈페이지 동적 단추 만들기 ‘컨테이너‘를 ‘Testimonial Carousel‘ 아래로 드래그 합니다. ‘단추‘를 새로 만든 ‘컨테이너‘ 안으로 드래그 합니다. ‘텍스트‘를 지우고 ‘아이콘 라이브러리‘를 클릭합니다. 아래와 같이 아이콘을 선택 후 삽입합니다. 둥근 모서리를 아래와 같이 설정합니다. ‘아이콘 간격‘을 아래와 같이 설정합니다. ‘패딩‘을…
-
6._1 워드프레스 엘리멘터 프로 고급 캐로셀 슬라이드_2
—
워드프레스 홈페이지나 블로그에서 아래와 같이 고급 캐로셀 슬라이드 효과를 만드는 방법에 대해 안내 드립니다. 2. 워드프레스 홈페이지 캐로셀 (Carousel) 이미지 효과 ‘Testimonial Carousel‘을 우측 ‘컨테이너‘로 드래그 합니다. 전체를 포함하고 있는 ‘컨테이너 편집‘을 클릭 후 ‘Align Items‘를 ‘중앙‘으로 설정합니다. ‘Testimonial Carousel 편집‘에서 ‘항목#1‘을 클릭합니다. ‘Name‘을 입력하고 ‘이미지 선택‘을 클릭하여 원하는 이미지를 삽입합니다. ‘Content‘의 내용을 삭제합니다. 계속해서…
-
6. 워드프레스 엘리멘터 프로 고급 캐로셀 슬라이드_1
—
워드프레스 홈페이지나 블로그에서 아래와 같이 고급 캐로셀 슬라이드 효과를 만드는 방법에 대해 안내 드립니다. 1. 워드프레스 홈페이지 제목, 텍스트, 단추 만들기 ‘새 컨테이너 추가‘를 클릭합니다. ‘구조 선택‘에서 ‘5:5‘ 구조를 선택합니다. ‘너비‘와 ‘최소 높이‘를 아래와 같이 설정합니다. ‘컨테이너‘를 좌측 컨테이너 안으로 드래그 합니다. 다시 새로 만든 컨테이너 아래에 ‘컨테이너‘를 드래그 합니다. 2개의 컨테이너를 포함하고 있는 ‘컨테이너…
-
4. 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_1
—
워드프레스 홈페이지나 블로그에서 아래와 같이 플레잉 카드와 후버 효과를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_1 ‘+’ 표시인 ‘새 컨테이너 추가‘를 클릭합니다. ‘방향 열’을 클릭합니다. ‘레이아웃‘에서 ‘최소 높이‘를 아래와 같이 설정합니다. ※ 100vh 아래와 같이 배경 색상을 검정색으로 설정합니다. ‘+’ 표시인 ‘요소 추가’를 클릭 후 ‘제목’을 컨테이너 안으로 드래그 합니다.…
-
4._1 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_2
—
워드프레스 홈페이지나 블로그에서 아래와 같이 플레잉 카드와 후버 효과를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_2 원하는 이미지를 삽입합니다. ‘이미지‘를 아래와 같이 설정합니다. ‘이미지‘의 ‘테두리‘를 아래와 같이 설정합니다. 아래와 같이 해당 ‘컨테이너‘를 클릭 후 ‘패딩‘을 아래와 같이 설정합니다. 아래와 같이 해당 ‘컨테이너‘를 클릭 후 ‘Justify Content‘와 ‘간격‘을 아래와 같이 설정합니다.…
-
4._2 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_3
—
워드프레스 홈페이지나 블로그에서 아래와 같이 플레잉 카드와 후버 효과를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 플레잉 카드 이미지 후버 효과_3 아래에 해당하는 ‘컨테이너‘를 우 클릭합니다. ‘복제‘를 클릭합니다. 같은 ‘복제‘를 9번 해서 각각 해당하는 ‘이미지‘와 ‘제목‘을 삽입합니다. ‘단추’를 ‘제목’ 밑으로 드래그 합니다. ‘단추‘의 ‘타이포그래피‘를 아래와 같이 설정합니다. ‘단추‘의 ‘텍스트 색상‘과 ‘배경 색상‘을 아래와 같이 설정합니다.…
-
5._1 워드프레스 홈페이지 아이콘 네비게이션_1
—
워드프레스 홈페이지나 블로그에서 아래와 같이 쇼우 케이스 (Show Case) 동적 이미지를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 아이콘 네비게이션_1 ‘템플릿‘의 ‘Theme Builder‘를 클릭합니다. ‘Header’를 클릭합니다. ‘Add New‘를 클릭합니다. ‘X’를 클릭하여 창을 닫습니다. ‘+’ 표시인 ‘요소 추가’를 클릭 후 ‘컨테이너’를 컨테이너 안으로 드래그 합니다. ‘아이콘 상자‘를 ‘컨테이너‘ 안으로 드래그 합니다. ‘아이콘 라이브러리‘를 클릭합니다. 원하는 아이콘을…
-
5. 워드프레스 홈페이지 아이콘 네비게이션_2
—
워드프레스 홈페이지나 블로그에서 아래와 같이 쇼우 케이스 (Show Case) 동적 이미지를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 아이콘 네비게이션_2 ‘컨테이너 편집‘을 클릭합니다. ‘Custom CSS‘에서 ‘CSS 코드’를 입력합니다. ☆광고 클릭 후 CSS 코드 요청하기 keibae65@gmail.com로 ‘3번’ 표시 ‘고급‘에서 ‘오프셋‘을 ‘50%’로 설정합니다. ‘스타일‘에서 ‘테두리‘의 ‘Box Shadow‘의 ‘흐림‘을 아래와 같이 설정합니다. ‘테두리‘의 ‘둥근 모서리‘를 아래와 같이 설정합니다.…
-
3._2 워드프레스 홈페이지 이미지 쇼우케이스 (Show Case) 만들기_3
—
워드프레스 홈페이지나 블로그에서 아래와 같이 쇼우 케이스 (Show Case) 동적 이미지를 만드는 방법에 대해 안내 드립니다. 3. 워드프레스 홈페이지 이미지에 쇼우케이스 효과 넣기 ‘이미지‘를 ‘단추‘ 밑으로 드래그 합니다. ‘이미지 선택‘을 클릭 후 원하는 이미지를 삽입합니다. ‘고급‘에서 ‘위치’와 ‘오프셋’을 아래와 같이 설정합니다. ‘스타일‘에서 ‘둥근 모서리‘를 아래와 같이 설정합니다. ‘CSS 클래스‘에 ‘mdw-card-portfolio-image-left’를 입력합니다. ‘컨테이너 편집‘을 클릭합니다. ‘CSS…
-
3._3 워드프레스 홈페이지 이미지 쇼우케이스 (Show Case) 만들기_4
—
워드프레스 홈페이지나 블로그에서 아래와 같이 쇼우 케이스 (Show Case) 동적 이미지를 만드는 방법에 대해 안내 드립니다. 워드프레스 홈페이지 이미지에 쇼우케이스 효과 넣기 (반응형) ‘태블릿 세로‘를 클릭합니다. ‘이미지 편집‘을 클릭합니다. ‘이미지 편집’의 ‘고급‘에서 ‘반응형’을 아래와 같이 설정합니다. ‘컨테이너 편집‘을 클릭합니다. ‘너비‘를 ‘400’으로 설정합니다. ‘제목 편집‘에서 ‘타이포 그래피‘에서 ‘크기‘를 ’50’으로 설정합니다. ‘텍스트 편집기 편집‘에서 ‘여백‘을 아래와 같이…