Documentation
Changelog
 
 

Content Building

 

Set Home Page

To set Home page go to Stores > Configuration > General > Web > Default Pages and choose CMS Home Page

 

Page/Product Layouts

You can change layout in Design block when you edit page, product or category. See image below.

How to add block to sidebar

You can add block in sidebar with XML Layout Update in the same Design section where you change layout for Page, Product or Category. First off you need to determine that you add block to sidebar by adding referenceContainer name="sidebar.additional". The same way you can add block anywhere else by changing container name. To find out the name of the container you can Enable path hints Enabled Template Path Hints for Storefront and block hints Add Block Names to Hints in the admin interface: Stores > Configuration > Advanced > Developer > Debug. Do not do this on live store.

Then add following code to the referenceContainer to add static block. Set any UNIQUER-NAME for this block and change YOUR-STATIC-BLOCK-IDENTIFIER to the actual identifier of your static block.

<block class="Magento\Cms\Block\Block" name="UNIQUER-NAME">
       <arguments>
            <argument name="block_id" xsi:type="string">YOUR-STATIC-BLOCK-IDENTIFIER</argument>
       </arguments>
   </block>

Final code will look like this:

<referenceContainer name="sidebar.additional">
   <block class="Magento\Cms\Block\Block" name="UNIQUER-NAME">
       <arguments>
            <argument name="block_id" xsi:type="string">YOUR-STATIC-BLOCK-IDENTIFIER</argument>
       </arguments>
   </block>
</referenceContainer>

 

Columns

Our theme uses Bootstrap 4 grid system. If you are not familiar with bootstrap you can learn about their grid system on Bootstrap official website.

In short, to make colums all you need is to add col class to divs and wrap it in row. Below example of 3 columns:

<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>

So each time you need to divide content to columns warp it in row and add col classes.

If you want these columns to be responsive and change on different screen resolutions you can add folowing classes: col-sm-6, col-md-6, col-lg-6, col-xl-6 (change 6 to your value). Each of this classes correspond to different screen resolutions from small to large. The 6 value in class is amount of columns. Bootstrap is 12 columns grid so if you need to make 2 blocks one half each you make two block with 6 value, if you need 3 columns then 3 blocks with 4 value.

Below is an example of how we made our footer blocks with links. It is 4 columns on desktop(col-md-), 2 columns on tablet(col-sm-) and full width on mobile(since there are no column classes for mobile )

<div class="row">
	<div class="col-sm-6 col-md-3">
		<h5>Company</h5>
		...
	<div>
	<div class="col-sm-6 col-md-3">
		<h5>Support</h5>
		...
	</div>
	<div class="col-sm-6 col-md-3">
		<h5>Order info</h5>
		...
	</div>
	<div class="col-sm-6 col-md-3">
		<h5>Legal</h5>
		...
	</div>
</div>

 

Banners

Check this page for content banners examples and explanations : CMS Banners. This page included in content import for each demo.

 

Any Content Slider

You can wrap any content in slider if you have enabled Olegnax Product Slider extension.

If you want to make images only slider then simply wrap your images in following code:

<div class="product-items owl-carousel" data-role="product-owlCarousel" data-mage-init='{"OXowlCarousel":{"itemClass":"product-item","margin":0,"loop":false,"dots":true,"nav":false,"items":4,"autoplay":false,"autoplayTimeout":5000,"autoplayHoverPause":false,"lazyLoad":true,"rewind":true,"responsive":{"0":{"items":2},"640":{"items":2},"1025":{"items":3},"1160":{"items":4}}}}'> 
    ... your images here ... 
</div>

If you want to add some content in carousel like testimonials or banners then each slide should be a new div, i.e.:

<div class="some-class"> ...slide content... </div>
<div class="some-class"> ...slide content... </div>
<div class="some-class"> ...slide content... </div>

As you can see, slider code comes with various values like loop, dots, arrows, amount of items per row for different screen resolutions, etc. You can adjust them. In the code below 0 is mobile has 2 items per row, then above 640px (tablet), 1025px (small desktop) with 3 items and above 1160px (desktop) with 4 items per row.

... "responsive":{"0":{"items":2},"640":{"items":2},"1025":{"items":3},"1160":{"items":4}} ... 

Do not set loop and rewind to true at the same time. If one is true the other one should be false.

You can add slider to content even if it is not needed on desktop to improve mobile responsiveness, like we did for these group of images:

 

Typography

Check this page for detailed typography and classes explanation: https://athlete2.com/greece/typography/

 

Useful classes

Check this page for detailed classes explanation: https://athlete2.com/greece/typography/

Adding ox-max-width-500 to element will make it centered and set max width to 500. You can add ox-max-width- classes from 500-1000 with step 100.

hide on devices

hide-on-tablet, hide-on-mobile

align items

centered-iblocks, info-block

Spacers

spacer-big, spacer-medium, spacer-regular, spacer-small

Vertical align:

col-align-vertical - use on col div

block-align-vertical - use inside col

Margin, Padding: clear-p, row.no-spacing, no-padding, no-margin, ox-margin-lg, ox-margin-lg-no, ox-margin-md, ox-margin-md-no, ox-margin-sm, ox-margin-sm-no, ox-margin, ox-margin-no

 

Buttons

coming soon.

 

Social Icons Widget

Athlete theme comes with social icons widget that can easily add to any page.

 

Content Expand (Show More/Less)

There are multiple ways to make expandable content in Athlete 2 theme. One of them using theme settings which is described in the relevant sections of our docs.

Second method is to manually wrap content with html code which is described below.

When you import pages for some of the Demos it will also import page with expand examples, Title: Expand Content url key: expand-content. You can also find this page on our preview: https://athlete2.com/ca/expand-content

Below is a sample code for expandable content:

<div class="ox-expand minimized">
	<div class="ox-expand__inner" aria-expanded="false">
		... your content goes here ...
</div>
	<div class="ox-expand__link">
		<span class="more">Show more</span>
		<span class="less">Show less</span>
	</div>
</div>

Simply replace ... your content goes here ... with your content. This will make it expandable with defult max height 90px.

Set max height

Now if you want to change max height, then you need to set following values:

data-max-height="200" to main wrapper ox-expand minimized and style="max-height:200px" to ox-expand__inner. Change 200 to your value. See example below:

<div class="ox-expand minimized" data-max-height="200">
	<div class="ox-expand__inner" aria-expanded="false" style="max-height:200px">
		... your content goes here ...
</div>
	<div class="ox-expand__link">
		<span class="more">Show more</span>
		<span class="less">Show less</span>
	</div>
</div>
 

Instagram Feed

Attention! Instagram feed widgets in theme below version 1.4.3, which use access tokens will no longer work due to the deprecation of Instagram platform API https://www.instagram.com/developer/

Starting version 1.5, Athlete 2 Theme comes with separate extension for instagram feed. You can find it in Olegnax menu: Olegnax / Instagram

 

 

First off all you need to provide access to your instagram images for our app. To do this:

1. Login to your Instgram account.

2. Navigate Olegnax / Instagram : Configuration / Token Authorization in Magento 2 admin panel and click Generate Access Token

3. Popup with autorization request will appear. Click Authorize.

 

 

4. Now you need to load images from Instgram to Magento. To do this go to Olegnax / Instagram : Instagram Posts and click Update Posts

Note that we do not load images automatically. So each time you post on Instagram you need to click Update posts to load latest posts to Magento. Only 20 latest posts will be loaded.

 

 

After that you can add instagram feed anywhere on your website using widget.

To add instagram feed widget click Insert Widget button when you edit your page/block and choose Olegnax Instagram Feed.

Attention: If you already had instagam widget from theme version prior to 1.5, then you need to remove it from content and add it again(new one).

 

 

You can set amount of images to dispaly and columns separately for desktop and mobile screen sizes.

Olegnax instagram feed widget comes in two styles: normal and with big first image. Big image layout was made for 1+6 images and has 40/60 proportions for big and all other images. But you still can control amount of images and columns for the right block.