{"id":14377,"date":"2019-09-27T13:07:24","date_gmt":"2019-09-27T13:07:24","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14377"},"modified":"2019-09-27T13:25:21","modified_gmt":"2019-09-27T13:25:21","slug":"how-to-apply-specific-design-and-also-fonts-for-amp-page-post-by-using-elementor","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-apply-specific-design-and-also-fonts-for-amp-page-post-by-using-elementor\/","title":{"rendered":"How to apply specific design and also fonts for AMP page\/post by using Elementor"},"content":{"rendered":"\n<p>If you want to apply specific design and also fonts for AMP page\/post by using Elementor for this follow below steps.<\/p>\n\n\n\n<ol><li>First, install and activate <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\">Elementor<\/a> plugin<\/li><li>Create a new page\/post by using Elementor. <\/li><li>Install and activate <a href=\"https:\/\/ampforwp.com\/amp-pagebuilder-compatibility\/\">Page Builder Compatibility for AMP<\/a>  plugin<\/li><li>After installing you will find this option in <strong>WordPress Dashboard<\/strong>\u00a0->  <strong>AMP<\/strong>\u00a0<strong>option panel<\/strong>\u00a0<strong>-> Settings -> Elementor Support<\/strong> -><\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"398\" height=\"401\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31.png\" alt=\"\" class=\"wp-image-14384\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31.png 398w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31-150x150.png 150w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31-298x300.png 298w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31-50x50.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31-60x60.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/31-100x100.png 100w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll down a little to see this option<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"924\" height=\"629\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32.png\" alt=\"\" class=\"wp-image-14386\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32.png 924w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32-300x204.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32-768x523.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32-50x34.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32-60x41.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/32-100x68.png 100w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/figure>\n\n\n\n<ul><li><strong>AMP Elementor Compatibility:<\/strong> Once you enable this option Elementor Page Builder Support it looks similar in Non-AMP(normal website) and AMP website.<\/li><li><strong>Enter CSS URL: <\/strong>In this textarea, you can add your custom CSS link(URL) and you can separate CSS URL by a comma like below the screenshot.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"907\" height=\"312\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6.png\" alt=\"\" class=\"wp-image-14395\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6.png 907w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6-300x103.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6-768x264.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6-60x21.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/1-6-100x34.png 100w\" sizes=\"(max-width: 907px) 100vw, 907px\" \/><\/figure>\n\n\n\n<ul><li><strong>Enter Custom CSS:<\/strong>\u00a0In this textarea, you can enter your custom CSS code. If you want some CSS specific changes on your side, so add your CSS code here.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"910\" height=\"293\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6.png\" alt=\"\" class=\"wp-image-14397\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6.png 910w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6-300x97.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6-768x247.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6-50x16.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6-60x19.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-6-100x32.png 100w\" sizes=\"(max-width: 910px) 100vw, 910px\" \/><\/figure>\n\n\n\n<h4 id=\"to-make-it-easy-we-have-created-a-video-tutorial-on-amp-story-that-you-can-watch-below\">To make it easy, we have created a video tutorial also<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/My-Video.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">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<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to apply specific design and also fonts for AMP page\/post by using Elementor for this follow below steps. First, install and activate Elementor plugin Create a new page\/post by using Elementor. Install and activate Page Builder Compatibility for AMP plugin After installing you will find this option&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[163],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14377"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=14377"}],"version-history":[{"count":16,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14377\/revisions"}],"predecessor-version":[{"id":14398,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14377\/revisions\/14398"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14377"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14377"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}