There are two ‘sides’ to the required setup for ZOOAmp; the plugin and ZOO settings.
The plugin parameters will allow you to determine the basic style of the AMP page.
Under the “Header Options” tab, you will see a number of parameters to set up the AMP Page header, including header background colour and even the logo:
Under the “Footer Options” tab, you will see a number of parameters to set up the AMP Page footer, including background colour and copyright info:
Under the “Include AMP Plugins” tab, you will see a number of parameters that determine whether you want to include certain AMP plugins for AMP services. Select the ones you want to load:
Step 1: Connecting your web page to your AMP page
The first step in getting your ZOO Amp system to work is to create the “ZOO Amp Loader” element and place it in your “full” view. This will insert the required code in the <head> of your page and let Google know that you have an equivalent.
Here’s a step-by-step guide:
Now that this element is created and placed, Google will now look for your AMP page when it comes to crawl your page.
Now we’re ready to start adding your content elements to your AMP layout.
In ZOO settings, under “Extension Layouts” you’ll see the layout for ZOO Amp:
To edit the layout and add elements, click “AMP Layout”, this will load the layout editor:
Now you can drag and drop your content elements into the predefined positions.
We’ve created 8 distinct sections for you to use in putting together your AMP page. There are:
This should give you enough scope to design an AMP to suit any website.
You will notice a position at the top of the layout named “Custom CSS”. This is to be used only with the “Zoo AMP Custom CSS” element. Drag this element into this position (and ONLY this element in this position - no other element will work there and will probably break your AMP page).
Now edit the element by clicking the pencil icon. This will open a “Custom CSS” box. This is where you can write your custom CSS.
There are a few built in classes you can target to style your AMP sections:
Here’s the body HTML markup with CSS classes for your reference:
<body>
<div class="amp-header"> </div>
<div class="amp-main">
<h1 class="amp-title"></h1>
<p class="amp-meta"></p>
<div class="amp-section1"></div>
<div class="amp-section2"></div>
<div class="amp-section3"></div>
<div class="amp-section4"></div>
<div class="amp-section5"></div>
<div class="amp-section6"></div>
</div>
<div class="amp-footer"> </div>
</body>
Let’s have a look at a Custom CSS example that will add some basic styles to your AMP page:
.amp-main {
padding-left: 10px;
padding-right: 10px;
}
.amp-title {
Font-size: 28px;
}
.amp-section1 {
background-color:#eeeeee;
}