Setting Up One Page at a Time.

In the previous step you have setup the style kit, which will now carry across the whole site. And at this point we are ready to create the site pages. 

Onyx's sitemap includes the following pages: Homepage  -  Portfolio  -  About  -  Journal  -  Get In Touch. You can title these as you prefer, or add any additional pages, although in the tutorials below we will cover only demo content. 

To add the pages, let's first create our sitemap. PASSCODE: onyx. 

We have broken down the video tutorials by page so you can take breaks and create one page at a time. 

 

Homepage. PASSCODE: onyx.

Please read the Updates article, as it covers updates made to this page from 18 December 2018, which affects the way several sections are built (specifically the Portfolio and About images are added through text not photoshop files; the divider is added through CSS code, not as an image block; the linked box images do not require Photoshop any longer) Follow the rest of instructions as provided unless specified otherwise.

 

If you wish to have a slider at the top of your Onyx Homepage like here: http://onyx.squaremuse.com/homepage-with-slider, please follow the instructions:  as with any Homepage create an index page, add a page and within the page add a gallery block.  Design settings for the gallery block:

Screen Shot 2017-08-30 at 12.50.26 PM.png
 

Copy the slug of the page (click on clog icon that appears next to the page you've inserted the gallery block, not the index) and use it instead of slider wording in the code below. Add the following CSS for the slider in Design tab in your SS account -> Custom CSS tab:

/*Slider option for the homepage*/
section[id^="slider"] .Index-page-content {
    padding: 0;
}
section[id^="slider"] .sqs-block-gallery {
    padding: 0;
}
section[id^="slider"] .sqs-gallery-controls .next {
    right: 17px;
  background-color: transparent!important;
}
section[id^="slider"] .sqs-gallery-controls .previous {
  left: 17px;
  background-color: transparent!important;
}

 

 

Portfolio. PASSCODE: onyx.

 

Blogpage. PASSCODE: onyx.

Blog CSS

.summary-metadata-item,
.sqs-block-summary-v2 .summary-metadata-item{
      font-family:"brandon-grotesque";
      font-size:9px;
      font-weight: bold;
      color:#000;
    letter-spacing:3px;
    opacity:1;
    text-transform:uppercase;
}
body .summary-title {
      font-family: "Playfair Display";
      text-transform: uppercase;
      letter-spacing: 3px;
}
input[type=submit] {
      font-size: 8px!important;
      padding: 16px 60px!important;
}

 

About. PASSCODE: onyx.

 

Get In Touch. PASSCODE: onyx.