Cómo optimizar las Google Fonts en WordPress

안녕하세요 여러분! 오늘의 동영상에서는 Google 소스를 최적화하는 방법을 보여 드리고자합니다 우리는 WordPress에서 사용합니다

이를 위해 우리 테마가 두 개의 다른 소스를로드하는 경우를 시뮬레이션했습니다 우리가 머무를 때 우리는 한편으로는 폰트를 제거 할 수있는 방법을 보자 단일 소스로 어떻게 최적화 할 수 있는지 알아볼 것입니다 첫 번째 단계는 항상 불필요한 소스를 제거하는 것입니다 소스가 아닌지는 사용하지 않습니다

또는 우리가없이 할 수있는 출처 예를 들어,이 경우 나는 몬세 라트와 만 머무르고 싶다고 가정 해 봅시다 Roboto를 제거 할 것입니다 그래서 우리가 어떻게하는지 봅시다 원본은 테마에 의해 정상적으로로드되므로 FTP를 통해 테마 폴더로 이동합니다

functionsphp 파일을 엽니 다 여기에서 프로세스가 약간 다를 수 있으며 코드가 다를 수 있습니다 당신이 사용하는 주제에 따라 다르지만,이 함수와 같이 많이 보일 것입니다 무엇보다도 CSS 리소스를로드 할 수있는 wp_enqueue_style 함수가 있어야합니다

그래서 우리는 소스를로드 할 수 있습니다 필자의 경우이 두 줄은 소스를로드하여 근원은이 선의 한에 논평하게한다 당신은 하나가 몬세 라트를로드하고 다른 하나는 로보트를로드하는 것을 보았습니다 그래서 Roboto 우리는 그것을 지우거나 그것에 대해 논평 할 수 있습니다 이 경우 지우겠습니다

끝났습니다 이제 우리는 하나의 소스 만 청구되고 2 번 단계로 이동합니다 다음으로해야 할 일은 stylecss 파일로 이동하여 참조를 제거하는 것입니다 방금 제거한 소스로 예를 들어,이 편집기에서 Ctrl + F를 눌러 "Roboto"를 검색 할 수 있습니다

더 이상 사용하지 않고 Montserrat를 사용하기 때문에 Montserrat를 여기에 넣습니다 우리는 그것이 더 많은 시간이 나오는 지 알아보기 위해 되돌아갑니다 그리고 그렇지 않은 것처럼 보입니다 그것은 제목에만 나타납니다 이제 페이지를 새로 고침하면 헤드 라인이 변경되었으며 이제는 페이지에서 Montserrat 글꼴이로드되고 더 이상 Roboto가로드되지 않습니다

이 페이지에서는 그것은 이미 조금 가벼워졌습니다 불필요한 출처를 제거하는 것 외에도 우리가 할 수있는 일과해야 할 일은 동일한 출처의 변형 당신이 알고있는 변형은 두께가 다른 예를 들어, 같은 소스 또는 다른 유형의 경우, 여기에 300의 두께가 있음을 알 수 있습니다 더 유한하지만이 예를 들어, 같은 소스이지만 다른 변형입니다, 그리고이 대소 문자 또는 대문자입니다 그리고이 텍스트에서 우리는 400을로드합니다

이 값은 보통, 즉 일반 두께입니다 그리고 우리가해야 할 일을 최적화 된 소스로 만들기 위해서는 유사 콘텐츠 만로드하면됩니다 우리가 사용하는 것과 우리가 사용하지 않는 것은 그들을 적재하지 않습니다 예를 들어 몬세 라트가 다른 숫자를 넣은 후 여기에서 볼 수 있듯이 "i" 기울어 진 것입니다 기울어 진 것이고 다른 버전을로드하고 일부는로드합니다

우리는 그들을 사용하지 않습니다, 그래서 우리가 그것을 어떻게 수정하는지 보겠습니다 이를 위해 Google 글꼴로 이동하여 우리가 사용하는 소스가 몬세 라트인지 확인합니다 여기에 추가하여 사용자 정의에서로드 한 유사 콘텐츠를 사용자 정의 할 수 있습니다 우리는 여기에 들어가고, 우리가 단지 400을 적재한다면 우리가 이미 우리 페이지 빠르게로드되며 우리는 300과 700을 사용하는 것을 보았습니다 3 개의 유사 콘텐츠 만 사용하는 경우 충전 시간입니다

그리고 더 많이 넣으면로드 속도에 많은 영향을 미친다는 것을 알 수 있습니다 단지 2, 나는 빛을 제거하고 나는 규칙적이고 대담하게 떠날 것이다 이제 Embed로 돌아 가면 링크가 이미 변경되었고 400 버전 만 포함되어 있음을 알 수 있습니다 및 700 필요없는 https를 포함하지 않고 여기에 복사하여 여기에 붙여 넣습니다

나는 그것을 사용하지 않는다 그래서 그것을 사용하지 않는다 그래서 나는 그것을로드 할 필요가 없다 한 번 우리가 우리 페이지에가는 파일을 저장했다, 우리는 그것을 충전하고 지금 우리가 가진 것처럼 보일 것이다 300을 이미 제거 했으므로 300이로드되었고 400이로드되었습니다

우리는 그것을 가지고 있지 않습니다 가장 가까운 것이로드되고 그것은 똑같이 보입니다 이 방법으로 우리는 페이지가있는 소스의 두 가지 버전 만로드합니다 이전보다 훨씬 가볍습니다 그리고 이것은 오늘을위한 전부입니다! 나는 그것이 당신을 위해 봉사했기를 바란다

그리고 당신은 이미 모든 제안, 코멘트 또는 프로젝트를 위해 그것을 알고있다 empresionacom에서 나를 찾을 수 있습니다 다음 비디오에서 만나요 나중에 보자!

A WordPress Plugin that Writes CSS for You

– 이봐, 그 때가 또 있네 또 다른 WordPress 수요일

내 이름은 애쉬톤 고리 고, 후원 받는다 Pressable, 모든 것 WordPress 이 사람들은 호스팅을 알고 있으며, 지원을 알고 있으며, 보안을 알며 웹 사이트를 최적화하는 방법을 알고 있습니다 찾고 있다면 그들을 체크 아웃해야 해 올인원 (all-in-one) 솔루션 귀하의 WordPress 웹 사이트 호스팅 환경

그것은 프레스 가능합니다 아래 설명 상자에 링크가 표시됩니다 코리 애쉬튼이 당신에게 그들의 길을 보냈다고 그들에게 말해야합니다 경이로운 가격도 있습니다 여러분들은 분명히 해결책을 찾고 있습니다

웹 사이트 내부에 CSS를 작성하는 데 도움이됩니다 아니면 해결책을 찾고있는 것일 수도 있습니다 이는 끌어서 놓기 환경과 비슷합니다 글쎄, 나는 너의 마음을 날려 버릴거야 CSS Hero라는 멋진 솔루션으로 나는 정말로 흥분한다

그게 너 뭐야, 너는 알아 듣겠 니? 페이지 빌더 환경 웹 사이트의 전면으로 이동합니다 드래그 앤 드롭, 크기 조정, 그것은 당신을 위해 모든 코드를 씁니다 CSS 나 HTML을 알 필요가 없으며, 요소를 검사 할 필요가 없습니다 당신은 저자가 무엇인지 알아낼 필요가 없습니다

DIV 클래스를 명명했다 이것은 하나의 간단한 플러그인으로 완성됩니다 이걸 가져와, 너희들, 또한 응답 형 코드를 작성합니다 모바일 장치, 어떤 장치에 따라 한 번의 클릭으로 화면을 축소 할 수 있습니다

당신의 모든 포지셔닝, 해당 모바일 장치에 대한 미디어 쿼리를 작성합니다 오, 너무 멋지다! 좋아,이게 어떻게 작동하는지보고 싶다면, 주위에 붙어있어, 내가 너에게 보여줄거야 (낙관적 인 음악) – 이제 CSSHeroorg로 이동하십시오 아래의 설명 상자에 링크를 삽입하겠습니다

그래서 당신은 쉽고 빠르게 그것을 얻을 수 있습니다 그리고 당신은 이제 Get it을 선택하게 될 것입니다 그게 네가 할 일이야 기본적으로, 당신은 너에게 맞는 계획이야 따라서 사이트 하나만 있으면됩니다

1 년에 19 달러는 수수료입니다 5 개의 사이트, 999 개의 사이트, 당신이 개발자라면 이것은 경이로운, 경이로운 가치 그러나 기억하십시오, 이들은 일년에, 그래서 당신은 아마도 환매해야 할 것입니다 적어도 면허 갱신 또한 이러한 가격이 사라질 수도 있음을 기억하십시오

지금 판매 중입니다 그래서 그들은 다시 뛰어 올라서 이렇게 빨리 행동 할 것입니다 오늘의 가격은 바로 지금입니다 가입 및 구매를 클릭하십시오 네가 그렇게하면, 너는 채울거야

여기에 귀하의 모든 정보, 약관에 동의, 진행하고 계획을 선택하십시오 여기가 바로 여기에 있습니다 계획을 선택하고, 페이팔로 지불하고, 당신은 벗어나고 있습니다 그렇게하기 쉽습니다 실제로 귀하의 계정을 보유하고 나면 여기에 대시 보드가 있습니다

여기 열릴거야 그리고 나서 여기 오른쪽으로 올 겁니다 다운로드를 클릭하면 다운로드됩니다 귀하의 다운로드 폴더에 더 많은 가능성, 그것이 당신이 정한 곳이라면 말이죠 그리고 이것은 당신이 필요로 할 정확한 zip 폴더입니다

WordPress 웹 사이트에 설치하십시오 이제 네가 그걸 가지고 돌아 왔어 웹 사이트의 플러그인 영역으로 이동하십시오 물론 새로 추가를 클릭 할 것입니다 그리고 플러그인을 업로드 할 것입니다

구입 한 프리미엄 플러그인이기 때문에 그것을위한 면허, 그것은 당신이 가야하는 길입니다 그래서 우린 파일을 선택할거야 물론, 이건 우리 다운로드 지역에 살거야, 그렇지? 그래서 우리는 다운로드 영역으로갑니다 그리고 당신이 클릭하고 있는지 확인하고 싶습니다 압축 된 파일에서 그 파일을 열 필요가 없습니다

이 파일은 다운로드 한 파일과 동일합니다 업로드하고 설치해야하는 파일입니다 그리고 플러그인 활성화를 클릭합니다 슈퍼 신나는! 이제 다음 단계는 당신의 열쇠를 얻는 것입니다 그래서 당신은 그것을해야만합니다, 당신은 그것을 클릭 할 것입니다

너를 계기판으로 돌려 보낼거야 CSS Hero에서 열쇠를 가져올 것입니다 움직여! 그러니 가자 내 열쇠 가져와 여기에 라이센스가 있습니다

키를 클릭하십시오 거기를 클릭하십시오 라이센스를 얻으십시오 알았어 가자

그것을 사랑해 그것은 활성화되었습니다 나는 아무것도 복사해서 붙여 넣을 필요가 없었습니다 나는 모든 농구를 뛰어 넘을 필요가 없었습니다 내가 참여할 준비가되었습니다

그래서 나는 내 웹 사이트의 앞쪽으로 돌아갈거야 새로 고침을 클릭하면 이제 여기에 올 수 있습니다 CSS Hero로 클릭하십시오 내가 조금만 확대하자 그래서 당신은 일이 벌어지고 있는지 좀 볼 수 있습니다

나는 CSS Hero로 Customize를 클릭 할 것이다 그리고 이제 내 패널을 줄거야 그리고 이것은 여전히 ​​나를 앞쪽으로 지켜줍니다 내 웹 사이트에서 할 수있는 일은 할 수 있습니다 나는 여기를 클릭 할거야

나는 그 글꼴을 늘리고 싶다 조금만 여기 왼쪽에 타이포그래피로 갈거야 그리고 이것들은 모두 내 다른 옵션입니다 색깔, 폰트 패밀리, 폰트의 무게, 대담함, 당신이 얼마나 대담 해지기를 원하는지

그래서 나는 그냥 가서 이걸 움직일거야 정말 큰 그래서 당신은 좀 주위에 놀고 나를 볼 수 있습니다 나는 그것을 좋아한다 조정할 수있는 선 높이 모든 대문자로 원한다면 그렇게 할 수 있습니다

또는, 실제로, 이것은 모든 대문자 인 첫번째 편지입니다, 그건 대문자예요 멋진 옵션이 있으므로 클릭 만하면됩니다 이 모든 것들이 주변에 땜장이가되어 놀 수 있습니다 그 지역에서 일하게되면, 당신은 다음 지역으로 이동하고 있습니다 너가 무언가의 색깔을 바꾸고 싶으면, 당신은 타이포그래피로 들어가서 그것을 할 수 있습니다

완전히 색을 바꾼다 내가 아무것도 할 필요가 없다는 것을 주목하라 팅커와 놀이 이외 나는 어떤 코드도 작성하지 않고있다 그리고 그것은 모두 실시간으로 나에게 그것을주고 있습니다

이것에 대해 흥미로운 것이 무엇인지 알 것입니다, 여러분, 이 도구를 실제로 사용할 수 있습니까? 기본적으로 CSS를 배우려면 기본적으로 할 수있는 일입니다 왜냐하면, 그것은 당신을 위해 모든 것을 여기에 쓰고 있기 때문입니다, 그것이하는 일을 당신에게 드러내는 것입니다 그리고 그것은 당신에게 그것을 줄 것이기에 너무 멋집니다 정말 대단한 다른 것 그리고 우리를 위해 여기에 던져 넣을 사람들이 아주 관대합니다 다른 편집 모드입니다

이제 화면의 오른쪽 구석에 당신은 다른 장치를 선택할 수 있습니다 이 틈에서 주위를 돌변하고 놀고 싶다는 것 이게 내가 전에 너와 통화하고 있었던 곳이야 휴대 기기에서 보는 것과 나는 그것을 클릭 할 수있다 이 집이 너무 길면 그 화면에서 글쎄, 가자

그리고 그것을 오른쪽으로 생각하는 크기로 다시 줄이십시오 작은 화면에 그렇게 뭔가가 할 수있는 것처럼 보입니다 근사하지만, 내가 돌아 가면 내 모든 장치 모드에, 그것은 여전히 ​​거기에 큰 그들이 나를 위해 무엇을하는지, 그들은 코드를 작성하고 있습니까? 모바일 쿼리의 경우, 모바일 장치에서, 이 글꼴을 작게 만드십시오

패딩과 그 모든 것을 조정할 수 있습니다 그들은 여러 가지 다른 견해를 가지고 있습니다 iPad 및 태블릿 크기의 가로 및 세로입니다 거기 정말 멋진 옵션, 이 놈들은 모두 다시 밖으로 나가고, 배경 영역을 조정하고 싶다면 모든 종류의 멋진 옵션이 여기에 있습니다 그들은 당신이 입을 수있는 경계를 가졌습니다

그래서 우리가 경계를하고 싶다면 이 특별한 이미지에서 우리는 그것을 할 수있었습니다 테두리 색을 변경하십시오 그리고 다시, 나는 쓰지 않아도된다 어떤 CSS 든 모든 종류의 멋진 옵션이 있습니다

조금 까다로운 부분 중 하나 때로는 웹 사이트에서 변경하기 위젯 상자입니다 CSS 코드에 숨겨진 종류 알아내는 것은 정말 까다 롭습니다 저자가이 여러 가지 이름을지었습니다 하지만이 플러그인으로는 안됩니다

다시 말하지만, 위젯 제목을 클릭하기 만하면됩니다 난 타이포그래피에 들어가서 조정하고 싶다 다시 그 크기 그리고 물론, 지금, 이것은 제 제목 3에 영향을 미치고 있습니다 CSS에서 여기를 살펴보십시오

내 모든 위젯 상자에 영향을 미칠 것입니다 그 이름은 같은 제목 3입니다 권리? 그러나 도움이된다 왜냐하면 그럴 필요가 없기 때문이다 모든 상자에

그것은 매우 쉽고, 사용자에게 친숙합니다 그래서 여기 다른 흥미 진진한 것이 있습니다 당신이 궁금해하는 것이 있다면, 글쎄, 그것은 내 주제와 함께 작동 할까? 그들의 웹 사이트에는 테마 데모가 있습니다 이것은 그들이 정말로 그들의 게임을 강화하고 있었고, 당신을 보여주는, 당신은 기본적으로 수색을 할 수 있습니다 당신의 주제에 대해 그들이 여기에 그것을 가지고 있는지보십시오 일반적으로 저는 Divi를 사용합니다

그래서 나는 여기에 와서 주변에서 팅커 칠할 수있다 그들의 솔루션이 호환되는지 확인해보십시오 Divi 테마 또는 Divi 빌더와도 관련이 있습니다 그리고 그것은 완전히 있습니다 당신이 여기 들어올 수 있다는 것을 알 수 있습니다

평소대로하는 모든 변화를 만들어라 여기 주제에, 바로 거기에 그것은 완벽하게 완벽하게 작동합니다 아, 너무 멋지다 이것을위한 멋진 해결책

저장 및 게시를 클릭하고, 당연히 웹 사이트가 살아납니다 여기에 와서 다른 테마를 검색하십시오 궁금하신 분은 이미 사용 중입니다 특정 플러그인 아마 너 beaverbuilder를 사용하고있을거야

어쩌면 당신은 WooCommerce를 사용하고 있습니다 너는 알아 내려고 노력하고있어 글쎄, Elementor와 함께 작동 할 것입니다 당신들, 여기에 당신을위한 무료 데모가 있습니다 주변에서 팅커를보고 볼 수 있습니다

그들은 호환성이 100 %, 99 %라고 말해줍니다 그래서 그들은 매우 투명합니다 그것이 이미 작동하는 것과 함께, 그들이 이미 테스트 한 내용으로 정말로, 정말로 흥미로운 재료 나는 당신에게 내가 매우 인상적이라고 생각하는 것을 보여주고 싶다 이제 이것은 현재까지 90 % 호환됩니다

이 비디오에서 하지만 Gravity Forms는 프리미엄 플러그인입니다 나는 많이 자랑하고, 나는 정말로 내 YouTube 채널에서 광범위한 재생 목록을 볼 수 있습니다 여러분, Gravity Forms를 사용자 정의하는 것은 매우 어렵습니다 그러나 더 이상

이거 봐요 모든 분야를 조정할 수있게 해줄거야 내 말은, 완전히 좌절 한거야 조금 필요한 필드를 숨기고 싶다 수 없습니다

하지만 클릭하면 엑스트라로 들어가서 숨겨진 곳으로 가면 숨길 수 있습니다 그 작은 레이블을 숨기고 싶다면 당신이 상자 밖으로 더 이상 숨길 수 없다는 것, 나는 그들을 숨길거야 그것은 단지 하나의 간단한 클릭이고 그들은 당신을 돕고 있습니다 이 작업을 수행하는 데 필요한 모든 코드를 작성하십시오 그것은 단지 나를 슈퍼, 매우 흥분하게한다

서로 다른 간격과 패딩을 보도록하겠습니다 그 모든 것을 가지고 땜장이로 놀 수있게 해줄거야 글꼴을 바꾸고 싶다면 그렇게 할 수 있습니다 전체 섹션의 배경을 변경하려면, 당신은 그것을 할 수 있습니다 그렇게 쉽고 빠르게

물론 다른 플러그인이 많이 있습니다 너 여기로 와서 체크 아웃 할 수있어 Contact Form 7에도 있습니다 정말 멋지고 시원한 호환성 기능 여기에 CSS Hero가 있습니다 음, 어떻게 생각하니? 이런 식으로 사용 하시겠습니까? 귀하의 워드 프레스 웹 사이트에? 나는 무엇을 말해 줄게

5 개의 면허증을 나눠 줄거야 그들은 모두 한 웹 사이트를 1 년씩 보유하게 될 것입니다 그들은 나에게 5 개의 면허를주었습니다 다음 이틀 동안이 비디오에 대해 의견을 말하면 지금 당장 5 명의 우승자를 무작위로 선택하겠습니다 면허증을 받게 될거야

자신의 WordPress 웹 사이트에서 사용할 수 있습니다 WordPressorg 버전을 사용하고 있는지 확인하십시오 이 플러그인을 설치할 수 있도록 이는 설치해야하는 프리미엄 플러그인이기 때문입니다 하지만 이걸 버리게되어 기쁩니다

나는 당신이 위대한 것을 가지고 있기를 바랍니다 꼭 구독하십시오 그리워하지 마세요 자유로운 물건을 얻는 기회 WordPress에 대해 모두 배우십시오 다음 주에 보자

안녕 (가벼운 음악) (종소리)

How to add Google Fonts to WordPress without plugin

안녕하세요 학습의 또 다른 새로운 에피소드에 오신 것을 환영합니다

우리가 할 일은 Google 글꼴을 WordPress 웹 사이트에 사용하는 것입니다 즉,이 사이트에서 여기에 사용되는이 특정 글꼴의 경우를 의미합니다 title 우리는이 폰트 패밀리를 사용하지 않을 것이고 대신에 다른 폰트 패밀리를 사용할 것입니다 Google 글꼴에서 이제 우리가해야 할 일은 Google로 돌아 가야하고 여기에서 우리가 찾고있는 것입니다 Google 글꼴

그리고 거기에 간다 이 글꼴들 중에서 우리는 처음에는이 글꼴을 사용합니다 그래서 우리는 평소대로 이 파일을 선택하면이 파일이 복사됩니다 이제이 부분까지 Google 글꼴을 사용하는 방법에 대해 잘 알고 있습니다 프로젝트이지만 이번에는 WordPress 웹 사이트입니다

그래서 극단적 인 예방 조치를 취해야합니다 첫 번째 경우에는이 극단적 인 왼쪽 패널로 돌아가고 있으며 여기서 우리는 편집자 그러나 다른 한편으로 나는 여기서 그들이 말한 모든 변화가 내부에 만들어진다고 말하고 싶다 이 하드 코어 코딩은 여기에 관여 된 코딩을 의미합니다 이 특정 편집기 부분에 일부 정보를 수정하면 잃어 버릴 수 있습니다

우리의 워드 프레스 웹 사이트 이제 우리의 프로젝트로 돌아가서 여기 극단적 인 부분으로 들어가 봅시다 여기서 테마 파일은 우리가 headerphp를 찾을 때 저장되며 여기에 있습니다 그리고 이것은 실제로 WordPress 웹 사이트의 헤더 부분이 실제로 나타나는 부분입니다

그래서이 부분은 바로 위에있는 다른 모든 코드 아래에 있습니다 이 헤드 세그먼트 아래에서 우리는이 특정 링크를 붙여 넣을 것입니다 이 Google 글꼴에서 복사 한 href 부분 그리고 이제 우리는이 CSS 규칙을 복사 할 것입니다 그래서 우리는 그것을 복사하고 우리의 프로젝트로 돌아갈 것입니다 우선, 부품을 맞춤 설정하기 위해 돌아 가자

그리고 여기에 우리가 사이트에 이러한 특별한 변경을 가한 추가 CSS가 있습니다 tagline, 우리가 지금하려고하는 것은 우리가 복사 한 CSS 규칙을 붙여 넣을 것입니다 Google 글꼴 여기 간다 이 특정 글꼴 패밀리를 여기에 배치하면 이미이 사이트 제목 글꼴 패밀리가 다른 것으로 바뀌었다

만약 우리가 그것을 여기에서 옮기면, 우리가 그것을 사용하지 않는다면 당신은 그것을 볼 수 있습니다 인스턴스가 제거되거나 추가 CSS 부분에서 제거되었을 때, 우리는 초기 글꼴 패밀리가 이제 복원되면 할당 된 초기 글꼴 패밀리로 복원됩니다 이 특정 사이트 디스플레이로 실행합니다 이제 우리가 할 일은 여기에 붙여 넣기 만하면됩니다 지금 일어나고 동일한 문제점에서 우리가하기 위하여 우리 모두는 우리는 사용하기 위하여려고하고있다 여기에 텍스트 그림자

물론 그것은 1px, 1px, 1px, this 일 것입니다 그래서 우리는 지금 일어난 모든 변화를 볼 수 있습니다 그래서 우리가 지금 출판하고 우리가 다시 우리의 프로젝트로 돌아가서 재 장전한다면 우리는 이미 모든 폰트 패밀리는 이제 바뀌었고, 이제는 색이 바뀌 었습니다 그래서 우리는 성공적으로 Google 폰트에서이 특정 글꼴을 WordPress 웹 사이트에 삽입하면 지금 당분간 우리 프로젝트에 남아 있습니다 그러나 이전에 내가 너에게 이야기 한 것처럼 이 특정 프로젝트에 적용된 모든 종류의 업데이트 및 모든 변경 사항이 손실됩니다

이것이이 특별한 튜토리얼에서 알아야 할 것입니다 너희들이이 튜토리얼을 좋아하길 바래 만약 당신이이 튜토리얼을 좋아한다면 주저없이 Red Subscribe 버튼을 누르십시오 아래로 내려 우리의 다음 튜토리얼에서 여러분을 만나길 바랍니다

[음악

]

How to customize CSS of WordPress site-Beginners Quick Guide

이제 또 다른 본질에서 우리는 CSS를 변경해야한다는 것을 의미합니다 우리 캐스케이드 스타일 시트

이제이 튜토리얼에서 변경하는 방법에 대해 논의 할 것입니다 WordPress 웹 사이트의 스타일 시트에 [음악] 우리는 두 가지 방법으로 CSS에 이러한 변경을 할 수 있습니다 첫 번째 경우에 우리가 돌아 오면 등장 인물, 편집자 그리고 우리가 그것을 클릭하면 이제 우리는 그것을 볼 수 있습니다 – 당신이 나타납니다 WordPress 대시 보드에서 테마를 직접 편집하는 방법; 우리는 편집하지 않는 것이 좋습니다 귀하의 테마가 귀하의 사이트를 직접 파괴 할 수 있으며 귀하의 변경 사항은 향후 업데이트에서 손실 될 수 있습니다 이제 이것이 우리가주의해야 할 것입니다

우리가 여기서 변경 한 사항이 변경 될 경우, 변경 사항은 임시 변경 사항 일 것입니다 우리는 WordPress 사이트에 대한 특정 업데이트를하고 있습니다이 경우 수백 명이있을 것입니다 우리가 우리 스타일로 만든 모든 수정을 잃을 확률 시트 WordPress가 제공하는 경고입니다

WordPress가 제공하는 경고입니다 이 스타일을 직접 수정하는 중입니다 CSS,이 편집기 내에서 변경 또는 특정 변경 사항은 일시적 일 수 있으며 웹 사이트 이제 업데이트되었습니다 대신이 맞춤 설정 부분으로 돌아갈 것입니다 여기서 우리는 우리가 약간의 변경을 할 추가 CSS 부분

이걸 사용하는 것이 좋습니다 스타일 시트를 변경할 때 특별한 포트 당신이이 WordPress 웹 사이트에 사용자 정의 CSS를 갖고 싶다면 이것은 실질적으로 모든 변경 사항을 유지하거나 유지할 부분, 변경 사항 귀하의 웹 사이트 내부 이제 어떻게이 특별한 변화를 이룰 수 있을까요? 예를 들어, 모든 웹 세미나에서 변경해야 할 특정 헤드 라인을 변경하고 싶습니다 우리는 여기에 빨간 색을 원하고 글꼴 무게를 줄이기를 원한다

첫 번째 경우 F12 키를 키보드로 누른 다음이 키를 누르십시오 F12 코드 관리자를 열었습니다 이제 우리는 오늘의 안녕하세요 모든 웹 세미나를 클릭 할 것이며 이것은 실제적으로 책임있는 부분입니다 변경 사항 그래서 우리가 지금 우리의 오른쪽 패널로 돌아 가면; 이제 이것은 실제적으로 이 특정 사이트 제목에 대한 모든 변경을 책임집니다

편리함을 위해서 이제 우리 모두는이 특별한 것을 바꿀 것입니다 색상을 변경하면이 색상이 변경되는 것을 볼 수 있습니다 이 사이트 제목으로 이제 우리가해야 할 일은, 우리가이 색을 유지하기 원한다면, 아니면 우리가 다른 색 색상, 우선 우리는 여기에서이 특정한 클래스 이름을 선택합니다 우리는 복사하고 있습니다

그것과 우리는이 추가적인 CSS 부분으로 돌아 간다 어디 있었지? 이 커스터마이징 부분, CSS 추가로 보았습니다 여기에 붙여 넣습니다 이것은 부품과 우리는 약간의 색상을 변경하려고합니다 색깔은 무엇이되어야합니까? 이것은 색이어야합니다

그래서 우리는 여기에서 이걸 복사하려고합니다 그리고 여기에 붙여 넣습니다 그래서 이것이 부분입니다 이제 색상이 여기에서 변경되었음을 알 수 있습니다 그래서 우리가 지금 그것을 출판한다면; 우리가 프로젝트로 돌아와 재 장전한다면 이 특정 색상이 이제 영구적으로 유지되는지 확인하십시오

같은 방식으로 글꼴 두께를 300으로 변경하고 글꼴 스타일을 기울임 꼴로 변경하면됩니다 이제 우리는 변화가 여기에 적절하게 이루어지고 있음을 볼 수 있습니다 우리가 아는 전부는 이 변경 사항을 여기에 게시해야합니다 다시로드 할 때 우리 프로젝트로 돌아 가면 변경 사항이 적절하게 발생했음을 알 수 있습니다 그래서 우리는이 사이트 제목을 성공적으로 변경했습니다

따라서 매번 우리가 어떤 특정한 변화를 꾀할 때마다 부품, 우리는 F12 버튼을 눌러야합니다; 즉, 코드 검사기를 열려고합니다 변경 사항을 반영하고자하는 특정 요소를 선택해야합니다 이 오른쪽 패널에서 특정 클래스 이름을 선택하고 프로젝트로 돌아 가야합니다 그런 다음이 맞춤 설정 섹션에서 추가 CSS로 돌아갈 필요가 있습니다 여기서는 그 (것)들을 풀칠하고 우리는 필요한 모든 변화를 만들 것입니다

이제이 추가 CSS를 사용하는 이유는 무엇입니까? 왜냐하면 매번 우리가 WordPress 웹 사이트에 특정 업데이트를 할 때마다 이 특정 stylecss를 변경하면 해당 변경 사항이 업데이트되지 않습니다 그것들은 미래의 사건으로 볼 수 없을 것입니다 위의 다른 모든 코딩의 맨 아래를 보면 변경 사항이 없음을 알 수 있습니다 이 스타일에 반영되었습니다

CSS 그러나 Section을 커스터마이징하기 위해 돌아가서이 추가 CSS로 돌아 가면 스타일 시트를 업데이트 할 경우 변경된 내용이나 변경된 내용이 있습니다css 파일 그래서이 편집기 대신이 특정 부분을 사용해야하는 이유입니다

세그먼트 및이 추가 CSS를 사용자 정의하십시오 오늘의 튜토리얼에서는이 모든 것이 있습니다 너희들이이 튜토리얼을 좋아하길 바래 만약 당신이이 튜토리얼을 좋아한다면, Red를 구독하는 것을 망설이지 말라 버튼을 아래로 누릅니다

다음 튜토리얼에서 여러분을 만나기를 바랍니다 그때까지, 안녕 [음악]

Add a Hover Animation Effect to a WordPress Site

얘들 아, 어때? 제 이름은 Jason Merrill이고 저는 크리에이티브 디렉터입니다 여기 WebTegrity에서

그래서 아니야, 나는 고리가 아니고 너희들 중 일부를 방해 할 수도있다 그러나 그녀는 팀 구성원들에게 조금 더 많은 동영상을 만들도록 요청했습니다 워드 프레스로 발전하고 워드 프레스에서 가능한 일종 웹 사이트 그래서 오늘 내가 너희들을 위해하고 싶은 것은 움직이는 법을 보여주는 것이다 귀하의 웹 사이트에있는 무언가, 효과에 대한 간단한 표지, 그리고하고 싶습니다

왜냐하면 많은 사람들이 다른 것에 관해서는 협박을 당하기 때문입니다 애니메이션 효과 그들은 자바 스크립트 또는 그런 것과 비슷한 것일뿐입니다 그래서 여기에 나는 카톨릭 신자가있다 여기 샌 안토니오에있는 학교에서 예를 들어 사용하고 싶습니다

마우스 오버 효과를 사용하여 무언가를 애니메이션으로 만드는 것이 얼마나 쉬운 지 알 수 있습니다 그래서 여기에 우리가 있습니다, 만약 내가 여기에 로고를 가져 가면, 단지 약간의 효과가 있습니다 의 물론 그것은 홈 페이지로 다시 연결되지만 그것은 단지 약간의 참여와 웹 사이트를 만들 수있는 이런 작은 것들 장난 그러나 내가 아래로 스크롤하면 그들이 나에게 준 의견은 Instagram 피드 위로 마우스를 가져 가면 애니메이션 효과가 없습니다 이 얼음 작은 커서 손을 클릭한다는 것을 알 수있는 방법이 없습니다

그래서 그들은 이 작업에 약간의 참여를 추가하는 빠른 방법이 필요했습니다 말 그대로 2 줄의 CSS로 처리 할 것입니다 그래서 나는 크롬 내부에서 그것을 검사하면 검사관 내부에서 일하게 될 것입니다 여기 스타일 시트 이제 스타일 시트에 대해 알고 있으면 변경 사항을 알 수 있습니다

내가 여기 만들면 백엔드의 스타일 시트에 추가해야 할 것입니다 그러니 제발 그것을 명심하십시오 이 게임은 좋은 장소이지만 결국에는 변경 사항을 영구히 유지하려면 실제 스타일 시트에 넣으십시오 그러나 그림 영역과 같은 모든 종류의 반복되는 요소에 관해서는 reoccurring 요소에 대한 좋은 시나리오이며, 정렬되지 않은 목록을 사용하고 싶습니다 이는 스타일 내에서 예측하고 사용하기 쉬운 구조를 추가하기 때문입니다

시트 하지만 네가 어쩌면 네가 이걸하려고하는 것 같으면 수집하고 목록 항목 대신 div를 사용하면 같은 방식으로 작동 할 수 있지만 제가 할 일은이 목록 항목으로 갈 것입니다 이것은 일종의 여기에있는이 이미지에 사용되는 상위 목록 항목입니다 이미 CSS를 가지고 있습니다 내가 할 일은 내가 잡을거야, 내가 이것에 호버 효과를 추가하고 싶습니다

그래서 저는 새로운 것을 만들 것입니다 이 inspector 요소 안에있는 CSS 행을 추가하면 목록 항목에 마우스를 가져 가면 의사 클래스가됩니다 그래서이 말을 내가 짚었을 때 말하는 것입니다 목록 항목, 내가 넣은 CSS 속성을 활성화하십시오 여기서 저는 변형 속성을 넣을 것이고 저는 저울을 사용할 것입니다

기능 이제 변형을 통해 할 수있는 여러 가지 작업이 많이 있지만 이 경우에는 내가 원하는대로 크기가 같아서 약간 당신은 변환으로 많은 것을 할 수 있습니다 옆에서 움직일 수 있습니다 옆으로, 뛰어 올라라, 다른 많은 것들이있다

네가 할 수있는 일 그래서 너에게 보여주기 위해 15로 그 스케일을 놓을거야 당신이 정말로 이런 것들을 폭발시킬 수 있다고 생각하지만,이 경우에는 너무 작아서 11처럼 갈 것입니다

그리고 거기에 우리가 간다 진짜 미묘하지만 여전히 애니메이션처럼 느껴지지 않습니까? 마우스를 가져 가세요 그것과 그것은 당신에게 튀어 나오고 그것은 훌륭합니다 그러나 그것을 얻기 위해서 애니메이션이 가지고있는 전환점, 우리는 여기서 부모 클래스에 가야합니다 우리는 속성 하나만 추가하면됩니다

이제이 속성을 마우스 오버 위에 추가하지 않습니다 효과가 있기 때문에 효과가있을 것입니다 그것을 밖으로 들락날락하게하고 싶다 여기이 영역에 추가 할 예정입니다 우리는 재산 전환을 사용할 것이고, 우리는 이것을 항상 사용합니다

나는 이것을 사용합니다 나를위한 표준과 같습니다 나는 이것을 말하기 위해 "all ease 03 seconds"라고 타이프한다 전환이 켜지거나 꺼질 때 발생하는 전환이므로 양방향으로 가고 싶습니다

전환 효과에는 여러 가지 유형이 있습니다 나는 생각하기 때문에 쉽게 사용하고 있습니다 그것은 최고입니다 그리고 저는 그것을 말할 수 있습니다 전환 시간은 0

3 초입니다 초 표준과 같습니다 매우 미묘하고 너무 빠르지도 않다 이제는 애니메이션처럼 느껴지는 멋진 효과를 얻었습니다 이전보다 훨씬 매력적이었습니다

그리고 우리는 말 그대로 CSS 두 줄; 그것은 매우 간단합니다 아무것도 두려워 할 필요가 없습니다 사이트 전체에이 효과를 추가 할 수 있습니다 그리고 변형만으로 작동하는 것은 아닙니다 이것은 전환 속성이기도합니다

마우스를 가져 가면 색이 변하는 것이므로 눈치 채실 것입니다 이런 종류의 멋진 전환점이 있습니다 마우스를 가져 가면 날카로운 점프가 아닙니다 그걸로 그래서 그것은 사이트에 많은 스팸을 실제로 추가하는 것과 같은 작은 것들입니다

이 비디오가 사람들에게 도움이되기를 바랍니다 물론 네가 아니란 걸 기억해 완료했으면, 이것을 복사하거나, 스타일 시트에 넣거나, 또는 다음과 같습니다 이미 내 스타일 시트에, 나는 그 마지막 줄을 잡아서 저기도 있습니다 그래서 너희들이 WordPress에 질문이 있다면 한동안 고리를보고 있던 당신들 중 일부는 더 고급, 코멘트 섹션에서 알려 주시기 바랍니다; 나는 그들을 기쁘게 생각한다

나 또는 다른 팀원 중 한 명, 우리는 매우 재능이 많습니다 개발자들은 당신이 얻고 싶어하는 것처럼 괴상하게되기를 원할 것입니다 WordPress와 함께 하지만이게 내가 가진 전부 야 얘들 아

지켜봐 줘서 고마워! 안녕!

Minify HTML CSS JS with PHP (Simple Minifier)

안녕하세요 오늘 내 채널에 오신 것을 환영합니다

제가 보통 얼마나 작은 지 보여 드리겠습니다 내 HTML CSS와 JavaScript는 기본적으로 minifier가하는 일은 모두 압축합니다 소스 코드는 귀하의 웹 사이트를 가볍고 빠르게 만들어줍니다 나는 간단한 작은 화자를 만들었다 Andy Chilton이 제공하는 온라인 서비스를 통해 javascript-minifier

com 및 cssminifiercom 단순화 기 모든 소스를 하나의 파일로 압축하여 웹 서버에 하나의 요청으로 여러 번 요청할 수 있으며 요청을 저장하면 귀하의 웹 사이트 로딩 시간 좋아, 간단한 웹 프로젝트 폴더를 열자 당신 모든 CSS 파일이 CSS 폴더 안에 있고 모든 자바 스크립트 파일이 js 폴더 안쪽 CSS 파일을 열어서 압축 파일이 아직 압축되어 있지 않은 것을 볼 수 있습니다

여기에 indexhtml을 HTML 폴더에 넣을 것입니다 indexhtml 파일을 편집하여 모든 CSS 및 JavaScript 제거 HTML 코드 내부의 링크 태그 당신이 가진 폴더를 축소하기 위해 링크 된 새로운 링크 태그로 대체하십시오 minify

css 및 minifyjs에 올바르게 연결하십시오 이제 우리는 설정을 준비했습니다 우리 프로젝트 폴더에 "간단한 minifire"를 추가하자 그리고 당신이해야 할 일은 minifier

php를 열어야한다는 것입니다 로컬 호스트 또는 웹 서버를 사용하여 minifier를 시작합니다 나는 프로젝트를 추가 할거야 폴더를 내 로컬 호스트 xampp 서버에 넣으십시오 브라우저 우리는 HTML 자바 스크립트와 CSS 파일을 보게 될 것입니다

여기서 우리는 코드가 올바른 순서 목록에 있는지 확인해야합니다 일반적으로 stylecss 및 mainjs와 같은 맞춤 코드가 마지막이어야합니다 그들은 다른 근원을 대체해야한다

그래서 나는 그들을 올바른 것으로 옮길거야 주문 목록 좋아, 이제는 간단한 minifier를 실행하고 기다려 보자 오류나 문제로 인해 문제가 해결되지 않으면 문서를 살펴보십시오 이제 끝났어 우리의 축소 된 출처를 확인해 봅시다

모든 파일은 주석으로 축소됩니다 윤곽 주문 목록에 문제가있는 경우 계속 수정할 수 있습니다 이제 우리 프로젝트를 다시 보도록하겠습니다 자바 스크립트 및 CSS 파일을 만들고 폴더 및 출력 HTML 파일을 축소하여 프로젝트 루트 폴더

제 경우에는 HTML CSS와 JavaScript 폴더를 삭제할 것입니다 하지만 이것은 자습서를 위해서만 필요합니다 자신의 파일을 백업 해주십시오 인덱스 파일을 열자 다 잘된 것 같습니다

출처를 보자 좋아, 모두 이미 이미 자르네, 너희들, 내 튜토리얼을보고 주셔서 감사합니다

Change Menu Font in WordPress (just the menu)

얘들 아,이 질문을 환영 하네 처벌 자 한테서 온거야

그래서 이것은 내가 좋아하는 의견 유형과 같다 당신은 감사의 창조적 인 철자법을 여기에서 조금 공손함을 필요로하지 않습니다 하지만 상처를 입지 않고 바로 비즈니스에 들어가서 메뉴의 글꼴을 변경하려면 어떻게해야합니까? 특이성이 있으니, 고맙습니다 처벌 자 우리는 동영상에 질문을 받았으며 데모 웹 사이트를 알고 있습니다 이것이이 웹 사이트에서 메뉴 글꼴을 변경하는 방법을 실제로 배우기위한 것입니다 그러나 그것은 또한 어떤 웹 사이트에서 작동 할 것이고, 그것은 좋을 것이다

나는 당신들에게 사이트 원점 사용자 정의 CSS 플러그인을 사용하도록 말하는 것만으로 생각했다 아래 링크를 클릭하면 전체 사이트에 연결됩니다 그리고 홈페이지의 일부를 클릭 한 다음 CSS를 변경하면 CSS가 작성됩니다 그러나 작은 기회가 있습니다 그것은 당신의 테마에서 작동하지 않을 것이므로, 우리는 우리 자신의 커스텀 CSS를 작성하는 구식 방식으로 할 것입니다 좋아요, 로그인하겠습니다

그리고 당신이 당신의 wordpress blog 또는 사이트에 관계없이 할 필요가있는 모두 또는 테마는 메뉴 자체를 마우스 오른쪽 단추로 클릭하려는 메뉴 글꼴을 변경하는 것입니다 따라서 메뉴 탭을 선택하십시오 어느 것이 든 상관 없습니다 나는 보통 첫 번째 것과 다른 것을 좋아한다 서비스를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭하십시오

일단 당신이 그렇게하면 당신은 HTML은 왼쪽에, CSS는 테마 개발자가 만든 오른쪽에 있습니다 그런 다음 오른쪽을 클릭하고 글꼴 위치를 찾으십시오 보통 아래로 스크롤해야합니다 글꼴 크기 float : left를보고 나서 마지막으로 글꼴 모음을 봅니다 정확히 우리가 찾고있는 것입니다

폰트 패밀리를 찾으면 그냥 켜고 끌 수 있습니다 CSS가 올바른지 확인하고 메뉴에서 작동하는지 확인합니다 완벽 할 때도 가끔은 체중을 바꿀 수 있다는 것을 알고있는 것처럼 다른 것들을 바꿀 수 있습니다 우리가 항상 확신 할 수없는 이유가 있지만 항상 대답이 있습니다 따라서 메뉴 글꼴 만 변경하려면 CSS 선택기를 클릭하십시오

한 번 클릭하면 강조 표시됩니다 그 작은 공간에서 마우스 오른쪽 버튼을 클릭하고 복사하십시오 이제 대시 보드로 돌아와서 맞춤 CSS 창으로 이동하려고합니다 그렇다면 사용자 정의 할 수 있습니까? 하지만 우리는 외형에 마우스를 대고 사용자 정의 CSS를 클릭 할 수 있도록 테마 junkie 사용자 정의 CSS 플러그인을 설치했습니다 우리가 작성한 몇 가지 사항이 있습니다

이미지 슬라이더 텍스트가 커집니다 좋아, 그럼 우리는 몇 가지 공간을 만들고 새로운 CSS를 쓸 수있다 그러나 좋은 소식은 우리가 복사했기 때문에 그것을 쓸 필요가 없다는 것입니다 단지 붙여 넣을 수 있기 때문입니다 다음으로 공간을 만들고 악어 브래킷을 열어 ​​악어 브래킷을 치면 새로운 글꼴로 입력하고 쓸 수 있습니다

폰트 패밀리로 표시되는 것은 무엇입니까? 콜론 이요 콜론 이요 그러면 요즘은 네가 원하는대로 바꿀 수있어 나는 호모를 좋아해 그래서 너는 그걸 시도해 글쓰기에 세미콜론 마침내 들어가서 닫힌 작은 괄호를 쓰십시오

이것들은 악어 브래킷이라고 불리는 이것들은 악어와 수학자를 풀어줍니다 어쨌든 우리는 지금 끝났어 새로운 글꼴을 선택했습니다 나는 그것을 구할 필요가있다 이제 사이트를 새로 고침하고 새 글꼴이 표시되는지 확인합니다

새 글꼴을 보지 못했다면 그것은 당신이 잘못된 것을 썼거나 캐싱이 켜져 있고 사이트의 최신 버전이 표시되지 않습니다 캐시 버전 I를 보여주고 있습니다 그것이 글꼴과 CSS를 집어 들고 있지 않은 두 번째 것 같아요 이제는 대시 보드로 돌아가고 싶은 당신에게도 일어날 수 있습니다 우리는 WP 슈퍼 캐시를 설정으로 이동하려고합니다

캐싱을 해제하는 이유는 사이트를 업데이트 할 때 캐싱을 해제하는 것이 좋기 때문입니다 이 기능을 끄고 새로 고침하기 위해 많은 변경 작업 수행 그리고 나는 그것이 효과가있다라고 말하는 것이 어렵다고 생각한다 그러나 제로 거기에서 우리는 간다 우리가 지금 내가 가지고있는 주된 nav가 Tahoma 다라는 것을 알았어 호마 한테 돌아 가면 다시 떨어질거야

철도 그들이 사용하지 않고 거기에서 당신이 괜찮아 졌기 때문에 여전히 여기에 쓰여진 것은 무엇입니까? 그래서 그것은 폰트 패밀리를 바꾸는 방법입니다 다른 말로하면 WordPress의 네비게이션 메뉴 항목의 폰트입니다 나는 또한 당신에게 메뉴 항목의 색상 및 기타 기능의 글꼴 크기를 변경하는 방법에 대한 힌트를 제공하기를 바랍니다 좋아 큰 것을 보아 주셔서 감사합니다 감사합니다

처벌자를위한 그 좋은 질문을 제안하고이 튜토리얼을 고무시키는 것은 괜찮습니다 내가 너를 위해 이걸 만드는 걸 좋아하기 때문에 너를 지켜봐 줘서 고마워 다음 번엔 널 모두 만날거야 괜찮아 그리고 CSS를 완벽하게 작성하고 싶다면 장기적으로는 좋은 아이디어이며 시드니 또는 테마 개발자가 수행 한 표준을 따르고 San Serif를 위해 Serie에서 작성할 수 있습니까? 약간의 쉼표가 있고 난 후에 나는 단지 어느 것이 집인지 기억하지 않는다

집은 인본주의 자 Sancerre 완벽한 그래서 돌아와서 산세 리프를 써라 좋아, 글꼴을 바꾸지 않을거야 너가 serif을 쓰고 serif 또는 sans을 만들 수있는 것처럼 그것은 아니다 세리프를 제거하고 세리프를 제거하십시오 그것은 좋은 CSS 스타일링으로 코드를 훌륭하게 유지하는 것입니다

집에 따옴표를 달아 완벽한 저장이 가능합니다 좋아, 우리는 사업에 뛰어나다

WordPress advanced css add background images to your sub menu

안녕하세요 여러분,이 비디오에 오신 것을 환영합니다 www

system22net 및 https://great-webdesigncom의 Jamie입니다 이 비디오에서는 고급 CSS를 수행하는 방법을 보여 드리겠습니다 사용자 정의를 통해 드롭 다운 메뉴를 무언가로 바꿀 수 있습니다

백그라운드에서 일부 이미지와 더 재미있는 예를 보여 드리겠습니다 여기에 우리가 좋아하는 것 같은 것을 만들거야 그래서 시작하자 우리가하고 싶은 일은이 메뉴를 수평으로 늘리고 싶다는 것입니다 그래서 우리는 실제로 여기에 우리의 링크 뒤에 이미지를 배치 할 수 있습니다

이것을 검사하다 그것은 오른쪽 클릭하고 검사 또는 f12이고 우리의 하위 메뉴가 있습니다 나는 아빌라의 cui를 좋아한다 그래서 그것이 우리가 여기에있는 것이다 내가 바라는 것이 그것이다

바로 거기에서 순서가없는 목록을 보자 그래서 우리는 너비를 늘려야하는 뷰포트 너비 인 폭 100VW의 CSS 속성 화면을 가로 지르다 오케이하자 너는 그걸 펴다 볼 수있는 것처럼 그걸 보자 그게 다 내가 여기서 찾고자하는 것과 내가 원하는 다음 일이야 내가 중심에 있는지 확인하고 싶습니다

순간, 우리는 그 파란색 테두리를 없애고 싶습니다 이 텍스트가 중앙에 있는지 확인하여 텍스트 정렬 센터를 수행하고 거기에있는 것을 확인하십시오 거기에 또 다른 하나는 우리가 여기에 중요한 속성을주고 싶습니다 그런 식으로하면 다른 쪽도 가리고 그걸 원하지 않아요 하늘색 테두리가 그 꼭대기에 있으므로 우리는 경계선 없음이라고 말할 것입니다

그거 없애 버려 조금 더 모양이 좋아지기 시작했다 이제 이것을 복사하고 테마 옵션으로 이동 한 다음 아래로 내려야합니다 테마 옵션 중 페이지 맨 아래에 Divi 테마 옵션이 표시됩니다 사용자 정의 CSS는 여기에 새 항목을 만들어 부 메뉴라고 부릅니다

나는 항상 여기에 제목을 써서 당신이 많은 것을보고 있다면 CSS를 사용하면 코드 편집기로 원하는 부분을 쉽게 찾을 수 있습니다 대개 번호가 매겨져있어 검사관을보고 찾으면 찾을 수 있습니다 안감 번호가 있지만 Divi에서는 여기와 모든 것을 얻지 못했습니다 여기서하는 일은 절대적으로 Divi를 사용하고 있다고 말한 것처럼 사용됩니다 끝내 주지만 이것은 WordPress 사이트에서 사용할 수 있습니다

약간의 테마가있는 사용자 정의 CSS 비트를 사용하면 하위 테마를 만들어야 테마가 업데이트되면 CSS가 덮어 쓰이지 않습니다 좋아, 그냥 방금 만들었던 것을 붙여 넣자 그게 필요 없어 그리고 우리의 변화가 새로 고침되고 나는 똑같이 머물러야한다고 말하지만 그 하위 메뉴는 여기에서 우리 제 3의 메뉴는 그것이 지금했던 것처럼 줄곧 나아야한다 거기에 우리는 간다 그러나 나는 그 사람들이 왼쪽으로 가기를 바란다

우리가 실제로 그 뒤에 이미지를 넣을 수 있도록 약간의 공간을주고 싶습니다 각자 나는 일정한 너비를 만들어서 괜찮은 이미지를 넣을 수 있기를 바란다 그것 뒤에 그래서 선택하자 메뉴 목록 항목 하위 메뉴가있는 바보가 메뉴 목록 항목 목록으로 가득 차게됩니다 목 거기에 우리가 원하는 것은 이제 우리가주고 싶어하는 목록 항목 목록 항목입니다

상단에 약간의 공간이있어서 이미지를 거기에 넣을 수 있습니다 padding top과 275 pix 그리고 더 깊게 만들어야합니다 여기에 이미지를 넣을 자리가있어 그리고 내가 그걸 상상해 보자 왼손쪽에 다시 뒤집어 씌울 필요가있어

그래서 어떤 콜론을 세미콜론으로 콜론을 넣으면 작동하지 않을까요? 그 왼쪽에있는 것이 더 좋을 것입니다 나는 그와 같은 200 250 무언가를 알고 있습니다 그래서 그들에게 폭을 넓혀 보겠습니다 225 사이에 2 25 픽셀이 완전히 다른 것처럼 보일 것이라고 생각하지 않습니다 하지만 그게 옳은데 우리는 멋진 이미지를 넣기에 충분한 공간을 가지고 있습니다

거기에 배경이 있으므로 그냥 CSS의 맞춤 CSS에 저장하겠습니다 왼쪽 클릭하고 드래그하여 선택하면 Ctrl C로 복사됩니다 우리가 지금했던 곳으로 내려 가자 왜냐하면 지난 두 사람은 필요 없어 괜찮은 사람들은 바꿀 수 없다

빠른 저장을 해보십시오 재미있는 부분이 있습니다 여기에 백그라운드에서 원하는 이미지가 있으므로 멋진 배경을 추가하고 싶습니다 여기 어딘가에서 이미지를 보자이 목록 항목을 보면 어떨까요? 여기 내가 그들 위에 마우스를 올려 놓는 동안 당신은 그들이 녹색으로 변하는 것을 볼 수 있습니다

패딩은 각자 개인 ID 메뉴 아이템 799-801과 7을가집니다 여섯 둘, 그리고 신분증이야 그래서 우리가 원하는대로 할거야 해시 태그 메뉴 항목을 수행 할 수있는 ID이기 때문에 사용자 정의 CSS에서 할 수 있습니다 번호를 입력 한 다음 원하는 속성을 추가하여 다시 돌아가십시오

맞춤 CSS로 몇 개의 해시 태그를 드롭합니다 ID 메뉴이기 때문에 – 항목 – 숫자에 관계없이 나는 그것이 799라고 생각했다 그렇지 않다면 1 분을 바꾸어야 할 수도있다 부정확 나는 그게 무엇인지 생각해 좋아, 우리가 뭘하고 싶은지 나나 이미지를 배경으로하고 싶어

그게 배경 이미지가 될거야 자본이 필요 없어 B 다시 돌려 놓자 이미지를 실행하고 배경 이미지로 URL을 주어야합니다 일부 일반 대괄호를 열려면 URL을 식히고 여기에 둥근 대괄호를 그 (것)들 사이에서 우리는 URL를두기 원하고 당신은 잘 말할지도 모른다 나는 어떻게 알 는가? 내가 넣고 싶은 그림의 URL 또는 모두가 할 이미지는 페이지는 테스트 페이지 또는 원하는 모든 종류의 페이지 일 수 있습니다 이 페이지를 유지할 필요가없는 경우 Divi 빌더를 사용할 필요가 없습니다

기본 편집기를 사용하고 미디어 탭 추가를 누르십시오 사진을 업로드했습니다 이미 여기에서 사용할 예정이므로 사진을 삽입하십시오 당신이 그것을 사용하고자하는 것은 텍스트로 올라가면 지금이 페이지에 있습니다 탭의 상단에있는 탭은 스크롤하여 모양을 찾으면 URL을 찾는 방법입니다

소스 SRC 거기에 그것은 우리가 그 오프닝에서 원하는 URL입니다 거꾸로 한 쉼표로 끝내고 둘 다 포함하면 거기에 거꾸로 된 쉼표를 거기에 모두 복사하여 ctrl C를 복사하여 사용자 정의 CSS로 돌아가십시오 그 두 작은 라운드 사이에 붙여 넣으세요 거기에 괄호를 써서 빠른 저장을해라 나는 그녀가 작은 세미콜론을 가지고 있는지 확인하지 않을 것이다 결국 우리는 더 많은 속성을 추가 할 것이고 당신이 필요로하는 것처럼 이제 다시 사이트의 모습을 보도록하겠습니다

그 첫 번째 이미지에 작은 이미지가 새로 고침 우리의 모습을 보자 드롭 다운과 좋은 거기에 이미지가 없다 나는 아이디어를 잘못 7 않았다 아홉 아홉, 아홉 아홉 아홉 가지를 보자 background-image : url 잘못된 것 오 URL 뒤에 간격이 있음을 알 수있다

우리는 URL과 첫 번째 둥근 괄호 사이에 간격을 두지 않기를 바랍니다 너는 아무런 격차도 없다 내 것과 같이 작동하지 않을 것이다 다시 시도하고 다시 시도하십시오 새롭게 하다 그리고 희망적으로 이번에는 거기에 우리의 이미지가 있습니다

좋아요 잠깐만 그래서 저는 똑같은 일을하려고합니다 거기에 다음 네 개의 이미지가있을 것입니다 오른쪽에있는 경계선을 보자

오, 포기해라 오른손 경계선이 단단한 2 개의 말 물론 화이트는 FFF보다 더 좋을 것입니다 그리고 우리는 그것을 줄 것입니다 바닥에 조금 더 두꺼운 경계선을 세 가지 선택을 해봅시다 우리는 사용하고있는 푸른 색을 사용하고 단단한 경계선을 원합니다

파선보다는 오히려 아마도 그 색깔이 같은 색깔이 될 것이기 때문에 아마 그것을 볼 수 없을 것입니다 드롭 다운보기 – 오, 당신은 그것을 볼 수 없다 괜찮아요 약간 진한 파란색으로 괜찮습니다 이제 우리는 나머지 부분을 씻어 내고 반복 할 것입니다 지금은 그냥 빨리 해보 죠 이걸 복사 할게요

그 둘을 원해요 여기에 속성이 있으며 사용자 정의 CSS에 추가 할 것입니다 좋아, 이제 우리는 그것이 우리가 원하는 것을 얻었습니다 메뉴 항목의 나머지 부분은 3 가지가 더 있습니다이 세 가지를 복사합니다

times one two three 이제 우리는 숫자를 바꾸고 싶습니다 8시 2 분 8시 2 분 7시 6 분 그리고 일곱 여섯 – 나는 믿는다 이제 내 이미지는 내가 해냈어 간단히 말해서 나는 1 2 2 3 우리는 거기에 4 명이있어 5 번 가자

나는 그것에 대해 많은 생각을하지 않고있다 분명히 당신은 당신의 생각을 두 개 더 넣고 싶습니다 두 가지는 괜찮습니다 그리고 사이트로 돌아가서 우리는 이제 그 모든 것들에 대한 이미지를 가지고 있어야합니다 새로 고침됩니다

우리가 지금 가지고있는 순간에 우리의 검사관을 없애자 흰색 선으로 구분 된 모든 것들에 대한 배경 이미지와 나는 우리가 분명히해야 할 일은이 배경색을 제거하는 것입니다 하위 메뉴는 CSS로 할 필요가 없다는 것입니다 실제로 우리가 페이지 편집 메뉴에서 그렇게하자 페이지에 내가 편집 페이지 버튼을 칠 수있는 곳으로 우리가 여기서 다룬 풀 너비 메뉴가 있습니다

그래서 우리가 열면 디자인에 가서 배경색을 바꿔야합니다 이 하나의 바로 여기 드롭 다운 메뉴 배경색 나는 그걸 끌어낼 수있다 투명하므로 페이지를 빠르게 업데이트 할 수 있습니다 변경 사항 미리보기 그리고 거기에 우리가가는 그런 배경이 있습니다 그래서 우리는 그것을 가지고 있습니다

하위 메뉴 배경에 일부 이미지를 추가하고 테두리를 추가하려면 CSS는 꽤 많이 있지만 일단 한 번 해보 셨으면 정말 쉽습니다 유용하다는 것을 다시 한번 발견했습니다 제이미는 시스템 22와 훌륭한 웹 디자인 통신이 동영상을 즐겼다면 좋겠다 보고있는 채널 덕분에 멋진 하루 되세요 오

How to Easily Add Custom CSS to Your WordPress Site

WordPress 웹 사이트에 맞춤 CSS를 추가해야합니까? 잘 지켜봐 이 비디오에서는 사용자 정의 CSS를 추가하는 데 사용할 수있는 두 가지 방법을 보여줍니다

WordPress 웹 사이트 첫 번째 방법은 단순히 WordPress 관리 영역에서 직접 사용자 정의 CSS 그 머리를 모양 섹션 및 워드 프레스 47부터 모든 테마 이것을 가지고 당신은 완전히 아래로 스크롤하고 추가적인 CSS를 보게됩니다 에서 여기에 CSS를 추가 할 수 있으며 CSS를 추가하면 실제로 예를 들어 항목이 변경되면 추가하겠습니다

이 CSS 코드와 템플릿에 붙여 넣기 스티커 제목이 방금 나를 위해 바뀌 었습니다 당신이 볼 수있는 변화가 마음에 들면 단순히 게시를 클릭하면 새로운 테마 CSS의 일부가됩니다 지금 이 테마 사용자 정의 도구를 사용하여 추가하려는 모든 사용자 정의 CSS를 기록하십시오 테마를 전환하면 테마를 전환 할 수 있습니다 그 내용을 복사하여 다음 주제에 추가 할 수 있도록하십시오

너는 사용한다 이제 방법 2는 특정 플러그인을 사용하여 사용자 정의 CSS를 추가하는 것입니다 를 사용하여 귀하의 사이트에 사용자 정의 CSS를 유지하기 때문에 CSS 플러그인은 꽤 좋습니다 당신이 주제를 바꿀지라도 관계없이 우리가해야 할 일은 우리에게 돌아가는 것입니다 대시 보드, 플러그인 영역으로 이동 클릭하여 검색 할 새 항목 추가 간단한 사용자 정의 CSS라는 플러그인입니다 이 때문에 아래로 스크롤하고 싶습니다

이 저자들이 찾고있는 도구이므로 지금 설치를 클릭하고 일단 우리가 그것을 설치하고 또한 그것을 활성화하자 일단 활성화되면 여기에서 당신이 모든 사용자 정의 CSS를 추가 할 수있는 모양의 사용자 정의 CSS에서 찾을 수 있습니다 당신은 당신이 바라는 방식으로 당신의 테마를 보일 필요가 있습니다 변경 사항 업데이트 CSS를 클릭하고 사이트를 방문하는 것이 좋습니다 너가 너의 위치를 ​​진짜로보고 싶으면 너가 사용할 수있는 상여 방법 호출 된 플러그인을 사용하여 프런트 엔드에서 CSS를 업데이트 할 수 있습니다 CSS 영웅

사이트의 프런트 엔드에서 변경이 가능하며 변경하려는 항목을 클릭하십시오 우리는 또한 리뷰가있다 당신이 볼 수있는 비디오를 볼 수도 있습니다 귀하의 웹 사이트에 CSS 변경 사항을 적용하기위한 위대하고 쉬운 방법 너 배웠어? 오늘의 비디오에서 나온 게 뭔가? 그렇다면 YouTube 채널을 구독하고 우리는 당신이 당신의 WordPress 웹 사이트를 관리하고 감사 할 수 있도록 도움이되는 팁을 보낼 것입니다

지켜보기 위해