Bootstrap 4 Flip Between Image And Live Google Map

안녕 얘들 아,이 부트 스트랩 4 자습서에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자인 및 기술 관련 팁은 내 동영상 중 하나에 질문이 있습니다 신사는 자신의 사이트에서 Google지도를 가지고 있으며 실제 마우스를 사용하지 않으려합니다 누군가 실제로 그것을 클릭 할 때까지 스크롤하여 그는 내가 그를 위해 잘 작동하지 않는 여기에 약간의 대본을 나에게 제공하고있다 이 작업을 수행하는 쉬운 방법이 있지만 실제로 무엇인지는 모르겠지만 내가 보통 알아낼 수있는 한 이런 종류의 일을하는 것을 피하기 위해 해결 방법과 이것은 내가이 상황에서하는 것보다 이 스크립트를 마우스로 사용하지 않으려면 마우스를 놓으십시오 마법사가 매우 쉽게 할 수있을 것입니다

jQuery를 약간 사용하고 div를 사용할 수 있습니다 그 배경 이미지를 클릭하면 그것을 볼 수 있습니다 사라지면 내 해결 방법이 될 실제지도가 나타납니다 그래서 우리는이 비디오에서 우리가 할 일을 그렇게하려고합니다 괄호 텍스트 편집기를 열어 대단 굉장 그것은 당신이 그것을 다운로드 할 수 무료입니다 이 비디오 아래의 링크에서 우리의지도로 가자

우리의지도는 여기에있다 iframe 우리지도 분할 또는 분배기는 G지도 클래스를가집니다 다른지도가 아닙니다 팀은 그저 위의 괜찮아요 그리고 우리는 뭔가 다른 클래스를 줄거야 우리는 이것을 GM 클래스라고 부릅니다 GMaps라고 부릅니다

이 내가 이미지지도에 있는데, 너에게 보여 줄게 내가 왜 그걸 이미지라고 부르는 이유는 내가 방금 가져온 것일까? 큰지도에서이지도까지 나는 그것의 스크린 샷을 해본 적이있다 이 Google지도와 같은 크기의 이미지가 나옵니다 무게는 같지 않습니다 너비는 같지만 450 높이와 같은 높이입니다

이 것이 여기에 있습니다 여기에이지도의 배경 이미지가있을거야 여기에 내 작은 사이트 폴더가 내 이미지와 함께 있지만 여기에 표시됩니다 저는 거기에 작은지도가 있습니다 실제로는 1904 년에 67 세로되었습니다

배경을 가리 키도록 말하고 450 이상으로 말해야합니다 우리가 여기에서 계속하고있는 것과 같은 차원이 되라 그래서 이것을 계속하자 이 중간에 우리는 어떤 종류의 텍스트를 원하거나 h3로 말하겠습니다 수업도 할 수 있습니다

전화 해주세요지도 용 매트 텍스트입니다 Matt Tex 나는 말하고 있었기 때문에 거기에서 끝에서 나의 브래킷을 놓쳤다 그곳에 그 점을 다시 지적하면 우리는 조금 더 나아질 것입니다 거기에 닫는 태그와 우리가해야 할 말 라이브 맵을 보려면 클릭하십시오

그런 식으로 클릭하면 라이브 맵으로 넘겨 지므로 괜찮습니다 우리가 필요로하는 모든 요소를 ​​div 맵핑과 d-mat 팀 앱으로 iframe에서 약간의 CSS를 보겠습니다 우리는 imap으로 시작할 것입니다 imap은 클래스이고 우리는 우리가 배경 이미지를주고 싶을만큼 우선하고 싶다 거기에 바로 배경이 있습니다

우리는 그 URL과 IMG라는 폴더에 이미지가 있습니다 IMG는 꽤 일반적인 IMG입니다 그것은 바로 거기에 설립되어 실제 이미지는 맵이라고합니다 그곳에는 충분한 집이 있습니다 그래서 거기에 넣습니다

배경 이미지 지금 우리는 얼마나 큰 우리가 그것을 원하는지에 관해서는 세미콜론이되기를 원합니다 우리가 또 다른 라인을 추가하고 있기 때문에 우리는 배경 한숨을 보게 될 것입니다 우리는 그것을 원한다 우리는 그것을 소용돌이 치기를 원한다 이것을 다시한다

전체 배경을 다루기를 원했고 우리는 그 배경을 똑같이 원합니다 높이는 여기에 우리의 눈 프레임으로 그리고 나는 당신이 여기 코드에서 볼 수 있습니다 백퍼센트 너비 그래서 그것은 모든 방법을 통해가는거야 우리는 450의 피크 인 450의 높이를 얻었다 그래서 우리는 그것을 450의 사진의 높이에게 OK 할 것이다 당신 아마도 CSS 아내가 실제로 필요합니다

이 작은 텍스트를 여기에 옮겨 놓으려면 필요할 수도 있습니다 그냥 이것을 생각하고 우리가 지금 가지고 있어야하는 것을 보자 우리지도의 여기에서 우리는 이것과 같은 또 다른 물건을지도의 꼭대기에 있어야한다 어둡고 어딘가에 텍스트가있을 것입니다 새로 고침은 우리 텍스트가 있습니다

우리의지도 이미지가 있습니다 이것은 우리의 라이브입니다 아래지도는 물론 우리가 이것을 숨기고 싶습니다 jQuery를 사용하여이 작업을 수행 할 것입니다 1 분 안에 이 텍스트를 여기 어딘가에서 중간으로 옮기고 흰색으로 만들어 보겠습니다

그래서 우리의 괄호로 돌아가거나 눈에 띄는 밝은 색으로 만들어 보겠습니다 우리의 시력 맵 클래스가 텍스트를 만들 수 있도록 텍스트 라이트를 추가하도록 T를 매핑합시다 나는 배경에 대해 눈에 띄는 색상을 원하고 말할 것입니다 텍스트 센터는 텍스트를 정렬하고 일단 정렬하면 센터 우리가 그것을 어떻게 든 정당화 할 수있는 행이면 그것을 밀어 내릴 필요가 있습니다 그러나 그것은 h3가 자신의 클래스를 가지고 있다는 것은 아닙니다

단지 CSS 맵 T를 사용하고 우리가하고 싶은 것을 열거 나 닫고 중괄호로 만듭니다 우리가 패딩 맨이라고 말하면서 그것을 내리고 싶다 그리고 우리는 그것이 450 인 것을 알고 있습니다 우리는 중간에 그것을 원합니다 그래서 25 개의 사진을 시도해 봅시다

450 명 중 절반이 우리가 지금 얻은 것을 보니 좀 더 좋아 보인다 그래서 우리는 살아있는지도와지도 이미지 위에서지도를 알아 들었다 그리고 we 've는 그것을 알아 들었다 중간에 좋은 클릭 전설이 있습니다 그래서 우리가하고 싶은 것은 우리가 이것을 숨기고 싶습니다 밑바닥 하나 실제로 우리는 이것을 가지고 살고 싶습니다

우리는 새로운 것으로 넘기고 싶었습니다 그래서 약간의 스크립트를 추가합시다 그것은 약간의 방법으로 내려 왔고 우리는이 스크립트의 맨 아래부터 시작할 것입니다 여기에 몇 가지 스크립트 태그를 열어 보겠습니다 사이에 공간의 비트 지금은 그럼 우리가 잘 할거야 시작하자 우리의 달러 기호와 우리는 그 요소를 숨기고 싶습니다

규칙적인 둥근 괄호를 열고 그 라운드 사이에 꺽쇠 괄호를 하나만 거꾸로 써야하고 우리는 그 클래스를 원한다 수업 일에 거기있는 것 그래서 우리는 닥터를 원해 gmap은 클래스를 말합니다 점이 괜찮아 만났어 그래서 우리가 지금하고 싶은 일을 우리가 원한다

너무 높기 때문에 점 숨기기가 숨겨져 있어야합니다 가야하고 우리는 그냥 몇 가지 둥근 괄호를 열고 마지막에 우리는 세미콜론을 넣기를 원합니다 우리는이 다음에 대해 이야기하고 싶습니다 어느 것이 gmap인지 알면 나는 그것이 우리가 원하는 문제이다 숨기기 위해서 클릭해서 똑같은 짓을하자

우리가 할 시간을 하나씩 거꾸로 쉼표 아멘 우리가 지금이 div를 목표로 삼고 싶습니다 우리가 클릭 할 때 무언가를하고 싶었 기 때문에 점 클릭을 말할 것입니다 그리고 나서 우리는 이것이 대괄호로부터 열리는 함수라는 것을 말할 것입니다 다시 말하면 4 개의 둥근 괄호를 열고 닫을 것입니다 이것은 보통이어서 우리는 중괄호를 열어 놓기를 원합니다 우리가 원하는이 중괄호 사이에 그 사이에 어떤 종류의 뒤집기를 원한다고 말하면 달러 기호가됩니다 다시 한번 우리는 실제로 우리가 가지고있는 것을 복사 할 수있는 몇 개의 둥근 괄호 여기에 가기를 해봅시다

나는 훨씬 더 쉬울 것이다 단지 이것을 복사하지 않을 것이다 우리가 말하지 않을 것과 똑같을거야 우리는 거기에 붙여 넣을거야 그리고 우리가 원하는 첫 번째 것은 imap을 숨기는 것이다

그리고 바로 아래에서 똑같은 일을 다시 할거야 GMAT를 보여주고 싶습니다 이번에는 오히려 그것을 보여주기 위해 상처를 입지 않을 것입니다 그것을 숨기기보다 GMAT가 있고 우리는 쇼라고 말하고 싶습니다 우리가해야 할 일이 거의 다 있다고 생각해

내가 너를 확신하기 때문에 나는 무엇이든 놓치지 않았 음을 확인한다 이런 식으로 코딩 할 때 아무 잘못 이해하면 작동하지 않을 것입니다 내가 말하는 동안 말하는 야크킹이야 내가하는 동안 말하는거야 꽤 자주 나에게 정확하다고 보이는 것들을 놓치게 만든다 일단 우리가 새로 고침하면 Ctrl 키를 저장하면 사이트로 돌아갑니다

내가 잘못한 게 아니라면 사라질거야 좋아, 내가 여기를 클릭하면 바로 사라 졌어 그 라이브지도를 뒤집어 쓴 것 같아요 그리고 당신이 원했던 것 같아요 너와 함께 시작하면 아래로 스크롤하여 아무것도 일어나지 않을거야

죽은 죽은 지역이므로 원하는 경우 지나서 스크롤 할 수 있지만 원하는 경우 당신이 그것을 클릭 할 수있는 라이브지도 빙고 거기에 바로 당신의 라이브지도가 있습니다 당신의 질문에 대답 해 주셨으면 좋겠습니다 그 일을하는 방법이나 더 나은 방법을하고 있지만 그것이 내가 주위를 돌아 다니는 방법입니다 그 작은 문제가 거기에 나를 위해 작동 jQuery 간단한 비트 클릭하고 넘어져 전환하면 아직 거기에 라이브지도가 있습니다 우리는 당신이 그것을 공유하고 구독하고 싶다면 즐기 셨으면 좋겠다 웹 개발에 관심이있는 YouTube 채널 우리 과정의 아래에서 우리는 훌륭한 약간의 무료 코스뿐만 아니라 약간의 프리미엄을 얻었다 YouTube 가입자에게 큰 할인 혜택을주는 강좌이므로 한번보세요

다시 이것은 시스템 22 및 웹 디자이너 기술 팁 com을 얻고 있습니다 보고있는 주셔서 감사합니다 좋은 하루 되세요

Divi WordPress Theme From Install To One Page Scrolling Site In 15 Minutes

안녕 얘들 아, 다른 워드 프레스 Divi 테마 자습서에 오신 것을 환영합니다 이것은 Jayme에서입니다 시스템 22와 웹 디자인 및 테크 팁이이 비디오에서 잘 나온다 여기에 WordPress의 설치 및 우리가 실제로 다운로드 및 설치거야 Divi 테마를 사용하여 실제로 사이트를 실제로 실행할 수있는 방법을 알아보십시오

그래서 WordPress를 다운로드했습니다 여기 내 컴퓨터에 로컬로 설치하고 있습니다 시스템에서 사이트를 로컬로 빌드하는 방법을 배우는 데 관심이 있다면 up WordPress 로컬 설치 과정은 꽤 쉽게 할 수 있지만 오프라인 사이트를 구축하는 데 정말 유용하므로 WordPress 다운로드가 있습니다 그것은 정기적으로 WordPress의 새로운 설치를 여기에 설치 했으므로 Divi 테마가 절대적으로 멋지다는 말을 들었다 더 좋고 더 나은 그리고 만약 당신이 WordPress에 사이트의 어떤 종류의 건물이야 당신이 그것을 보아라는 것을 제안해라

그것은 단지 훌륭하다 그리고 당신은 그것에서 시험해 볼 수있다 이 비디오 아래의 링크를 클릭하면 다운로드 할 수 있습니다 우리는 우아한 테마로 가야합니다 회원 영역 또는 우아한 테마 comm 사이트와 회원이 될 프리미엄 테마 그래서 당신은 그것을 지불해야하지만 그것은 단지 믿을 가치가있어 Divi 탭에 있습니다

다운로드 버튼을 누르십시오 거기 우리는 우리가 divi를 거기에서 다운로드하도록시킨다 그래서 만일 우리가 우리 wordpress install here Fila themes 외관과 테마 이것은 무엇입니까? 우리는 현재 WordPress 2017을 기본으로 사용하는 것 중 하나입니다 다른 것을 가지고 있지만, 우리가 이것을 녹음하고있을 때 이것이 가장 최신의 것입니다 일반 WordPress의 테마 그것은 실제로 괜찮아요 정말 재미 있지만 당신은 그것으로 약간의 물건을 할 수 있지만 내가 말하는 것처럼 나는 Divi를 설치하고 볼 것이다

우리가 아주 빨리 모일 수있는 것을 얻을 수 없다면 나는 공격 할거야 새 항목을 추가하고 여기에 테마 업로드 테마를 업로드 할 예정입니다 바로 여기 파일을 드래그하여 파일을 선택하고 볼 수 있습니다 이미 거기에 당신을 설치합니다 좋아, 내가 가서 활성화 할거야

WordPress에 우리가 사용하고 싶은 테마라고 말해라 나는 이것을 지울거야 다른 테마 그것은 당신이 당신의 라이브러리에서 테마를 사용하지 않는다면 항상 좋은 생각입니다 여기에 그냥 당신이 당신의 WordPress를 유지할 수있는 라이터가 아닌 사람을 삭제하려면 Divi를 설치하여 지금 활성화 했으므로 더 나은 설치를하십시오 너무 흥미 진진한 것은 없을 것입니다

우리는 심지어 그것이 흥미롭지도 않다는 것을 알 것입니다 2011 년 5 월 23 일에 시작되었습니다 좋아요, 페이지를 빨리 만들자 그리고 나는 debbie의 미리 만들어진 것들을 사용할 것이다 그들은 여기에있어 무료 템플릿 나는이 홈페이지에 갈거야

저는 Divi Builder를 사용할 것입니다 나는 단순히로드 레이아웃으로 가고 곧바로 모든 레이아웃을 가지게 될 것입니다 이 환상적인 레이아웃을 선택할 수 있습니다 임의로이 패션 레이아웃을 거기에 넣으십시오 당신 좋아요

그리고 당신이 볼 수 있듯이,이 모든 모듈들을 여기에로드했습니다 첫 번째 데모 페이지에서 실제로 얻은 정보를 살펴 봅니다 내가 할 일은이 페이지를 게시하는 것이다 미리보기 변경 버튼을 누르십시오 그 주말에 이미 여기에 우리 페이지에 이걸 적재 했어

그거 꽤 멋지다 분명히 이들은 일반 이미지입니다 필러 텍스트 만 입력하면됩니다 Divi에서 원하는 것을 입력하십시오 작성자 그래서 우리가 할 필요가있는이 템플릿을 사용하자

로고를 주면된다 이제 한 페이지 스크롤링 사이트로 바꾸어 보겠습니다 우리 대시 보드로 돌아 가기 평소 WordPress 일 우리는 설정 및 테마 커스 터 마이저 테마에 이르기까지 Divi 테마 옵션 맞춤 설정 도구 당신 우리가하고 싶은 일은 홈페이지 설정으로 가서 알려주지 만 홈페이지에 멋진 설정을 제공하여 정적 페이지이므로 우리는 방금 작성한 페이지를 집으로 부르고 싶습니다 그리고 거기에있다 당신 그래, 잘 작동 할거야

그래서 내가 할 일은 그것을 출판 할 것입니다 그리고 우리는 우리가 여기서 나가자 내가하고 싶은 것은 실제로 여기에 우리 페이지에 가고 싶습니다 바로 여기 내가 믿는 우리는 우리의 비주얼 빌더와 나는 이것을 빠른 한 페이지 스크롤링 사이트로 바꿀 것입니다 여기에 좋은 작은 투어가있어

나는 앞으로 가서 건물을 짓기 시작할거야 이 섹션들에 ID를 부여하여 실제로 스크롤 할 수 있도록하겠습니다 우리는 여기에서 시작할 것이고 나는 우리가 가리키면 볼 수있는 작은 콜라를 칠 것입니다 콜라를 편집 할 수있는 섹션을 통해 사용할 수 있습니다 CSS ID로 이동합니다

고급 탭 아래의 수업이 ID를 제공 할 예정입니다 간단한 메뉴이므로 메뉴를 만들면 잠시 후에 기억이납니다 이 하나의 콜렉션을 호출하십시오 우리가 수업이 아닌 그 ID들을 줄 때 이것을 대중적이라고 부르다

당신 당신 하나의 판매 인 이 모든 것을 잠시 후에 기억하려고 노력한다 당신 뉴스로 실제 연락처 섹션이없는 것처럼이 작업을 수행해 보겠습니다 이 페이지에서 좋아하는 뉴스로 추가하자 우리가 탐색 할 수있는 어딘가에 있다면이 섹션에 핸들이 주어집니다 앵커이므로 대시 보드로 돌아가서 메뉴 모양 메뉴로 이동하십시오

우리가 새로운 메뉴를 만들 필요가있는 메뉴를 만들 것입니다 menu 나는 그것을 주 메뉴처럼 진짜 사려 깊은 제목으로 부르 겠지만 전화한다 너는 네가 이제 우리가 나에게 어떤 것을 추가 할 필요가있을거야 특정 페이지 나 URL을 가져 가지 않으므로 맞춤 링크를 사용합니다 우리는 페이지의 링크로 갈 것이고 링크를 위해 나는 해시 태그를 넣을 것이다

우리가 거기에 넣은 ID이기 때문에 ~에 대해 말하다 당신이 볼 수 있듯이 여기에 나타났습니다 기억이 안 나는 또 다른 것을 해봅시다 우리가 가진 컬렉션이 아니었던 바게트 덩어리 였어

콜렉션 해시 태그와 콜렉션의 ID 나는 콜렉션이 당신이 원할 필요가없는 링크 텍스트를 보러왔다 실제 링크 자체와 같을 수 있습니다 원하는 URL이 될 수 있습니다 괜찮아 다음 메뉴에 그걸 추가하자

우리가 가방을 안다고 생각하지 않아 인기가 있었나요? ID에 대한 해시 태그 하나 그리고 나서 우리는 판매가 뉴스에서 그 판매가 마지막 판매되지 않았 음을 알았습니다 헤이, 우리는 해시 태그를 쓰지 않을 것이다 그 안에있는 세 그 다음 마지막 뉴스는 재미있는 신분증에 대한 해시 태그를 다시 믿습니다 많은 사람들이 더 이상이 버튼을 집에 넣지 않아도됩니다

앞서 URL로 이동 했으므로 URL에 해당 URL 중 하나를 넣으십시오 맨 위로 그들은 단지 해시 태그를 넣을거야 그리고 우리는 집에 잘 말할거야 나는 지금 돌아왔다 정말로 맷이 먼저 가고 싶습니다

그래서 여기에 올려 놓으십시오 그리고 제가하고있는 모든 것은 왼쪽 마우스입니다 클릭하고 드래그하면 원하는 방향으로 이동할 수 있습니다 메뉴 지금 내가 뭘 할 건지 내가 갈라 놓는 옵션에 가서 부드럽게 할거야 스크롤을 사용하면 스크롤이 원활하게 이루어지는 지 확인합니다

한 섹션에서 다른 섹션으로 이동하여 Divi 테마로 이동했습니다 옵션 일반 탭 및 아래로 스크롤하고 있습니다 당신 사용 중지 된 순간에 부드럽게 스크롤되므로 계속 진행할 것입니다 우리가 조금 녹색을 얻을 때까지 우리의 변화를 저장하기 만하면됩니다 확인 표시가 나타나면 다음 단계로 우리가 원하는 메뉴를 페이지에 알려주는 것입니다

꼭대기에있는 사람이 실제로 그를 원해 내가 맨 위로 올라갈거야 버튼도 마찬가지로 테마 옵션에 있습니다 내 기본값에 나를 다시 가기 버튼으로 거기에 이제 우리는 조금 넣어거야 거기에 버튼을 클릭하면 상단으로 다시 슬라이드 할 수 있습니다 앞으로 나아가서 활성화하고 다시 저장하십시오

자, 우리의 커스터마이져를 열어 주 메뉴로 사용하도록 알려주십시오 방금 만든 메뉴 메뉴로 이동 위치 및 우리의 기본 메뉴로 우리가 사용하고자하는 메뉴를 선택해 보겠습니다 우리가 방금 만든 main은 main 당신 인기있는 항해 뉴스가 나올 때까지 집에있다 이제 우리 사이트를 방문해 보겠습니다 나는이 다른 시간들을 막을거야

여기에 계속해서 우리 메뉴와 우리의 섹션이 있습니다 아래쪽으로 스크롤하면 인기있는 두 개의 콜렉션으로 우리를 데려 간다 판매 뉴스 및 그것의 멋지게 우리 스크롤 홈 버튼에 매끄러운 두루마기를 넣는다 뉴스로 돌아 가기 나는 그 첫 번째 섹션을 집으로 부를 수 있다고 생각한다 상단 버튼으로 추가하면 상단으로 다시 이동합니다

Divi 테마로 한 페이지 스크롤링 사이트를 만드는 방법 그것은 처음부터 설치를하고 15 ~ 20 분 정도 걸렸습니다 물론 당신이해야 할 일은 여기에 자신 만의 콘텐츠를 넣는 것입니다 비주얼 빌더는 기존 사이트를 가지고 있으면 쉽게자를 수 있습니다 복사 및 붙여 넣기 당연히 당신은 비주얼 빌더와 함께 세금을 조금만 내면됩니다 커서로 입력을 클릭하기 만하면 타이핑이 시작됩니다

다른 곳에있는 텍스트를 선택할 수 있습니다 그래서 거기에 한 페이지 스크롤링 사이트를 완성했습니다 시간이 없어 나는 그걸 버릴거야 그래서 내가 말하는 것은 Divi 테마 다

더 좋고 더 좋아진다 그리고 그것을 사용하는 것은 너무 쉽습니다 그냥 미친 그래서 아래 링크에서 그것을 확인해보십시오 공유하고 커뮤니티에 가입하십시오 웹 디자인에 관심이 있으시면 YouTube 채널의 동영상을 여기에서 가져 가세요

아래 웹 디자인 코스 중 YouTube에 대한 할인 혜택이 있습니다 가입자 및 일부 위대한 무료 코스뿐만 아니라 일부 프리미엄 코스 다시 한번 이것이 시스템 22의 제이미와 웹 디자인 및 테크 팁입니다 지켜봐 주셔서 감사합니다 좋은 하루 되세요

Elementor WordPress Builder How To Build An About Us Section

안녕 얘들 아 그리고 다른 워드 프레스 Elementor 빌더 자습서에 오신 것을 환영합니다 이것은 제이미입니다 tech 22에서의 시스템 22 및 웹 디자인 그럼 우리 마지막 비디오에서 우리는이 작은 영웅 섹션을 만들었습니다 Builder의 요소를 사용하여 계속하겠습니다

Elementor로 편집하십시오 여기에 제가 열었습니다 새 섹션을 추가하겠습니다 단일 열로 이동하여 제목을 클릭하면됩니다 그리드 아이콘을 여기에 추가하자

파란색 막대 및 우리가 말하고 싶은 것을 보자 내가 조금 더 크게 만들자 이제 센터에 보자 그러면 우리는 그것을 푸른 색으로 만들 것이다 괜찮아 거기에 글꼴을 설정할 수있는 타이포그래피가 많이 있습니다

가족은 크기 무게 변형 스타일 장식 라인 높이와 편지 spacing 나는 모든 것을 그 순간에 디폴트로 남겨 둘 것입니다 텍스트 바로 아래에 작은 단락을 추가하여 텍스트 편집기 모듈을 바로 아래에 놓습니다 그리고 몇 번 이상이 내용을 복사하여 실제 내용이 없도록하십시오 거기에 넣어 좋아, 이제 시작하자 우리가 원한다면 센터는 우리를 정당화 할 수있다

나는 문장의 모양이 더 좋다고 생각한다 그래서 우리는 약간의 문장을 덧붙이고 싶습니다 이 섹션의 맨 아래 섹션 편집 버튼을 클릭합니다 누가 고급 패딩 상단과 하단의 비트를 추가하십시오 나는 모든면에서 그것을 원하지 않아 난 그냥 갔다 아래쪽에 오른쪽으로 보일 50 개의 예를 보자

바닥에 50도 괜찮아 이제는 조금 더 추가하자 이번에는 두 개의 열을 만들어 보겠습니다 우리 그리드 박스에서 흥미로운 항목은 여기에 무엇 그러나 몇몇 진도 막대기는 항상 좋은 재미이다 헤이 내 능력은 디자인 말 너는 내가 말한 것을 그대로 남겨 두 겠지만 우리는 웹 디자이너 대신 웹 디자인을 말해줘 나에게 85 % 여기에 다양한 색상의 다양한 정보가 있습니다 누군가 우리는 순간 성공을해야합니다 녹색 위험이 될거야 빨간색 경고가 주황색이됩니다

당신 예, 그들을 만들어 보자 우리의 다른 색상과 똑같이 파란색으로 만들어 보자 앞서와 색상 계속해서 파란색으로 만들면이 배경색을 바꿀 수 있습니다 여기 내 원만한 내면의 텍스트를 남겨두고 싶으면 내가 떠날거야 나도 좋아해 너와 여분의 패딩이야

sides – etc z index 인덱스에 따라 앞뒤로 당긴다 숫자가 높을수록 앞으로 숫자가 낮아집니다 그것은 캔버스에 다른 것들 뒤에 있습니다 그래서 나는 괜찮다고 생각합니다 글쎄, 나는 텍스트 색상으로 배경을 그리는 다른 모든 것들이다

여기 스타일은 어두운 그레이를 만드는 색상을 취합니다 오 푸른 얼음 투표를 시도했다 네, 그 푸른 색을 남겨주세요 좋습니다 복사해서 붙여 넣기 만하면됩니다 마우스 오른쪽 버튼을 클릭하고 테이프를 찌르는거야 그 밑에 앉아있어 내가 할거야 그 두어 번 그리고 우리는 단지 인테리어가 4 가지를 바꿀 것이라고 생각합니다

아마 이봐 요, 당신이이 스타일 중 하나를 바꾼다면 돌아 가자 여기에 별표가있는 제목 스타일을 회색으로 변경해 보겠습니다 바로 거기 좋아, 그럼 우리는이 스타일을 바꿨지 만 우리는 스타일이 여기에 있기를 원한다 if 우린 그냥 마우스 오른쪽 버튼을 클릭 한 다음 복사 할 수 있습니다 그래서 당신은 그것이 같은 색으로 디자인 제목을 변경하는 것을 볼 수 있습니다

모든 디자인이 개념을 보게되는 다른 것의 스타일을 변경하십시오 나는이 것을 고유 한 것으로 바꿀 것이다 순간 시험하러 가자 그리고 물론 우리는 가질 필요가없는 모든 사람들에게 다른 금액을 원합니다 당신은 그렇게 할 수 있습니다

당신 당신 우리는 거기에 갈 일부 카운터가있는 작은 통계 상자 또는 진행률 막대 그리고 오른쪽에 우리가 상자로 돌아가는 방법에 대한 동영상이 있습니다 타운젠드 (Townsend) 비디오는 비디오를 포착합니다 그래서 우리는 자리 표시자를 넣을 것입니다 괜찮습니다하지만 우리는 거기에 자신의 비디오 내 자신의 URL 중 하나를 잡아라

그것은 단지 youtube 비디오 URL이다 거기에 넣고 싶다 URL에 붙여 넣기를 바랍니다 우리는 거기에 내 비디오를 넣어 보자 자동 재생 뮤트 루프를 가질 수있다

그건 Hallett가 가지고있는 것이기도하다 자동 연주하지만 muties는 그렇게 해보자 행복하게 거기서 우리는 연주 할 것이지만 음소거되어 괜찮아요 두 개 이상의 섹션을 추가하면 그 부분에 대한 About 섹션이 생성됩니다 그래서 여기 또 다른 섹션을 추가 할거야

나 역시 만들거야 여기서 흥미로운 걸 아이콘 목록 좋아, 그 두 개를 제거하고 유사 나는 거기에 그 작은 아이콘을 누르거나 그것을 복제 그들을 위해 우리는 C 사이의 왼쪽 정렬베이스를 남겨 둘 것입니다 아이콘이 커지게 이유를 말해줘 파란색 호버 커버 구멍 호버 색상 검색을 통해이를 통해 그 녹색 괜찮아요 그리고 더 흥미로운 것을 넣어 둡시다 또는 그것이 무엇이든간에 방금 가져온 요소를 클릭했습니다

그냥 복사하는 것입니다 이 요소를 다시 클릭하겠습니다 이것은 우리가 원하는 곳에서 우리가 넣는 곳입니다 그리고 나는 다른 것들에 대해 똑같이 할 것이다 나는 그들을 단지 클릭하고있다

왼쪽 클릭으로 열면 거기에 넣을 수 있습니다 잘 다음과 같은 버튼을 사용하여 다른 작은 섹션을 만들어 보겠습니다 우리가 영웅 섹션에서했던 것과 비슷한 행동의 call-to-action 일종 Google 그리드로 돌아가서 텍스트 편집기를 가져와 봅시다 지금 나는 다시 몇 번이나 자지를거야 그래, 괜찮아

이 텍스트의 약간에 착색하기 위하여 그것을 선택할 것이다 나는 대담하게 만들자 다른 수건을 줘라 그 푸른 색 지금까지 우리는 당신이 그것을 아래에두기를 원합니다 이번엔 우리가 가질 수 있다면 어떨까요? 바로 지금까지 우리는 이제 우리 엉덩이를 집어 넣자 그 아래에 그리드가 다시 버튼을 추가합니다

너 거기서 우리는 조금 파란 선을 떨어 뜨렸다 괜찮아요 오른쪽에 넣자 조금만 만들어라 더 큰 더 알아보기 그것이 어디서나 당신의 링크를 놓지 않을 것입니다

큰 버튼으로 만들어 보겠습니다 그리고 우리의 푸른 색으로 만들어 보자 테크의 색상은 흰색으로 표시됩니다 배경 색상은 파란색이고 마우스를 올리면 텍스트 색상이 흰색입니다 다시 그리고 우리는 초록색 바탕색을 가질 것이다

괜찮아 이제이 섹션과이 섹션 사이에 공백을 넣기 만하면됩니다 섹션을 보려면 여기 섹션 아이콘을 클릭하십시오 어떤 부분 이 섹션에 고급 및 스타일 다시 바닥에 상위 50에 50을 넣을 것입니다 너무 많이 선택하지 않으면 링크가 필요하지 않습니다 온 사방에 좋아, 그럼 그 작은 업데이트를 저장하자

변경 사항 미리보기 당신 우리가 간다 우리는 우리 작은 것에 대한 섹션에 관해 멋진 작은 재미있는 것을 알아 들었다 Elementor와 매우 쉬운 웹 사이트는 다시 꽤 인상 깊었습니다 이것으로 작업하는 것을 즐긴다면 그렇게 할 수 있습니다 지금까지 Elementor 사이트 빌더를 사용하여 About 섹션을 사이트에 추가하십시오 우리가 계속 진행할 때 섹션을 계속 추가해두면 좋을 것입니다 당신이 있다면 공유하고 우리 유튜브 채널을 구독하고 싶습니다

웹 개발에 관심이있는 사람들은 아래를 내려다보고 우리의 무료 우리는 또한 프리미엄 코스를 몇 개 마련했습니다 YouTube 가입자에게 할인 혜택을 제공하므로 다시 한번 살펴보십시오 시스템 22의 jamie와 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다 좋은 날

Elementor WordPress Builder How To Build A Services Section

안녕 얘들 아 그리고 다른 워드 프레스 Elementor 빌더 자습서에 오신 것을 환영합니다 이것은 제이미입니다 시스템 22 및 웹 디자인 및 기술 팁에서 com 이 작은 페이지를 Elementor와 함께 여기 빌더에게 보여줍니다

지금까지 잘 해낼거야 나도 그걸로 정말 잘 지내고있어 우리는 방금 작은 영웅 섹션을 마쳤습니다 앞으로 서비스 섹션을 작성하십시오 요소 버튼 오른쪽으로 편집 했어

거기에 이미 여기 열었습니다 그래서 그냥 가서 그걸 해봅시다 우리가 마지막으로 끝낸 곳에서 바로 내려 놓자 빈 섹션은 없지만이를 제거하고 새 섹션을 추가하십시오 제목을 달아서 거기에 넣을거야

다시 색상 싶지 않아 그래서 편집 섹션을 클릭하자 중간에 단추 도트가 있고 스타일이 좋아 보이네요 이번에는 그라데이션이 귀엽다 네, 우리는 우리가 가진 푸른 색을 고집 할 것입니다 탑 컬러를 사용하고 있었고 아마도 바닥이 더 어두운 것이었을 것입니다 그래 뭔가 좋아, 우리가 여기있는 동안 조금 주자 우리가 마지막 것들에했던 것처럼 위쪽과 아래쪽 패딩 우리는 픽셀을 사용하는 50 픽셀 또는 백분율을 할 것입니다

작은 링크 아이콘은 여기에 있기 때문에 내가 가기 만하면 가기 때문에 그것이 내가 말했듯이 왼쪽 상단 오른쪽 상단 왼쪽 하단에 넣어 것입니다 체크 꼭대기와 바닥을 원해 그래서 우리는 제목을 원할거야 그래서 나는 우리 작은 격자를 클릭하고 표제를 추가하거나 그냥 복사 할 수 있습니다 위에서 여기에서 마우스 오른쪽 버튼으로 클릭하여 중복 될 수 있습니까? 나는 그것을 잡을 것입니다 풀다 나는 그것을 바로 거기에 넣었다

우리는 이것을 우리의 서비스 그 흰색을 만나 다른 크기와 똑같은 크기를 갖도록하겠습니다 이제는 어떤 종류의 서비스를 원 하든지 괜찮습니다 정말 잘 부탁드립니다 가상의 사이트이지만 약간의 예제가있는 몇 개의 작은 상자가 필요합니다 그래서이 섹션에 그라디언트를 넣어 보겠습니다

더 많은 열이 아닌 내부 섹션을 추가하십시오 아마 여기에서 그랬을거야 거기에서 나는 안전하거나 침착 해지기를 원한다 그래서 나는 이것을 클릭 할 것이다 작은 회색 상자는 여기에서 중복과 1 개의 시간을 더 쳤다 그래 우리는 단 하나 그 때 우리는 중대한 4의 란을 얻었다 지금 우리 작은 격자 물건으로 돌아가서 우리가 거기에 넣고 싶은 것을 보아라

아이콘 또는 이미지 상자 아이콘 상자와 같은 것입니다 너 좀 봐줘 그래, 그건 너 괜찮아 당신 나는 풍선으로 지루하게 유지할 것입니다 그래서 화장실로가 봅시다

그녀의 백인을 말할 수 없다 너는 한숨 쉬다 SVG가 없기 때문에 멋지고 선명하게 위아래로 확장됩니다 그리고 당신도 그것을 회전시킬 수 있습니다 그것은 아주 멋지며 우리가 원하는 내용입니다

오하이오처럼 서있을 색을 만들어라 나는 그 색으로 향하게 할거야 실제로는 설명을 흰색으로 만들어 보겠습니다 예, 그게 뭐니? 우리는 조금 더 패딩을 줄거야 그저 상자 주위에 너무 쪼그리고 앉아 있지는 않습니다

그 체크를 남겨 두어 모든면에 붙일 것입니다 이제 25 픽셀 그래, 그들은 잘 작동합니다 좋아,이 모든 것을 똑같이 복제하자 거기서 열쇠 명령을 사용하면 실제로 원한다면 사용할 수 있습니다 그러지 않으려 고했습니다

너를 지우자 무료로 복제하려면이 방법이 맞습니다 컬럼을 복제하고 새로운 컬럼을 생성하기 전에 내가했던 방식입니다 너는 네가 원하는대로 그걸 끌고 갈 수 있기를 바라지 않았어 나는 당신이 사본을 치고 그것을 붙여 넣을 수 있다고 확신한다

똑같은 일을 할 것이다 그리고 다시 거기에 우리는 4 개의 작은 섹션을 가지고 있습니다 그 아이콘 때문에 나는 조금 다른 모양을하고있다 좋아, 유령은 그렇지 않으면 우리가 간다 꽤 많은 일이 여기에 있었다

당신 그리고 그들은 멋진 작은 선택을 얻었다 당신 좋아, 그 아이콘이 너무 크다고 생각해 사실 그건 그들을 데리고 가라 50 개 우리가 스타일을 조각하고 복사 및 붙여 넣기를 할 수 있는지 궁금하다 우리가 들어갈 필요가 없도록 잘 작동하는 스타일 예

그들 모두를 편집하면 위대한 것을 할 수 있습니다 알았어 그게 처음에는 쉬운 일 이었어 우리는이 섹션에 돈을 지불합니다 그렇습니다

이 두 개의 아이콘을 바꿔라 우리가 거기에 바로 하나를 받고 그건 절대적으로 아무런 도움이되지 않습니다 나는 단지 우리가 그걸로 무엇을 할 수 있는지를 볼 수있다 괜찮아 업데이트하고 살펴 봅시다 거기에 작은 아이콘을 치면 빠른 모양을 취합니다

내려가는 잘 아주 좋은 계산서 10 분 서비스 섹션 거기 물론 당신은거야 거기서 너의 커스텀 타격을 경고하고 넣어 라 우리는 실제 편집자에게 돌아 간다 나는 짧은 것을 원한다면 말한다 우리가 이것을 만들 수 있는지 궁금해 맞춤 CSS를 허용하지 않을거야

하지만 그것은 customcss 클래스에만 glowstick 것입니다 그렇게 할 것입니다 프로 버전 그래서 바지에 가자 그것을 수업하자 봉사하라는 말을 지금하는 것 내가 그들에게 모든 수업을 제공해야 할 문제 빨리 생각해 봤으면 좋겠어 내가이 일을하는 이유는 텍스트의 길이를 우리는 상자를 보통 같은 높이로 유지하기를 원합니다 거기에 사용자 정의 CSS되어 있지만 내가 프로 버전에서 말했듯이 우리가 그 상자를 사용하게하지 않거나 그것이 우리가 그것을 사용하게하지 않는다고 말해야합니다

우리가 프로 버전을 가지고 있지 않다면이 버전은 무료 버전이고 내가 그렇게 말한 것처럼 멀리 나는 그것에 매우 감명 받았다 나는 이미 괜찮 았는데, 그 중 일부의 길이를 우리가 여기에있는 물건들 당신 당신 당신 당신 당신 좋아요 왜냐하면 그들은 꽤 잘 돌아가는 줄 안에 있기 때문입니다 그들은 여전히 ​​멋있고 줄 지어 있지만, 예를 들어 줄 테니까요

국경 우리는 할 수있다 경계 좋아, 나는 단단해질거야 세개 화이트 좋아, 이제 우리는 경계에 경계선이 생겼어 그리고 내가이 스타일을 복사해서 붙이면 내가 두 번째로 이것으로 어디로 갈지 알게 될거야 이제이 모든 작은 상자들을 여기 다른 높이에서 그것은 그 자체로 큰 문제가 아니다

그러나 내가 건물을 짓는 동안 나는 가지고 싶어한다 더 대칭을 바라는 것들 그래서이 상자들은 모두 같은 높이가 될 것입니다 그래서 내가 잘 할거야 이걸로 내가 조사해 볼게 그렇게하자

변경 사항을 보려면 여기에서 변경 사항을 미리보십시오 좋아요 우리 섹션으로 넘어가 봅시다 여기에 다양한 작은 박스들이 있습니다 크기는 맞지만 마우스 오른쪽 버튼을 클릭하여 검사합니다

Google 크롬을 사용하고 있습니다 위대한 검사기 도구를 사용하면 오른쪽 클릭과 검사하거나 그냥 f12 그리고 그것은이 콘솔 위로 나를 데려 올 것이다 우리의 봉사 종류가 있습니다 우리가이 요소들을 모두 같은 높이로 만들 수 없다면 우리가 거기에 넣는 것이 보입니다 같은 높이에서 350의 사진 okright는 거기에서 일어났다

그러나 그것 진짜 빛이 있다는 게 옳지 않아서 키가 크지 만 국경을하지 않았어 다시 꺼내 라 너 안에있는 것 같아 위젯 컨테이너 자체는 그저 그곳에 두는 것을 시도합니다 5350은 아마 조금 길다

분명히 지금까지는 그 중 하나만 수행되었다 325 그래서 3시 30 분 그래, 나는 키가 큰 사람들을 위해서도 충분해야한다 그래서이 다음 컨테이너 안에 있습니다 그래서 우리는 서브 클래스를 가지고 있습니다 그 사이에 대상 요소 위젯 컨테이너가 있습니다

이 요소 위젯 컨테이너 복사 330 pics ctrl C를 복사 해 보겠습니다 이제 우리의 검사에 대해 사용자 정의 CSS를 실제 웹 사이트에 넣지 않습니다 우리가 우리의 추가 CSS 인 프로 버전이 없으면 위젯 자체 이제 우리가 준 클래스는 RV를보고 나서 서브 컨테이너를 가졌습니다 우리가 방금 복사 한 것은 내가 원하는 모든 요소가 위젯 컨테이너 나는 높은 30-30 명의 사진에있다 그리고 물론 우리는 곱슬을 닫고 싶다

우리는 우리 수업을 듣고 우리는 요소를 얻었습니다 그 안에 우리가 영향을주고 싶었던 것을 지금 우리는 최소 330 마리의 돼지를 키우겠습니다 아래로 스크롤하면 실제로 해냈어야합니다 거기서 우리는 블록들의 멋진 대칭적인 보이는 블록을 얻었습니다 당신은 텍스트가이 모든 것 안에서 각각 다른 높이이지만 상자는 같은 높이를 유지한다

그래서 나는 그걸 매우 기쁘게 생각합니다 그리고 그것은 단지 미리보기입니다 우리의 변화는 전체 화면입니다 당신 우리의 풀 스크린 버전이 좋아 보이는 것이 있습니다 그걸로 기뻐 해 거기에 우리 한나가있어

엘리먼트 페이지 빌더로 서비스 섹션을 신속하게 생성하고 나는이 작은 빌더를 무료 청구서로 사용하는 것에 깊은 인상을 받았습니다 정말 좋아요 그래서 당신이 공유하고 싶다면 즐겁게 지내기를 바랍니다 웹 개발에 관심이 있다면 YouTube 채널을 구독하십시오 아래의 웹 개발 코스 중 하나를 선택하십시오

아래쪽에는 물론 몇몇 프리미엄 코스들도 있습니다 YouTube 구독자도 다시 한번 Jamie와 함께했습니다 시스템 22 및 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다 일

Elementor WordPress Builder Section Module Overview

안녕 얘들 아, 다른 WordPress 비디오에 오신 것을 환영합니다 이것은 시스템 22의 Jamie입니다

웹 디자이너 기술 팁 우리는이 페이지 빌더 요소를보고있었습니다 우리는 어제이 한 페이지짜리 사이트를 빨리 정리해 보겠습니다 좀 더 자세하게 설명하면이 섹션은 우리 섹션을 살펴보기 시작합니다 새 페이지를 만들거야 그리고 난 그냥 테스트 2를 위해 2라고 부를거야

다시 같은 템플릿을 사용할거야 우리가 전에했던 것처럼 전폭의 요소 Elementor 페이지 북으로 편집을 수정 해보자 우리는 지금 우리가 가지고있는 full-width 페이지를 가지고있다 그래서 이번에는 우리 자신의 섹션을 추가 할 것입니다 마지막으로 여기 보관 버튼을 클릭하면 미리 만들어진 레이아웃 중 하나가 추가되었습니다

그들은 전체 페이지 레이아웃을 가지고 있고 그들은 몇 가지 개별 블록을 가지고 있습니다 레이아웃 및 필요한 프로 버전이 있습니다 모두를위한 모든 직업 건축업자를위한 직업적인 주제 우리가 할 일로 계속 할 수있는 자유로운 것들이 많이 있습니다 오늘 스크래치를 추가하자이 작은 빨간색 플러스 아이콘을 클릭하자

클릭 할 때 섹션을 추가하면 얼마나 많은 열을 원하는지 1 2 등 등 그냥 지금 2 열로 가자 우리가이 결정을하면 우리는이 두 칼럼에 넣습니다 나중에이 작은 검은 색 단추를 클릭 할 수있는 더 많은 날짜를 원했습니다 당신은 그것을 복사 할 수 있고 이제 우리는 세 개의 컬럼을가집니다 물론 그것을 다시 클릭하여 삭제할 수 있습니다

너가 그것을 원하지 않으면 우리는 두 개의 기둥에 잘 붙을 것이다 우리가 오늘이 섹션과이 큰 섹션에서 작업하기 때문에 거기에있는 무엇인가 상단에있는 파란색 태그 태그는 더하기 버튼이있는 섹션에 추가됩니다 다른 섹션에는 섹션을 편집하기위한 중간 버튼이 있고 섹션을 없애기 위해 오른쪽에 X가 있습니다 그래서 저는 여기에 약간의 텍스트를 넣을 것입니다 그리고 우리가 거기로 다시 가면 그리드를 치게 될거야

여기 당신의 위젯으로 돌아갈거야 나는 방금 그 텍스트를 움켜 잡았다 여기 그리고 나는 그것을 우리가 그것을 넣고 편집하기를 원하는 곳으로 끌고 갔다 그것을 클릭하거나 펜 아이콘을 클릭하면 여기에 있습니다 나는 Test 섹션에 넣을거야

나는 그 표제로 만들거야 괜찮아요 당분간 나는이 섹션에 아무것도 넣지 않을 것이다 왜냐하면 나는 정말로 여기 또는이 작은 블록을 원했기 때문에 저는 우리와 함께 일하고 싶습니다 여기 섹션을 클릭하여 섹션 수정 버튼을 누르십시오

우리가 가진 것을 보아라 좋아, 우리 두 개의 작은 칼럼을 보아라 우리가 거기에있어 그들은 여기까지 뻗어있어 그들 여기에 당신은 실제로이 위트를 만들 수 있습니다 그리고 지금 그들은 사용 가능한 공간 전체를 늘렸다 나는 그 상자를 지킬 것이다

당신이나 당신이 지정할 수있는 것처럼 보입니다 당신이 그들을 더 크거나 더 작게 만들 수있는 가발 당신 당신 11:40은 당신이 그들을 더 크거나 작게 만들 수있는 표준입니다 이 하나와 여기 사이의 열 사이에 있지만 그냥 복제하자 이 칼럼 복사해서 여기에 붙여 넣을 수 있습니다 작은 상자를 클릭하여 보겠습니다

거기에 우리가 가서 우리가 원하지 않는 것을 제거하자 우리가 우리 섹션으로 돌아 가면 comms gap을 설정할 수 있습니다 그래서 우리는 지금 우리가 얻은 것 인 기본값을 얻습니다 그들은 우리가 가질 수있는 것과 같은 이미지와 물건을 위해 서로를 만집니다 좁은 wieder가 왜 가장 넓은 것이 있는지 보자

그거 꽤 좋아 다시 기본 콘텐츠 위치로 되돌려 보겠습니다 중간 또는 상단 또는 하단에있는 실제 콘텐츠를 경편 한 그리고 이것은 원래의 I가 아닌 HTML 태그를주고 싶다면 말입니다 그들의 디폴트가 아마도 괜찮을 것이라고 상상해보아야합니다 우리가 추가 한 것을 볼 수 있듯이 구조를 추가하고 더 크게 만들었습니다

더 작아서 왼쪽에서 3 분의 1, 오른쪽에서 2/3을 얻었습니다 더하기 당신이 실제로 그것을 잡아 수동으로 할 수 있는지 필요한 경우 수동으로 크기를 조정하십시오 그걸 어떻게 되찾았나? 이제는 배경이나 어떤 것을 색칠하는 것이 얼마나 쉬운가요? 어제 너 한테 했어 당신 좋아, 여기에 우리가 색을 더할 수 있다는 것을 강조했다 거기에서 우리는 꽤 쉬 웠던 푸른 배경을 받았다

우리는 이걸 더 커지도록 만들고 싶어 몇 번에 걸쳐 이것을 복사하려고합니다 당신 거기서 우리는 우리의 섹션을 훨씬 깊게 만듭니다 우리가 알기에 색 그라데이션을 시도 했으니 까 당신의 최고 색깔을 여기에서 선정하십시오 그리고 여기에서 하단 색상을 선택하십시오 할 수있을만큼 쉬운 그리고 어때? 그 텍스트를 가져와서 스타일로 표현해야합니다

여기에 우리가 걸리는 색상은 흰색으로 우리의 머리말에 대해 충분히 쉽습니다 우리는 여기에 간격이있어 좋았어 당신 그 표제를 바꾸는 방법이어야합니다 여기서 우리는 분명히 가족을 바꿀 수 있습니다 우리 사자 스타일에 직면하자

사라는 표제를 바꿀 수 있어야한다 일부 여백 위쪽과 아래쪽이 50 픽셀을 얻습니다 50 픽셀도 눈을 뗄 수있는 작은 것 거기에 다른 값을 원한다면 하지만 저는 그렇게 생각하지 않습니다 이제 우리는 어떻게 변화시킬 수 있는지 궁금합니다 아주 쉽게 할 수 있어야합니다 예 우리는 수동으로 색상을 변경 당신 나는 그것을하기를 원했던 것이 아니다

적어도 우리는 약간의 키가있다 우리 구역에 그리고 그들은 그들이 우리의 진보 된 섹션에서 패딩을 가지고 있음을 확인했습니다 그것의 선택을 취소하고 그것에게 약간의 덧씌우 기 상단과 바닥 또는 백 I를 주자 생각한다 우리는 거기에가는 멋진 큰 섹션을 가지고 있습니다 당신과 우리는 당신이 원한다면 우리가 지난 시간에 그것을 다루고 싶다면 CSS ID를 줄 수 있습니다

이 섹션으로 이동하면 CSS ID를 부여합니다 그리고하자 그 뒤에 비디오를 넣어 라 얼마나 쉬운가? 그래서 나는 여기에 YouTube에 갈거야 여기에 상해 비디오가 있습니다

공유 버튼을 누르면 비디오 위의 URL이 나옵니다 그래서 나는 너를 복사 할거야 여기에 붙여 넣자 당신 좋아, 거기에 비디오가 꽤 자주있다 비디오는 나중에 시작할 수 있습니다

어떻게 시작했는지 보자 45 초 마크 백 칠십 초 동안 실행하자 그 일을하기에 충분히 쉬웠다 꽤 많은 작은 장치에 풀백 이미지가 있으면 비디오가 재생되지 않습니다 백그라운드에서 비디오의 화면 캡처 만하는 경우 동영상을 업로드하면 대체 이미지가있는 이미지입니다

재생되지 않습니다 그냥 재생할 것입니다 전체 그냥 다시 전체 이미지를 표시합니다 좋은 이미지가 잘 작동하고 있습니다 이것을 만들기 위해 더 눈에 띄는 곳에 배경 오버레이를 둘 수 있습니다 그라디언트 또는 색상 만 사용할 수 있습니다 색깔 파란색이기 때문에 꽤 괜찮습니다

이제 우리는 그것을 더 진한 파란색으로 만들 수 있고 불투명도를 낮추거나 도시에 지불 할 수 있습니다 우리가 배경 비디오를 더보고 싶어한다고 결정하면 너는 지금 야간에 나 야 그게 더 돋보이는 글이지만, 나는 그 파란색을 어떻게 되풀이 할 것인가? 꽤 좋은 인상적이야 그래서 거기에 우리가 가지고있는 요소가 거의 없습니다 섹션에는 편집하기 좋은 작은 것들이 있습니다

국경이있는 당신이 셰이더 분배기를 원하는대로 변명해라 흥미 롭다 그들이 내 밑에 있기 전에 우리가 가지고있는 것을 우리가 가진 것을 보자 머리카락 주말에 수업에 넣을 수있을 것 같네요 꼭대기에도 하나 있지만 꼭대기에 같은 하나 거기에 비디오가있는 작은 구름 풍선 섹션이 있습니다

그 뒤에 실제로는 아주 차가워서 더 높게 만들 수 있습니다 온통 당신 당신 그것들을 뒤집어서 내가하고 싶지 않다고 생각해 그게 너 재미있어 위와 아래는 같지만 뒤집힌다 나는 그들을 앞쪽으로 데려 간다

그 의미는 그들이 거기서 펼쳐지는 내용에있을 것이다 꽤 멋진 서체 각 개인의 제목 색을 설정할 수 있습니다 섹션도 꽤 좋고 텍스트 정렬 그러니 그냥 업데이트하고 미리 보도록하겠습니다 오늘 그 비디오를 오늘 남겨 둘 것입니다 당신 당신 거기에 우리 오버레이와 테두리가있는 비디오 섹션이 있습니다

분배기는 아주 쉽게 할 수있어서 우리의 다음 비디오에서 아주 잘 할 것입니다 위젯을 좀 더 살펴보고 작은 사이트를 시작하기 만하면됩니다 함께 수동으로 나는 당신이 즐겁게했으면 좋겠다 웹 개발에 관심이 있다면 YouTube 채널에 가입하십시오 아래를 내려다 보아라

우리는 위대한 자유 학급을 가지고있다 프리미엄 수업은 YouTube 가입자에게 큰 할인 혜택을 제공했습니다 다시 한 번 봐봐, 제이미 시스템 22와 웹 디자인, 그리고 좋은 하루 보내세요

Learning Bootstrap – From HTML to WordPress Theme on Udemy – Official

Learning Bootstrap에 오신 것을 환영합니다 HTML to WordPress Theme 과정

너의 이 과정의 강사는 Abul Hossain, 그리고 그는 그의 웹을 공유 할 것입니다 개발 기술, 기술 및 너와 함께한 경험 Abul은 웹입니다 디자이너 및 개발자 그의 아주 그가하는 일에 열정적이다

그는 시작했다 HTML, CSS, jQuery, jQuery UI, 2005 년에 다시 돌아왔다 그 이후로 다양한 프로젝트에 참여했습니다 방금 웹에서 시작하는 경우 개발 여행, 그러면 abul은 배우기에 이상적인 강사 때문에 그는 너의 아주 위치에있어 인상적인 기술 목록을 만들었습니다

그때부터 그는 그가 너에게 넘겨 줄 수있다 이 과정에서 과정이 게시됩니다 학습 프로그래밍 아카데미 설립 Tim Buchalka가 만들었습니다 교사와 35 년이 넘는 소프트웨어 개발자 경험

자기 팀을 통한 팀의 목표 학생과 아카데미, 최고 품질의 교육을받을 수 있습니다 실제 세계를 배우고 싶어하는 사람에게 소프트웨어 개발 기술 부트 스트랩 4 개발자는 수요가 많으며, 특히 인터넷의 웹 사이트를위한 모바일 우선 초점 이것을 습득하고, 부트 스트랩의 견고한 기초 프레임 워크, 당신에게 매우 가치있는 것을 줄 것입니다 고용주가 찾고있는 기술

에서 또한 wordpress, PHP 기술 당신은이 과정에서 배우게됩니다 너는 더 많이 고용 가능하고 바람직하다 미래의 고용주들에 의해 많은 개발자가 관습을 창조함으로써 위대한 삶 WordPress 테마 및 판매 Theme Forest와 같은 웹 사이트 프리랜서 디자이너와 개발자는 워드 프레스 프로젝트에서 생성 할 수있는 큰 수입

이 과정이 끝나면 기술과 능력을 키웠다 놀랍고 강력한 공예 HTML5 및 CSS3가 포함 된 웹 사이트입니다 너는 또한 정적 웹 사이트를 동적 웹 사이트 WordPress를 사용하여 자신의 기술을 마케팅 할 수 있도록 고객의 다양한 범위 이 과정에서 배우면 극적으로 웹 개발 기술을 향상 시키십시오

과 빠른 진로에 당신의 경력을 놓으십시오 성공 오늘 시작하지 않으시겠습니까? 가입 버튼을 클릭하여 가입하십시오 이 페이지의 코스 그리고 자유롭게 또한 무료로 제공되는 코스 관련 미리보기 비디오 함유량

이걸로도 할 수있는 페이지 우리는 여러분을 안 쪽

Introduction to Starter Theme 2 for Pinegrow WordPress Theme Builder

Pinegrow는 웹 사이트 제작자가 아닙니다 또한 모든 HTML 웹 사이트를 모든 기능을 갖춘 WordPress 테마로 그리고 우리가 HTML에서 몇 분 안에 WordPress 테마 기능 더 많은 시간과 노력이 필요하다

여러 템플릿으로 전문적인 테마를 만들려면, 코멘트 WooCommerce 통합 모든 서식 지정 옵션과 작동하는 CSS 스타일링 WordPress에서 제공합니다 그리고이 두 가지를 설정하는 것은 많은 작업과 그것의 꼭대기에 그것은 지루한 일이다 그래서 우리는 새로운 초보 테마 2로 당신을 위해 그것을했습니다 새로운 초보 테마에는 필요한 모든 것이 있습니다 똑바로 새로운 부트 스트랩 4 기반 WordPress 테마

초보 테마에는 일련의 일반적인 WordPress 템플릿이 함께 제공됩니다 Pinegrow에서 시각적으로 편집 할 수 있으며 SASS로 스타일을 지정할 수 있습니다 외부 도구없이 Pinegrow에서 바로 또는 복잡한 빌드 환경 새로운 Starter Theme에는 모든 범위의 사용자 정의 컨트롤이 제공됩니다 쉽게 사용자 정의 할 수있는 웹 사이트의 외관과 기능 그 초보자 테마 2 위에는 전체 WooCommerce 통합

데모 사이트에서 초보 테마 2 작품 당신이 무엇을 상자에서 꺼내 볼지 새로운 초보 테마는 완전히 무료입니다 너는 그것으로 원하는 무엇이든 할 수있다 오픈 소스 소프트웨어로 출시됩니다 그리고 우리의 목표는 Pinegrow의 사용자들입니다 테마를 개선 한 사람 이러한 개선 사항을 쉽게 공유 할 수 있습니다

Pinegrow 커뮤니티와 다음 동영상을보고 방법을 확인하십시오 지상에서 새 프로젝트를 빨리 얻을 수 있습니다 초보자 용 테마를 사용하면 많은 시간을 절약 할 수 있기를 바랍니다 WordPress 개발을 더욱 즐겁게 만들 수 있습니다

Bootstrap – How to edit a bootstrap template

안녕 얘들 아 이것은 http://wwwsystem22

net에서 제이미이며 http://wwwgreat-webdesigncom/ 여기에 작은 비디오 우리는 부트 스트랩 템플릿을 편집하는 방법을 알려줄 것입니다 당신이 원하는 멋진 부트 스트랩 템플릿을 다운로드했거나 찾았습니다 편집하고 압축을 푼 다음 여기에 작업을 수행 한 폴더에 있습니다

너는 그걸 한번 보러 가라 나는 네가 그렇게 생각한다고 생각한다 우리는 이것을 어떻게 편집하고 내 자신의 필요를 위해 그것을 어떻게 사용합니까? 글쎄, 어려운 일이 아니다 먼저 텍스트를 얻으려고한다 편집기와 저는 브래킷을 사용하는 것이 좋습니다

브래킷은 IO이고 나는 그것을 사용합니다 모든 종류의 편집을 위해 HTML CSS JavaScript를 사용합니다 그것을 정말로 가볍게 편집해라 그래서 당신은 계속 나아갈 수있다 무료라고 말하면서 다운로드 한 번 한 번 설치하십시오

indexhtml 파일을 보면 거기에 실제로 설치됩니다 그것을 클릭하십시오 지금 당신은 괄호가 설치되어있어 당신에게 옵션을 줄 것입니다 브래킷으로 열어 다른 모든 것과 마찬가지로 당연히 해보십시오 프로그램 괄호를 열려면 먼저 파일을 열고 파일을 열고 index

html 파일 또는 여러 페이지로 구성된 사이트 인 경우 멀리있는 곳까지 indexhtml HTML 연락처 HTML 등에 대한 파일 etc 기타 동일한 프로세스 이 모든 것이 여기에 우리 사이트의 메인 페이지입니다 간단히 말해서 나는 너무 깊이 들어 가지 않을거야 템플릿을 편집 할 수있을만큼 충분히 변경하면됩니다 당신의 제목이 무엇이든 당신이 아는 제목으로 여기에 당신의 이름을 바꾸십시오

그것은 어떤 것과도 같아야한다 그냥 당신이 원하는 것을 입력하십시오 끝 부분에있는 태그는 엉망이되어서 여기에있는 설명은 스타일 시트에 대한 링크 일뿐입니다 우리가 조금씩 조금씩 갈 것 인 모든 스타일을 바꿔라 이러한 다양한 장치 애플 장치에 대한 찬성 죄수보다 브라우저 탭에 표시되는 작은 기호뿐 아니라 실제 첫 번째 바로 가기 아이콘보다 그곳에있는 패브릭 '그래서 우리가 계속하자면 마지막 사이트를 다시보고, 우리가 먼저 바꾸고 싶은 것을 보아라

okay 분명히 우리가 바꾸고 싶은 첫 번째 일은 바로 로고입니다 고객에게 새로운 로고를 만들어야합니다 분명히 그들은 이미 당신을 보내고, 내가 가지고있는 것을 보자 이미 여기 어딘가에 새로운 로고가 있습니다 이미지가 바로 여기에 있습니다

원래 로고가 있습니다 여기에 광산을 넣으십시오 새 로고라고 부릅니다 그래서 우리가 대괄호와 당신은 당신이 걱정하는 경우에 nav의 밑에 당신의 로고를 보통 여기에서 찾아 낼 것이다 당신은 Ctrl 키를 누른 채로 F를 찾을 수없고 로고를 입력하면 강조 표시됩니다 때로는 쉽게 찾을 수있는 첫 번째 로고 단어 우리는 단지 코드를 변경하는 데 익숙하지 않다

새 로고가 새 로고라고 생각했던 새 이미지 이름에 그 이름이 붙었습니다 PNG 그래서 그것은 단지 새로운 그것이 사실 우리가 거기에 그것을 할 것을 촉구 그래서 내가 갈거야 해당 방문 횟수를 클릭하여 저장하고 다시 방문하면 우리의 사이트는 우리의 로고를 여기에서 바꿔야합니다 우리는 거기에 우리의 새로운 로고를 넣어야하고 우리가하고 싶은 것은 다음과 같습니다 그것이 단지 이미지이기 때문에 여기에 몇 가지 슬라이더 이미지를 넣으십시오 내가 폴더로 돌아 가면 우리가 거기에 계속 가고있는 자리 표시 자 나는 두 개의 이미지를 준비했다

분명히 자신의 이미지를 만들어야한다 나는 그것들을 가져 가면서 복사 할 것이고 슬라이더 폴더에 여기에 넣을 것이다 그곳에는 원본이있는 곳이 있습니다 그들이 실제로 입는 URL을 입력하십시오 지금은별로 중요하지 않습니다 다시 우리가 우리의 괄호로 돌아 가면 슬라이더로 내려 가고 싶습니다

여기에 슬라이더 텍스트가 멋지게 표시되어 매우 유용합니다 이미지 배경을 다시 찾으면 찾을 수 없습니다 내가 너를 보았으니 너는이 모든 것들에 익숙해 져서 우리는 ~하고 싶다 우리가 믿는 새로운 슬라이드로이 0 제트 JPG를 하나의 점으로 바꾸십시오 jpg 이미지 타입을 거기에 넣으려면 작동하지 않을 것입니다

Ctrl 키를 사용하여 저장하거나 원하는 곳에 저장합니다 우리 사이트에 다시로드하거나 새로 고침하고 거기에 우리는 우리의 새로운 이미지를 넣었습니다 분명히 당신이 넣고 싶은 모든 슬라이드에 대해 반복합니다 여기에서 우리는 하나 더 할 것입니다 두 번째 슬라이드는 여기 아래 슬라이드 2와 Ctrl 키를 눌러 저장하고 사이트에 다시 돌아와서 다음 버튼을 누르면 다시로드됩니다

거기에 다음에 새로운 이미지가 있으므로 아이디어를 얻습니다 이미지 또는 원하는 슬라이더를 선택하십시오 이 텍스트를 변경하거나 슬라이드에있는 텍스트를 분명히 사용자 정의하십시오 만약 우리가 우리의 괄호로 돌아 가면 여기에 텍스트 섹션이 있습니다 각각은 표제어이며 h2는 표제어의 H 태그를 향하고 있습니다

가장 큰 2 개는 약간 작고 6 개로 내려 가면 얻을 수 있습니다 당신이 내려갈 때 더 작아서 우리가해야 할 일은 여기에 새로운 제목을 쓰는 것입니다 그 괄호를 처음부터 끝내고 거기에서 끝내지 않도록하십시오 새로운 제목을 올바르게 표시하지 않으며 새로운 설명을 자막으로 표시합니다 우리는 비슷한 길이로 유지할 것입니다

미적 목적을 위해 슬라이더에서 작동하므로 비슷한 모양으로 유지합니다 길이를 늘리거나 줄일 수 있지만 CSS 코드로 조정해야 할 수도 있습니다 그래서 저장하고 우리의 사이트 등을 맞댄 저 ctrls를 보자 자 우리는 거기에 새로 고침 할게 우리의 새로운 제목과 우리의 새로운 부제와 하단에 새로운 설명이 있으므로 아래로 스크롤하면 서비스를받을 수 있습니다 섹션 분명히 우리는 텍스트를 같은 방식으로 편집하므로 나는 가지 않을 것입니다

다시 말하지만 우리가 여기서 내려 간다면 우리의 서비스 섹션에서 새로운 서비스를 사용하면 슬라이더에서 요점을 하나 더 얻을 수 있습니다 if 너무 많은 슬라이드가 하나만 삭제할 수 있고, 클릭하면됩니다 상단의 div 태그를 보면 해당 닫기가 강조 표시됩니다 이들을 인식하기 시작해야하는 태그는 모두 거의 설정되지 않았습니다 여기와 각 슬라이드가 하나의 새 슬라이드에 해당하므로 닫는 div 태그의 시작 부분에 div 태그의 시작 부분이 나옵니다

태그에 작은 슬래시가있어서 그걸 닫을거야 그 히트 저장을 삭제하고 그 마지막 슬라이드가 사라지고 싶지 않은 경우 그게 Ctrl Z를 치면 다시 돌아올거야 그리고 네가 잘 결정하면 더 많이 원해 당신이 그 섹션을 복사 할 수 슬라이드 ctrl C는 그냥 반환하고 밑줄을 그것을 아래에 붙여 넣으면 밑에 슬라이드를 붙여 넣기 만하면됩니다 새로운 그림을 넣고 새 텍스트를 그 자리에 넣으면됩니다

그냥 내가 어쨌든 당신이 어떻게 알 수있는 서비스 섹션으로 다시 커버 할 줄 알았는데 우리가 방금 끝낸 새로운 서비스를 아무 문제없이 편집해라 그저 다른 사이트에 저장해 두었다가 다시 사이트에 저장하면됩니다 그리고 다시로드하고 지금은 새로운 서비스를 말한다 이것은 모든 텍스트이다

이것은 모든 텍스트이다 여기에 작은 아이콘을 글꼴 굉장히 바꿔서 매우 쉽게 바꿀 수 있습니다 글쎄 만약 당신이 멋진 깡통 시트 또는 글꼴 굉장 글꼴에 가서 내가 보여 줄께 여기 글꼴 굉장한 점 IO 유사 주소 및 치트 시트 또는 그냥 구글 치트 속임수 여기에 우리의 모든 글꼴 awesomes의 목록이있어 당신이 바꿀 수있는 아이콘을 보여주고 필요에 따라 필요한 것을하십시오 그것을하기 위해 우리는 당신이 단지 거기에서 이름을 클릭하는 것을 보여주기 위해 하나를 바꿀 것입니다 그것의 끝까지 fa의 시작은 그것을 복사한다 지금 우리는 우리 괄호 당신은 FAS를 찾고 싶습니다

그리고 그것은 당신의 폰트가 당신처럼 멋진 곳이 될 것입니다 그것이 굉장한 굉장한 재미를 위해 거기에서 FA를 말하는 것을 본다 이제는 이걸 놓아주는 것이 중요합니다 첫 번째 것을 잊어 버리는 것이 중요합니다 그것의 끝까지 단지 두 번째 것입니다 그리고 거기에 새로운 것을 붙여 넣기 만하면됩니다

우리 사이트는 다시 원래의 것입니다 이제 우리는이 새로운 것을 바꿔야합니다 그곳에는 화살이 있었고 나는 왼쪽을 믿고 다시 짐을 싣습니다 너는 그것을 바꾸었고 너는 무엇이든지 넣으면서 갈 수있다 당신이 이것을 편집 할 때 기억하고 싶은 것을 다시 당신에게 감지하십시오

CSS와 최소 높이 및 최대 높이에 대해 알지 못하면 작은 상자를 여기에 넣으십시오 선택한 비슷한 수의 줄을 3 개 유지하고 싶다고 선택했습니다 4 줄의 선이 선이 좋지만 얼마나 많은지는 중요하지 않지만 계속 유지하고 싶습니다 그들 모두 똑같은 RS 박스가 정렬에서 약간 벗어날 것이다 우리가 내려 가면 다시 새로운 사진을 추가하는 법을 오버레이가 있습니다

바로 아래 라인의 텍스트입니다 거기에 오버레이 또는 새 제목이 표시됩니다 당신은 그 오버레이 텍스트를 이제 웹 개발에서 내가 방금 빠른 새로 고침에 입력 한 것은 새로운 제목인데 모두 매우 간단한 가격입니다 똑같은 내용은 그림 텍스트를 변경하려는 모든 텍스트입니다 문제는 버튼 텍스트 버튼이 분명히 여기에있는 곳입니다

어쨌든 가버 리지 않을 순간에 다시 정상으로 돌아온다 나는 너에게 보여줄거야 링크를 추가하는 방법 -이 버튼과이 버튼도 여기로 돌아가려면 여기를 클릭하십시오 우리의 괄호 그래서 가격 내려 갈거야 가격 1cu BTN 거기에 버튼을 할거야 그건 부트 스트랩의 클래스에 관한 것이고 당신은 href를 본다 그곳에 두 개의 거꾸로 된 쉼표가 있었는데 그곳에 링크 여기에 가기를 보면 링크를 원한다

메뉴 구조는 CSS 링크를 사용하는 곳입니다 ID가 있으므로 연락처 섹션으로 보내면 그냥 붙여 넣기 만하면됩니다 두 개의 거꾸로 된 쉼표 ctrl V 사이에 있고 분명히 알 수 있습니다 텍스트를 변경하는 방법 그래서 ctrl 우리 사이트에 말을하고 지금은 내가 새로 고침 이것은 이제 우리가 접촉 섹션으로 이동해야합니다 당신이 무엇을하고 싶은지 분명히 어떤 링크 버튼 링크라도 당신은 어떤 링크를 넣을 수 있습니다

거기 또는 거기에있는 각각의 심판 예를 들어 내 사이트 또는 이것에 의한 외부 링크 나는 그냥 가서 우리가 돌아갈 링크를 복사한다 브래킷을 다시 붙이면 해당 링크를 붙여 넣지 않도록하십시오 거기에 빗댄 쉼표를 넣거나 다시 넣으면 ctrl이 다시 저장됩니다 우리 사이트는 빠른 재 장전을 위해 일단 우리가 다시로드해야합니다 우리 사이트에 우리가 간다

우리 사이트에 그것을 가져 갔다 그것은 우리가 원했던 것이다 그것은 실제로 내 사이트에 동일한 창에서 우리를 데려 간 빠른 팁을 할 경우 당신은 그들이 당신이 새로운 탭에서 열어보고 싶었던이 사이트를 떠나는 것을 원치 않았습니다 당신은 단지 포도 나무 속성을 추가하는 것입니다 add target ta car를 사용하면 목표물을 알려주고 있습니다

우리에게 물어 봤고 그냥 공백으로 쳤다 차는 그것을 발견 할 것이지만 목표물은 공란이며 그 속성은 그 링크가 우리 사이트에 다시 저장 지금 우리가 때 이건 새 탭의 링크를 열어야합니다 여기에 문제가 없습니다 전혀 그럴 필요가 없습니다 다시 시작하기가 쉽습니다

시차 이미지 오른쪽 시차 의미 그것은 다른시 거기서 당신은 할 수있는 모든 일을 쉽게 할 수있는 이미지 텍스트를 어떻게 바꿀 수 있는지 알고 있습니다 거기에 다시 텍스트 여기에 글꼴이 두려운 지금은 여기에 귀하의 문의 양식을 작성하고 라이브 서버에 도착할 때까지 작동하지 않게하십시오 PHP 스크립트라고 부르는 것을 사용하기 때문에 필요한 것은 변경은이 양식을 보내고 자하는 주소입니다 여기에 우리 사이트가있는 폴더에 희망적인 PHP 폼이 있습니다 PHP를 가끔 여기에 루트 폴더에 풀어 놓고 있습니다

이것은 당신이 거기에 폴더를 가지고 있다는 것입니다 우리의 괄호로 열어 줄 것이고 여기에 10 행에 도메인 comm 그래서 당신이 개혁을 원하는 주소를 넣어야합니다 yahoocom의 John Smith 또는 내 비즈니스의 John Smith 일 수있는 곳으로 보내야합니다 일단 도메인을 바꾸고 양식이 전송할 사이트를 업로드하면 여기에이 주소로 보내 드리겠습니다 확인 확인입니다

양식을 보내면 팝업 메시지가 표시되어 변경할 수 있습니다 if 너는 그러고 싶어하지만 그게 깔끔해 보인다 그건 당신이 바꿀 필요가있는 전부입니다 일단 저장을 마치면 라이브 서버에 업로드됩니다 나는 그것이 절대적으로 잘 작동 할 것이고, 물론 당신이 할 수있는 다른 것 이 사이트에서 변경하고 싶습니다 그리고 이것은 조금 더 파고 당신이 원하는 약간의 CSS를 알기 위해이 작업을 수행 할 수 있어야합니다

이 색을 다른 색으로 변경하려는 배경색을 변경하십시오 우리가 밝은 파란색으로 바꾸고 싶다고하자 검사 탭이 뭔가있는 것 같아 여기에 Google 크롬 사용하기 나는 당신이 그렇게하면 그냥 마우스 오른쪽 버튼으로 클릭하여 검사하거나 F12 키를 치면 필요한 정보가 표시됩니다 당신이 그것을 바꾸고 싶은 지역에 다시 한번 조사하십시오

여기에 색상이 있습니다 편집하기에 좋은 방법입니다 비파괴적인 일을 바꿀 수 있고 한번 새로 고침하면 갈 것입니다 어떻게 돌아 갔는지를 알 수 있었지만 어떻게하면 좋을지에 대한 좋은 아이디어를 얻을 수 있습니다 실제로 괄호 안의 편집을하기 전에보기 만하면됩니다

저기있는 새로운 색은 내가 한 것뿐입니다 color 나는 그것을 클릭하고 그냥 거기에 내 새로운 색을 붙여 넣었습니다 그 배경색을 바꾸면이 모든 것들로 모든 것을 할 수 있습니다 거기에 배경색이있어 실제 마우스를 가져 가면 당신이 그것을 바꿀 수있게 해주는 것은 당신이가는 길입니다 그러나 물론 우리가 이것을 새롭게하면 그 변경 사항을 영구히 원한다면 어떻게 될지 다시 돌아갑니다

CSS로 그렇게 할 필요가 있습니다 따라서 우리 폴더로 돌아 가면 여기에 CSS 폴더가 있습니다 일반적으로 메인 또는 스타일이라고 불리는 부분에 있습니다 이것들은 부트 스트랩의 것들입니다 스타일이나 메인 폴더를 가지고 있지만 사실 우리가 사이트를 방문하고 다시 그 점에 대한 경위를 치면 그것이 어디에 있는지 말해야합니다

스타일을 CSS로 변경하면 편집 할 수 있습니다 이 영구적 인 곳으로 다시 돌아가서 마우스 오른쪽 버튼으로 클릭하고 대괄호 및 여기에 우리의 스타일 괜찮아요 그래서 당신이 원한다면 이렇게 쉬운 방법이야 모든 섹션을 변경하는 것은 해당 사이트로 다시 돌아가서 보도록하겠습니다 내가 할 일을 바꿀 색은 그 컨트롤 C를 다시 우리 편집자가 지금 Ctrl 키를 누르거나 우리가하고있는 일은 우리 모두 괜찮아졌고 우리는 전체 로트를 대체 할 수 있고 교체하러 가야합니다 원본으로 입력하겠습니다

하나는 거기에 내가 그것을 대체하고 싶은 것은 밝은 파란색 색상 그래서 만약 내가 가면 앞으로 거기에 그것의 모든 인스턴스를 우리의 것으로 대체 할 것입니다 거기에 새로운 색상이있어서 일괄 처리를했습니다 지금 교체하면 Ctrl + F를 누르면됩니다 새로 고침하면 Google 사이트로 돌아갑니다 이 모든 작은 회색 영역은 색상이 바뀌어야한다고 생각합니다

밝은 파란색의 종류가 있습니다 우리는 그것을 바꾸기 위해갑니다 영구적입니다 그런 식으로 머물러있어 이제 그 색으로 변화 시키거나 모든 것이 바뀌었다

새로운 밝은 푸른 색 평면에 정말 당신이 파고 들어갈 수 있습니다 CSS를 사용하여 모든 종류의 색상을 표현할 수 있습니다 자신이하는 일을 잘 모르는 경우 다운로드 한 사이트의 사본을 만드십시오 나는이 작은 것을 편집 한 적이있는 것을 눈치 채지 못한다 그 작은 점이 보통 당신이 그것을 만들었다는 것을 의미하면 점이 여기에 나타납니다 편집하고 저장하지 않으므로 Ctrl 키를 누른 상태로 저장하면 저장됩니다

if 저장하지 않으면 변경되지 않으므로 간단한 개요입니다 부트 스트랩 사이트에서 HTML과 CSS를 편집하는 방법은 물론 가능합니다 모든 HTML 사이트에 대해 동일한 방식으로이 기능이 도움이 되었기를 바랍니다 이 시스템에서 제이미 22보고 좋은 하루 보내 주셔서 감사합니다 안녕히 가세요

Bootstrap navbar – Customize your Bootstrap navbar with CSS

안녕 얘들 아이게 제이미 http://wwwsystem22

net과 http://wwwgreat-webdesigncom/ 에서이 비디오를 환영합니다 이 비디오 또는이 일련의 비디오에서 우리는 하나의 페이지를 만들 것입니다 스크롤링 부트 스트랩 웹 사이트 한 페이지 스크롤링 사이트는 매우 멋있습니다 훌륭한 방문 페이지 및 제품 출시 페이지를 만든 후 짜내는 순간 페이지를 시작하자

여기서는 부트 스트랩 프레임 워크를 사용하려고한다 그래서 부트 스트랩 커밋을 시작하자 그리고 우리는 베어 본 (bare-bones) 테마를 갖게 될 것이다 우리의 구조를 위해서 C와 unstyled 스타터 템플릿으로 가면 우리가 바로 여기에서 사용하게 될 것입니다 스크롤하는 수학 템플릿입니다

미리보기 및 다운로드 실시간 미리보기를 신속하게 보여 드리겠습니다 여기에 상단에 탐색 모음이있는 몇 개의 섹션이 있습니다 그들은 내장 된 부드러운 스크롤링에 대해 늦게 가르쳤습니다 우리가 우리의 뉴스 사이트를 위해 원하는 것 그래서 우리가 돌아가서 한번 다운로드한다면 다운로드 한 zip 파일을 가져 왔습니다

바탕 화면에 폴더를 만들었습니다 네가 원하는 곳이면 어디든 갈 수있어 여기에서 파일을 추출하면됩니다 일단 내가 당신을 추출한이 폴더와 내부에 그들은 편리하게 CSS를 가지고있어 글꼴과 자바 스크립트 그리고 실제 크기 인 index

html 그 자체가 그것을 위해 사용할 수있는 주석을 만든 라이센스를 읽어주십시오 너가 너를 다운로드하고 싶는 무엇이든 너는 너가 그것을 사용할 수있는 라이센스 나는 그것을 읽었다 나는 그것을 이해한다 그 두 가지 시도를 삭제하려고합니다 좋아, 우리가하고 싶은 다음 일은 그냥 열어 보자

물론 우리는 우리가 지금 본 라이브 데모에서 본 것과 똑같은 일이 지금 우리가해야 할 일입니다 이 강의는 여기에 내비게이션 바 스타일링을 시작합니다 일반 찾고 그것이 작동하지만 이것은 우리가 사이트에 대해 정말로 원하는 것입니다 마음에 우리가 정상에 다시 올라갈 정도로 나는 navbar가 그 길을 좋아하지 않는다 실제로 그것이 당신에게 좋을 수도있는 것처럼 축소됩니다 우리가 그 상황을 치유하기 위해해야 ​​할 일은 우리의 폴더를 열고 여기에있는 CSS 파일은 우리가 작업 할 사용자 지정 파일입니다

지금 우리가하고 싶은 것을 스크롤하는 것은 텍스트 편집기에서 이것을 열어 보는 것입니다 나는 대괄호로 IO에서 자유롭게 다운로드 할 수있는 괄호를 가지고있다 훌륭한 텍스트 편집기입니다 자신 만의 것이 있다면 그것도 좋습니다 그것을 사용하는 방법을 알고 그래서 내가 가서 열어 보겠습니다

대괄호로 여기에 우리 사이트에 우리에게 준 스타일링이 있습니다 지금이 방법으로 나가면 우리가하고 싶은 일은 그 navbar를 그냥 흰색으로주는 것입니다 배경 그래서 나는 경감을 거기에 칠거야 그리고 순간이야 그래 그것은 바로 거기에있어 navbar 기본값은 우리가하는 것입니다 저기서 바뀌고 싶다 내가 알고있는 것은 흰색이다

FFF는 6이다 하지만 3 자릿수 만 입력하면됩니다 같은 경우 흰색으로 바꾸십시오 우리가 원하는 것이 바로 잠깐 동안 국경을 떠날 것입니다 혹시 우리가 그곳의 맨 윗부분을 나눌거야

그래서 우리가 복사를 사용한다면 우리가 그곳에서 해왔 던 작업과 브라우저에서 작업 할 때 그리고 관리자는 여기에서 Google 크롬을 사용 중이므로 비파괴 적입니다 새로 고침 버튼을 누르면 다시 되돌릴거야 내가 너에게 보여줄거야 내가 갈거야 거기서 우리의 변화를 복사해라

나는 그것을 새로 고치겠다 그리고 당신은 그것이 사라진 것을 본다 지금 편집 소프트웨어를 텍스트 편집기로 가져 오면 어떻게 될지 우리는 탐색 표시 줄 아래에서 탐색을 시작합니다 우리가 그것을 변경하지 않았기 때문에 두 번째 것이 필요하지 않습니다 우리의 사이트에 빠른 저장을하고 새로 고침하면 이제 그 차례를 볼 수 있습니다

우리가 처음에 원했던 흰색 다음에 우리가 가고있는 것 우리가 너를 위해 일할 때 그 남자 바가 크기를 바꾸지 못하게하는거야 괜찮 으면 그냥 그대로 두십시오 그러나 그곳에 일정한 높이를 유지하고 싶습니다 다시 한번 살펴 보도록하겠습니다 우리는 단지 그것을 조사 할 것입니다

아래로 스크롤하면 지금 원하는 부분이 강조 표시됩니다 기본 탐색 바를 누른 다음 최소 하이킹을 시작합니다 너의 선택 당신 우리가 똑같은 키를 유지했을 때 어떻게 스크롤하는지 보자 그곳으로 올라 갔고 지금은 같은 장소에 머무르기를 원해 그래서 우리는 그것을 줄거야 어떤 패딩은 일정한 패딩을 시도해 보도록하겠습니다

20 번 패딩을 시도해 봅시다 두 속성이 들어간 후 첫 번째 속성은 위 / 아래이고 두 번째 속성은 당신이 그들에게 개별적으로 그것의 오른쪽 위 왼쪽 아래에 놓기를 원한다면 오른쪽보다 적다 너 여기 어디로 잃어? 거의 거기에있어 조금만 더 내려와야 겠어 25 명 그래, 그게 내가 말하는대로 우리가 그냥 복사하면 약 25 보인다 비파괴적인 것입니다 그래서 우리가 뒤로 물러나서 그것을 다시하면 그것은 그대로입니다

이제 CSS로 가서 navbar default를 수행 한 위치 바로 아래에 있습니다 거기에 색을 칠해서 우리가 그곳에서 만든 그 변화에 붙여 넣을거야 최소 높이 100 및 패딩 윗면 하단 25 왼쪽 오른쪽 20 분명히 너 니가 원하는대로 다 넣어 라 그리고 저기로 돌아가서 우리 브라우저를 새로 고쳐 보겠습니다 우리는 더 많은 것을 가지고 있습니다

거기에 좋아하는 양을 스컬링하자 로고는 여기에 있습니다 그래서 실제 메뉴 자체가 오른쪽으로 끝났습니다 여기에 손 사이드가 있고 우리는 바로 세 섹션 만 가지고 있습니다 몇 개의 섹션을 추가로 작성하여 폴더로 돌아가서 열면 텍스트 편집기에있는 index

html은 우리가 무슨 일이 일어나고 있는지 빠르게 살펴 보도록하겠습니다 여기에 메뉴가있는 탐색 메뉴가 있습니다 여기에 다른 섹션들이 있는데, 여기에 내가 뭘 할거야? 내가이 섹션을 몇 번 복사 해 볼게 추가 할 섹션 몇 개 하나로서 거기도있다 누가 하나일지도 모르고 다 어디에서 그것 단면도 ID 접촉 실제로 네비게이션이 제공하는 서비스를 아래로 스크롤하여 제공합니다 이 새 이름 그리고 하나 내 것이 야 당분간은 그걸 바꾸지 않을거야 왜냐하면 우리는 추가로 날짜가 명시된 섹션을 변경하고 다음 n2 신분 확인 목적으로 여기에 새로운 이름을 지정하겠습니다

이제 우리는 여기에있는 navbar로 돌아가서 두 개의 섹션을 더 추가해야합니다 목록 항목이 닫는 목록 항목 태그에 있습니다 해당 컨트롤을 복사 할 수 있습니다 C가 내려갑니다 컨트롤 V와 첫 번째 종류의 접촉 아래에서 우리는 그것을 만들 것입니다

n1로 가다 붙여 넣기하려면 ctrl V 아래에 다시 붙여 넣기 만하면됩니다 n2에 가고 싶습니다 그리고 우리는 그들에게 실제로 두 개의 새로운 새로운 이름을 줄 것입니다 마지막으로 긴 연락을 남겨두고 새로운 연락처로 변경합니다

– 내가 거기에 도착하게되면, 문자로 읽을 수 없게된다 여기 그들은 실제로 집에서 아무 것도 얻지 못했습니다 거기에 집 하나가 추가됩니다 그것은 많은 사람들이 사용하기를 싫어하는 위로 가기로 되돌릴 것입니다 요즘 그들은 낡은 패션을 사용하기 때문에 여전히 사용하고 싶습니다

클래스가 있다는 것을 알기 때문에 실제로 숨겨져 있습니다 숨겨진 똥 삭제 너무 잘 실제로 우리가 저장됩니다 삭제 삭제 Ctrl 키를 누른 상태에서 사이트를 새로 고침하면 사이트로 돌아갑니다 우리의 새로운 페이지가 올라와서 어디로 내려 갔는지 확인합니다 그들은 가야만한다 예, 우리는 연락을 받고 있습니다

같은 방법으로 주위에 있지만 어쨌든 우리는 그것들을 편집 할 것이므로 정말로 중요하지는 않습니다 그래서 우리가하고 싶은 다음 일은 차라리이 섹션을 옮겨 놓는 것입니다 이쪽으로 가면이 로고와 로고 사이에 약간의 거리가 있습니다 텍스트 편집기로 돌아가서 여기에 정렬되지 않은 목록 클래스는 이제 거기에 막대기를 넣고 틈새를 넣도록 선택했습니다 우리 술집에 – 바로 그것을 ctrl 우리 브라우저에 다시 저장 그것을 새로 고치십시오 그리고 우리는 그것을 가지고 그걸 바로 저쪽으로 밀어 넣었 어

좋아, 다음으로하고 싶은 것은 괜찮아요하지만이 스타일을 만들고 싶습니다 조금 더 자세히 살펴 보겠습니다 활성 상태를 볼 수 있듯이 그 색깔은 T가있는 사람들이 지금 내가 가진 것처럼 그 색깔입니다 패딩과 주위의 모든 것을 강조 표시하여 글꼴 및 그 배경 색상 그래서 좀 더 재미있는 줄 여기에 복사 한 색상의 파란색 일종의 배경색 복사하면 우리는 그냥 거기에 붙여 넣을거야 그래서 조금 더 좋은 푸른 색이지만 이제 우리는 가정의 텍스트가 흰색이되기를 바랍니다

우리는 실제로 FHS를 사용하는 것을 알고 있습니다 그래서 조금 더 좋아 보인다 그래서 우리는 그것을 우리에게 복사 할 것이다 우리 대괄호를 열고 스타일 시트로 이동하는 스타일 시트 사본 우리가 마지막으로 한 직후에 거기에 넣어 보자 우리 사이트에 다시 비트를보고 일치하는 새로 고침 우리가 떠올랐을 때 우리가하고 싶은 것과 지금 같아야하는 변화 이 페이지 제목 위로 여기까지 나는 이것이 이것과 동일하기를 원합니다 그 중 하나를 클릭하고 검사하십시오

hover 요소로 바로 가보겠습니다 마우스를 올려 놓으면 순간 당신은 색깔을 알기 때문에 배경색이 없습니다 그래서 무엇을할까요? 우리는 배경의 테마 색을 알맞게 넣을 것입니다 다시 흰색으로 만들거야 그것은 SMS입니다

이봐, 우리가 움직일 때가 지금처럼 이 중 어떤 것보다 그녀는 그 칼리버를 할 수 있습니다 이것을 복사하여 스타일 시트에 붙여 넣으십시오 우리 입장에서 바로 아래에 그것을 저장하십시오 내가 뭘 할거야 이걸 좀 깔끔하게 정리하려고하는데 여기가 우리가 시작한 곳이야

우리의 커스텀 편집 snot을하고 있습니다 여기 엔 엔트리를 넣을 것입니다 스타일 그것은 스타일이 아니라 단지 제목 일뿐입니다 슬래시와 스타와 스타 그리고 다시 슬래시 사이에 거기서 우리는 원하는 것을 타이핑 할 수 있고 나는 그곳에 묘사를 넣는다 우리가 나중에 그것을 발견해야한다면 조금 더 쉬울 것입니다

우리는 그것을 가지고 있습니다 저는 그것을 조금씩 분리 시켰습니다 코드 줄을 좀 더 쉽게 만들 수 있기 때문에 ~로 우리가이 옙 위에 마우스를 올렸을 때 빠른 새로 고침이 작동합니다 내가 맘에 들지 않는 것을 가져 오기를 원했기 때문에 거기에이 두 가지가있다 옆에는 실제 분리가 없습니다

큰 파란색 블록처럼 보입니다 집과 저에 관해서는 그것을 조금 바꾸어 봅시다 내가 할 일은 경계를 왼쪽과 오른쪽으로 조금씩 추가하는 것입니다 흰색 테두리이므로 스타일 시트로 돌아가 보겠습니다 마우스를 올리면 어떤 일이 발생하는지 알 수 있습니다

또는 왼쪽 우리는 한 픽셀 떨어지는 기다려 동생과 세미콜론에 항상 줄 것이다 속성과 나는 단지 그것을 다시 복사 할 것이다 젠장, 붙여 넣기 및 왼쪽 또는 오른쪽으로 왼쪽에서 오른쪽으로 변경해야합니다 지금 우리가 저장하면 오크 위에 굴러 갈 때 우리 사이트로 새로 고침하자 거기에 작은 구분 기호가 있어야하는 나무가 있어야합니다 그건 그냥 좀 부셔 버리면 알게 될거야

두 가지가 있습니다 우리가 거기에 있다는 것을 발견하게하십시오 당신이 여기서하고 싶은 다음 일은 로고를 추가하는 것입니다 이미 만들어 놓았습니다 그래서 우리는 우리의 index

html에 가기를 원합니다 우리가 지금 작업 한 괄호 안에있는 파일 우리가 그 순간에 그곳에있는거야 그 짧은 스트랩을 바로 시작해야합니다 지금은 여전히 ​​그것을 대체하고 싶습니다 여기에 맨 위로 들어가서이 태그에 감싸 길 원해

바로 거기에 href하지만 나는 그것이 이미지가 아닌 글쓰기를 원한다 거기에서 우리는 우리 솔더로 돌아갈 것이고 나는 새로운 폴더를 만들 예정이다 그것을 IMG jeez라고 할 것입니다 놀라 울 정도로 묘사 적이지만 많은 사람들이 이미지를 넣거나 당신이 무엇이라고 부를 수 있습니까? 당신은 당신이 원하는 것이 무엇인지 기억하고있는만큼 오래 원합니다 그리고 나는 곧 로고를 만들 예정이다

나는 어딘가에 있다고 믿는다 우리는 그 폴더에 넣을거야 내가 잠시 멈추고, 로고를 넣을거야 거기에 내 이미지 폴더 거기에 이미지 이제 우리는 실제로 그것을 배치해야합니다 거기서 우리 대괄호 나 텍스트 편집기로 돌아 가면 우리는 그것을 넣고 싶습니다

시작 부트 스트랩은 코딩의 일부분을 수행하고 그걸 제거합니다 이제 우리는 넣을거야 각 색상별로 여기에 프롬프트가 표시됩니다 소스에 넣기가 매우 편리합니다 FRC는 같고 그 다음에 콜론을 두 번 다시 넣으면 이미지 폴더가됩니다

이미 대출되어있어 편리하고 유일한 것입니다 그것은 로고 일이며 나는 모든 이미지를 놓을 필요가있다 속성 시력이 손상된 사람들을위한 것입니다 그 (것)들에 대한 묘사 나는 시력이 좋지 않다는 것을 의미한다고 믿지만 나는 그렇지 않다 아직 그 기능을 사용하지 마십시오

로고 로고 이미지가 더 잘 설명됩니다 그런 다음에 코스를 끝내면서 조금 더 넣어 둡니다 이제는 우리가이 말을 할 때 브라우저가 돌아 가지 않을 것이라고 확신합니다 로고는 여기 빙고에 나타나야합니다 그리고 그곳에는 조금 밖에 없습니다

여전히 일하는 가죽 끈을보기 위해서 정렬을 해 놓았습니다 그래서 우리가 그것을 다시 검사하면 그것은 남자 화염 덩어리가 될 것이고 나는 지금 우리가해야 할 것처럼 패딩이 보인다 약간의 마이너스 마진 izing은 괜찮습니다 우리가 가고 싶은 곳으로 갈라져 나간다하지만 우리가 원하는만큼 멀어지지는 않는다

저것을 위해 그것으로 들어가십시오 저기에 있어요 조금 더 올려 주길 원하지만 1012가 나아졌습니다 나는 마진 상단을 사용할 것입니다 나는 그것에게 부정적인 가치를 주겠다 힘이 아닌 세미콜론으로 우리는 잘 작동하지 않을 것입니다

그래서 우리는 말할 것입니다 마이너스 C1은 12입니다 그녀는 그것을 너무 많이 끌어 올려서 110 암컷을 시도합니다 나에게 꽤 좋아 보인다 그래, 떠나자 Let 's – Ted 우리가 복사 할 때 우리는 실제로 우리가 필요로하는 것을 필요로한다는 것을 기억합니다 붙여 넣기 만하면 바뀌었고 변경하지 않은 것들은 지울거야

이 ctrl C 다시 지금 우리의 브래킷 소프트웨어에 복사하려면 스타일 시트와 우리 마지막 입구 아래에 항문과 거기에 태그를 아래에 넣어하지만 난 생각이나 그냥 지금은 미늘과 이제 우리는 플로트 또는 높이를 변경하지 않았으므로 우리가 제거 할 수 있습니다 우리는 패딩을 바꿨고 우리는 마진을 변경했고 우리는 제거 할 수 있습니다 글꼴 크기와 reline height를 삭제하고 다시 우리 사이트로 신선한 거기에서 우리는 우리가 우리 사이트를 위해 우리가 원하는 navbar의 스타일을했을 정도로 그것을 가지고있다 여기 모든 것이 제대로 작동하는지 확인하십시오 좋아요 맨 위로 돌아가서 로고를 확인하거나 스크롤하십시오

맨 위로 돌아 가기 네, 그렇습니다 나는 그걸로 행복합니다 우리가 작업을 시작할 때 다음 비디오에서이 비디오에 대한 LD가 있습니다 영웅 섹션은 여기 이것을 보아 주셔서 감사합니다 Jamey 조수 22 그리고 위대한 웹 디자인 comm 당신이 부트 스트랩을 좋아한다면 우리의 부트 스트랩을 가져 가라

udemy에서 사용할 수있는 코스입니다 최소한의 코딩으로 부트 스트랩을 만들 수 있습니다 아래 링크에서 $ 10에 대한 코스를 얻으십시오

Make a WordPress theme with Bootstrap 3 – Tutorial #1

WordPress Theme Development의 첫 번째 자습서입니다 이 시리즈에서는 제목에서 모두 다 밝힙니다

우리는 WordPress 테마를 만들 예정입니다 그래서 우리는 당신이 사이트를 당신 앞에서 완전히 호환되는 WordPress 테마를보십시오 그래서 사실 보여주지 않을거야 사이트 디자인 방법 그것은 모두 부트 스트랩 3에 구축되었습니다

그래서 많은 사람들이 그것을 요구했습니다 그것은 모두 부트 스트랩 3을 기반으로하고 있습니다 모든 소스 파일을 설명에 넣어야합니다 아래에서 다운로드하십시오 그래서 주 사이트 다운로드를 해 드리겠습니다

그리고 그것은 HTML과 CSS 폼과 자바 스크립트 일뿐입니다 WordPress로 변환하는 방법을 알려 드리겠습니다 그것은 당신 앞에서 본 것입니다 기술 사이트와 비슷합니다 Bootstrap 3으로 빌드하는 방법을 설명했습니다

나는 꽤 많은 수정을했다 글쎄, 나는 그것을 전부 바꿨다 더 많은 WordPress를 만들기 위해, 내가 무슨 뜻인지 안다면 그래서 우리가 가진 것은 점보트론 최신 게시물을 표시 할 예정입니다 그리고 그것은 자동으로 여기에 올려집니다

그리고 우리는 또한 게시물 목록을 가지고 있습니다 그곳에는 모든 종류의 카테고리가 있습니다 나는이 글이 10 개의 게시물을 나열한다고 생각하지만, WordPress 설정에서 변경할 수 있습니다 그런데 여기 측면에 따라 자동으로 모든 항목을 채우기 위해 그 (것)들에있는 포스트가있는 종류의 따라서 게시물이없는 카테고리가있는 경우, 여기에 나타나지 않을거야

그래서 나는이 카테고리들을 분류 할 수 있습니다 그리고 가이드와 튜토리얼에서 이것을 볼 수 있습니다 그래서 저에게 이걸 보여주고 있습니다 Uncategorized에 들어가면, 나에게 이것을 보여줍니다 그래서 저는 또한 가이드와 튜토리얼에 들어가면, 나는 이것을 클릭 할 수도 있고, 그걸 가져올 수있다

기사 페이지 그리고 이것은 모두 WordPress로 동적으로 수행됩니다 여기 측면에 따라 WordPress의 6 가지 최신 게시물을 참조하십시오 다시 자동으로 수행됩니다 그리고 그들은 모두 여기에 나열되어 있습니다 그 밖의 무엇을 공유 할 것입니까? 그래서 내가 홈 페이지에 간다면 – 이것도 거기에 직접 연결됩니다

정보 페이지도 있습니다 우리 대시 보드의 WordPress에서 편집 할 수 있습니다 따라서 여기에 들어가면 페이지 또는 페이지 – 내 사이트가 조금 느립니다 그리고 나는 우리에 대해 간다 여기에 페이지가 있습니다

그리고 그것은 WordPress에서 편집 할 수 있습니다 그리고 그 변화가 여기에 반영 될 것입니다 사이트에 대한 내용이 많습니다 시작하려면 무엇을해야할까요? 당신은 어딘가에 PHP 호스팅이 필요하거나, 또는 로컬 호스트가 필요합니다 따라서 로컬 호스트를 사용하는 경우 로컬 컴퓨터에서이 프로그램을 실행하고 싶습니다

나는 WampServer 또는 XAMPP을 얻는 것이 좋습니다 나는 Wamp를 선호한다, 그것은 내가 항상 사용해온 것이다 이전에는 XAMPP를 사용하지 않았지만 어느 쪽이라도 괜찮을 것입니다 나는 그것을 설치하는 방법을 보여주지 않을거야 그것은 단지 시간이 걸리기 때문입니다

그러나 당신이 당신의 생활에있는 프로그램을 이제까지 설치 한 경우에, 당신은 잘 할 수 있어야합니다 온라인 어딘가에서 호스팅한다면 – 나도 몰라 DreamHost, HostGator, 그 회사들 그들은 종종 WordPress를 설치하는 자동 설치 프로그램이 있습니다 따라서 설치가 정말 쉽습니다

버튼을 클릭하면 작업을 수행 할 수 있습니다 그들이 당신에게 그것을주지 않으면, 로컬 호스트를 사용하는 경우 wordpressorg로 향해야합니다 그리고 여기에서 다운로드해야합니다 그리고 WordPress 3

71을 다운로드하십시오 그것이 현재 버전입니다 이 자습서 시리즈는이 버전에서 지원됩니다 아마 하위 호환성도있을거야

꽤 먼 그리고 잘하면, 당신은 앞으로 호환 될거야, 그게 문제라면 그래서 당신은 문자 그대로 이것을 열어 둡니다 그리고 이것을 추출하고 귀하의 사이트의 루트 디렉토리에 있습니다 그런 다음 사이트로 이동하면 모든 쉬운 설치 프로세스를 제공합니다

내가 WordPress를 설치하는 방법에 대한 비디오를 만들고 싶다면, 내가 할 수있는 그냥 코멘트에 물어보십시오 따라서이 튜토리얼 시리즈에서는 이미 WordPress가 설치되어 있어야합니다 당신은 단지 그것에 대한 주제를 만들고 싶습니다 그래서 내가 말했듯이, 당신이 어떻게 WordPress를 설치하려면, 꼭, 의견에서 물어보십시오

그럼 지금 뭘보고있는거야? 내 FTP 클라이언트가 연결된 FileZilla입니다 DreamHost와 함께 호스팅되는 내 서버로 보내십시오 그리고 이것은 기본적으로 루트 디렉토리입니다 WordPress가 설치된 곳 그래서 우리는이 모든 것들을 여기에서 얻었습니다

그리고 우리는이 3 개의 폴더, Wp-includes, Wp- 컨텐츠, Wp-admin 우리가 관심을 갖는 것은 Content입니다 이것은 그것에 우리의 테마를 갖게 될 것입니다, 그 다음 테마 폴더 그리고 여기 안에 네 개의 폴더가 있습니다 현재 버전에는 두 가지가 있어야합니다

2012 년과 2013 년에는 WordPress가 제공됩니다 그것들은 기본 테마입니다 당신은 또한 Bootstrap을 가지고 있습니다 너를 사용했음을 보여줬다 이것이 우리가 창조하게 될 것입니다

그리고 저는 이것도 가지고 있습니다 그것은 Blankslate라고합니다 이제 보통 당신이하는 일은 직접 편집하는 것입니다 이 Blankslate에 당신의 인생을 더 쉽게 만들어 줄 것입니다 그러나 나는 이것이 단지 복잡한 것을 발견합니다

코드를 읽고 이해해야합니다 그리고 저는 코딩을 좋아합니다 내 코드 실습은 다른 것과 상당히 다릅니다 사람들 그래서 내가 직접 편집하는 것을 좋아하지 않습니다

하지만 내가 이것을 사용하는 이유는 여기 좀 보도록 하죠 우리는 Entry

php에 들어가서 편집을 볼 수 있습니다 여기 있습니다 이것은 그들의 코드입니다 나는 여기를 들여다 보며 기능과 물건을 골라 낼 수 있습니다 그래서 저는 제게 무엇을 사용해야하는지 압니다

그래서 내가 직접 편집하지 않는 한, 나는 아직도 그것을 아주 잘 사용한다 그래서 저는 Sublime을 닫을 것입니다 그건 그렇고, 지금 Sublime Text 2를 사용하고 있습니다 많은 분들께서 전에 요청하셨습니다 나는 그것을 마침내 얻었다

그래서 여기로 돌아가서, 우리가 할 일은 우리는 디렉토리를 만들 것입니다 그리고 우리는 이것을 "나의 테마"라고 부를 것입니다 일반적으로 워드 프레스 테마, 잘 일부 브라우저와 서버처럼 공백이 없어야합니다 그리고 사물은 그걸로 엉망이됩니다 그래서 그 안에 아무 공간도 두지 마세요

이제 여기에, 우리가 할 일은 우리는 몇 개의 파일을 만들 것입니다 첫 번째는 Stylecss입니다 WordPress에 대한 정보를 담고 있습니다 우리의 테마뿐만 아니라 우리의 스타일에 대해서

그래서 우리는 새로운 파일을 만들 것입니다 Indexphp, Headerphp 및 Footerphp라고도합니다

그래서 본질적으로 이것은 헤더입니다 모든 것을 담을 것입니다 페이지 헤더와 같습니다 맨 위에는 재사용 할 모든 것이 있습니다 그리고 바닥 글은 완전한 반대가 될 것입니다

그냥 바닥에 그리고이 Indexphp는 모든 것을 합칠 것입니다 그리고 CSS를 시작하면, 내가 설명한 것처럼, 우리 스타일과 WordPress 정보를 포함 할 수 있습니다 자, 당신이하지 않는 것이 중요합니다

이 파일들을 폴더 안에 넣으십시오 WordPress는 그것을 이해하지 못합니다 그들은 모두 밖에 나가야 해 그래서 우리가 할 첫 번째 일은 우리의 Stylecss 파일이 열려 있습니다

먼저 우리가해야 할 일은 정보를 추가하는 것입니다 WordPress가 우리 테마에 관해 읽을 수 있습니다 그리고 이것은 CSS 주석 내부에서 이루어집니다 여기에 우리가 놓을 주제 이름이 있습니다 그리고 대문자와 띄어쓰기에 유의하십시오

그리고 세미콜론을 제거하십시오 그리고 여기 BS3 Theme을 넣을 것입니다 그렇게 그렇다면 Them URI는 기본적으로 어디에서 가능합니까? 테마가 다운로드됩니다 그게 네가 뭘 어쨌든 상관 없어

그것이 단지 너 자신을위한 것이라면 이것을 넣으십시오 나는 coders-guidecom을 넣을 것입니다 그런 다음 설명을 추가해야합니다 그것은 다시, 같은 스타일이다

그리고 나는 단지 My Bootstrap 3 반응 테마를 넣을 것입니다 다음은 버전입니다 이것이 첫 번째 버전이기 때문에 하나가 될 것입니다 저자, 닐 로우를 입을거야 그런 다음 작성자 URI

그리고 이것을 웹 사이트로 설정하십시오 별로 중요하지 않습니다 그리고 나는 coders-guidecom을 다시 넣을 것입니다 그냥 그렇게

이제는 저장하십시오 그리고 우리는 이것을 최소화 할 수 있습니다 폴더에서 매번 실제로 들어가서 예를 눌러야합니다 변경 사항을 업로드합니다 그러나 나는 아마 이것을 앞으로자를 것입니다

좋아요, 그래서 우리가하고 싶은 일은 우리 사이트에 들어가는 것입니다 그리고 내가 할 일은 내 관리자에게 들어가는 것입니다 루트 디렉토리 / wp / admin에서 액세스 할 수 있습니다 그러면 우리가 할 수있는 일은 외모, 테마, 그리고 나서 여기 BS3 Theme를보아야 만합니다 당신이 전화 했어

그것은 저의 Blankslate입니다 그리고 현재 저는 Tutorial 테마를 설치했습니다 하지만 이걸 활성화 할거야 그래서 Activate를 누르십시오 그리고 사이트를 방문하십시오

거기에는 아무 것도 없습니다 우리 파일에 아무것도 없기 때문에 이것이 우리가 원하는 것입니다 그래서 우리는 다음 튜토리얼에서 그 작업을 시작할 것입니다 하지만 여기서 끝낼거야 이미 그 이야기 속으로 들어갔다

지켜봐 줘서 고마워 댓글을 달고 평가하고 구독하는 것을 잊지 마십시오 그리고 다음 비디오를 보도록하겠습니다