{"version": "2.0","name": "Cards AMP","subline": "Mobile Template Powered by Google AMP","username": "Enabled","created": "","website": "","update": "","update_today": false,"email": "","description": "","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "F.A.Q","id": "f_a_q","content": "

\n\tWhat is Google AMP? 

\n
\n\tFor many, reading on the mobile web is a slow, clunky and frustrating experience - but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.
\n
\n\t 
\n
\n\tWhat's the difference for me between classic HTML and AMP?
\n
\n\t 
\n
\n\tThe most discenrable differnece is the fact that you are not allowed to use any javascript except for the modules provided by Google AMP and you are not allowed to use any external css stylesheet except for Google Fonts.
\n
\n\t 
\n
\n\tYour pages are PHP.  I cannot test them locally. What now?
\n
\n\t 
\n
\n\tPHP pages require a local server setup such as WAMP or uploading your items to a server for testing. The fact that our pages are PHP doesn't imply any complicated code, just the fact that we found a GREAT way to make it a billion times easier for you to alter the styles, which, normally, would require you to have them inline, making any css change a nightmare. 
\n
\n\t 
\n
\n\tYou say no external stylesheet... but you're using an external style.css
\n
\n\t 
\n
\n\tThat is half right. You see, adding all the CSS inline would cause a massive headache for you as a user to edit each individual HTML to change just one style section. We used a read / write function of PHP ( that's why, the pages are .php but they are basically HTML ) . This function allows us to use an external stylesheet BUT it's actuallty internal. When the page loads, the CSS gets added inside the page, making it inline and thus AMP Valid
\n
\n\t 
\n
\n\tHow can I check if my page is AMP Valid?
\n
\n\t 
\n
\n\tThat's very simple. Let's say the page you are editing is index.php. Therefore your testing link will be http://awesomebuyer.com/mobile/index.php . In order to check if the page is valid, all you have to do is add #development=1 at the end of your link, open the console, and hit refresh. You'll see a message in your console stating that the page is AMP Valid if the code is correct. More on this here: https://www.ampproject.org/docs/guides/validate
\n
\n\t 
\n
\n\tWhat can't I use as CSS?
\n
\n\t 
\n
\n\tAs is, AMP is a bit limited, but it's a growing project, so writing whta's permited now, may not be the case in a month or two. Therefore, we suggest you follow this page 
\n
\n\t 
\n
\n\thttps://www.ampproject.org/docs/guides/responsive/style_pages 
\n
\n\t 
\n
\n\tAnd keep an eye out for any changes in the future. 
\n"},{"title": "My page is not showing an elemenent","id": "my_page_is_not_showing_an_elemenent","content": "

\tIf you're using a page feature and this feature does not load or does not show up, be sure that you imported it in the head. AMP has plugins at the top of the page, which must be imported in order for certain elements to work. An example would be let's say you want to embed a Facebook posts. In order to embed it to a certain page, first you'll have to import the facebook script in the head of the page.

\n
\n<head>\n<meta charset="utf-8">\n<script async src="https://cdn.ampproject.org/v0.js"></script>\n\n<!--Import your scripts here-->\n<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>\n<!--Import your scripts above this-->\n\n<!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.-->\n<link rel="canonical" href="index.html">\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">
\n

\tAs you can see, we've added the facebook custom element at the top of the page, right after the first script async. This is essential for all pages. 

\n

\tA good way to make sure you're importing all plugins is to check the head of the pages we've provided and see if there is a script there except the default ones. If there is one, be sure to include it in your page in order for all your elements to work.

\n"},{"title": "Header Structure","id": "header_structure","content": "

\tThe structure of our page is very simple and as follows

\n

\tHeader

\n
\n<header>\n    <a href="index.php" class="header-logo header-logo-left"></a>\n</header>
\n

\tThe header is comprised by a header logo that you can find in the css by searching for header-logo and a contact icon. The other icon  that activates the menus is explained in the Navigation chapter. 

\n"},{"title": "Page Structure & Content","id": "page_structure_content","content": "

\n\tColor Tint Content Boxes

\n
\n<div class="tint-block tint-block-top bg-body-1">\n    <div class="tint-content">\n        <h1 class="color-white uppercase">Welcome</h1>\n        <span>\n            Fully powered by Google AMP and amazing Elite Author UX and UI Quality Features.\n        </span>\n        <div class="tint-items">\n            <amp-social-share width="65" height="15" type="twitter" class="tint-breadcrumb"><i class="fa fa-twitter"></i>Tweet</amp-social-share>\n            <amp-social-share width="60" height="15" type="facebook" class="tint-breadcrumb"><i class="fa fa-facebook"></i>Share</amp-social-share>\n            <amp-social-share width="85" height="15" type="whatsapp" class="tint-breadcrumb"><i class="fa fa-whatsapp"></i>WhatsApp</amp-social-share>\n        </div>\n    </div>\n    <div class="tint bg-red-light"></div>\n</div>
\n

\tThe color tint boxes are all the same with the difference of color and the content position around them. Let's explain

\n

\tLine 1. Has the defining class of the tint box. This is tint-block-top ( we'll explain lower what these are )

\n

\tLine 2 is the tint-content class and the tint content. Here is where you add your content. You can create multiple H1 classes to add multiple rows of text at the top and multiple spans for paragraphs. 

\n

\tLine 6 is the tint items class. This houses the amp-social buttons. You can change these with anchors, by keeping the same tint-breadcrumb class but replacing the amp-social-share with <a href="#" class="tint-breadcrumb"><i></i>Text</a>

\n

\tThe last part of the code is the tint color, in this case it's set to bg-red-light. You can use any color from the secondary classes to change the colors

\n

\t 

\n

\tYou can replace tint-block-top with tint-block-simple if you don't want the content from the bottom to be over it.  In case of the footer we used the tint-block-simple class. 

\n

\n\tContent Classes

\n

\tThe content classes allow you to move them as cards above the tint boxes. 

\n
\n<div class="content page-content-card full-bottom">\n     <!-- content here --> \n<div>
\n

\tThe above class will generate a card, this should be placed under a tint box. If you want to have one that is not under a tint box simple use the class page-content-card-simple

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n"},{"title": "Navigation ","id": "navigation","content": "

\tIf you're unaware, AMP is still in a very infant stage, where JS is rejected completely and the only way to create custom animations is using pure CSS3, in the case of a menu, this triggers are usually done using JS, but since AMP won't validate if you're using JS we've used an input, to trick the page into acting like a clickable button. This has it's limitations but for the time being it's the only way to create any sort of off canvas / animated navigation existent. 

\n

\tMenu Structure

\n

\tThe menu is placed within a <nav> tag right after the header is complete. This is essential and must be preserved like this. 

\n
\n<nav>\n    <input type="checkbox" id="toggle-menu">\n    <label class="toggle-menu-header" for="toggle-menu"><em class="l1"></em><em class="l2"></em><em class="l3"></em></label>\n    <!-- Menu Here-->\n</nav>
\n

\t 

\n

\tLine 1 creates the nav wrapper

\n

\tLine 2 is the checkbox that will be tapped to open the menu

\n

\tLine 3 is the visible portion of the tap for the menu icon, notice that this has 3 em's inside that have the line animations that create the hamburger icon effect. 

\n

\tOn line 4 you can now add your menu items.

\n
\n<div id="menu-modal" class="menu menu-sidebar">\n    <div class="menu-scroll">\n        <a class="menu-item empty-item" href="#"><span><!-- Menu Fix - Must Stay Empty--></span></a> \n        <!-- Menu items go here-->\n    </div>\n</div>
\n

\tThe menu is comprised of an ID which is used by the input to target it, and a class. 

\n

\tInside the menu there is a class called menu-scroll. This is used because the page will have the tendency to jump up when tapping a menu item, this class avoids that. Normally, this would be achieved by JS, unfortunately, with AMP we cannot use that technique. 

\n

\tInside the menu there is an empty-item class. This again is essential due to the fact that we cannot use JS with AMP. Please be sure to keep that inside and work after it. It will not affect anything in your page 

\n

\tMenu Items - Simple Menu

\n

\tA simple menu is a menu with no dropdown that just points to a page. 

\n
\n<a class="menu-item" href="index.php">\n     <i class="fa fa-star"></i>\n     <span>Welcome</span>\n     <i class="fa fa-circle"></i>\n</a>
\n
\n\tThe simple item will include the class menu-item. Inside it you'll find 2 icons. This is a simple menu item, that is unselected. To select that menu item you'll have to do as follows
\n
\n<a class="active-item menu-item" href="index.php">\n     <i class="fa fa-star"></i>\n     <strong></strong><em></em>\n     <span>Welcome</span>\n     <i class="fa fa-circle"></i>\n</a>
\n

\tAs you can see, we've added an active-item class and also a strong and em after the first icon. This is only applicable to main menu items that are outside dropdowns, for example in our demo the Welcome and Contact menus in the menu 

\n

\tCreating Dropdowns ( Read the RED boxes at the bottom after! Very important! )

\n
\n<div class="submenu-item">\n    <input type="checkbox" data-submenu-items="1" class="toggle-submenu" id="toggle-1">\n    <label class="menu-item" for="toggle-1"><i class="fa fa-cog"></i><span>Home</span></label>\n    <div class="submenu-wrapper">\n        <a class="menu-item" href="#">\n            <i class="fa fa-angle-right"></i>\n            Simple Dropdown\n            <i class="fa fa-circle"></i>\n         </a>\n    </div> \n</div>
\n

\t 

\n

\tSubmenus look complicated but after reading this you will no longer believe that. 

\n

\tLine 1, creates a submenu item wrapper

\n

\tLine 2 is the input that triggers the submenu

\n

\tLine 3 is the icon/text that you tap to open the submenu. This includes only 1 icon of your choosing, the other is added via CSS. 

\n

\tLine 4 is the submenu wrapper.

\n

\tLine 5,6,7,8,9 is a simple menu item.  The only difference is that this does not have the text inside a span. This is very important. 

\n

\tTo create more items duplicate lines 5 to 9.

\n

\tLine 10 closes the submenu wrapper

\n

\tLine 11 closes the submenu item. 

\n

\t 

\n
\n\tI created a submenu but it is not opening, why?
\n

\tSubmenus us inputs, and these are related to ID's and for's. On the code above, you'll see on line 2 id="toggle-1" and on line 3 for="toggle-1" for each submenu you create you'll have to replace these values with new unique ones. So, for example, if you have the menu above and wish to create a second menu simply add toggle-2 instead of toggle-1 and it will work like a charm.

\n
\n\tI added more items but I cannot see them:
\n

\tNormally for our other mobile templates we us JS to calculate the items inside the obtain the perfect height for a perfect css animation. In the case of AMP, without JS, we have to do that manually. Look inside line 2 of the code above and you'll see a data-submenu-items="1" class. This repersents the number of submenus you will have. Replace the number inside with the number of submenu items inside the current menu and voila! The menu now shows and it also animates smoothly! 

\n
\n\tHow can I make a submenu opened by default with an item selected?
\n

\tIn the above code example, on line 2, at the very end where it says id="toggle-1"> just add checked and the code will look like this id="toggle-1" checked> After you've done that the menu item will now be checked. 

\n

\tOn any menu item you want selected simply add the secondary class active-item, and inside the menu item, wrap the text like this <strong>Submenu</strong><em></em>. That's it! 

\n

\t 

\n

\tThat's it for the navigation! If you run into any problems after reading the documentation, send us a link via our support forum http://support.we-themes.com/ and we will gladly help you out! 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n

\t 

\n
\n\t 
\n
\n\t 
\n

\t 

\n"},{"title": "AMP Features","id": "amp_features","content": "

\tAMP is an evergrowing platform, and at the moment, provides a few scripts that are absolutely awesome and work properly wiht our product on 

\n

\thttps://ampbyexample.com/

\n

\tNOTE

\n

\t1. Installing a Script

\n

\tAfter you find a script you like and want to use, you'll have to import the provided JS file in the head of the item where the scripts are present, only then can you use the provided HTML structures. Not doing so will result in a failed validation

\n

\t 

\n

\t2. Using AMP-Features Pages

\n

\tAll the components we used can be found on ampbyexample.com and much more, with exact tutorials and examples. Be sure to check that page out and check out the modules we used. 

\n

\t 

\n"},{"title": "How do I use images in AMP?","id": "how_do_i_use_images_in_amp","content": "

\tGoogle AMP does have a new way of adding images, you can find them all over our item as <amp-img>. We could explain them ourselves, but you can find a brilliantly easy and example filed solution over Google AMP's page 

\n

\thttps://www.ampproject.org/docs/guides/responsive/control_layout

\n

\t 

\n

\t 

\n"},{"title": "Secondary Classes","id": "secondary_classes","content": "

\tA secondary class is a class that gets added to an element to give it more flexibility. 

\n

\tWhy are these important?

\n

\tGoogle AMP is all about reusing elements and using as little style as possible to allow us to keep the size small .Therefore, secondary classes for background colors, margins and borders makes the style as small as possible, while not enlarging the style either 

\n

\tAvailable Secondary Classes 

\n
\n\tBackgrounds, Borders and Colors
\n
\n\t 
\n
\n\tYou can select any color, border, or background color for elements by adding any of the following secondary classes to them. 
\n
\n\t 
\n
\n\tbg-teal-light
\n
\n\tbg-teal-dark
\n
\n\tborder-teal-light
\n
\n\tborder-teal-dark
\n
\n\tcolor-teal-light
\n
\n\tcolor-teal-dark
\n
\n\tbg-green-light
\n
\n\tbg-green-dark
\n
\n\tborder-green-light
\n
\n\tborder-green-dark
\n
\n\tcolor-green-light
\n
\n\tcolor-green-dark
\n
\n\tbg-blue-light
\n
\n\tbg-blue-dark
\n
\n\tborder-blue-light
\n
\n\tborder-blue-dark
\n
\n\tcolor-blue-light
\n
\n\tcolor-blue-dark
\n
\n\tbg-magenta-light
\n
\n\tbg-magenta-dark
\n
\n\tborder-magenta-light
\n
\n\tborder-magenta-dark
\n
\n\tcolor-magenta-light
\n
\n\tcolor-magenta-dark
\n
\n\tbg-night-light
\n
\n\tbg-night-dark
\n
\n\tborder-night-light
\n
\n\tborder-night-dark
\n
\n\tcolor-night-light
\n
\n\tcolor-night-dark
\n
\n\tbg-yellow-light
\n
\n\tbg-yellow-dark
\n
\n\tborder-yellow-light
\n
\n\tborder-yellow-dark
\n
\n\tcolor-yellow-light
\n
\n\tcolor-yellow-dark
\n
\n\tbg-orange-light
\n
\n\tbg-orange-dark
\n
\n\tborder-orange-light
\n
\n\tborder-orange-dark
\n
\n\tcolor-orange-light
\n
\n\tcolor-orange-dark
\n
\n\tbg-red-light
\n
\n\tbg-red-dark
\n
\n\tborder-red-light
\n
\n\tborder-red-dark
\n
\n\tcolor-red-light
\n
\n\tcolor-red-dark
\n
\n\tbg-pink-light
\n
\n\tbg-pink-dark
\n
\n\tborder-pink-light
\n
\n\tborder-pink-dark
\n
\n\tcolor-pink-light
\n
\n\tcolor-pink-dark
\n
\n\tbg-gray-light
\n
\n\tbg-gray-dark
\n
\n\tborder-gray-light
\n
\n\tborder-gray-dark
\n
\n\tcolor-gray-light
\n
\n\tcolor-gray-dark
\n
\n\tbg-white
\n
\n\tcolor-white
\n
\n\tborder-white
\n
\n\tbg-black
\n
\n\tcolor-black
\n
\n\tborder-black
\n
\n\t 
\n
\n\tSocial Backgrounds
\n
\n\t 
\n
\n\tfacebook-bg
\n
\n\tlinkedin-bg
\n
\n\ttwitter-bg
\n
\n\tgoogle-bg
\n
\n\twhatsapp-bg
\n
\n\tpinterest-bg
\n
\n\tsms-bg
\n
\n\tmail-bg
\n
\n\tdribbble-bg
\n
\n\ttumblr-bg
\n
\n\treddit-bg
\n
\n\tyoutube-bg
\n
\n\tphone-bg
\n
\n\tskype-bg
\n
\n\t 
\n
\n\tSocial Colors
\n
\n\tfacebook-color
\n
\n\tlinkedin-color
\n
\n\ttwitter-color
\n
\n\tgoogle-color
\n
\n\twhatsapp-color
\n
\n\tpinterest-color
\n
\n\tsms-color
\n
\n\tmail-color
\n
\n\tdribbble-color
\n
\n\ttumblr-color
\n
\n\treddit-color
\n
\n\tyoutube-color
\n
\n\tphone-color
\n
\n\tskype-color
\n
\n\t 
\n
\n\tFont Options
\n
\n\tYou can also change parameters for fonts, thiner, smaller, bolder,  and more. Just add any class to a text element from the ones below. 
\n
\n\t 
\n
\n\tultrathin
\n
\n\tthin
\n
\n\tthiner
\n
\n\tboder
\n
\n\tbold
\n
\n\tultrabold
\n
\n\tcapitalize
\n
\n\titalic
\n
\n\tsmall-text
\n
\n\tcenter-text
\n
\n\tright-text
\n
\n\tuppercase
\n
\n\tboxed-text
\n
\n\t 
\n
\n\tBox Properties
\n
\n\tMargins can also be used enlarged for certain elements by using the following secondary classes.
\n
\n\t 
\n
\n\t.container{margin-bottom:30px}
\n
\n\t.full-bottom{margin-bottom:25px}
\n
\n\t.no-bottom{margin-bottom:0px}
\n
\n\t.full-top{margin-top:25px}
\n
\n\t.half-bottom{margin-bottom:15px}
\n
\n\t.half-top{margin-top:15px}
\n
\n\t.quarter-bottom{margin-bottom:15px}
\n
\n\t.hidden{display:none}
\n
\n\t 
\n

\t 

\n
\n\t 
\n"},{"title": "Using Other Pages","id": "using_other_pages","content": "

\tEvery page in the product is comprised of simple, copy paste block elements. Open them up and look inside them, if there is anything you are having trouble creating we will gladly assist, but most of our code is beautifully easy to read and it's 100% copy paste-able. 

\n

\t 

\n"},{"title": "Buttons","id": "buttons","content": "

\tButtons

\n

\tButtons are easy to use. You add the class button and then the secondary class for the color you wish to use. 

\n
\n<div class="content">\n    <a href="#" class="button bg-green-light">Button</a>\n    <a href="#" class="button bg-red-light">Button</a>\n    <a href="#" class="button bg-blue-light">Button</a>\n    <a href="#" class="button bg-teal-light">Button</a>\n    <a href="#" class="button bg-magenta-light">Button</a>\n    <a href="#" class="button bg-night-light">Button</a>\n    <a href="#" class="button bg-orange-light">Button</a>\n    <a href="#" class="button bg-gray-dark">Button</a>\n    <a href="#" class="button bg-pink-dark">Button</a>\n</div>
\n

\tIcons

\n

\tIcons are also easy to use. The have an icon, a property, and a color. 

\n
\n<div class="content">\n    <a href="#" class="icon-round facebook-bg"><i class="fa fa-facebook"></i></a>\n    <a href="#" class="icon-round google-bg"><i class="fa fa-google-plus"></i></a>\n    <a href="#" class="icon-round twitter-bg"><i class="fa fa-twitter"></i></a>\n    <a href="#" class="icon-round pinterest-bg"><i class="fa fa-pinterest"></i></a>\n    <a href="#" class="icon-round dribbble-bg"><i class="fa fa-dribbble"></i></a>\n\n    <a href="#" class="icon-square facebook-bg"><i class="fa fa-facebook"></i></a>\n    <a href="#" class="icon-square google-bg"><i class="fa fa-google-plus"></i></a>\n    <a href="#" class="icon-square twitter-bg"><i class="fa fa-twitter"></i></a>\n    <a href="#" class="icon-square pinterest-bg"><i class="fa fa-pinterest"></i></a>\n    <a href="#" class="icon-square dribbble-bg"><i class="fa fa-dribbble"></i></a>\n</div>
\n"},{"title": "Contact Form","id": "contact_form","content": "

\tThe contact form is 100% tested, and fully valid. Therefore, if you're experiencing any issue with it's related to the following

\n

\t 

\n

\t1. Be sure your page is AMP Valid! If it's not valid the contact form will not send messages

\n

\t2. Be sure to contact your hosting provider and REQUEST that they set your PHP settings to this 

\n
\n<IfModule mod_security.c>\n    SecFilterEngine Off\n    SecFilterScanPOST Off\n</IfModule>
\n

\tWithout these settings the contact form WILL NOT send messages

\n

\t 

\n

\tConfigurating contact form. 

\n

\tThe form has a attribute action-xhr="//ENTER_PARAMETER.php" you must replace the ENTER_PARAMETER with the exact location of your contact form php file. ( the one from the PHP folder ) therefore the ENTER_PAREMTER will be something like this 

\n

\tawesomebuyer.com/mobile/php/contact.php 

\n

\t 

\n

\tConfiguring PHP/Contact.php file 

\n

\tInside the pack you'll find a PHP folder and in it there is a contact.php file. Open that item and replace the domain name on line 4 with the domain where the site will be hosted. Do the same thing on line 8. 

\n

\tAfter doing so, replace the email address on line 22 with your email address and you are good to go! 

\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}