How To Create Buttons From Your WordPress Menu Items (Fast & Easy) ⚡

이 버튼을 WordPress 메뉴에 추가하는 것은 매우 간단합니다 당신이해야 할 첫 번째 단계는 WordPress Dashboard, Appearance 그런 다음 메뉴를 클릭하십시오

여기에있는 "화면 옵션"을 열어 CSS 클래스 옵션이 활성화되어 있는지 확인하십시오 "CSS Classes"가 선택되어 있는지 확인하십시오 이제 새 옵션이 메뉴에 표시됩니다 바로 거기에 원하는 수업을 입력 한 다음 '메뉴 저장'을 클릭하십시오 예를 들어 hestia-btn을 선택하겠습니다

여기에 원하는 것을 입력 할 수 있지만 다음 단계에서 사용할 텍스트가 기억납니다 이 클래스를 여러 메뉴 항목에 추가하거나 다른 사용자 정의 클래스를 만들 수 있습니다 다른 메뉴 항목의 경우 예를 들어 둘 이상의 다른 버튼이 필요한 경우이 방법이 유용 할 수 있습니다 이제 Appearance, Customize, Additional CSS를 클릭하십시오

다음 CSS를 여기에 입력하십시오 문서에 넣은 기성 코드를 복사하여 붙여 넣기 만하면됩니다 설명에 링크하십시오 여기에서 볼 수 있듯이 메뉴 항목이 버튼으로 바뀝니다 원하는 색상의 HEX 코드를 생성하여 색상을 변경할 수 있습니다

예를 들어, Hestia 데모 웹 사이트의 크롬 확장과 같은 색상 선택 도구를 사용하십시오 큰 제목 섹션에서 버튼의 색상을 선택합니다 그 색상 코드는 여기에 붙여 넣어 야합니다 버튼을 "평평하게"만들려면 테두리 반경 선을 제거하거나이 값을로 변경하십시오 반경을 조정하고 원하는 모양으로 만듭니다

다른 테두리 반경을 사용하여 멋진 멋진 버튼을 만들 수 있음을 기억하십시오 "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius" 또는 "border-bottom-right-radius" border-top-left-radius와 border-bottom-right-radius는 이런 종류의 버튼을 생성합니다 쿨, 맞지? 물론 픽셀 값을 더 높은 숫자로 변경할 수 있습니다 당신이 더 중요한 커브를 만들고 싶다면

이전에 언급했듯이 다른 클래스를 추가 한 다음 색상을 변경하면됩니다 위의 코드를 자신의 CSS 클래스 이름으로 편집하십시오 그게 다야, 끝났어! 질문이 있으시면 동영상 아래에 의견을 남겨주세요 답변을 위해 최선을 다할 것입니다 다음 비디오에서 만나요

WordPress Blocks: The New Editor Of WordPress EXPLAINED

WordPress의 새로운 편집기에서 블록을 사용하는 방법을 이해하는 데 어려움을 겪고 있다면, 당신은 올바른 위치에 있습니다 오늘 제가 어떻게 진행되는지 설명 드리겠습니다

편집자의 설명을 드리겠습니다 핵심 기능은 기본 WordPress 게시물을 만드는 것과 같은 방식으로 안내하지만 당신은 당신이 만들고있는 컨텐츠의 유형에 관계없이 동일한 접근 방식을 사용할 수 있습니다 이 비디오에서 사용하는 WordPress 테마는 Neve, 초고속 및 featherweight 테마입니다 WordPress 블록과 완벽하게 작동합니다 그리고 더욱 더, 새로운 기능이 풍부한 WordPress 플러그인 인 Otter를 소개하겠습니다

블록을 사용하여 콘텐츠 제작 경험을 향상시킬 수 있습니다 우선, 블록이 무엇인지 설명하겠습니다 블록은 WordPress가 블로그 게시물의 내용을 구성하는 새로운 방식입니다 및 페이지 예를 들어 새 게시물을 만들면 블록 기반 콘텐츠 편집 패널이 표시됩니다

이전에 있었던 것 대신에 이전 버전과 비교했을 때이 새로운 블록 편집기는 엄청난 업그레이드입니다 편집 경험이 산만 해지고 훨씬 간소화되었습니다 주 캔버스 만보고 다른 불필요한 요소는 볼 수 없기 때문입니다 가장 먼저해야 할 일은 전용 필드를 사용하여 게시물에 제목을 부여하는 것입니다

편집기의 맨 위에 이것은 고전적인 편집기에서와 똑같은 방식으로 작동합니다 그 후에는 일이 바뀌기 시작합니다 소식 제목 바로 아래 영역 위로 마우스를 가져 가면 몇 가지 아이콘이 표시됩니다 더하기 아이콘을 사용하면 WordPress 블록을 선택하여 게시물에 추가 할 수 있습니다

오른쪽에는 가장 일반적으로 사용되는 블록을 빠르게 추가 할 수있는 옵션이 있습니다 텍스트, 이미지 및 갤러리 옵션 지금은 더하기 아이콘을 클릭하면 새로운 메뉴가 나타납니다 이 메뉴는 현재 편집기에 포함 된 모든 블록을 나열합니다 맨 위에는 가장 많이 사용하는 옵션과 여러 가지 조직 된 카테고리가있는 섹션이 있습니다

검색 바를 사용하여 필요한 항목을 빠르게 찾을 수 있습니다 오터 플러그인을 설치했다면 더 많은 블록을 볼 수 있습니다 이 비디오의 뒷부분에서 자세한 내용을 보여 드리겠습니다 계속 시청하십시오 게시물에 블록을 추가하려면 해당 블록을 찾아서 클릭하면됩니다

단락 블록을 사용하여 간단하게 시작해 보겠습니다 블록을 게시물에 넣은 후 다음 단계로 이동하십시오 편집기에 간단히 입력하여 단락 블록을 만들 수도 있습니다이 단락은 기본값입니다 실제로 차단하십시오

단락 블록을 추가 할 때 바로 그다지 보이지 않습니다 그러나 입력을 시작하면 새로운 옵션이 표시됩니다 정렬, 굵게 및 기울임 꼴과 같은 몇 가지 기본 서식 설정이 표시됩니다 또한 편집기 화면의 오른쪽 사이드 바를 확인하십시오 거기에서 더 많은 블록 특정 옵션을 찾을 수 있습니다

이 경우 텍스트의 글꼴 크기와 색상을 변경하고 드롭 캡을 추가하고 심지어 고급 메뉴에 맞춤 CSS 몇 개를 포함하십시오 여기 또는 블록 자체에서 변경 한 사항은 즉시 표시됩니다 새로운 블록 편집기에 대해 좋아하는 점은 다른 배경을 설정할 수 있다는 것입니다 각 블록의 색상 특정 섹션을 강조 표시하려는 경우 유용 할 수 있습니다

각 WordPress 블록에는 고유 한 설정이 있습니다 또한 Enter 키를 누르면 단락 블록 아래에 새 블록이 추가됩니다 그러나 이번에는 더하기 기호를 사용하여 이미지 블록을 추가 할 수 있습니다 보시다시피 이미 이미지를 업로드하거나 이미 이미지를 추가 할 수 있습니다 미디어 라이브러리

이미지를 편집하고 정렬을 변경하는 등의 작업을 할 수 있습니다 더하기 기호를 누르는 대신에 빈 블록에 "/"를 입력하여 삽입하려는 블록의 이름으로 어떤 블록을 사용할 수 있는지 배우고 나면 새로운 블록을 추가하는 훨씬 더 빠른 방법입니다 많은 단락과 이미지 블록을 사용할 것이라는 데는 의심의 여지가 없습니다 그러나 블록 편집기는 더 많은 것을 제공해야합니다 또한 새로운 옵션을 제공하는 WordPress 블록이 고전적인 편집자

예를 들어, 게시물에 Button 블록을 추가 할 수 있습니다 방문자가 상호 작용할 수있는 클릭 가능한 버튼이 생성됩니다 버튼 자체의 텍스트를 편집하고 링크 바로 아래에 URL을 포함시킬 수 있습니다 블록의 왼쪽 상단에있는 아이콘을 선택하여 스타일을 변경할 수 있습니다 버튼을 클릭하고 위치를 변경하려면 여기에서이 아이콘을 클릭하십시오

또한 사이드 바에서 배경색과 텍스트 색을 모두 변경할 수 있습니다 이 옵션은 엄청난 범위가 아니지만 간편한 맞춤 설정을 만들면 충분합니다 버튼을 사용하면 방문자가 이메일 목록에 가입하고 제품을 구매할 수 있으며, 또는 다른 무엇이든 당신의 공상을 치십시오 더 많은 옵션이있는 버튼을 원하십니까? 오터가 제공하는 버튼 그룹을 사용하면 최대 5 개의 버튼을 삽입 할 수 있습니다 이 그룹은 색상 및 테두리 설정을 사용하여 별도로 스타일을 지정할 수 있습니다

이 드롭 다운에서 사용자 정의 할 버튼을 선택한 다음 색상을 선택하기 만하면됩니다 필요에 따라 설정합니다 파란색 텍스트와 파란색 테두리가있는 흰색 버튼이 필요하다고 가정 해 보겠습니다 테두리 색상을 선택한 후에는 폭과 반경을 조정해야합니다 너는 그것을 원해

버튼을 가리 키는 방식을 변경할 수도 있습니다 쿨, 맞지? 나는 또한이 버튼들이 여기에 "Open in New Tab"옵션을 가지고있는 것을 좋아하는데, 지금은 기본 버튼 블록에서 아래쪽에는 버튼에 박스 그림자를 설정할 수있는 세 개의 패널이 더 있습니다 그림자 속성 및 호버 설정도 포함됩니다 이것은 멋지게 보이고 향상시킬 수있는 양방향 버튼을 만드는 데 충분합니다 전환 수

블록을 몇 개 추가하면 일부 변경을 원할 수 있습니다 다행히도 새로운 블록 편집기는 콘텐츠를 수정하는 데 매우 유연합니다 형세 예를 들어, 블록을 삭제하려는 경우 위에있는 옵션 아이콘을 선택할 수 있습니다 블록 제거를 클릭하십시오

블록 위로 마우스를 가져 가면 위쪽 및 아래쪽 화살표를 사용하여 원하는대로 블록을 다시 정렬 할 수 있습니다 또는 화살표 사이에있는 6 개의 점을 클릭하여 드래그 앤 드롭을 사용하여 블록을 이동할 수도 있습니다 블록 편집기에는 빠르게 삭제하는 데 도움이되는 여러 개의 키보드 단축키가 포함되어 있습니다 블록을 삽입하거나 새로운 블록을 삽입하십시오 모든 키보드 단축키를 보려면 Shift + Alt + H를 입력하십시오

또한 멀티 컬럼 레이아웃을 생성 할 수 있다는 점은 주목할 가치가 있습니다 이것은 흥미로운 특징입니다 게시물에 Columns 블록을 배치하여 액세스 할 수 있습니다 이를 통해 최대 6 개의 병존 형 열을 만들 수 있으며 원하는 블록을 배치 할 수 있습니다 각자와 같이

독창적 인 레이아웃을 만들 수있는 가능성을 제공하는 옵션입니다 예를 들어, 가격 책정 섹션을 만들려면 열 수를 3으로 설정하고, 각 칼럼에 Otter가 제공하는 가격 책정 블록을 하나씩 추가하십시오 더 빨리 작업하려면 첫 번째 가격 책정 테이블을 사용자 정의한 다음 복제하고 드래그하여 다음 칼럼으로 넘어 갔다 마지막으로 중요한 것은 포스트 와이드 또는 페이지 와이드 설정에도 여전히 액세스 할 수 있다는 것입니다 오른쪽 사이드 바에서 문서 탭을 클릭하여 찾으십시오

이전에 설치 한 Neve WordPress 테마는 더 많은 옵션을 제공합니다 WordPress의 최신 기본 테마 인 Twenty Nineteen을 사용하면 몇 가지 옵션을 사용할 수 있습니다 Neve에서는 여기에서 게시물 설정을 변경할 수도 있습니다 컨테이너 및 사이드 바 옵션은 블로그 게시물 구조를 조정합니다 예를 들어, 사이드 바가 콘텐츠의 왼쪽에 있는지, 또는 오른쪽에 사이드 바가없는 게시물을 만들 수 있습니다

이 설정 바로 아래에서 헤더, 제목, 추천 이미지 및 바닥 글 꺼려는 구성 요소 상자를 선택하십시오 그런 다음 콘텐츠 너비를 조정하려면이 상자를 선택하고이 매개 변수를 여기에서 변경하십시오 사이드 바가있는 경우 너의 너비가 사이드 바는 여기에서 설정 한 비율에 맞춰 조정됩니다 WordPress 블록 편집기에 대한 가장 강력한 기능 중 하나는 플러그인은 모든 종류의 새로운 블록을 추가합니다

사실 좋아하는 플러그인 중 일부는 이미 자체 블록을 추가했을 수도 있습니다 그 외에도 새로운 블록을 추가하는 데에만 집중하는 수많은 플러그인을 찾을 수 있습니다 앞에서 언급 한 Otter Blocks 플러그인은 고급 섹션의 블록을 제공합니다 여기에서 바로 사용할 수있는 다양한 템플릿을 찾을 수 있습니다 이 드롭 다운에서 카테고리별로 필터링 할 수 있으며이 템플릿을 삽입 할 수 있습니다

예를 들어, 귀하의 블로그 게시물에 그렇게 그런 다음 필요에 따라 컨텐츠를 편집 할 수 있습니다 더군다나, 포스트 그리드 블록, About Author 블록, Advanced Heading, 버튼 그룹, 글꼴 굉장 아이콘, Google지도, 플러그인 카드, 아이콘 공유, 가격 및 사용 후기 블로그 게시물 작성이 끝나면 카테고리와 태그를 선택하고 추천을 추가하고 이미지 등 토론 메뉴에서 주석 설정을 수정할 수도 있습니다

그러나 빈번한 간격으로 자동 저장되므로 콘텐츠를 저장할 필요가 없습니다 당신이 일하는 동안 실제로 블로그 게시를 게시하려면 게시 버튼을 두 번 눌러야한다는 것을 기억하십시오 이것은 WordPress 블록 편집기를 사용하기 위해 알아야 할 전부는 아닙니다! 그것에 대해 배울 점이 많지만 익숙해지면 각 선택 사항을 알게됩니다 다양한 블록 및 사용 가능한 기능을 실험 한 후에 제공됩니다

새로운 블록 편집기를 사용하는 것이 편합니까? 누락 된 것이 있거나 그렇지 않으면 작동하지 않는 것처럼 느껴 집니까? 아래의 댓글 섹션에서 그것에 대해 이야기합시다 나는 너의 마음 속에 무엇이 있는지 기다리고있다 WordPress에 대해 더 자세히 알고 싶다면 최근에 내가 간행 한 인기있는 비디오가 있습니다 자유롭게 그들을 확인하십시오 다음에 보자

Hide Any Item or Section on Your WordPress Website

이봐 요 다른 WordPress 수요일에 오신 것을 환영합니다

제 이름은 텍사스 주 샌 안토니오에있는 애쉬톤입니다 오늘 WordPress 웹 사이트에서 아무 것도 숨기는 방법을 보여 드리겠습니다 어쩌면 당신은 사이드 바가 마음에 들지 않거나 전체 섹션이있을 수 있습니다 당신이 원하지 않는 WordPress 웹 사이트에서 당신의 꼬리말이나 어떤 요소와도 관련이 있습니다 반드시 영구적으로 제거해야합니다

어쩌면 다시 넣고 싶을 수도 있기 때문입니다 하지만, 지금 당장은 숨길 필요가 있습니다 전혀 보여주지 않습니다 그걸하는 법을 보여주지 그것은 약간의 얼간이 코드 일뿐입니다

나를 따라 달라 자 간다 내가 한 예를 들어 줄게 이것은 우리가 정의한 새로운 웹 사이트입니다 아래로 스크롤하여이 팀 섹션이 여기에 있다고 가정 해 보겠습니다

큰 매출이 발생하고이 전체 팀 섹션을 숨기고 싶습니다 우리가 어떻게 그럴 수 있을까요? 결국, 다시 사용하고 싶습니다 맞습니까? 그래서 저는이 공간에서 마우스 오른쪽 버튼을 클릭하고 요소 검사라고 말하고 싶습니다 Firefox를 사용하고 있지만 원하는 모든 브라우저를 사용할 수 있습니다 그 요소를 조사 할거야

이 특정 섹션에서는이 테마를 코딩 한 제작자 (이 팀에서 사용자 정의 코드를 작성했습니다 이 섹션을 "팀 컨테이너"라고 불렀지, 그렇지? 우리가 그 위에 마우스를 가져 가면이 상자 뒤에있는 부분이 강조 표시됩니다 그래서 "팀 컨테이너"섹션 이것이 괴상한 코드라는 것을 알고 있기 때문에 놀라지 마십시오 하지만 우리가해야 할 일은 스타일 시트로 가서 스타일 시트 콜론을 표시하려면 "none"을 입력하십시오

그게 우리가하는 모든 것입니다 기본적으로 우리는 브라우저에 "이 섹션을 표시하지 마십시오"라고 말하고 있습니다 지금 당장이 섹션을 숨길 것입니다 이것 좀 봐

그것은 완전히 숨겨져 있습니다 우리가 그것을 다시 사용할 필요가있을 때를 대비하여 제거되지 않았습니다 그러나 그것은 완전히 숨겨져 있습니다 나는 또 다른 빠른 예를 들어 줄 것이며, 영구적으로 스타일 시트를 작성하여 효과적으로 만들 것입니다 진실로, 만약 내가 방금 빠른 리프레쉬를했다면 섹션은 실제로 거기에있다

Inspect 요소 내부에서 내가하고있는 일은 해당 컨테이너 또는 해당 dev 클래스의 이름 (기본적으로 작성자가 코딩 한 상자)을 찾으려고합니다 나는 그들이 그것을 숨길 수 있도록 이름이 무엇인지 밝혀 내기 위해 노력하고 있습니다 그래서, 어떻게하는지 보여 드리죠 바로 위에,이 웹 사이트에서 사이드 바 전체를 숨기고 싶다고합시다 나는 마우스 오른쪽 버튼을 클릭 할거야, 나는 요소를 조사 할거야

그리고 이걸 보러 올거야 그건 사이드 바 야 아냐, 여기가 바로 여기있는 부분이야

사이드 바, 사이드 바로 오른쪽 사이드 바, 사이드 바를 올리고 "디스플레이 없음"이라고 말하면서 그것은 숨겨져 있습니다 우수한 그래서 바로 여기 제가 영향을 주어야 할 수업이 있습니다 그걸 내 클립 보드에 복사하고 대시 보드에 들어갈거야 우리는 사용자 정의 섹션으로 건너 뛸 것이고 기본적으로 사용자 정의 CSS 상자를 찾고 있습니다

맞습니다 우리는이 특정 주제에 대해 아래로 스크롤하여 추가 CSS로 이동합니다 우리가해야 할 일은 그 부분을 붙여 넣기 만하면됩니다 "display none"이라고 말하면 저장하고 게시 할 것입니다 자, 내가 돌아가서 새로 고침을 클릭하면 실제로 완전히 사라지지 않을 것입니다

네가 얼마나 멋있 니? 나는 닉에게 외쳐야하고, 내가 가지고있는 최고의 리뷰 중 하나를 꽤 오랫동안 가지고 있어야한다 그것은 매우 달았다 고마워, 너희들, 격려를 위해서 안녕, 모두

How to override styling of WordPress content with CSS

– [Brian] 안녕하세요, Brian Hogg 여기, 이벤트 캘린더 쇼케이스 및 블록 프로의 제작자, 내가 찾는 방법을 보여주고 싶다 귀하의 사이트에 CSS 규칙을 추가하십시오

CSS는 CSS (Cascading Style Sheets)의 약자로, 당신이 정의 할 수있는 방법입니다, 말하자면, 이 사건들 사이의 공간, 어쩌면이 버튼의 색깔, 어쩌면이 텍스트의 일부 스타일링, 그리고 아마도 각 이벤트의 배경색 등등, 그래서이 규칙들을 어떻게 찾습니까? 어떻게 WordPress 사이트에 추가 할 수 있습니까? CSS를 배우는 방법에 대한 많은 훌륭한 자료가 있습니다 그리고 정확히 무엇을하는지, 그러나 나는이 비디오를 희망한다 실용적인 예제가 될 것입니다 바로 사용할 수 있습니다 더 많은 것을하고 싶다면, 거기에 많은 자원이 있습니다

예를 들어, 우리는이 사진 웹 사이트를 가지고 있습니다 그리고 그들은이 현재의 밑에 shortcodes를 추가했다 및 예정된 이벤트 제목, 이벤트를 보여 주기만하면됩니다 하지만 너무 많은 간격이 있습니다, 말하자면, 제목과 행사 시간 사이 어쩌면 우리는 이것을 대담하게하고 싶지 않을 것입니다 어쩌면 우리는 간격의 일부를 바꾸고 싶을 것입니다

이 제목에서, 어떻게 그렇게 할 수 있습니까? 따라서 Chrome과 대부분의 다른 브라우저에서, 당신은 마우스 오른쪽 버튼으로 클릭하고, 검사하고, 이 창을 띄웁니다 여기서 모든 HTML을 볼 수 있습니다 그래서 코드는 이러한 이벤트를 출력하고 있다고 생각합니다 그리고 나서 CSS 규칙에 적용되는 CSS 규칙, 네가 원한다면, 실제로, 마우스 오른쪽 버튼을 클릭하여 검사를 할 수 있습니다 당신이 뭔가를 바꾸고 싶은 특정한 일, 어쩌면 색상이나 글꼴 크기를 변경하고 싶을 수도 있습니다

이 제목의, 그러나 당신은 또한이 작은 화살을 사용할 수 있습니다 상자가 있으면 주변을 둘러 볼 수 있으며 클릭 할 수 있습니다 당신이 바꾸고 싶은 아주 구체적인 것에 그래서, 우리는 이것을 볼 수 있습니다 여기에이 규칙이있다 오, 글꼴 크기, 26 픽셀, 좋아

그래서 그것이 그 크기입니다 선택을 취소하고 확인할 수도 있습니다 이 규칙이 없으면 어떻게 될지보고, 너는 그것을 바꾸고 싶다 그래서 나는이 특별한 규칙을 바꾸고 싶다고 말했습니다 26에서 다른 크기로

따라서 규칙을 무시하는 가장 좋은 방법은 말 그대로 복사하는 것입니다 그래서 이것을 클릭하면, 규칙의 모든 부분을 자동으로 강조 표시합니다 그리고 나는 이것의 각 조각이 무엇인지 조금씩 이해할 것이다 초 안에,하지만 만약 내가 이것을 복사, 그래서 어쩌면 마우스 오른쪽 버튼으로 클릭하고 복사, 그리고이 작은 플러스를 클릭하면 이것은 브라우저에있는 것입니다 이것은 실제로 귀하의 사이트에 저장되지 않습니다, 하지만이 플러스를 클릭하고 붙여 넣으면, 당신은 볼 수 있습니다, 지금, 나는 똑같은 규칙을 가지고 있습니다, CSS가 계단식 연결이기 때문에, 똑같은 규칙을 보여주는 무언가 나중에 나타날 것이고, 그것이 나타날 곳입니다

내가 작은 사용자 정의 프로그램에 들어가거나, 나중에 있기 때문에 더 많은 선례가있을 것입니다 발생하는 모든 것을 무시합니다 또는 그 전에 온 규칙, 그래서 내가 이걸 넣으면, 비록 그것이 위에 있더라도, 그것은 나중에, 그런 다음 글꼴 크기 (36 픽셀)로 이동하면 볼 수 있습니다 멋지군, 그 글꼴의 크기가 커졌어 그래서 나는 CSS 규칙이 정확하다는 것을 알고 있습니다

글꼴 크기가 36이라는 것을 알고 있습니다 실제로 위아래 화살표를 사용할 수 있습니다 크기를 바꾸려면 어떻게 보이는지 보자 내가 바꿀 수있는 많은 다른 규칙이있다 어쩌면 색깔, 이 글꼴 색이어야합니다, 그래서 내가 말할 수있는 빨강, 그리고 다른 붉은 색 무리가 있습니다

또는 당신은이 16 진수 코드라고 불리는 것을 사용할 수 있습니다 그래서 그것은 훌륭한 색상이 아니며, 거의 흰색입니다 그건 검은 색 같아서 16 진 코드를 찾을 수 있어요 및 색상 코드, 방법이 많이 있습니다 그것이 당신이하고 싶은 것이면 다른 색깔을 찾아야합니다

간격을 볼 수도 있습니다 따라서 패딩이 있습니다 그것은 말할 것입니다, 아마도 심지어 패딩 맨, 어쩌면 너는 조금 더 많은 공간을 원할지도 모른다 이 텍스트와 그 위에있는 것 사이에, 그래서 5 픽셀이나 25 픽셀처럼 말할 수 있습니다 그래서, 그것은 다른 규칙 때문에 적용되지 않습니다

그래서 때로는 볼 수 있듯이, 그들은 다소 서로 무시한다 그래서 때로는 주변에서 놀고보아야합니다 어떤 규칙이 일어나고 있는지 다시 한번, 확인하고, 선택을 취소하고, 영향을 받는지 확인할 수 있습니다 그래서, 그것은 그 하나에서 작동하지 않습니다 그러나 간격이 어디에 있는지 어떻게 알 수 있습니까? 이 이벤트 사이 여기 그런 다음이 두 텍스트 사이에있는 다른 텍스트는 무엇입니까? 그래서, 내가 주변을 좀 더 강조한다면, 당신은 여기에서 할 수 있습니다

또는 나는이 화살에서 그것을 여기에서 할 수있다, 그리고 당신은 내가 이것을 좀 클릭한다면, 좋아, 그럼이게 링크 야 그러나 그 주위에이 h2 또는 heading2 태그가 있습니다 내가 그걸 클릭하면 그걸 좀 볼 수 있습니다 상단과 하단 사이의 오렌지색 간격, 맞습니까? 그리고 내가 여기를 내려다 본다면, 나는 볼 수있다 이것은 다소 희미 해져서, 그러나이 특정 h2에 대해, 당신은 테마, WordPress 테마가이 규칙을 추가하고 있습니다

래퍼의 경우,이 포스트 – 컨텐트 h2, 글꼴 크기를 30으로 늘리면 내가 아래로 스크롤하면, 간격에 대해 뭔가 있어야합니다 왜냐하면 너는 그것이 패딩과 같은 것을 볼 수 있기 때문이다 상단 및 하단, 또는 마진에 따라 다릅니다 오, 거기 있네 그래서, 당신은 마진 상단, 마진 바닥, 그리고 만약 내가 그것을 클릭하면, 위대한

그래서, 당신은 이것이 일어나는 규칙이라는 것을 알 수 있습니다, 그리고 만약 내가 그것을 제거한다면, 그 간격은,이 안에, 나는 단위를 정확히 알지 못한다 그러나 그것은 픽셀 대신 공간을 측정하는 방법입니다 그래서 내가 체크하고 체크하지 않으면, 당신은이 마진 최고 규칙, 마찬가지로 마진 바닥 규칙, 얼마나 많은 간격을 결정하는지 이 작은 블록의 전후에, 그래서 이것은 단지 h2입니다 따라서 이것은 매우 쉬운 규칙입니다 그래서 확실하지 않아요

이걸 클릭하고 플러스를 누르면, 아니, 그래서 내가 여기에 플러스를했을 때, 그것은 어떤 규칙을 사용할 지 제안 할 것입니다 어쩌면 이것이 효과가 있을지 모르지만 이것은 매우 구체적입니다 그래서 이것은 말하고 있습니다, 좋습니다, h2의 경우, 나는이 종류의 ecs-event-title을 가지고있다, 바로 거기, 또한이 글꼴에는 ll-at-font 클래스가 있습니다 나는 이것이 주제에 의해 추가되고 있다고 생각한다 이 크기, at-line-height, 그래서 그들 사이에 공간이 없기 때문에, 이 점은 여기이 수업입니다

그리고 공간이 없으므로, 그것은 h2와 같습니다 이 클래스와이 클래스 이 수업과 그 밖의 모든 것들 그래서, 우리는 그렇게 구체적 일 필요가 없을 수도 있습니다 그래서 그냥 h2 시도하자 그리고 나서 우리는 무엇을 마진 – 최고 제로

거기에 당신은 간다 그래서 나는 그렇게 구체적 일 필요가 없다 사이트의 모든 h2s에 대해 말할 수 있습니다 마진 상단을 0으로 변경하십시오 그래도 그걸하고 싶지 않을지도 몰라

나는 이것을 실제로이 것에 적용하고 싶다 아마 내가 말할 수 있습니다, 알았어, h2ecs-event-title 거기에서, 당신은 그것이 아직도 제거를 유지했다는 것을 볼 수있다 상단 간격의

선택을 취소하면이 규칙이 적용됩니다 ECS 내의 h2s에, 그래서 사건 달력 단축 부호 제목 이제 사이트의 나머지 부분에는 영향을 미치지 않습니다 내가 더 구체적으로 만들었 기 때문에 이 h2s를 위해있을 것입니다

그래서 그것은 다소 멋지다 그래서, 나는 빨리 끝났어 그래서 점은 우리 수업을위한 것입니다 H2는 여기에있는이 요소입니다 그리고 네, 당신은 단지 어떤 것들이 적용되는지 보려고합니다

당신은 아직도 그것을 볼 수 있습니다, 아, 그 아래에 약간의 간격이 있습니다 그래서 내가 말하면, 여백 바닥, 제로, 너 거기 간다 그리고 새로 고치거나 사이트에 추가 한 경우 다음 스크립팅을 사용하기 때문에 새로 고침됩니다 이 Pinterest 스타일 레이아웃이 어떻게 작동하는지 알아 내기 위해, 이 규칙을 추가하면 새로 고침됩니다 이 간격을 여기에서 약간 제거 할 것입니다

그래서 네가 추가하거나 찾는 방법입니다 몇 가지 규칙을 찾는 방법에 대한 몇 가지 예가 있습니다 만약 내가 이것을 사이트에 추가하고 싶다면, 나는 이것을 복사 할 수있을 것이다 그래서 내가 그것을 강조하면, 그것은 조금 이상하게 보입니다 왜냐하면 나는이 체크 박스가있는 것 같아

그런 다음 모든 것을 강조하고 있습니다 괜찮습니다 그리고 내가 사이트에 들어가면, 그래서 나는 그 특정 사이트에 접근 할 수 없다 하지만 당신이 당신의 워드 프레스 사이트에 로그인했다면, 상단에 맞춤 설정 링크가 표시됩니다 그리고 그것을 클릭하면, 그런 다음 여기에서 Additional CSS (추가 CSS) 방금 붙여 넣은 규칙을 추가 할 수있는 곳입니다

그래서 지금, 내가 붙여 넣으면, 미안해, 복사, 그래서 내가 그 규칙을 붙여 넣으면, 내가 체크하지 않았기 때문에 주석 처리 된 것을 볼 수 있습니다 그리고 나는 그것을 삭제할 수있다 그래서 지금 말하고 있습니다 좋습니다 h2를 ecs-event-title 클래스와 함께 사용하면, margin-top 제로, 그리고 거기에 가라

그럼, 내가 그 페이지를 게시하면 페이지가 새로 고쳐집니다 더 적은 간격으로 표시되어야합니다 이 규칙이 무엇인지에 따라 그래서 우리는 많은 일을 겪었습니다 우리는이 규칙들이 어디서 왔는지 이해합니다 이것들은 요소들에 대해이 클래스들을 사용하고 있습니다

예를 들어, 이것은 실제로 플러그인 자체가 추가됩니다 그래서 어떻게 이런 일이 생길까요? 그래서, 우리는이 ecs-event를 얻었습니다, 그래서 그것은 어디에 있습니까? 그래서 당신은 실제로는 할 수 없습니다 왜냐하면 만약 당신이 이것을 가리키면, 그것은 단지 당신에게 링크를 보여주는 것입니다, 해당 규칙과 일치하는 모든 링크를 강조 표시합니다 그러나 내가 조금 위로 스크롤하면, 그리고보기가 좀 어렵습니다 특히 더 복잡한 사이트에서는 멋진 것을 볼 수 있습니다

그래서 이것은 ecs-events 클래스가 나오는 곳입니다 ecs-events가있는 div 요소입니다 그건 좀 포괄적 인 래퍼 야 이 특정 단축 코드의 모든 이벤트에 대해, 그리고 당신은 그것이 또한이 ecs-grid 클래스를 가지고 있음을 볼 수 있습니다, 그래서 그것도 가지고 있기 때문에 공간이 없습니다 이 ecs-events와 ecs-grid 사이

ecs-grid-1도 있다는 것을 알 수 있습니다 그래서 이것은 단문의 특별한 경우입니다 한 페이지에 두 개 이상 가질 수 있습니다 두 번째 숫자는 숫자 2와 숫자 3이 될 것입니다 등등, 그러나 당신은 그것을 알 필요가 없습니다

이 div에 ecs-events가 있음을 알 수 있습니다 ecs-grid, ecs-1, ecs-event로 구성됩니다 여기에 공간이 있습니다 그런 다음, ecs-event ecs-event는 어디에 있습니까? 그래서 각각 하나, 그래서 이것은 모든 사건들입니다

이제 각 이벤트에는 ecs-event 클래스가 있습니다 그래서 공간이 있습니다 지금이 안에있는 것이기 때문에, ecs-events, ecs-grid, ecs-1 이제 저는이 ecs-events들 각각을 일치시키고 싶습니다 그래서 그 안에, 그리고 그 안에, 이제 가봐야 겠어,이 단어 요약 어디서, 오, 우리가 간다

이제는 요약 된 수업이 있습니다 여기에는 다른 수업이 있습니다 하지만 하나만 지정하면됩니다 조금 더 구체적으로 만들려면, 이 링크 태그는 여기에 있습니다 그래서, 좋아, 좋아

이 ecs-event div 내에있는 모든 것 또한이 요약서에있는 이벤트에도 해당됩니다 그런 다음 각 링크에 대해 글꼴 크기를 26 픽셀로 설정하십시오 그래서, 그것은 일종의 예입니다 그 규칙은에서 왔고, 또 하나의 예로서, 그래서 우리는 글꼴 크기를 변경하고 싶다고 말했습니다 이 h2에 지정된 글꼴 크기가 있습니다

그래서이 포장지는 어디 있습니까? 이 래퍼, 사후 내용 h2, 그게 어디서 오는거야? 그래서, 좀 더 어색함이 있습니다 그래서 내가 클릭하면, 실제로, 나는 다시 여기로 갈 것이고, 단지 그 h2를 강조하기 위해, 그래서 당신이 Mac에서 Command F를한다면, Windows에서 Control F 일 가능성이 높습니다 찾기, 그래서 지금, 알았어, 내가 어디에서해야하니? 그래서 선택자 또는 XPath, 그래서 내가 래퍼를하면 거기에 간다 내가 Enter를 누르면, 또는이 작은 위아래 화살표를 사용할 수 있습니다 그리고 당신은 그것이 div 래퍼를 가지고 있음을 볼 수 있습니다, 그래서 래퍼입니다

전체 페이지의 거의 대부분을 강조하고 있습니다 해시 또는 파운드 기호입니다 클래스 대신에 ID이기 때문에, 당신은 오직 가지고 있어야하며, 오직 하나의 요소가 있어야합니다 또는 특정 HTML 요소가있는 페이지의 HTML 요소, 그래서 매우 구체적입니다 래퍼 (wrapper)라는 ID를 가진 요소 중 하나입니다

그래서 그것은 파운드입니다, 그리고 나서, 게시물 내용은 어디에서 오는가? 그래서, 우리는 post-content를 가지며, 몇 가지 규칙을 설정합니다 따라서 포스트 컨텐트는 페이지의 대부분과 같습니다 래퍼의 div ID가 있습니다 우리는 여기에 포스트 컨텐트를 가지고 있고 그 안에 h2s를 가지고 있습니다 우리는 30의 글꼴 크기를 원한다고 말하고 있습니다

그리고 나서,이 특별한 규칙에는 다른 것들이 많이 있습니다 그래서 쉼표는 단지 ​​그것을 말하는 것입니다 좋습니다 이 글꼴 크기를 30으로 지정하고 싶습니다 래퍼를 넣는 대신에 지정할 수 있습니다

또는 포스트 – 콘텐트 h2, 폰트 크기 30, 그 다음 다른 하나, 래퍼, 제목 h2, 글꼴 크기 30, 하나의 CSS 규칙으로 모두 묶을 수 있습니다 쉼표로 구분하고 글꼴 크기를 입력하십시오 그래서 몇 가지 예입니다 그 규칙들이 어디서 왔는지, 그리고 당신이 어떻게 그것들을 읽을 수 있는지, 희망적으로 그것들을 조금 이해한다면, 하지만 때로는 약간의 실험이 필요합니다 어떤 규칙이 더 좋은지에 관해서

이제 다른 예를 하나 살펴 보겠습니다 그래서 이것은 다른 사이트입니다, 우리는 이러한 이벤트를 출력합니다 사이드 바의 단축 코드로, 그리고 지금, 그들 사이의 간격을 어떻게 바꿀까요? 그래서, 마우스 오른쪽 버튼으로 클릭하고 어딘가에 대해 조사하면, 방금이 Pauma Valley를 선택했습니다 위치를 클릭하면, 나는 어떤 간격이라도 정말로 보지 않고있다 그래서 나는 약간의 간격, 장소 세부 사항, 하지만 지금, 특정 행사에 가면 거기에 가야합니다

그래서, 이제 당신은 볼 수 있습니다, 그것은 색깔을 바꾸지 만, 이전에 오렌지 였음을 기억할 수 있습니다 그리고 지금 그것은 다소 초록색이지만, 당신은 볼 수 있습니다 좋아, 그게 패딩의 일부가 나오는 곳이야 그래서 나는 ecs-events, default, default-1을 볼 수있다 그래서 우리의 ecs-events, default, default-1, 그리고 지금, 각각의 사건들에 대해, 두 이벤트를 강조 표시 한 것을 볼 수 있습니다

padding-top 대신 padding을 추가하자 패딩 – 바닥, 또는 우리는 margin-top, margin-bottom, 이 바로 가기를 사용하고 있습니다 그리고 말하는거야 좋아, 175em

다시, 나는 단위를 정말로 모른다 또는 아주 잘 설명 할 수는 없지만, 그러나 그것은 얼마나 많은 공간을 지정하는지, 그리고 당신은 그것이 번역 된 것을 볼 수 있습니다, 왜냐하면 그것은 단지 이것과 그 다음에 0이기 때문에, 그것은 위쪽과 아래쪽이 175, 그리고 나서 왼쪽과 오른쪽은 0입니다 그래서, 만약 내가 제거하거나 줄이려고 얼마나 많은 공간이 그 사이에오고 있는지, 당신이 볼 수 있습니다, 만약 내가 그냥 확인하고 선택을 취소하여 제거, 그거 꽤 좋아 보인다 그것은 공간의 대부분을 제거하고 있습니다

그래서 조금 더 읽기 쉽습니다 그래서, 여기에 플러스를 클릭하면, 다시 시도하고 제안 할 것입니다 그것은 실제로 범주별로 그것을하고 있습니다 이것은 버스 스케줄의 카테고리를 가지고 있습니다 또한 특별 행사, 그거 멋지네

그래서 네가 실제로 지정할 수있어 다른 배경색 또는 색상 다른 카테고리별로, 이 클래스들이 여기에 있기 때문에, 나는이 정확한 규칙을 원한다고 말합니다 나는 이것을 복사 할 수 있습니다, 그래서 우리는 이것을 여기 복사 할 것입니다, 여기에 붙여 넣으세요 그런 다음 패딩을합니다 예를 들어, 0에서 맨 위, 그 다음 패딩 – 하단에도 0이 표시됩니다

그럼, 지금,이 특별한 규칙으로, 0의 위와 아래를 지정함으로써, 나는 지금 이것을 얻는다 그래서 지금, 이벤트 사이에 공간이 적어지고 훌륭합니다 다시 복사하여 붙여 넣을 수 있습니다 이걸 복사해서 내 사이트로 간다 그래서 이것이 당신의 사이트라면 로그인 한 상태라면 상단에 링크가 있습니다

맞춤 설정 도구로 이동하지만 다시 나는이 사이트에 접근 할 수 없기 때문에, 예를 들어 상단의 맞춤 설정 도구로 다시 이동하십시오 너는 여기있을거야 그러면 이제 붙여 넣을 수있어 이 다른 규칙은 이것으로, 내가 이것을 저장하면, 잘하면 그것이 나타납니다 그래서, 그렇지 않다면 궁금해 할 것입니다

좋아, 왜 안돼, 내가 그것을 구할 때 적용하고, 왜 작동하지 않는거야? 그래서 때로는 규칙이 여기에있을 겁니다 중요하거나 중요하지 않다고 말함으로써, 당신은 그 규칙을 훨씬 더 구체적이고 중요하게 만들고 있습니다 순서가 다른 경우에도 재정의합니다 왜냐하면 당신이 재정의하려고하는 규칙이 이 사용자 정의 프로그램이 어디에 있든간에 또는 당신의 워드 프레스 테마는 그 규칙을 넣을 것이고, 여기에 중요한 것을 넣어야 할 수도 있습니다 이 파운드를 넣는 것이 일반적으로 최선의 방법은 아닙니다

또는 미안, 감탄 부호는 거기에서 중요하다, 왜냐하면 그것은 다른 누군가가 그때까지 더 힘들게하기 때문입니다 들어가서 무시하십시오 하지만 이것이 마지막으로 덮어 쓰기이기 때문에 네가하고있는 마지막 일, 이 중요한 부분을 여기에 추가 할 수 있습니다 그리고 다른 일들이 일어날 수도 있습니다 아마 다른 일이 벌어 질 수 있습니다

다시 말하지만,이 중요한 일종의 시도하고 무시할 수, 그래서 그것은 시도하는 첫번째 물건이다 각 규칙의 끝 부분에 중요성이 추가됩니다 그래서 여기서도 말하십시오 그것을 다시 저장하고, 그것을 게시하고, 그것이 당신을 속이는가보십시오 그렇지 않으면 더 구체적으로 만들어야 할 수도 있습니다

다시 한번, 당신은 CSS 특이성을 읽을 수 있습니다 그러나 본질적으로, 추가 된 이들 각각의 것들 규칙에 약간의 가치가있는 것 같네요, 그렇죠? 이전에 기억한다면 래퍼 ID가 있습니다 그래서 당신의 주제에 따라 다를 수 있습니다, 하지만 규칙을보고 추가하는 경우 래퍼의 ID가있는 곳에 이 신분증은 10 점을줍니다 그것은 매우 구체적이기 때문에 많은 점수와 같습니다 이 ID를 가진 페이지에는 하나의 요소 만있을 수 있습니다

그래서 당신은이 규칙이 훨씬 더 구체적이라는 말을하고 있습니다 그것을 추가함으로써, 그래서 그것을 추가함으로써, 게다가 다른 모든 것들, 당신은 그 규칙을 더 구체적으로 만들고 있습니다 그것없이 단지 이것을 갖는 것보다, 그리고 그렇게하면, 다시, 다른 규칙을 무시할 수 있어야한다 이 중요하지 않고 그래서, 당신은 완전히 그것을 시도하고 읽을 수 있습니다, 이 클래스들처럼, 둘 이상을 추가하면, 나는 그것이 더 많은 특이성을 추가한다고 믿는다

나는 그들이 한 점처럼 가치가 있다고 생각한다 ID 당 10 대신에, 더 많은 것을 추가함으로써 그냥 좀 더 구체적으로 만들고, 그게 너에게 좋은 기회 야 결국 중요한 태그를 추가 할 필요없이, 하지만 여전히 그 트릭을 할 것입니다 그래서 내가 마지막으로 보여주고 싶었던 마지막 한가지 어떻게 찾았습니까? 따라서 스크롤하는 경우 너도 마찬가지야, 여기 규칙이 많아 어떤 색상이 적용되고 있는지 어떻게 알 수 있습니까? 그래서 당신은 볼 수 있습니다

좋아요이 색깔은 제로였습니다 그것은 검은 색입니다 그리고 나서이 다른 규칙이 들어 왔습니다 그것이 더 구체적이거나 나중에 나타나기 때문에, 당신은 이것이 밖으로 횡단 되어진 것을 볼 수 있습니다, 그래서 이건 적용되지 않습니다

하지만 이건 적용되고있어 하지만 당신은 스크롤을 통해 그리고 당신은 알아 내려고 노력하고 있습니다 좋아요, 어떤 규칙이 적용되고 있습니까? 약간 혼란 스러울 수 있으므로 작은 도구가 하나 있습니다 Chrome에서이 계산 된 부분입니다 따라서 실제로 어떤 패딩이 적용되는지 확인할 수 있습니다

국경, 만약 있다면, 여백, 여백입니다 이것은 패딩입니다 하지만 아래로 스크롤하여 실제로 볼 수도 있습니다 적용되는 모든 다른 규칙 이 특정 요소에, 그래서 사실, 강조하겠습니다 어쩌면 h2, 그리고 당신이 볼 수있는, 내가 주위를 클릭, 그것은 적용되고있는 다른 규칙을 보여줄 것이고, 너에게 아이디어를 줄거야

추가 할 수있는 규칙은 무엇입니까? 그래서 우리는이 폰트 스타일, 폰트 크기, 폰트 패밀리는 어느 폰트인지를 말한다 이것은 테마, 그 특정 글꼴에서 오는 것입니다 라인 높이와 문자 간격을 볼 수 있습니다 그래서 그것은 글자 사이의 간격입니다 몇몇 다른 아주 일반적인 것은 색깔, 그래서 그것은 폰트 그 자체 일 것입니다

그리고 이것은, 당신이 배경색을 가질 수 있다고 생각하지 않습니다 어쩌면 할 수 있겠지만, 더 많은 div, 때로는 배경색을 가질 수 있습니다 따라서 이것은 배경색이 지정되지 않았습니다 하지만 내가 들어갔다고 말하면, 그래서 이것은 요약입니다, 아마도 ecs-events입니다 그래서 각 이벤트에 대해, 나는 다른 배경색을 원한다

그래서이 플러스를 클릭하면, 당신은이 ecs-event, et cetera 등등을하는 것을 볼 수 있습니다 나는 이것을 제거 할 수있다 그 모든 수업이 필요 없어 나는 모든 ecs-event를 원한다 또는 ecs-event가있는 모든 요소, 나는 그것이 배경색을 빨간색으로하고 싶다

네, 그렇게 잘 안 보이네요 어쩌면 좀 더 미묘한 것, 어쩌면 #fafafa 아니, 사실 그건 정확히 똑같은 것 같아 라이브 코딩의 즐거움, 일이 잘 풀리지 않습니다 거기에 당신은 간다

그래서 그것은 조금 회색이다 다시 말하지만 디자이너는 아니지만 각 이벤트에서 원하는 배경색 그리고 배경색을 추가함으로써, 이제 계산으로 돌아 가면, 실제로 그것을 추가하지는 않습니다 어쩌면 내가 클릭 한 다음 다시 클릭하면, 거기에 우리가 간다, 그래서 그것은 실제로 자동적으로 리프레시하지 않았다 그러나 지금, 내가 뭔가를 클릭하고 다시 클릭 할 때, 이제 우리는이 배경색을 볼 수 있습니다

이 작은 아래쪽 화살표를 클릭하면 당신은 알 수 있습니다 클래스 ecs-event를 가지고 있기 때문에, 이 배경색이 지정되면, 그리고 그것은 실제로 저에게 정확히 어디로 링크를 제공합니까? 해당 규칙이 적용되고 있으므로 스타일 시트 내에서 여기에 표시됩니다 사용자 정의 프로그램에 추가 한 경우, 아마 당신을 페이지의 특정 부분으로 뛰어 넘을 것입니다 다른 예를 살펴 보겠습니다 그래서, 우리는 색깔을 가지고 있습니다, 당신은 이것이 추가되고 있음을 볼 수 있습니다

거기에 몇 가지 스타일이나 스타일 시트가있는 것 같습니다 그래서 내가 그것을 클릭하면 실제로로드 될 것입니다 스타일 시트는 모두 압축되었으므로, 모든 것이 한 줄에 들어 있으므로 훌륭한 예가 아닙니다 아마 여기에서 하나 보자 그래서 내가 여기에서 포장을 보았다면, 그래서 그것은 단지 랩입니다, 그것은, 사이드 바에 대해, 여기에 배경색이 있습니다

그래서 저는 배경색으로 돌아가서 여기 색인을 달았습니다 다시 한번, 한 줄에 모두 있습니다 그래서 그것은 그 좋은 예가 아닙니다 어쩌면 또 다른 것이있을 것입니다 그래, 이건 CSS 파일에서 나온거야

우리가 간다 그래서 조금 나아졌다 그래서 당신은이 특별한 규칙이 주요 태그 중 하나 인 body 태그에 귀하의 페이지에 대한 최상위 레벨 또는 최상위 레벨, font-family 또는 font를 추가하고 있습니다 font-size, line-height는 모든 것을 추가합니다 그래서, 어디서 왔는지 정확히 알 수 있습니다

계산 중이거나이 링크를 클릭하면 너는 그것들을 볼 수있다 그것을 위해 오버라이드되고있다 그리고 스타일을 결정할 때, 당신은 또한이 링크를 여기에서 클릭 할 수있다, 알았다, 이 특별한 규칙은 어디에 추가됩니까? 그걸 클릭하면 좀 볼 수 있습니다 일반적으로 테마에 대한 실제 CSS 파일 그것이 어디에 추가되는지, 그래서이 계산 탭, 슈퍼 볼 도움이 적용되는 규칙 어떤 항목을 덮어 쓸지 결정할 수 있습니다 그래서 그것은 크래시 코스였습니다

희망이 도움이 되었습니까, CSS 규칙을 변경하고 찾을 수있는 방법에 대해 귀하의 사이트에 적용되고있는 이벤트를 추가하는 좋은 방법을 찾고 있다면 현대 부족의 이벤트 캘린더를 사용하여 사이트에 다른 페이지 또는 사이드 바로 가기에 추가하고, 이벤트 캘린더를 확실히 확인하십시오 Shortcode & Block Pro, 그리고 당신은 잘하면 될거야 필요하다면 약간의 CSS 추가를 조금 더 확신 할 수 있습니다 이러한 디자인 중 하나를 변경하십시오

What is CSS? What Does it Do? And What is it Used For?

안녕하세요! 이것은 WP를 획득 한 Topher입니다 이 비디오에서 우리는 질문에 답할 것입니다

CSS 란 무엇이며, CSS는 무엇이며 어떤 용도로 사용됩니까? 우선, CSS는 CSS 스타일 시트를 나타냅니다 계단식 스타일 시트는 웹 사이트의 내용이 보이고 때때로 작동합니다 보여 드리죠 여기 왼쪽에는 작은 웹 사이트가 있습니다 나는 함께 모였다

그리고 오른쪽에는 해당 웹 사이트의 코드가 있습니다 여기 하단에는 HTML이 있습니다 내 웹 사이트가 어디 있는지 알 수 있어요 내 웹 사이트에 오신 것을 환영합니다 그리고 링크가 있습니다

그리고 위로 여기에, 우리는 다른 것들을 가지고 있습니다 그 말은 스타일, 유형, 텍스트, CSS입니다 그리고이 페이지의 계단식 스타일 시트입니다 꼭대기에서 바로 여기에 시체가 있습니다 그리고 그것은 시체를위한 폰트 패밀리 내 웹 사이트가 Helvetica가 될 것입니다

우리가 그걸 가지고 있지 않다면, Arial, 그리고 우리가 그 글꼴을 가지고 있지 않다면 Sans-Serif 글꼴을 사용하십시오 그것은 또한 당신이 아래에서 볼 수있는 나의 H1 꼬리표 내 웹 사이트, 해시 태그 f00의 색상, 그것은 우연히 빨간 것입니다 나는 또한 여기에 링크가있다 그것이 A 태그, 앵커입니다 너는 바로 여기 그것을 볼 수있다

일반적으로 앵커 태그이므로 텍스트 장식 없음 밑줄이 있지만, 마우스를 가져 가면, 나는 밑줄이 그어진 텍스트 장식을 원한다 그래서 지금, 우리가 있습니다 자,이 텍스트는 모두 조금 작습니다 그러니 조금 더 커 보자 그래서, 몸 아래서, 나는 폰트 크기를 말할 것입니다, 우리는 22 픽셀을 말하고 다시로드 할 것입니다

그리고 거기에 있습니다 모든 것이 조금 더 커졌습니다 왜냐하면 모든 것은 그 본문 글꼴 크기를 기반으로하기 때문입니다 이제 CSS의 C는 계단식 문자를 나타냅니다 이는 우리가 상당히 구체적 일 수 있음을 의미합니다

우리 웹 사이트에서 우리가 말하는 부분에 대해서 말입니다 내가 한 가지 예를 들어 보겠다 중간에 바로 여기 섹션이 있습니다 그 안에 문단이 있고 그 아래에 문단이 있고, 그 안에 단락이있는 바닥 글이 있습니다 이제 모든 단락을 제어 할 수 있습니다

P 태그 만 있으면됩니다 그리고 나는 그들 모두를 이탤릭체로 표현할 수있다 이제 모든 단락은 기울임 꼴로 표시됩니다 그러나, 만약 내가 단지 섹션 안에있는 것을 원한다면 기울임 꼴로 표시됩니다 글쎄, 제 구역은 ID가 최고입니다

그것은 손잡이와 같은 이름입니다 그래서 해시 태그 상단 문단을 말할 수 있습니다 기울임 꼴로 표시됩니다 이제 바닥 글 안에있는 것이 아닙니다 다시 말하면, CSS의 C는 계단식 연결을 의미하며, 이는 내가 매우 구체적 일 수 있음을 의미한다

내 웹 사이트에서 CSS로 제어하고 싶은 것 이제, 너에게 한 가지 더 트릭을 보여주고 싶다 WordPress의 영역 여기 워드 프레스 웹 사이트에 로그인했습니다 관리 표시 줄에는 맞춤 설정 링크가 있습니다

그것을 클릭하면 사용자 정의 프로그램이 열립니다 이제 모든 맞춤 설정 도구가 WordPress에서 동일하지는 않지만, 하지만 그들은 모두 추가 CSS 탭이 있습니다 그리고 거기에 CSS를 입력하여 영향을 미칠 수 있습니다 귀하의 웹 사이트 예를 들어 헤더를 입력 할 수 있습니다

그런 다음 배경을 빨간색으로하십시오 그리고 지금, 모든 머리글에는 빨간색 배경이 있습니다 게시를 클릭하면 내 웹 사이트에 저장됩니다 대신이 X를 클릭하면 그냥 사라집니다 그래서 이것은 실험하기 좋은 곳입니다

귀하의 웹 사이트가 무엇을 볼 것인지를 확인하십시오 다른 CSS 조각이 적용되었습니다 CSS는 매우 간단합니다 매우 복잡하고 재미있을 수 있습니다 웹 사이트를 탐구하고 약간만 변경하십시오

그것을 독특하게 만드십시오 커스터마이징이 매우 쉽기 때문에, 나는 당신이 조금 실험 해보길 정말로 권합니다 당신이 그것을 좋아하는지보십시오, 당신의 웹 사이트를 바꾸십시오 너 정말 아무것도 해칠 수 없어 WordPress에 대해 더 자세히 알고 싶다면, winningwp

com을 확인하십시오

Divi – Add CSS to individual menu items in the Divi Theme

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

net 및 http://wwwgreat-webdesigncom/ 오신 것을 환영합니다 우리는 Divi 사용자 정의 비디오 모음집에서 계속됩니다 이 비디오는 우리의 톱 메뉴를 꾸미기 위해 여기에 있습니다 우리가 그것 위에 마우스를 가져갈 때 조금 더 흥미롭고 또한 우리는 하나를 줄 것입니다

우리 메뉴 항목의 CSS가 조금씩 다르기 때문에 나머지 부분과 크게 다르지 않습니다 내가하고 싶은 첫 번째 일은 내가 떠올랐다면 이것들 아래에 약간의 아래쪽 테두리를 두는 것입니다 그 (것)들에 그리고 그것을하기 위하여 나는 나가 원한 색깔을 찾아 내고 싶다 나는 가고있다 이 파란색 테마 색상을 계속 사용하려면 여기를 사용하여 color 나는 그 색깔의 무엇인가를 오른쪽 클릭하기 만하면된다 검사 버튼과 볼 수 있듯이 여기에 우리 색이 있습니다 방금 클릭하고 복사하면 멋지다

이제 클릭하기 만하면된다 이 메뉴 항목 중 하나는 여기에 상관 없어요 마우스 오른쪽 버튼을 클릭하고 다시 검사에 들어가십시오 여기에 우리가 있습니다 우리가 실제로 그것을 강조 표시 강조 표시 앵커 태그 다 나머지는 저기 거기에 트레스 내가 실제로 목록 항목 클래스에 그냥 나를 사기 위해되고 싶다

저기서 내 하숙인을 내려 놓고 싶기 때문에 내가 갈거야 앞을 클릭하고 클릭 횟수를 줄이십시오 여기에 내가 할 일은 두 픽셀의 테두리 아래쪽에 줄 것입니다 그 푸른 색으로 나는 그것을 고체의 2 개의 픽셀로하고, 그 차에 붙여 넣을 예정이다 우리가 지금 물고기를 두려워한다는 것은 굉장합니다 그러나 당신이 아무것도 모른다면 그냥 Google을 사용하고 당신이 찾고있는 것이 무엇이든지 넣으십시오

그냥 CSS를 넣을 수 있고 모든 종류의 것들이 여기에 올 것입니다 w3schools는 또한 실제로 할 수있는 게임을 할 수 있기 때문에 가능합니다 그것의 예 찾고있는 것이 무엇이든 거기에 해결책이있을 것입니다 모든 것이 잘 나는 둥근 구석 사이에 둥근 모서리를 만드는 법을 원합니다 코너 CSS 등 괜찮아 다시 우리 사이트에 당신이 볼 수있는대로 넣어 border-bottom : 거기에 그 색을 가진 단단한 이쑤시개가 있고 그것은 여기에 나타났습니다

좋아,하지만 우리는 항상 그걸 원하고 싶지 않아 우리가 그 (것)들에 공중 선회 할 때 나는 나의 로고의 밑에 그것을 원하지 않는다 여기 melargo는 보조 메뉴에 로고를 추가 한 또 다른 메뉴 항목입니다 여기에 그 문제를 먼저 다루겠습니다 내가하고 싶은 일은이 CSS를 여기 복사하여 복사합니다 내 왼쪽 마우스 버튼과 컨트롤 C 또는 마우스 오른쪽 버튼으로 클릭하고 복사 할 수 있습니다

그렇게하면 대시 보드로 돌아가서 Divi로갑니다 한 세트가 열리는 버튼 테마 옵션 아래에서 아래로 스크롤해야합니다 사용자 정의 CSS 상자를 조금만 확장하면 새로운 것을 넣을 수 있습니다 평소대로하는 것처럼 제목을 주려고합니다 우리가 원할 경우 찾을 수 있습니다

다른 시간에 편집해라 / var 별을 선택하고 중간에 4 개의 슬래시를 다시 넣고 제목을 넣으십시오 당신이 원하는 건 내가 전화 할게 내가 분명히 당신이 그것을 전화 메뉴 장식 전화 할께 너가 지금 그것을 찾을 수있는 한 너는 네가 원하는대로 뭐든지 붙여 넣을거야 우리가 가지고있는 약간의 코드 필요하지 않습니다

이미 거기에 있기 때문에 우리는 그것을 조정해야 할 수도 있습니다 나중에 우리가 우리가 꾸미고 나면 알게 될거야 우리가 거기에 넣을거야 우리는 빠른 저장을 할 것입니다 변경 사항을 저장하고 우리의 사이트로 돌아 가자 이것이 거기에 머물러 있는지 보아라

그래도 거기에있는 것을 보아라 그러나 내가 말했던 것처럼 지금 당장 우리 경감을 닫을거야 여기 항상 원하지 않는다 확실히 그 로고에 그것을 원하지 않습니다

그래서 우리가 우리가 다시 넣은 커스텀 CSS로 되돌아 간다 우리가해야 할 일을 마지막으로 작성한 사용자 정의 CSS는 지금 리에서 나는 결장을위한 공간을 두지 말고 다시는하지 않는 것이 중요합니다 공간을두고 바로 마우스를 가져 가면 지금처럼 빠르게 움직일 것입니다 저장하고 우리의 사이트로 돌아가서 빨리 새로 고침하고 그 라이닝을 볼 수 있습니다 내가 마우스를 가져갈 때 우리 메뉴 엔트리 밑으로 갔다

작은 선이 거기에 와야합니다 우리는 단지 작은 호버 효과가 있습니다 우리 메뉴 항목에 거기에 추가 된 괜찮아 그래서 우리는 가자 조금 더 멀리하고 싶습니다 나머지는 아마 그것 주위에 상자를 넣을 수도 있습니다

검색 버튼이 있습니다 좋아요 이렇게 강조 표시하고 검사하십시오 이번에는 href 태그에 태그를 붙이자 이 곳에서 내 맞춤 설정을 입력하고 싶습니다

여기에서 요소 스타일로 잠시 후에 수업을해야합니다 그게 걱정스러운 배경이야 그리고 만약 당신이 배경색을 변경하는 방법을 모르겠다면 그냥 구글 그곳에는 모든 종류의 결과가있을 것입니다 우리는 먼저 우리 색을 그려 내려고합니다 1 대 7-3 비키니가 되라

그래야 차가 끝난다 당신이 텍스트를 볼 수없는 이유는 배경색이 분명하기 때문입니다 그것은 같은 색깔이고 텍스트를 만들고 거기에 색깔을 넣으면됩니다 흰색으로 SSS 해시 태그를 지정하고 이전에 내 동영상을 본 사람은 당신은 흰색이 실제로 성공하다는 것을 압니다 3을 넣어야 만합니다

ffffff는 실제 색상이므로 볼 수 있습니다 우리의 텍스트를 우리가 원하는 방식대로 돋보이게 만들었습니다 거기에 색이 있지만 그것이 끔찍한 것 같아요 저것의 할 것이다 약간 패딩을 추가하고 우리는 각 측을 할 것이다 자체적으로 여기에 두 개의 속성을 넣을 것이므로 패딩 상단이 있습니다 그리고 우리가 그것을 들으니까 첫 번째 될 것입니다 하단 10 추천 및 당신은 위로 뛰었지만 단어의 맨 위에서 아래까지의 공간을 볼 수 있습니다

단어의 왼쪽과 오른쪽은 15 픽을 줄 것입니다 그것에게 15 픽셀을주는 것은 내가 원하는 것을 조금 형성하는 것입니다 이 단추를 여기처럼 좀 더 보이게하려면 그리고 거기에이 멋진 둥근 모서리가 있고 그것은 경계 반경입니다 CSS 그래서 국경 반경 및 아마 4 개 5 개 6 개의 화소 가자 그게 바로 5 픽셀 정도 줄께 네, 그래, 거기 가자

그 일을 끝내서 마침내 내가하고 싶은 일은이 모든 것을 복사하고 싶다 여기 CSS는 내가하고 싶지 않은 것은 우리가 원하는 요소 타일을 복사하는 것이다 우리가 만든 실제 CSS 저는 빠른 노트 패드를 가져올 것입니다 이 파일을 왼쪽 마우스 버튼으로 드래그하여 드래그하면됩니다 컨트롤 C 또는 마우스 오른쪽 버튼으로 클릭하고 복사 할 수 있지만 그렇게하고 싶습니다

노트 패드에 붙여 넣기 만하면됩니다 잠깐만이 버튼을이 공간에 추가하려면 약간의 공간이 필요하다 우리가 던지는 목록 항목 클래스를 조금만 올라가 보면 우리가있는 곳입니다 각 메뉴 항목에 따라 고유 식별자가 있으며 메뉴가 있습니다 우리가 원하는 바로 그 항목 450입니다

바로 마우스 오른쪽 버튼으로 클릭하고 편집하면 HTML입니다 그냥 우리가 원하는 메뉴 항목을 모두 450 비트 복사하려는 경우 그냥 입력 그걸 복사해서 메모장에 붙여 넣으면 여기에 붙여 넣을거야 CSS 편집기 클래스를 사용하여 호출 할 때 약간의 마침표가 있습니다 그것을 앞두고 둥근 괄호를 열고 CSS를 마친 후에 기간을 넣어야합니다 여기에 곱슬 브래킷을 닫으려고하는데, 조금 더 크게 넣으면됩니다

그곳에있는 나머지 사람들과 일치하는 사람들은이 공간을 없애 버릴 필요가 없습니다 CSS를 깔끔하게 유지하고 우리는 우리의 wordpress 대시 보드로 되돌아 갈 것이고 여기에 사용자 정의 CSS로 갈 것입니다 우리가 필요로하는 것을 가지고 있다면, 이것을 아래로 내려 놓으십시오 우리가 작업 중이므로 순수하게 거기에 A를 추가하고 싶습니까? 그 앵커 태그 우리가 돌아가서 마우스를 가져 가면 앵커 태그에서 작업하고 있습니다 그것의 목록 ​​항목 다음에 또는 메뉴 항목을 누른 다음 다시 거기로 가자

빠른 답변과 우리 사이트에 대한 경의와 새로 고침 잘하면 그것은 우리가 텍스트를 잘 잃어버린 것과 거의 동일합니다 우리가 잃어 버리지 않은 텍스트 H는 잘못된 색상입니다 다시 돌아 가면 그 색상에 중요한 속성을 추가합니다 흰색으로 바뀌도록 강요해야합니다 때때로 당신은 우리의 변화를 저장하고 되돌아 가야합니다

우리는 그것을 다시 가지고 있습니다 그것은 거의 우리가 원하는 방식을 거의 바라보고 있습니다 내가 그것의 종류에 반대하고 싶은 호버에 다른 무엇인가하게하기 위해 사용자 정의 CSS 사본으로 돌아 가면 전체 섹션이 우리는 방금 그곳에 그리고 그 후에 히트를했습니다 결장에서 오른쪽으로 마우스를 가져 가면 h0v ER을 할 수 있습니다 그 배경색을 내가 흰색으로 바꾸고 싶다

나는 실제로 가고있다 두 번째 Ctrl 키를 사용하여 복사하므로 C로 바꿀 것입니다 해시 태그 FFF (흰색) 변경하려는 텍스트 색상의 색상 그 색깔에 나는 방금 복사했는데 다른 모든 것은 파란색이다 이 오를 세우십시오 테두리 나 두 개의 픽셀을 채울 테두리를주고 싶습니다

평소처럼 멋진 파란색과 세미콜론을 붙일 수 있습니다 그곳에 틈새를 두어 나는 단지 우리 사이트로 돌아갈 것이다 지금 내가 한 주간 새로 고침을하면 그걸 반전해야한다 우리는 멋진 푸른 색 테두리를 갖게 될 것입니다 텍스트는 파란색이지만 배경은 백인이어야합니다

우리가 가보고 싶은 것은 꽤 많이 있습니다 XD 그렇다면 내가 원하지 않는 것은 내가 우리가 가진 모든 것에 그것을 원하지 않는다는 것이다 거기에 밑바닥 국경이 있는데 그 중 하나는 두 개이고 나는 그걸 없애고 싶지 않아 그 뼈를 없애기 위해 약간의 고급 CSS를 사용해야합니다 저기에있는 것과 기억에서 나는 우리가 그것을 제거해야한다고 생각합니다

이 로고는 확실히 여기에 있습니다 그래서 저는 그들이 마지막 아이라고 부르는 것을 사용해야합니다 여기에서 당신을 제거하기 위해 여기에 속성이 있습니다 우리는 상대 할 것입니다 이 모든 목록 항목에 대한 목록 항목이 있으므로 목록을 클릭하면됩니다

여기에 ID가 있어야 겠어 2 차 미니 목록 항목을 복사하면됩니다 다시 우리의 사용자 정의 CSS로 그것은 단지 몇 가지 드롭 다운 그곳에 지금 내가하고 싶은 것은 콜론을 넣지 말고 복사하는 것에 대해 걱정하지 마십시오이 CSS를 다운로드하고 사용하고 있습니다 여기에 자유롭게 사용할 수 있지만 비디오 아래에 링크를 놓을 것입니다

귀하의 필요에 맞게 그것을 사용자 정의하고 나는 그 아이와 내가 마지막으로 시간을 씁니다 그것이 우리가 정말로 원하고 싶어지는 공중 위에 있기 때문에 거기에 끼어들 것입니다 그것의 제거는 중괄호를 닫고 중괄호를 닫고 두 개의 중괄호를 내려 놓는다 우리가 원하는 것을 두 사람의 중간에 나는 경계선을 말하고 싶다 그러면 우리는 다음을해야 할 것이다

이 특정 요소에 마우스를 올려 놓으면 경계선 아래 진료소를 표시하고 거기에 두 개의 새로운 공간을 깔끔하게 정리하고 저장을 클릭하십시오 다시 사이트에 새로 고침을하고 잘하면 지금 내가 그것을 가져갈 때 우리는 여기에 모두 공을 가지고있어 지금 바라건대 우리는이 마지막 단추에 그것을 아직 갖지 못했지만 아직 사라졌습니다 큰 이제 우리는 로고에서 동일한 일을하고 싶습니다 첫 번째 자식 마지막 자식 첫 번째 자식 관심있는 사람들은 첫 번째 자녀 TSS 또는 큰 자녀를 찾아 볼 수 있습니다

자선 자산과 또 하나의 훌륭한 CSS는 n 번째 CSS이며 환상적입니다 목록 항목을 선택하고 하나 또는 두 개의 목록 항목에서 작업하는 것만으로 우리가 저기에 넣은 것을 복사해서 할 일에 붙여 넣으면됩니다 변경 또는 마지막으로 변경 처음으로 빠른 저장 다시 우리의 사이트에 여기에 빠른 새로 고침 이제 우린 그 위에 마우스를 가져 가면 밑줄 친 로고가 사라질 것입니다 그래, 나머지는 여전히 거기에 갔다 우리가 패딩 (padding)을 추가했기 때문에 조금 조심스럽게 모든 것을 멋지게 만듭니다

이 항목은 여기에 약간 떨어 뜨려서 우리는 그걸 뒤로 밀고 싶습니다 우리가 좀 더 성장할 때가 조금 있습니다 조금 더 그것은 WordPress가 여기에 그렇게 말하는 중간에 확실히 아니에요 우선 먼저 이걸 조금 뒤로 잡아 당겨 보자 우리가 아마도 아마 목록 항목 클래스 일 것입니다

그래서 우리가 가리키면 그 놈들 중 하나가 거기에있어 거기에 녹색 비트가 보이네 패딩 여기 수피 시인들이 공황 상태에 빠졌습니다 당신의 레몬은 그것을 만들겠습니다 25 중간에 복사하면됩니다 복사하여 스타일 시트하지만 나는 그 순간에 나는 속성을 가지고 있다고 확신한다

변경해야 사용자 정의 스타일 시트로 이동하여 지금 찾을 수 있는지 확인하십시오 여기 어딘가에있을거야 거기에 바로 거기 그래서 만약 내가 선택하면 내가 할 필요가있는 모든 것을 25로 바꾸는 것이다 당신이 이미 거기에 넣지 않았다면 사진을 복사하고 붙여 넣기 만하면됩니다 우리가 해왔 던 것처럼 당신의 검사관이 우리의 사이트 빠른 리프레시 네, 우리가하고 싶은 곳에서 머물러있어 좋습니다

그냥 우리가이리스트 아이템 중 하나를 검사하면 그것을 채울 수 있음을 알 수 있습니다 아래쪽에서이 패널이 몇 년 동안 패딩을했는지 보도록하겠습니다 거기의 바닥에 괜찮아요 우리가해야 할 일은 이제 가장 큰 공포를 조정하는 것뿐입니다 거기에 당황병이있어

우리가 그걸 꺼내면 조금 더 보인다 일관성있는 일종의 엉망진창 우리가 할 일은 이 부분의 왼쪽 상단에 조금 더 추가 할 것입니다 그래서이 하나를 선택하고 그곳을 살펴 보겠습니다 바로 여기에 우리가 있습니다

여기 아래로 채우고 우리가 가진 것은 두 가지 속성을 가지고 있습니다 위쪽과 아래쪽, 왼쪽과 오른쪽으로 2 개 더 추가하면 최상위로 갈 것입니다 오른쪽과 다음 두 개가 아래쪽과 왼쪽에 표시되므로 복사 해 보겠습니다 붙여 넣기 할 때 Ctrl 키를 누른 상태에서 붙여 넣습니다 좋아, 그래서 우리는 지금 그것을 바꿀 수 있기를 바랐다

두 가지 더 옙에게 더 많이 제공하자 마치 조금 더 거기에서하는 것처럼 우리는 오른쪽 상단을 보자 또 다른 두 사람도 줘 우리는 17 명이지 12 명

우리가 간다 중앙에 가거나 더 가고 싶다면 더 나아가고 싶다면 전적으로 당신에게 달려 있습니다 우리가 그것을 가져 가거나 우리의 모든 것들 때문에 비트를 바꿀 때 작동하는 것처럼 보입니다 약간 다르다 좋습니다

글쎄, 조금 더 나아진 것 같아요 우리는 이전에했던 커스텀 CSS의 패딩에 붙여 넣을 것이다 그래서 여기에 메뉴 항목이 있습니다 여기에 패딩이 있습니다 바로 여기에 두 배가되는 캐롤라인을 제거하고 우리도 우리가 그것을 추가했기 때문에 호버에 호버 효과를주고 싶다

국경 우리는 몇 픽셀 걸릴 수 있습니다 우리가보고 제거 할거야 거기에 강아지 머리를 클릭하십시오 저장 신선한 네 예, 그렇습니다 나는 그 효과를 아주 좋아한다는 것을 의미합니다 양쪽에 2 개 2 개 2 개가 있습니다 바닥에 영향을 미치지 않을 수 있습니다 다른 하나에 의해 덮어 쓰여지므로 어쨌든 그냥 해봅시다

그냥 분명히 보여주기 위해 그것을 사용자 정의하지만 당신은 그것을 가지고 놀고 싶습니다 다양한 색상을 사용하여 모든 종류의 효과를 낼 수있는 몇 가지 효과를 찾습니다 내가 한 일을 마음에 들지 않으면 실험 해보는 것이 좋습니다 그것을 선택하고 그것을 삭제하면 그것은 이전의 상태로 되돌아 가서 그렇게하지 않을 것입니다 당신의 주제를 깨뜨리는 것에 대해 걱정해야합니다

말하자면 이걸 끝내자 빨리 새로 고침하면 조금 더 좋아진다 여전히 바닥 패딩을 조정해야 할 필요가 있지만 괜찮습니다 어쨌든 Divi 테마에서 메뉴 항목을 사용자 정의하는 방법과 이것은 실제로 부트 스트랩에서의 작업과 당신이 원하는 WordPress 테마 그래서 우리는 그 뚜껑을 그 밑줄 없애 버렸어 우리는이 버튼을 만든 모든 호버에 아래쪽 테두리를 추가했습니다

조금 더 돋보이면 도움이된다 나는 한 번 유용했으면 좋겠다 다시 말하지만 시스템 22와 멋진 웹 디자인 담당자의 제임스입니다 누군가가 그것을 사용하고 싶다면 아래에 링크 된 PDF 파일에 커스텀 CSS를 넣으십시오 지켜봐 주셔서 감사합니다

좋은 하루 되세요

Comment utiliser le CSS avec Elementor gratuit ?

CSS로 Free Elementor를 사용자 정의하는 방법 이 비디오에서 보도록하겠습니다 안녕하세요

webmarketing-beginnerfr, 제 이름은 마크입니다 이 비디오가 마음에 들면 망설이지 말고 주저하지 말고 구독하거나 댓글을 쓰십시오 그러는 동안 우리는 가야합니다 따라서 가장 먼저 할 일은 우리 웹 사이트입니다

워드 프레스와 여기에 우리가 페이지에 있다면 우리는 새 페이지를 만들 것입니다 우리는이 페이지에 제목을 부여해야합니다 예를 들어 내 텍스트라고합니다 우리는 그 초안을 기록 할 것입니다 우리가 수정할 수 있도록 페이지가 생성되었습니다 Elementor와 여기에 우리가 제공하는 다양한 옵션이 있습니다

Elementor 보시다시피 여기에 통합 할 수있는 모든 요소가 있습니다 드롭을 끌어서 그래서 우리가 할 수있는 것을 보여 드리겠습니다 이론적으로는 계획 대로만 CSS에 액세스합니다 프로 버전

그래서 우리는 예를 들어 텍스트를 취할 것입니다 이것이 제가 작성한 텍스트입니다 고급 탭으로 이동합니다 우리는 그에게 ID 또는 클래스를 줄 것입니다 예를 들어 여기서 우리는 Class Elementor라고 말하십시오

일단 그것이 끝나면 텍스트와 우리 클래스, 초안을 저장할 수 있습니다 페이지 미리보기를 통해 일반적으로 표시되는 페이지입니다 요소에 클래스를 부여 했으므로 해당 요소에 속성을 부여 할 수 있습니다 디스플레이의 다른 형식 이를 위해 우리는 다시 WordPress blog

우리는 페이지를 떠날 것이고 우리는 여기에 올 것이다 그래서 WordPress 메뉴 레벨에서 메뉴에서 선택할 수 있습니다 모양 "사용자 정의"옵션 일단 옵션에 들어가면 "사용자 정의", 여기에 모든 추가 CSS가 있습니다 실제로 CSS입니다

전체 사이트에 사용됩니다 따라서 Elementor 요소는 다음과 같이 수정할 수 있습니다 클릭하면이 부분에 CSS가 추가됩니다 그래서 내가 내려갈거야 아래로 내려 가면 클래스로 시작하여 포인트

"Elementor"를 표시 할 것입니다 괄호와 여기에 예를 들어 우리가 측근을 원한다고 말할 수 있습니다 텍스트 주위 우리는 측근을 검게 칠 것이다 우리는 무엇을 추가 할 수 있습니까? 우리는 할 수 있었다

예를 들어 파란색 배경을 추가하십시오 음, 목표는 무언가를하지 않는 것입니다 예외적 인 것은 CSS를 변경할 수 있다는 것을 보여주는 것입니다 Elementor의 프로 버전이 필요하지 않습니다 그래서 여기, 후에, a 일단 그렇게하면 "게시"를 클릭하고 지금 우리는 페이지로 돌아갈 수 있고 우리는 그것을 새롭게 할 것입니다

그게 전부입니다 그래서 당신은 엘리멘터의 CSS가 수정되었습니다 이 동영상에 모두 포함됩니다 그래서 나는 희망한다 이 비디오가 마음에 들면 주저하지 말고 그녀가 너를 더 가질거야

좋아하는 사람, 구독 또는 댓글 달기를 망설이지 말고 그 동안 곧 다음 비디오를 보러 갈께 차오, 차오

A Free Plugin that Writes CSS in WordPress

안녕, 다른 WordPress 수요일에 오신 것을 환영합니다 내 이름은 애리조나 주 샌 안토니오의 텍사스 주 애리조나 주 애리조나 주에 있으며 오늘은 게임 체인저입니다

발견 한 플러그인이 완전히 바뀔 것입니다 제 오래된 비디오 중 일부는 실제로 끝났습니다 웹 사이트에서 CSS를하는 방식이 바뀔 것입니다

저자가 쉽고 빠르게 변경할 수 있도록 충분히 관대하지 않았던 사항을 어떻게 바꾸 었는가? 지금 당장 예산을 세우는 법을 보여 드리겠습니다 내가 찾은 플러그인은 완전히 무료입니다 그래서이 물건을 확인하십시오 일반적으로 내 YouTube 채널을 시청하는 경우이 글꼴 색을 변경하고 작성자가 옵션을 제공하지 않았다면 알려드립니다 그것을 바꾸려면 마우스 오른쪽 버튼으로 클릭하고 요소를 검사해야합니다

항목 제목이라는 것을 알기 위해 약간의 괴상한 코드를보아야합니다 주위를 둘러보고보고보아야 할 것입니다 좋아요, 그것은 entry title이고 그것은 h2입니다 그리고 이것은 단지이 괴상한 코드를 찾는 것입니다 그런 다음 가서 주제에 대한 맞춤 CSS 영역에 괴상한 코드를 입력해야합니다

글쎄, 그건 엄마가 아니야 그것은 더 이상 없습니다 우리는 새로운 플러그인을 사용하여 지금 다른 방식으로 작업하고 있습니다 실제로 새로운 것은 아니지만 방금 발견 했으므로 보여 드리겠습니다 Site Origin CSS라고합니다

완전히 무료로 사용할 수 있습니다 이 튜토리얼 비디오는 꽤 훌륭한 튜토리얼 비디오입니다 플러그인을 사용하는 방법과 그 힘을 보여주는 절대적인 기초를 보여줌으로써 사용법에 대해 매우 기쁘게 생각합니다 당연히 당신은 플러그인에 가서 "Add New"라고 말하면 원점을 찾을 수 있습니다 실제로 CSS를 검색했습니다

그리고 바로 여기에서 "CSS의 사이트 단어"를 발견했습니다 물론 "지금 설치"라고 말하고 활성화하십시오 활성화가 완료되면 외관 영역 아래에 사용자 정의 CSS 영역이 생깁니다 자, 이건 정상적인 것처럼 보이니? 당신은 텍스트 편집기 모드의 공개 된 종류가있는 곳에서 전에 이것을 보았습니다 이 모든 일에 대해 가장 멋진 부분이기 때문에 마음을 날 리도록 준비하십시오

여기에는 시각적 인 모드로 들어가서 마우스를 올리고 방금 설명한 것처럼 동일한 유형의 검사 요소 효과가있을 수있는이 작은 옵션이 있습니다 이 홈 (HOME)이 내가 원하는 것입니다 나는 지금 당장 떠오르고있다 나는 실제로 아무 것도 클릭하지 않았다 이 HOME은 글꼴 색을 변경하고자하므로 클릭 할 것입니다

이제 이미 나를위한 CSS를 작성하기 시작했습니다 이제는 원하는 색상으로 변경하고 실시간 변경으로 볼 수 있습니다 홈은 여기에서 바뀌 었습니다 그리고 글꼴 크기, 조금 더 크게하고 싶습니다 그래서 거기에 그대로두고 35라고 말해 보겠습니다

글꼴을 조금 더 두껍게 만들고 싶습니다 이탤릭체로 표시하려고합니다 이 모든 옵션이 여기에 있습니다 글꼴 패밀리를 변경하고 사용할 글꼴 이름을 삽입 할 수 있습니다 당신이 끝났을 때 당신이보기에 만족한다면, 당신은이 상단의 작은 체크 마크를 클릭하기 만하면 당신을위한 모든 괴상한 코드를 씁니다

AHHHH 놀랄 만한 이 시점에서해야 할 일은 "CSS 저장"을 클릭하는 것입니다 그게 전부 야 그런 다음 웹 사이트의 전면으로 가서 새로 고침을 클릭하면 변경 사항이 적용됩니다

자유로운 예산으로 얼마나 멋진가? 미친 이것이 당신을 도왔 으면 좋겠어요 더 많은 질문이 있으시면 아래의 설명 상자에 입력하십시오 또는 Site Origin으로 건너 뜁니다 이 링크는 아래의 설명 상자에도 넣으십시오

나는 워드 프레스 수요일 다음에 보자 이 괴상한 CSS 물건으로 재미있게 놀아 라 안녕

Создание сайта на WordPress | Продвинутый курс | Урок 5

안녕 여러분! Alexander Shulepov와 함께 오늘의 비디오에서 우리는 계속 연구 할 것입니다 CMS는 워드 프레스와 그것에 사이트를 만드는,하지만 우리가 시작하기 전에 당신이 좋아하는 내 채널을 구독하고 싶습니다 새 비디오를 놓치지 않기 위해 종을 푸는 것에 댓글을 달았습니다

그래서 당신은 흥미로운 것을 놓치지 않는다 운전하다 우리가 맹세 한 마지막 수업에서 메인 페이지가되었습니다 거의 완전하게 이미 이 단원에서는 스크립트를 연결합니다 그래서 너와 나는 모든 것이 꽤 생기있게 보였다 여기에 우리가 시작할 페이지 시작 부분에 생명을 불어 넣습니다

기사 최근 기사 기사 시작 방법 관리 영역으로 이동해야합니다 루 브릭 항목에 대한 루 브릭을 작성해야합니다 그녀를 마지막으로 부르 자고하자 ~에 그래서 우리는 항목에 항목을 추가 할 내용을 추가했습니다 새 항목 추가 당신이해야 할 다음 일은 새로운 3 추가 기사를 추가하는 것입니다 마지막 기사 3 우리가 당신과 함께 만든 기사를 이제 우리가 가져와야합니다

즉, 우리가 지금 내려 간다면 우리는 그들을 가지고 있지 않습니다 우리가 여기에가는 마지막 제목에주의를 기울여 봅시다 솔직히 여기에 기사 라벨이 있습니다 우리가 내려 가서 기사를 부모의 표제는 없다 이걸 기억해

우리는 모든 기록들을 가지고 간다 우리는 여기에 기록을 만들었지 만, 여기에 메뉴의 새 편집자 제목이 있습니다 우리는 제목에서 마지막 기사를 선택합니다 즉, 이것은 우리가 만든 새로운 제목과 우리가 가지고있는 모든 기사입니다 모든 기록을 더 정확하게 가지고있다 우리는 이것에 덧붙인다

제목 및 세 번째와 저것 그래서 우리는 그 편리한 워드 프레스를했고 여기 모두가 여기에 우리가 볼 수있는 모든 제목이 여기에 모두 업데이트됩니다 우리의 모든 작은 기사 제목 설명이 나타납니다 이제는 그들이 어떻게 디스플레이되는지를 보도록하겠습니다 우리는 마지막 강의로 돌아갈거야 파일이 PHP 배경 인 경우 나는이 모든 것을 당신에게 귀찮게하지 않도록 페인트하지 않을 대본을 남겼습니다 그 외에도, 그대로 삽입하고 이미 강력하게 읽고 수정할 수 있습니다 기사 이름 카테고리를 확인하십시오

여기 너에게 보라고 한 것을 기억하라 이라크에서 더 정확하게, 여기에 기사 1을 추가하면주의를 기울여야한다 그래서 여기에주의를 기울이십시오 어디서나 동일한 u를 삽입합니다 여기에 마지막 기사의 기사와 이미 출력 할 것이다

즉, 마지막이되는 법과 그 법을 추가하는 법 ~에 관해서 기사 스타일 및 그에 따라, 우리도 당신이 그것을 가져 가면이 애니메이션을 모두 처방했습니다 마지막 기사로 마우스를 가져갈 때 트리거하는 방법 이것은 배우를 찾고 있습니다 즉, 그는이 모든 것입니다 어떻게 될지를 위해있을 수 있습니다 당신은 또한 탐욕을 그처럼 볼 수 있습니다

여기있는 방법을 보아라 우리가 너와 함께 할 다음 일 애니메이션을 연결하여 모든 것을 애니메이션으로 만들 수 있습니다 감동 한 아나 파 모습의 애니메이션 주제 편집인 ~ 안에 풍수 난로 특징 테마 여기있다 애니메이션을 담당하는 모든 스크립트 모든 가능한 효과들 하지만 나 자신을 통해 열어서 여기에서 더 쉬울 것입니다 모든 애니메이션은 vpn white script를 통해 수행됩니다

이 함수를 통해 스킨이 읽을 필요가있는 링크를 읽을 수 있습니다 그건 그렇고 여기 시인이 테마를 사용하지 않으면 그 기능이 작동하지 않는다는 오류가 있다는 아주 멋진 주제입니다 호출 된 함수는 여기에 스크립트를 추가합니다 사실 여기에서 많은 정보를 읽으십시오 지금부터는 별도의 교훈이 필요합니다

그 다음에 서명 한 애니메이션 내가 어디 있니? 우리는 그래서 내가 실제로 꽤 많이 저장하다 가자 우리의 새로운 기능 1 박 우리는이 기능을 여기에두고 싶습니다 예산을 사용하면 페이지를 스크롤 할 때 화면에 표시 될 때까지 애니메이션 요소의 실행을 연기 할 수 있습니다 개발자는 이미 May cs를 사용하고 애니메이션을 위해 라이브러리를 사용하도록 권장합니다 지원하지만 사이트를 탐색 할 때 70 가지 이상의 효과가 나타납니다 애니메이션 특정 블록으로 왜곡 될 때마다 시간이 지남에 따라 나타납니다

즉, 애니메이션과 내가 사이트를 열었을 때, 나는 어디에서나 일했습니다 당신은 그것을 이해할 수 없었습니다 이 스타일로 많이 도움이됩니다 다음으로이 애니메이션 다음으로 그 사람에 대해서, 나는 또한 css3를 사용하여 애니메이션을 만드는이 라이브러리가 이 라이브러리는 거의 모든 브라우저에서 작동하는 70 가지가 넘는 애니메이션 효과로 지원됩니다 글쎄, 옴 스크의이 참고 자료는이 모든 모든 모습을 볼 수 있습니다

애니메이션 CSS 공주들과 그런 다음 우리는 매끄러운 여우를 가지고 있습니다 Minifee 자바 스크립트 코드는 슬라이더와 함께 작동해야합니다 즉, 모든 스크롤 슬라이더입니다 요컨대 그 전체 애니메이션을 여기에 넣었습니다 그녀가 바로 여기 있습니다

우리는 외부 소스에서 가져옵니다 나는 사이트에서 모든 것을 다운로드하지 않습니다 외부 소스에서 모두 가져옵니다 보기 거짓말은 우리 도서관이 모두 우리가 캐시를 청소하게하고 여기에 애니메이션이 있습니다 우리를 위해 모든 것이 작동합니다

모든 것이 스크롤됩니다 모든 것이 잘 돌아갑니다 우리 애니메이션이 어떻게 작동하는지 이해합시다 정렬의 일종과 여기에서이 태그는 난로에서 우리 채우는 것이 아니다 심지어 그들의 잠재력을 말하는 연습, 아니 그들은 우리가 데이터 볼트 또는 3 초를 연결하는 외형을 취하지 않습니다

2 초 원하는대로 즉, 우리는 수업을 듣습니다 우리는 애니메이션이 오른쪽에 우리는이 기능을 여기에 제공합니다 즉, 원칙적으로이 기능을 읽을 수 있습니다 이해하기 어려울 정도로 인쇄 된 단어에서 사본을 복사하는 것 달릴거야 페이지를 스크롤 할 때 화면에 표시 될 때까지 애니메이션 요소의 실행을 연기 할 수 있습니다 애니메이션에 관한 원칙 나는 그것이 이해할 만하다고 생각하고 나는 아직도이 기능,이 기능들이 바로 여기 있다고 말하고 싶다 모든 것이 거기 있고 우리는 방법을 통해 그것을 모두 연결합니다

CDN 간단히 말해서 거대한 글은 읽을 수 있습니다 다시이 내가 뭘 원격지 서버 캐시 된 곳의 똥 코드 우리의 파일을 신속하게 열어 사이트가 다른 격려하지 않습니다 당신이 할 수있는 몇 마디 로이 스크립트를 시도 그들은 정확하게 내가 우리에게 이해로 설명했다 말한 여기있다 스크립트 이름도 보자 그게 전부 다 준비 됐어 나에게서 준비된 코드를 가져갈 수있어

이미 그것을 사용하지만 게임은 모든 외부 소스, 난 그냥 코드 vp 걸릴 여기에 그게 우리가 애니메이션을 연결하는 방법입니다 이러한 함수를 통해 다음과 같은 파일을 연결합니다 여기에 모든 애니메이션이 포함되어 있습니다

우리가 떠나는 모든 모든 블록들은이 애니메이션을 통해 연결됩니다 우리도 연결 했어 우리가 여기있는 모양조차도 미끄러 져 보일뿐입니다 상담 신청 그녀는 스쿠터 일 가능성이 가장 높습니다 주소 여기에 문의 양식이 있습니다

우리가 슬라이드를 연결 한 것과 똑같은 것을 연구해라 보기에 명확하지 않은 경우 준비된 코드를 선택하고 모든 것이 다 먹는 것입니다 저는 기성품을 사용합니다 때로는 설명 할 수도 없습니다 일부는 이해하지만 원칙적으로 복사하여 붙여 넣기를 권하고 모든 것이 잘되고 잘되었거나 완성 된 코드를 옮기는 것이 좋습니다

애니메이션에 관한 한 원칙적으로 기본 페이지가 준비되어 있습니다 matza가 모두 연결되어 있습니다 우리는이 작업을 끝내고 싶습니다 애니메이션을 연결하는 방법에 대해 꽤 많이 했었습니다 다음 강의에서는 곧 적응력을 다룰 것이며이 코드는 알렉산더 파브 (Alexander Pav)와 연락을 취하고 채널을 구독하십시오