2 Column highlight instructions

STEP ONE: Open Home page editor in a new tab

In the left-hand menu under Website, right click on Home page and click “open in a new tab”. You will want to access your Home page editor and this page at the same time.

STEP TWO: Get the image

Copy these image paths:

https://www.sefiles.net/images/library/site/WS_TREK_HH_TrekFXThrottle25-2col-bg.jpg

https://www.sefiles.net/images/library/site/WS_TREK_HH_ElectraTownieGo25-2col-bg.jpg

Add a new content block on your homepage  
In the site manager go to: Website > Home page, hover over the brick wall icon in the left hand corner under "Responsive Page" click on 2 COLUMN and drag the 2 Column Text Over Image (4th from top) content row over to your home page.

Paste the 2 image paths
In the new content block on your home page, click Edit Column Settings (by hovering over the outer edge of the gray placeholder image, and paste the full image path you copied into the "Enter Image Path" field. Set the column background-color to black (#000000) for accessibility. Do the same for the second column with the second image. Click Apply Changes.

STEP THREE: Copy the code for the text & link your highlight to the landing page

Copy this code for the first column: 

<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; padding: 45px 0;"><img class="img-responsive" style="margin: 0px auto; text-align: center; width: 340px;" alt="Throttle up the fun with the all-new Trek FX+ 1" src="https://www.sefiles.net/images/library/site/WS_TREK_HH_TrekFXThrottle25-2col-text.png">
<div><a class="btn btn-primary" href="#" style="margin: 10px 0px;">SHOP NOW</a></div>
</div>

Paste the code to the homepage  
Hover your mouse over the inner part of the first column in the new content block, press the blue edit content button in the left hand corner. Click on the code view icon </>, highlight any code that's in there and paste what you copied from above. Click the code view </> icon again to go back to the standard view.

Update link 
In that same window, click on the button, you'll see icons appear below, click the Edit Link icon. Click the magnifying glass icon above the URL field and select the appropriate product page and click Insert. Click the green checkmark to apply changes.

Copy this code for the second column: 

<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; padding: 45px 0;"><img class="img-responsive" style="margin: 0px auto; text-align: center; width: 340px;" alt="Electra’s new throttle Townie Go!" src="https://www.sefiles.net/images/library/site/WS_TREK_HH_ElectraTownieGo25-2col-text.png">
<div><a class="btn btn-primary" href="#" style="margin: 10px 0px;">SHOP NOW</a></div>
</div>

Paste the code to the homepage  
Hover your mouse over the inner part of the first column in the new content block, press the blue edit content button in the left hand corner. Click on the code view icon </>, highlight any code that's in there and paste what you copied from above. Click the code view </> icon again to go back to the standard view.

Update link 
In that same window, click on the button, you'll see icons appear below, click the Edit Link icon. Click the magnifying glass icon above the URL field and select the appropriate product page and click Insert. Click the green checkmark to apply changes.

Make it full-width (optional)
 In the top right of the new content block, click the gear icon > Section Settings, and check "Make section full width."

Save it 
Click Save Changes at the top of the page.

Preview it  
Click Preview at the top of the page and make sure it looks good on the front end.

Reset cache 
Press the bell icon to the left of your store name and press the "Reset Cache" link to make this change active on your site.