{"id":3961,"date":"2017-09-17T13:14:21","date_gmt":"2017-09-17T13:14:21","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=3961"},"modified":"2019-05-07T12:10:08","modified_gmt":"2019-05-07T12:10:08","slug":"widgets-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/widgets-in-amp\/","title":{"rendered":"Widgets in AMP"},"content":{"rendered":"

Widget Modules<\/h3>\n

There are 4 Widgets modules available at the moment.<\/p>\n

    \n
  1. AMP Blurb Module<\/li>\n
  2. AMP Button Module<\/li>\n
  3. AMP Categories Module<\/li>\n
  4. AMP Text Module<\/li>\n<\/ol>\n

    \"widget<\/a><\/p>\n

    Widget Areas<\/h3>\n
      \n
    1. AMP Above Loop<\/li>\n
    2. AMP Below Loop<\/li>\n
    3. Page Builder (AMP)<\/li>\n<\/ol>\n

      \"widget<\/a><\/p>\n

       <\/p>\n

      AMP Above Loop<\/h4>\n

      This Widget Area is used to add Widget Modules above the loop of Homepage of AMP.<\/p>\n

      You can use it on Custom Frontpage as well.<\/p>\n

      Add the widget module of your choice here and you can see that widget above the content of your Homepage.<\/p>\n

      \"AMP<\/a><\/p>\n

      \"\"<\/a><\/p>\n

      AMP Below Loop<\/h4>\n

      It is same as AMP Above Loop but will add the widgets below the Homepage content or say Loop.<\/p>\n

      \"AMP<\/a><\/p>\n

      \"AMP<\/a><\/p>\n

      Page Builder (AMP)<\/h4>\n

      This is different than the above two in terms of outputting the widgets.<\/p>\n

      This can be applied to all the pages including Homepage.<\/p>\n

      How to use it?<\/h5>\n

      Follow the below steps to make it work.<\/p>\n

      1: Add the widgets<\/h5>\n

      Add the widgets from the above 4 widgets modules in this area.<\/p>\n

      \"Add<\/a><\/p>\n

      2: Apply it to the Page<\/h5>\n

      Edit the page where you want to show these widgets and select Page Builder (AMP) from the meta box which is present at the right side.<\/p>\n

      \"Apply<\/a><\/p>\n

      3: Output<\/h5>\n

      Now you can see the output by visiting the AMP version of that page.<\/p>\n

      \"Output\"<\/a><\/p>\n

      Important Notes<\/h3>\n

      1: AMP Above Loop and AMP Below Loop are not sitewide, they are only for the Homepage or Custom Frontpage.<\/p>\n

      2: Page Builder (AMP) will override the normal AMP content of that page i.e., unlike the above two you can’t use it with your existing loop or content, you can only override the whole content.<\/p>\n

      If you want to use the existing content as well, use the text module and add that content in it.<\/p>\n

      3: There is no different Page Builder(AMP) area for different pages. Right now you can use only one Page Builder AMP.<\/p>\n

      4: You can apply the Page Builder (AMP) to many pages as you want but all of them will be same. So it’s better to use it only on Landing pages, but again there’s no restriction on it.<\/p>\n

      That’s it for this tutorial!<\/strong><\/p>\n

      We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n

      \n\t\t\tAsk your Questions Directly!<\/strong>
      \n\t\t\t
      If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t