如何在shopify上全屏

Question

我正在寻求有关我打算在 Shopify 平台上实施的特定配置的指导。我的目标是创建一个具有全屏图像的主页，同时保留透明菜单的可见性。此外，我希望在同一页面上集成一个引人注目的公告栏。

我拥有所需布局的视觉示例，我渴望与您分享以获取灵感。我将非常感谢任何可以帮助我在 Shopify 中实现此设置的帮助、建议或资源。

衷心感谢您花费时间和考虑提供您的专业知识来帮助我实现这一目标。

热烈的问候，

我的目标是创建一个具有全屏图像的迷人主页，保持透明菜单的可见性，并在同一页面上集成引人注目的公告栏。

我拥有所需布局的视觉示例，我渴望与您分享以获取灵感。我将非常感谢任何可以帮助我在 Shopify 中实现此设置的帮助、建议或资源。

衷心感谢您花费时间和考虑提供专业知识来帮助我实现这一目标。

Answer 1

我精心设计了一个解决方案，符合您对全屏图像的要求，具有透明的标题菜单和引人注目的公告栏。

$(function() {

$(document).on('click','a.page-scroll',function(event){
  var $anchor=$(this);
  $('html,body').stop().animate({
    scrollTop: ($($anchor.attr('href')).offset().top-45)
  },1500,'easeInOutExpo');
  event.preventDefault();
});
});




 $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});

body,html{
  font-family: 'Josefin Sans', sans-serif;
}

section{
  background:yellow;
}
.banner{
  width:100%;
  background:url('https://images.unsplash.com/photo-1528882548640-a4ce3912475e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjY0Njc0Mg&ixlib=rb-1.2.1&q=85') no-repeat;
  background-size:cover;
  background-position:center;
  min-height:600px;
  
}
.banner h3{
  text-align:center;
  margin-top: 200px;
  color:#fff;
  font-size:80px;
  font-weight:700;
  font-family: 'Josefin Sans', sans-serif;
 }
.banner p{
  text-align:center;
  color:#fff;
  font-size:1.3em;
  opacity:1;
  font-family: 'Josefin Sans', sans-serif;
  
}
.opaque-navbar .container .navbar-header >a{
  color:#fff;
  text-transform:uppercase;
  font-weight:bold;
}
.opaque-navbar .container .navbar-collapse >ul >li >a{
  color:#fff;
  text-transform:uppercase;
  font-weight:700;
}

.opaque-navbar{
  background-color:rgba(0,0,0,0);
  border-bottom:1px solid #eee;
  
  transition : background-color 0.5s ease 0s;
}
.opaque-navbar.opaque {
    background-color:black ;
    border:0px;    
    transition: background-color .5s ease 0s;
}

ul.dropdown-menu {
    background-color: black;
}
.abt{
  text-align:center;
}
.abt .jumbotron  {
  background-color:#e67e22;
}
.abt h3{
  
  color:white;
  font-size:40px; 
  
}
 hr{
  width:100px;
  border-width:3px;
  
}
.abt p{
  
  color: rgba(255, 255, 255, 0.7);
  font-size:20px;
}
.btn{
  border:none;
  border-radius:300px;
  font-weight:bold;
  text-transform:uppercase;
  
}
.btn-default{
  padding-bottom: 15px;
  padding-top:15px;
  padding-left:30px;
  padding-right:30px;
}

.no-padding{
  padding:0;
  margin-top:-30px;
}

 .col-6{
  padding: 0 0;
}

.no-padding h1{
  padding-top:55px;
  text-transform:uppercase;
}
.no-padding hr{
  border: 2px solid #d0d0d0;
}
.bg-dark{
  background-color:#222222;
  color:white;
}

.primary{
  border:1px solid #d35400;
}

.my-font{
  font-size:20px;
  
}
.bg-dark{
  padding-top:55px;
  padding-bottom:30px;
}
.padded{
  padding-top:200px;
}
.padded .col-lg-4 a{
 color:#d35400;
  font-weight:bold;
}

.list-icon{
  list-style-type:none;
  text-decoration:none;
  }
.list-icon li{
  display:inline;
  padding-right:20px;
}
.list-icon .fa{
  font-size:40px;
}
@media (max-width: 992px) {
  body
  {
    background:white;
  }
  .opaque-navbar {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

}

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
      <a class="navbar-brand page-scroll" href="#">Manas</a> 
   </div>
    <div class="collapse navbar-collapse" id="myNav">
      <ul class=" nav navbar-nav pull-right">
        <li><a href="#about" class="page-scroll">About</a></li>
        <li><a href="#portfolio" class="page-scroll">Portfolio</a></li>
        <li><a href="#contact" class="page-scroll">Contact</a></li>
      </ul>
    </div>
  </div>
</div>
<section class="banner">
  <div class="container">
    <h3>Graphic & Web Designer</h3>
    <p>A Full Stack Developer, Based in XXXXXX. <br/> </p>
  </div>
</section>

<div class="abt" id="about">
<div class="jumbotron">
  <div class="container">
    <h3>We Have What You Need</h3>
    <hr></hr>
    <p>From a responsive Front End design to a Dynamic Backend handling,<br/> we provide you with your dream site and increase your chance of success.</p>
    
  <a href="#portfolio" class="btn btn-default">Get Started!</a>
  </div> 
</div>
</div>
<!--End ofAbout-->

<!--PortFolio-->

<div class="no-padding text-center" id="portfolio">
 <div class="container">
   <h1>Portfolio</h1>
    <hr></hr>
  </div>
 
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class=" col-6 col-lg-4 col-sm-6">
        <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
    </div>
    
    <div class="row no-gutter">
      <div class=" col-6 col-lg-4 col-sm-6">
        <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto">
      </div>
    </div>
  </div>
</div>
<!--End of Portfolio-->

<div class="contact" id="contact">
  <div class="bg-dark">
<div class="container" >
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 text-center">
      <h1>Let's Get In Touch!</h2>
      <hr class="primary"></hr>
    <p class="my-font">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
    </div>
   <div class="padded">
    <div class="col-lg-4 col-lg-offset-2 text-center">
    <i class="fa fa-phone fa-3x sr-contact"></i>
    <p>9999999999</p>
    </div>
    
    <div class="col-lg-4 text-center">
       <i class="fa fa-envelope-o fa-3x sr-contact"></i>
       <p><a href="mailto:[email protected]">[email protected]</a></p>
    </div>
    </div>
  </div>
  </div>
</div>
</div>
<!--End Of Contact-->

<footer class="footer">
  <div class="container">
    <div class="row">
    <div class="col-sm-6 text-center">
      <h3>About this Page</h3>
      <p>Used:Bootstrap,Jquery,HTML,CSS.<br/>
      Made By: Manas Yadav</p>
      
    </div>
      <div class="col-sm-6 text-center">
        <h3>Around The Web</h3>
        <ul class="list-icon">
          <li><a type="button" href="https://www.facebook.com/manas.yadav.71"><i class="fa fa-facebook-official"></i></a>
            <li><a type="button" href="https://github.com/manas2297"><i class="fa fa-github-square" aria-hidden="true"></i></a>
              <li><a type="button" href=""><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
        </ul>
      </div> 
    </div>
  </div>
  
</footer>