혼자서 무료로 만드는 홈페이지 제작 방법

[@itconnect_dev]

무료 호스팅으로 연습해보기 - kzbin.info/www/bejne/lYO8e619ZbqkfKM 지식창업 홈페이지 제작하기 - keypaper.biz/platform-making-lecture/ 오픈 채팅방에서 질문하기 - open.kakao.com/o/gQBkp4Ue

[@최준석-e9m]

좋은 강의 감사합니다~ 혼자 따라하면서 많이 배웠습니다!

[@itconnect_dev]

시청해주셔서 대단히 감사합니다!! 원하는 홈페이지 제작 꼭 성공하시기 바랍니다~

[@김경중-r8g]

너무너무 감사드립니다.!!!!!!!!

[@itconnect_dev]

시청해주셔서 감사합니다~ 도움이 되셨다니 다행이네요 :)

[@kangsstory-2510]

볼때마다 새로운 기능을 자세히 설명해 주셔서 새롭네요... 귀찮으실텐데 장시간 모바일 버전까지 설명해 주셔서 감사합니다.

[@itconnect_dev]

다음에는 쇼핑몰 제작 방법으로 찾아오겠습니다 :) 감사합니다.

[@kangsstory-2510]

@@itconnect_dev 팬입니다

[@최민영-i8m]

안녕하세요. 연구소님 정말 감사합니다. 덕분에 홈페이지를 만들어 볼 수 있겠습니다. 워드프레스 강의 중 단연 최고입니다. 감사합니다

[@itconnect_dev]

좋은 말씀 감사합니다 :)

[@정인석-w2c]

최고네요! 워드프레스 국내 강의 중 단연 T.O.P입니다. 감사합니다.

[@itconnect_dev]

좋은 말씀 정말 감사합니다 :) 계속해서 좋은 콘텐츠 제공할 수 있도록 노력하겠습니다!!

[@프라우스-s4p]

이렇게 좋은 것에 댓글이 왜 적지? 하고 봤는데, 2주전에 올라온 컨텐츠였네요. 3주 전에 시작하지 않고 지금 이 영상보고 만들게 되어 너무 감사합니다. 덕분에 워드프레스도 배우고 홈페이지도 만들 수 있게 되었네요. 설명 너무 감사드립니다.

[@itconnect_dev]

좋은 댓글 감사합니다 :) 많은 도움 되셨으면 좋겠습니다 ㅎㅎ

[@남자김성호-m8p]

열심히 배우고 있습니다 감사합니다

[@itconnect_dev]

원하시는 페이지 꼭 만드시기 바랍니다!! 감사합니다.

[@해피뉴이어-j8i]

진짜 감사합니다!ㅜㅜ저는 웹 에이전시를 운영하고 싶습니다 . 궁금한게, 엘리멘터 프로 홈페이지 25개?짜리 결제하려는데요! 보통 호스팅,도메인 연결하고 거기에 생긴 링크로? 워드프레스 관리자 가서 엘리멘터를 설치하는데, 이게 고객의 호스팅과 도메인이잖아요! 질문 1.그래서 여기다가 엘리멘터 유료버전을 설치하면 고객에게 유료 플러그인을 넘겨주는 것 아닌가요?ㅠㅠ?제가 결제한 나머지 24개의 홈페이지는 어떻게 만들 수 있나요?😅… 질문 2. 또한, 엘리멘터 프로로 만들어진 홈페이지를 고객이 계속 관리하기 위해서는 고객도 엘리멘터 프로를 결제를 해야하나요?? 고객은 이런 월결제를 부담스러워할텐데 시스템이 어떻게 돌아가는 걸까요?ㅠㅠ 영상 퀄리티가 너무 좋습니다. 도움 만ㅇㅎ이 받고있어요!! 진짜 감사합니다.

[@itconnect_dev]

시청해주셔서 감사합니다. 엘리멘터 유료버전을 구매하면, 파일 다운로드와 연결된 사이트를 확인할 수 있는 관리 페이지를 운영하실 수 있습니다. 해당 페이지에서 플러그인 파일 다운로드 후, 고객 사이트에 설치하고 1회 라이센스 등록을 진행해야 합니다. (질문1) 설치 시 계정을 연결하는 원리라, 플러그인이 넘어가지는 않습니다. 또한 고객은 해당 계정을 볼 수 없습니다. 나머지 사이트들도 모두 동일하게 라이센스 등록해주시면 됩니다. (질문2) 엘리멘터 프로를 계속 연장하시고, 고객의 사이트 연결을 해지하지 않는다면, 고객은 추가로 구매할 필요는 없습니다. 유료 제공 기간에 따라 정책을 정하시면 될 것 같습니다. 라이선스 부분은 저희가 안내 드린 부분과 다를 수 있으니, 엘리멘터 프로 고객센터에도 문의해보시기 바랍니다!

[@해피뉴이어-j8i]

@@itconnect_dev 친절한 답변 감사합니다!!! 덕분에 고민이 해결되었습니다:)

[@평온과선순환]

좋은 영상 감사합니다 사이트의 전체적인 가로 사이즈를 셋팅하는 것은 어디에서 하는 것인가요 ?

[@itconnect_dev]

엘리멘터를 이용해서 제작 중이시라면, 다음과 같은 방법으로 지정하실 수 있습니다. 1. 워드프레스 관리자 페이지의 좌측 패널에서 [페이지]를 눌러주세요. 2. 제작 하신 페이지의 "엘리멘터 편집"을 클릭하여 편집화면으로 이동해주세요. 3. (편집화면) 좌측 패널의 가장 좌측 상단에 "햄버거 아이콘(줄 3개 형태)"을 클릭해주세요. 4. "사이트 설정"을 클릭해주세요. 5. 아래 설정에 "레이아웃"을 클릭해주세요. 6. 콘텐츠 너비를 설정하시면 전체적인 가로 사이즈가 세팅 됩니다. ※ 엘리멘터 편집화면에서 컨테이너마다 "레이아웃" - "콘텐츠 너비" - 지정너비 or 전체너비의 값으로 각각의 조절도 가능합니다. 엘리멘터가 아닌 기본 편집 화면에서는, 페이지의 "편집" 버튼을 누른 뒤, 우측 상단에 A 아이콘(아스트라)을 클릭하여 페이지 폭 조절이 가능합니다. 시청해주셔서 감사합니다.

[@평온과선순환]

@@itconnect_dev 너무나도 감사합니다. ~~~

[@greenationofficial]

감사합니다!!! 개인 작업도 하시나요?!

[@itconnect_dev]

안녕하세요. 네. 제작도 하고 있습니다 :)

[@강지훈-p9v]

오랜만에 인사드립니다. 한가지 여쭤보겠습니다. 홈 헤더부분을 사진으로 덮어 글자를 흰색으로 처리했는데 서브메뉴는 흰바탕이라 메뉴가 메인 홈에서만 흰색으로 잘 보이고 서브메뉴들에서는 보이지 않는데 방법을 모르겠네요??

[@itconnect_dev]

문의하신 내용이 홈에서 메뉴의 서브 메뉴를 흰색으로 설정하는 방법에 대해서 말씀하신 걸까요? 아니면, 홈에서는 흰색으로 보이고 다른 페이지에서는 검정색이나 다른 색상으로 보이게 설정하고 싶으신 걸까요?

[@realtruem]

영상 너무나도 잘 보고 있습니다. 감사합니다. 따라서 잘 하고 있는데요! 메인 페이지 수정 단계(영상 2:13:27)에서 상단 메뉴 클릭도 안될 뿐더러.. Head & Footer로 들어가서 선택해도 상단 메뉴 고정하는 부분의 "고급>모션 효과"에 "입구 애니메이션"만 보이네요! 혹시 유료버전에서만 Sticky 를 설정할 수 있게 변경되었을까요? 검색해 보니 플러그인(Sticky Element: (required)) 설치해도 된다고 하는데요! 설정방법을 몰라서 전전긍긍하고 있습니다.

[@itconnect_dev]

무료 버전을 사용하고 계신 경우에는, 말씀하신 바와 같이 Sticky Menu & Sticky Header 플러그인을 사용해 주셔야 합니다. 1. 플러그인 추가에서 "Sticky Menu & Sticky Header" 를 검색하여 설치 후 활성화해주세요. 2. 활성화 후 [설정] - [Sticky Menu] 로 이동해주세요. 3. (Sticky Element: (required)) 의 값에 ".stickymenu" 와 같이 .메뉴이름을 영어로 작성해주세요 4. 아래 Space between top 은 헤더이기 때문에, 공간 없이 0픽셀로 설정 후 저장해주세요 5. [외모] - [Elementor Header & Footer Buider]로 이동하여, 헤더의 엘리멘터 편집을 눌러주세요 6. 컨테이너나 섹션 편집을 누른 뒤 [고급] 탭의 아래 [CSS 클래스]에 3번에서 지정한 "stickymenu" 메뉴이름을 넣어주세요 (.을 빼고 넣어주셔야 합니다.) 7. 저장 후 확인하시면 스티키가 적용되는 것을 확인하실 수 있습니다. . 과 #의 차이는 클래스와 ID의 차이입니다. 감사합니다

[@realtruem]

@@itconnect_dev 너무너무 감사합니다. 단번에 해결했습니다. 앞으로도 좋은 강좌 부탁드리겠습니다. 냉큼 달려와 시청하겠습니다. 의견 : 시간이 되실때 게시판들을 한곳에 묶어서 메뉴에 넣는 방법도 강의 해 주셨으면 합니다. 예를 들어 "고객센터" 라는 메뉴에 공지사항, Q&A, 자주뭍는질문... 등 게시판을 분류해서 보여주는 부분도 너무 궁금합니다.

[@itconnect_dev]

말씀 대단히 감사합니다. 의견도 참고하여 다양한 콘텐츠 제공하도록 하겠습니다! 답글로 방법 알려드릴 수 있어서 안내드립니다. 1. [외모] - [메뉴]에서 생성하셨던 메인메뉴에서 좌측 "메뉴 추가"에서 "사용자 정의 링크"로 고객센터를 만들어주세요. (고객센터 페이지를 별도로 만드셨다면 "페이지"로 불러오시면 됩니다.) 2. 그 다음 공지사항, Q&A, 자주묻는질문 게시판 "페이지"를 메뉴에 추가해주세요. (게시판 페이지를 각각 만들어주셔야 합니다. 국내는 kboard를 많이 활용합니다.) 3. 추가된 게시판 메뉴들을 마우스 왼쪽 클릭으로 꾹 눌러 고객센터 메뉴로 드래그하여 아래로 넣어주세요. (동일 선상이 아니라 메뉴 안쪽으로 넣으실 수 있습니다.) 4. 메뉴 저장 후 헤더 확인 하시면 서브메뉴 형태로 마우스를 올리면 하위 메뉴들을 볼 수 있습니다. 감사합니다.

[@realtruem]

@@itconnect_dev 너무너무 감사합니다.

[@김깡통-j8k]

안녕하세요 온수연님 잘보고따라하고있는데용 헤더랑 풋터까지 만들고 페이지에너 메인페이지만들어서 엘리멘터 편집들어가보면 제가 만들어놓은 헤드가 적용되어있지않고 전에 연습하려고끄적거리던게 적용되이있는데 바꿀수있는방법이없을까요?

[@itconnect_dev]

Elementor Header & Footer Builder 플러그인을 사용 중이시라면 기존에 만드셨던 헤더 편집 화면으로 들어가신 다음에, Type of Template에서 Entire를 해제 시켜주시고, 새로 만든 헤더를 Entire 설정을 해주시면 반영 되실거에요!

[@해피뉴이어-j8i]

안녕하세요! 전에 다른 분 영상을 따하다가 안돼서 넘어왔습니다ㅠㅠ아스트라에서 스타터 템플릿을 설치한다음 특정 템플릿을 활성화했었습니다. 중간에 있는 건 다 삭제했는데 헤더와 푸터가 엘리먼트에서 삭제가 안돼서 여기로 넘어왔습니다. 엘리먼트엥서 백지 상태에서 다시 처음부터 만들고 싶어서 아스트라를 삭제해보고 다시 깔아보기도 하고, 엘리먼트를 다시 깔아보기도 했습니다.ㅠㅠ말씀하신대로 엘리먼트 헤더,푸터 플러그인으로 ㄷ르어가서 따라 만들고있습니다. 그런데, 홈페이지 주소로 들어가면 예전에 아스트라 템플릿에 있던 헤더와 푸터가 그대로 남아있고 이 영상에서 따라한게 적용이 안되어 있습니다ㅠㅠ..왜 그럴까요😂😢😢😢

[@해피뉴이어-j8i]

Wp reset 플러그인으로 워드프래스 리셋하여 해결햇습니다!! 😂

[@itconnect_dev]

해결 되셨다니 다행입니다. 추가로 궁금한 점 있으시면 댓글 남겨주세요!

[@해피뉴이어-j8i]

안녕하세요! 혹시 워드프레스 사용해서 웹 에이전시 운영하시는 분들 월 비용이 얼마 나오는지 궁금합니다. 엘리멘터 플러그인, seo 플러그인 등 필요한 웹사이트 제작에 필요한 각종 플러그인 포함해서 총 얼마정도 들까요?ㅠㅠ워드프레스 자체 플랜도 구독해야할까요??ㅠㅠ

[@itconnect_dev]

제작할 때마다 플러그인을 구입할 수도 있고, 대량으로 사용가능한 라이선스를 구입할 수도 있습니다. 상황에 따라 매우 다르기 때문에 비용이 어느정도라는 질문은 답해드리기가 어렵네요

[@평온과선순환]

영상 54:59 엘리멘터 레이아웃-콘텐츠너비를 전체넓이로만 하면 문제가 있는건가요? 아스트라설정을 안건드리고요.

[@itconnect_dev]

설정 값에 따라 차이가 있을 수 있지만, 워드프레스의 경우 디자인 요소는 "테마"가 우선입니다. 따라서, 테마인 아스트라에서 페이지의 너비를 전체 너비로 지정해야 엘리멘터의 너비 값을 전체로 변경할 수 있습니다. 아스트라 너비 값이 기본인 경우, 엘리멘터 너비 값을 전체 너비로 지정해도 아스트라의 기본 너비를 넘어갈 수 없습니다. (아스트라 기본 너비 값이 1280px이라면, 엘리멘터의 전체 너비 값은 1280px을 넘어갈 수 없습니다.)

[@평온과선순환]

상세한 답변 감사합니다.​@@itconnect_dev

[@남자김성호-m8p]

소장님 질문 또 있습니다 제가 파워 포인트로 50페이지 정도 디자인 했습니다 렌딩 페이지 즉 메인페이지 만든 후 소장님 설명하신 포토폴리오에 하위 메뉴가 있는데 그곳으로 이동하는 방법과 나머지 49쪽에 달하는 제품 소개나 이미지를 다 지금 설명 하시는데로 섹션으로 다 제작해야 하나요 배우다 보니 궁금한게 너무 많습니다

[@itconnect_dev]

하위 메뉴를 사용자 정의 링크로 추가 방법은 이전에 문의 주신 내용에 답변 드렸습니다. 참고해보시기 바랍니다. 우선, 인터넷에 정보구조도를 검색하신 다음에, 해당 내용들을 참고하셔서 50페이지를 정리해보세요. 정리가 된 다음에, 만들 페이지를 리스트하고 각 페이지 별로 들어갈 제품과 이미지를 구상하고 제작해보세요. 판매를 하지 않는 소개 페이지의 경우, 말씀하신 대로 섹션으로 모두 제작해야 합니다. 제품의 경우에는 상품을 만들고 - 상품 편집 화면에서 상세페이지 형태로 제작하시면 됩니다.

[@kinggod4478]

감사합니다. 잘보겠습니다.

[@itconnect_dev]

시청해 주셔서 감사드립니다.

[@smart_housing]

다른 영상보면서 따라해보다가 아스트라 설치하고 거기에 맞는 템플릿을 설치해보라고 하셔서 따라서 했는데 삭제하는방법을 모르겠습니다. 혹시 어떻게 삭제해야하나요? 이 영상에서처럼 백지에다가 하나씩 만들어가보고 싶어서요!

[@itconnect_dev]

페이지나 템플릿 전체를 삭제하고 싶으신 경우에는 워드프레스 관리자 화면에서 [페이지], [템플릿]을 누른 뒤 리스트에서 지우고자 하는 페이지나 템플릿에 마우스를 올려 "휴지통"을 클릭해주세요. 그 다음 휴지통에서 영구 삭제 누르시면 완전히 삭제 됩니다. 템플릿 중 어떤 요소들만 삭제하고 싶으신 경우에는 엘리멘터 편집화면에서 컨테이너는 상단 "x" 표시로 삭제가 가능하며, 요소 클릭 후 우클릭 - 삭제로 지우실 수 있습니다!

[@smart_housing]

@@itconnect_dev 네 감사합니다! 대표님 도움으로 정말 생각도 못해본 홈페이지라는걸 만들어볼 수 있었습니다. 정말 큰 도움이 되었습니다.

[@해피뉴이어-j8i]

저도 비슷한 문제를 겪고있습니다😂😂 저도 백지에서 시작하고 싶은데, 아스트라- 특정 템플릿을 선택했었습니다. 템플릿에 있는걸 다 지웠는데, 문제는 헤더랑 푸터는 안 지워졌었습니다. 그 후로 아스트라를 삭제해도 페이지를 삭제해도 엘리먼트로 들어가면 해당 헤더와 푸터가 따라 나옵니다ㅠㅠ..삭제도 안되고요.. 어떻게 하면 백지에서 시작할 수 있을까요?

[@남자김성호-m8p]

소장님 헤드하고 푸터 겨우 했는데 메인에 사진을 넣을려고 하는데 (27인치모니터 헤더와푸터 제외하고) 어떤 사진은 꽉 차고 어떤 사진을 꽉 차지 않는데 왜 그런가요?

[@itconnect_dev]

이미지 비율 때문에 그렇습니다. 배경에 이미지를 넣는 경우, 스타일에서 "반복"에 반복없음으로 "표시 크기"에 덮기로 설정하고, "고급"에 패딩 값을 통해 보여주고 싶은 이미지 만큼 너비를 조정해보시기 바랍니다. 이미지를 넣는 경우에는 이미지의 가로와 세로 길이에 따라 이미지가 꽉차지 않을 수 있습니다. 길이 조절을 하시고, 이미지 사용 시 동일한 비율의 이미지를 사용하시는 것이 좋습니다.

[@남자김성호-m8p]

@@itconnect_dev 감사합니다 ^^

[@남자김성호-m8p]

소장님 모션 효과에서 sticky 가 내 컴에서는 보이지 않고 스크롤 효과 와 마우스 효과 붙박이 이렇게 나옵니다 이것도 구매를 해야 하나요

[@itconnect_dev]

확인은 해봐야 되나, "붙박이"로 자동 번역 된 것 같습니다. None으로 설정된 박스에서 Top 또는 Bottom 으로 선택 후 Sticky 효과를 지정해보시기 바랍니다. Sticky Menu & Sticky Header, WP Sticky Sidebar 등의 Sticky 플러그인도 있습니다.

[@남자김성호-m8p]

@@itconnect_dev 감사합니다

[@남자김성호-m8p]

홈페이지 작성하다 시간 상 다 못하여 저장 할려면 어떻게 하나요

[@itconnect_dev]

엘리멘터의 경우 좌측 하단에 게시 또는 업데이트 버튼이 있습니다. 워드프레스 기본 편집기나 글 편집에서는 우측 상단에 업데이트 버튼을 눌러 저장하시면 됩니다. 비공개로 임시 저장 하는 방법도 있습니다.

[@남자김성호-m8p]

감사합니다😀

[@남자김성호-m8p]

소장님 작업하다 잘못해서 다 삭제하고 다시 하고 싶은데 방법이 있나요 배우니 조금씩 재미는 있네요 느리지만 답변 부탁 합니다

[@itconnect_dev]

안녕하세요~ 삭제 가능합니다. 글, 페이지, 템플릿, 미디어 등 작업 목록에서 작업한 파일에 마우스를 올려서 "휴지통" 버튼을 눌러주시면 됩니다. (관리자 페이지 좌측 패널에서 "페이지"를 누른 뒤, 작업한 리스트에 마우스를 올려 "휴지통"을 클릭해주세요)

[@남자김성호-m8p]

@@itconnect_dev 감사합니다 느리지만 덕분에 조금씩 진행되고 있네요 ^^

[@비트멘션]

혹시 수정후 모바일 반응이 없는데 시간이 지나면 적용이 될까요?

[@itconnect_dev]

페이지 수정 시 반영은 바로 적용됩니다. 다만 이전 내용이 보이는 경우에는 "캐시"를 삭제해주셔야 합니다. 1) 핸드폰 브라우저의 캐시를 삭제해주세요. (사용기록 또는 방문기록에서 삭제하시면 됩니다) 2) 캐시 최적화 플러그인을 사용 중이시라면, 플러그인에서 캐시를 삭제해 주셔야 합니다. 3) CDN 사용 중이시라면, CDN에서 캐시 삭제해주셔야 합니다. 2, 3번은 시간이 지나면 자동으로 적용되지만, 삭제 시 바로 적용됩니다!