Shopify 방문 페이지 복제

빠른 소개

Before I write anything else, I need to mention a couple of things. Firstly, I'm new here, so bear with me. Secondly, if you find videos more educational I have a YouTube tutorial 이 프로젝트는 여기를 클릭하세요 :).

자, 오늘은 Shopify 랜딩 페이지 복제본을 만드는 방법을 알려드리겠습니다. 그리고 이것을 만든 이유는 UI의 첫 번째 규칙을 보여주기 위해서입니다. Simple & Consistent .
당신에게 깊은 인상을 남긴 당신이 사용한 모든 앱/웹사이트를 생각해 보십시오. 그들 모두(일부는 그렇지 않음) 이 간단한 규칙을 따랐습니다.

A Simple & Consistent 다음과 같은 이유로 UI가 좋습니다.

압도적이지 않습니다(신규 사용자에게 무서울 수 있음)

친숙함을 제공(사용자가 다시 찾게 함)

중요한 부분을 더 쉽게 볼 수 있습니다

자, 이제 이것이 저에게 매력적인 웹 사이트인(또는 오히려 매력적인) 이유에 대한 기본 요소를 이해했으므로 코드를 살펴보겠습니다.

폴더 구조

Open up your editor, and create the folders and files you see on the image( shop-vector.png can be downloaded from my GitHub):

폴더를 생성한 후 HTML 페이지의 기본 골격을 생성합니다(CSS 파일 및 부트스트랩 링크를 참조하는 것을 잊지 마십시오).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>
        <h1>Hello World!</h1>

        <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"
        ></script>
    </body>
</html>

그리고 CSS 파일에서 기본 규칙을 설정합니다.

body {
  margin: 0;
  padding: 0;

  font-family: "Roboto", sans-serif;

  color: #000000;
  background: #ffffff;

  overflow-x: hidden;
}

첫 번째 섹션(헤더)

Just below your body tag and the following code:

<section class="green">
    <h1 class="title">Sell Online With Shopify</h1>
    <p class="sub-title">Trusted By Over 1,700,000 Businesses Worldwide!</p>
</section>

And in index.css add:

section {
  display: flex;

  flex-direction: column;
  align-items: center;

  min-height: 200px;

  padding: 70px 20vw;
}

.green {
  color: #ffffff;
  background: #08855e;
}

The (CSS )code inside section takes care of aligning everything where it needs to be. And the .green takes care of the colors. Now you have:

첫 번째 섹션이 거의 끝났습니다. 완료하려면 p 태그(index.html 파일의) 아래에 다음 코드를 추가합니다.

<div class="container text-center">
  <div class="row d-flex justify-content-center">
    <div class="col col-lg-4">
      <div class="input-group-lg">
        <input
          type="text"
          class="form-control"
          placeholder="Enter Your Email Address"
          readonly
        />
      </div>
    </div>
    <div class="col col-auto">
      <button class="btn btn-dark btn-lg" type="button">
        Start Free Trial
      </button>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div class="col helper-text">
      <p>
        Try Shopify for free 14 days, no credit card required. By 
        entering your email, you agree to receive marketing emails 
        from Shopify.
      </p>
    </div>
  </div>
</div>

참고: 위 코드에 사용된 모든 클래스는 부트스트랩 클래스입니다. 즉, CSS를 사용할 필요가 없습니다.

이제 남은 것은 다음과 같습니다.

두 번째 섹션(파도)

For a lot of you, this is probably the part you've been waiting for the most( I know some of you came for the waves).
To create the waves, we will use a website called shapedivider .

변경할 수 있는 몇 가지 값을 즉시 볼 수 있지만(저와 같은 웨이브를 사용할 필요는 없으므로 자유롭게 실험해 보십시오.) 다음 값을 붙여넣겠습니다.

그런 다음 웨이브에 만족하고 클라우드 버튼을 누르면 다음 화면이 표시됩니다.

Copy HTML 버튼을 클릭하고 HTML 아래에 section .green 코드를 붙여넣습니다. 그런 다음 Copy CSS 버튼을 클릭하고 CSS 를 붙여넣습니다. position: absolute를 position: relative로 변경하는 것을 잊지 마십시오.

이제 다음이 있습니다.

이제 이미지를 추가해야 합니다(내 GitHub에서 다운로드할 수 있음).
파도에 대한 코드 아래에 다음 코드를 추가합니다 :)

<div class="vector-img">
  <img src="./img/shop-vector.png" />
</div>

그리고 이것을 귀하의 CSS file에 추가하십시오.

.vector-img {
  position: absolute;

  margin: -30vh 35vw;

  z-index: 1;
}

이렇게 하면 이미지가 웹 사이트 중앙에 있고 z-index: 1; 이미지가 항상 모든 것 위에 있는지 확인합니다.

세 번째 섹션(기능)

We're almost finished. To do the features, we're going to use Bootstrap Icons . So, add the following link before </head>

<link
 rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
>

We're going to use these 3 icons:

<i class="bi bi-window-sidebar"></i>
<i class="bi bi-cash"></i>
<i class="bi bi-people-fill"></i>

And add the following code under your

<section>
  <div class="container text-left">
    <div class="row">
      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-window-sidebar"></i>
        </div>
        <h6 class="features-text">Customizable Templates</h6>
        <p>Free website designs to launch your store quickly and
easily.
        </p>
      </div>

      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-cash"></i>
        </div>
        <h6 class="features-text">All In One</h6>
        <p>
          Shopify takes care of everything from marketing and payments to managing money.
        </p>
      </div>

      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-people-fill"></i>
        </div>
        <h6 class="features-text">A Safe And Efficient Platform
        </h6>
        <p>
          More than a million users trust Shopify to manage their online stores.
        </p>
      </div>
    </div>
  </div>
</section>

The code above makes sure that all the features are aligned properly and in the right place, now we just need to add some CSS
and we're done.

Paste the following code in your index.css file:

i {
  font-size: 3rem;
  color: #08855e;
}

.features {
  margin-top: 12vh;
}

.features-text {
  font-weight: bold;
}

We're finally done! Here's the result:

당신이 이것을 즐겼기를 바랍니다. 마음에 드셨다면 저를 팔로우하는 것을 잊지 마세요.
내 소셜 링크:

24YoungMamba (영맘바) · GitHub

나는 웹사이트를 만든다 :)
귀하의 웹사이트를 구축할 수 있습니다. 24YoungMamba에는 2개의 저장소가 있습니다. GitHub에서 코드를 따르십시오.

github.com

영 맘바 – Medium

Medium에서 Young Mamba의 글을 읽어보세요. 웹사이트👨‍💻를 만듭니다. 매일 Young Mamba와 수천 명의 다른 목소리가 Medium에서 중요한 이야기를 읽고 쓰고 공유합니다.

medium.com

웹 개발과 데이터 사이언스의 모든 것!
완전한 초보자부터 노력 없이도 일자리를 얻을 수 있는 전문가까지 프로그래밍을 배우는 여정에 저와 함께 하세요.

youtube.com

tiktok.com

Reference

이 문제에 관하여(Shopify 방문 페이지 복제 - 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/youngmamba/shopify-landing-page-clone-tutorial-19ni

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Shopify 방문 페이지 복제 - 자습서

목차