Elementor를 사용하여 80 스타일 스타일 페이지를 만드는 방법

80 년대 디자인-우리는 그것을 좋아합니다! 이러한 모든 기하학적 모양, 공간 배경 및 네온 조명 효과로 인해 특별 이벤트 (크리스마스 파티)의 랜딩 페이지가 더 빛날 수 없습니다! 어떻게하는지 보여 드리겠습니다.

머리띠를 제거하고 네온 조명을 켜고 Vron에 Tron을 삽입하십시오 ... 80 년이 돌아 왔습니다!

디자이너로서 저는 항상 아무도 말하지 않는 80 년대 디자인에 대한 애착을 가지고있었습니다. 이러한 모든 기하학적 모양, 수많은 패턴, 값싼 네온 효과가있는 공간 배경 (좋은 추억을 되살려 야합니다).

사실 어디에서나 볼 수 있습니다. Netflix, MineCraft 또는 Muse의 "Strangers Things"에서 방금 80 년대 풍미의 앨범 또는 Tron의 리메이크를 발표했습니다.

따라서 이 추세를 활용하고 다음으로 만든 방문 페이지에서 구현하는 방법을 보여 주십시오. Elementor ?

이론적 인 튜토리얼이 아닙니다. 향후 이벤트에 대비할 수있는 도구를 제공하기 위해 현재 할인 기간 (블랙 프라이데이)에 대한 몇 가지 요소를 가져 왔습니다.

오프닝 섹션

오프닝 섹션은 영웅 섹션입니다. 여기서 가장 먼저 눈에 띄는 것은 제목이다. 나는 이 분야에 많은 노력을 기울이는 것이 좋습니다. 방문객 볼 것이다.

전달하려는 정확한 메시지에 대해 생각하십시오. 제목이 크고 명확하면 사람들의 관심을 끌 것입니다. 이 첫 번째 섹션은 사용자가 아래로 스크롤하여 페이지의 나머지 부분을 탐색하도록 유도해야합니다.

네온 효과

컴포지션 중앙에 로고, 메시지, 버튼을 배치했습니다.

가장 중요한 메시지가 "네온 불빛"으로 쓰여진 것을 볼 수 있습니다. 네온처럼 보이게하려면 디자인에 CSS를 추가해야합니다. CSS는 텍스트에 분홍색 그림자를 많이 추가합니다. 그게 전부입니다.

따라서 헤더 위젯을 추가하고 선택한 글꼴의 크기를 변경하여 빛나게하고 색상을 흰색으로 설정해야합니다.

그런 다음 고급 탭을 열고 사용자 정의 CSS 탭에 붙여넣고 다음 코드를 추가하십시오.

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

분홍색 옆에 다른 음영을 사용하려면 파운드 기호 뒤에있는 색상 번호를 변경하면됩니다. 그게 다야.

직위

이 디자인의 또 다른 흥미로운 측면은 "FRI"라는 글자 옆에 나타나며 연도가 세로로 표시됩니다 (90도).

이 모양을 얻으려면 내부 섹션 위젯을 추가해야합니다. 이것은 하나의 열에 만 수직 효과를 구현하기 위해 수행됩니다.

내부 섹션을 추가 한 후 각 열에 제목 위젯을 추가하십시오.

텍스트 스타일을 지정한 다음 두 번째 열 (회전하려는 열)의 고급 탭을 열고 사용자 지정 CSS 탭에서 다음 코드를 작성합니다.

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 복고풍 배경

메인 포스트 작업을 마쳤 으면 배경 작업을 시작하여 텍스트를 향상시키고 80 년대 복고풍 공상 과학을 현실로 만들어보세요. 여기에 Photoshop에서 디자인 한 이미지를 추가하여 영웅 배경으로 사용했습니다.

이 디자인에서 배경은 Tron을 연상시키는 기하학적 격자와 왼쪽으로 기울어 진 야자수의 터치와 그 복고풍 느낌을 얻기 위해 파란색-보라색-핑크의 메인 그라디언트를 특징으로합니다. "DeLorean DMC-12"와 같은 멋진 터치도 있습니다 (백 투 더 퓨처에서 알아볼 수있을 것입니다).

자동차와 슈팅 스타는 모두 섹션의 주요 텍스트를 대상으로 주요 메시지를 강조 표시합니다.

기능 섹션

랜딩 페이지를 디자인 할 때 각 섹션 간의 관계를 고려해야합니다. 80 년대 복고풍과 같은 패셔너블 한 디자인은 좀 더 복잡한 작업입니다.

따라서 놀라운 첫 번째 섹션을 디자인하고 막대를 올린 후에는 각 섹션을 구성 요소로 고려하면서 높은 수준을 유지하고 동일한 디자인 테마를 유지해야합니다.

디자인

이 섹션에서는 페이지를 "크롤링"할 때 더 어두운 "알 수 없는 개체" 모양을 디자인했습니다. 여기에서 제목, 3개의 글머리 기호 및 버튼을 볼 수 있습니다. 이 떠 있는 3D 효과를 만들기 위해 약간의 Photoshop을 Flip-box 설정과 함께 사용했습니다.Elementor.

포토샵에서 무대

그래서 제가 처음 한 일은 포토샵에서 전체 씬을 만들어 제작을 시작하기 전에 모든 것이 어떤 모습인지 확인하는 것이 었습니다. 제목에서는 이전의 네온 모양을 볼 수 있으며 그 아래에 아이콘과 제목 (원)이있는 삼각형 3 개를 추가했습니다.

각 삼각형에 파란색 보라색 분홍색 그라디언트를 추가했습니다. 위의 선 패턴은 80 년대 TV 느낌을주고 뒤에서 블러를 주어 반짝이는 공상 과학 느낌을 만듭니다.

아이콘은 또한 삼각형 하단의 제목뿐만 아니라 네온 모양을 갖습니다. 굵은 글꼴로 플로팅 효과를 추가합니다. 배경은 삼각형에 사용 된 것과 동일한 선 패턴으로 스모키, 흐림 및 어두운 효과를냅니다.

3D 애니메이션의 경우 삼각형은 투명한 배경을 갖습니다. 이것은 가려지지 않은 경우 뒷면의 텍스트가 표시됨을 의미합니다. 그래서 삼각형의 측면에 약간의 검은 연기를 추가하여 담요를 블렌딩하고 여전히 뒷면을 덮었습니다.

따라서 기본적으로 편집기에는 배경, 아이콘 및 제목의 세 가지 레이어가 있습니다.

빌드하기

에디터에서 플립 박스 위젯을 추가했습니다. 전면 콘텐츠 탭에서 그래픽 요소로 이미지를 선택하고 제목을 추가했습니다. 배경 탭에서 컬러로 색상을 투명으로 변경하고 이미지 섹션에서 디자인 한 삼각형을 추가 한 다음 완벽하게 맞도록 위치를 변경했습니다. .

그런 다음 뒷면 탭에서 동일한 작업을 수행했지만 제목을 추가하는 대신 텍스트를 추가했습니다. 설정 탭으로 이동합니다. 여기서는 상자 높이를 가지고 놀았습니다. VH 장치는 상대 단위이기 때문에 사용했습니다. VH 장치는 화면을 기준으로 이미지를 변경합니다. 방문객 사용할 것입니다.

이것은 더 반응이 좋습니다. 효과 부분에서는 Flip 효과를 유지하고 방향을 왼쪽으로 변경하고 3D 깊이를 활성화하여 놀라운 3D 효과를 얻었습니다.

CTA

여기서 전체 구성은 버튼을 겨냥합니다 (원하는 것은 사용자가 버튼을 클릭하는 것이기 때문입니다). 여기에서 버튼이 굵고 '얼굴'이 아니라 약간의 빛이 나는 연기가 자욱한 배경과 잘 어울리는 것을 볼 수 있습니다. 하지만지나 가면 분홍색이 나타납니다.

비평가 섹션

사용자가 세 번째 섹션으로 스크롤하면 올바른 작업을하고 있음을 의미합니다. 따라서 제품과 그 놀라움에 대해 이야기 한 후 이제 다른 당사자가 발언 할 때입니다.

디자인

이 섹션에는 네온 제목이있는 급진적 기하학적 배경에 주석 위젯이 있습니다. 배경은 Photoshop에서 디자인 한 다음 섹션의 배경에 고정 배경으로 배치하여 스크롤링 호버 효과를 만듭니다.

나는이 섹션을 '뒤에서'보이게하고 싶었다. 그래서 아래로 스크롤 할 때 노출 될 수있다.

가격 테이블 섹션

이 섹션은 섹션입니다 가격 테이블 . 여기에서 판매를 지원할 수있는 모든 항목을 볼 수 있습니다. 제목, 카운트 다운 및 물론 가격표.

이것은 랜딩 페이지의 결승선입니다. 따라서 사용자가 클릭하지 않으면 문제가 발생한 것입니다.

디자인

이 섹션의 디자인에는 하나 이상의 디자인이 있습니다. CONTACT 80년대-갤럭시. 여기의 배경은 Photoshop에서 편집되어 밝은 무 보라색 모양을 제공하고 마지막에 펀치를 주기 전에 존재했던 검은색 배경에서 돋보입니다.

헤더와 슬로건 아래에는 판매가 끝날 때까지 남은 시간을 보여주는 카운터가 있습니다. 여기서는 사용자 정의 글꼴 옵션을 통해 추가 한 'space mono'라는 공간 글꼴을 사용했습니다.

아래 가격표에서 각 테이블은 밝은 검정색 배경으로 "공간에 떠있는"모양을 제공합니다. 마우스를 올려 놓으면 배경이 어두워지고 내부의 텍스트를 읽도록 지시하는 초점으로 주변에 빛이납니다.

마우스 커서를 단추 위로 이동하면 단추의 색이 다시 변경됩니다. 우리의 위대한 장면에 대한 정보를 읽은 후에,

이 멋진 모델을 얻으십시오

이 튜토리얼에 표시된 템플릿을 이제 라이브러리에서 사용할 수 있습니다. Elementor. 따라서 한 번의 클릭으로 사용할 수 있습니다.

Elementor를 사용하여 80 스타일 스타일 페이지를 만드는 방법