{"id":23581,"date":"2025-11-13T04:15:23","date_gmt":"2025-11-13T04:15:23","guid":{"rendered":"https:\/\/ourdemy.dev\/?p=23581"},"modified":"2025-11-20T08:49:58","modified_gmt":"2025-11-20T08:49:58","slug":"what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display","status":"publish","type":"post","link":"https:\/\/ourdemy.com\/en\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/","title":{"rendered":"What is a Custom Course Grid, and how can I choose which specific courses to display?"},"content":{"rendered":"\n<div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      1\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Drag the <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Custom CourseGrid<\/span> onto your page where you want it. Unlike the normal Course Grid that shows all courses automatically, this one lets you pick only the specific courses you want to feature.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"861\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif\" class=\"wp-image-24405\" alt=\"Screenshot for step 1\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      2\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Click on a course card inside the grid to start customizing. Each card represents one course you want to feature, and you can adjust every detail to match your course content.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1535\" height=\"800\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491.png\" class=\"wp-image-24406\" alt=\"Screenshot for step 2\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" srcset=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491.png 1535w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-300x156.png 300w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-1024x534.png 1024w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-768x400.png 768w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-18x9.png 18w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-710x370.png 710w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-bf016a9c6684f757-1763628491-600x313.png 600w\" sizes=\"auto, (max-width: 1535px) 100vw, 1535px\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      3\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Change the course image by clicking <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Select Image<\/span>. In the media window, you can either upload a new image from your device or pick one already saved in your media library. This lets you select an image that best represents your course.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"713\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-23c26219948bf099-1763628493.gif\" class=\"wp-image-24407\" alt=\"Screenshot for step 3\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      4\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Enter the <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Course Title<\/span> in the title field and write a short <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Course Description<\/span> in the description field. The title gives learners a quick idea of the course, while the description helps highlight why it\u2019s valuable or interesting.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"918\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-182cad7f10e03974-1763628496.gif\" class=\"wp-image-24408\" alt=\"Screenshot for step 4\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      5\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Set the course <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Price<\/span> by entering a value. If the course is free, simply type 0, and it will be displayed as <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Free<\/span>.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"913\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-b86f394f74ff1b8f-1763628500.gif\" class=\"wp-image-24409\" alt=\"Screenshot for step 5\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      6\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Edit the <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Button Label<\/span> (for example, Enroll Now or Learn More) so the call-to-action fits your course style. \nThen, paste the correct <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Button Link<\/span> so learners are taken directly to the course page or checkout when they click the button.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"923\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-64e7659ff7cebaaf-1763628504.gif\" class=\"wp-image-24411\" alt=\"Screenshot for step 6\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      7\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">If you want to feature more than one course, click the <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">+<\/span> button to add additional course cards. You can repeat the same customization process for each course you want to display.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1291\" height=\"890\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508.png\" class=\"wp-image-24413\" alt=\"Screenshot for step 7\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" srcset=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508.png 1291w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-300x207.png 300w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-1024x706.png 1024w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-768x529.png 768w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-18x12.png 18w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-710x489.png 710w, https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-4ef61437a6d3318f-1763628508-600x414.png 600w\" sizes=\"auto, (max-width: 1291px) 100vw, 1291px\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n        \n          <div style=\"width: 100%; padding: 0 clamp(16px, 4vw, 64px); box-sizing: border-box;\">\n            <div style=\"position: relative; background-color: white; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 0 auto 16px auto; transition: all 0.2s; max-width: 800px;\">\n              <div style=\"display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 16px);\">\n                <div style=\"display: flex; align-items: center; gap: 12px; flex: 1;\">\n                  <div style=\"position: relative; flex-shrink:0;\">\n                    <span style=\"background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\">\n                      8\n                    <\/span>\n                  <\/div>\n                  <div style=\"display: flex; align-items: center; gap: 8px; flex-1; min-width: 0;\">\n                    <div style=\"font-size: 14px; color: #1f2937; line-height: 1.625; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex: 1;\">Finally, choose whether to show play icon::\n &#8211; <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Show Icon<\/span> if you want a small arrow to appear inside the button, making it more engaging.\n &#8211; <span style=\"background-color: #dbeafe; color: #1d4ed8; padding: 1px 4px; margin: 1px 0; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid #bfdbfe; display: inline-block; white-space: nowrap; vertical-align: baseline;\">Hide Icon<\/span> if you prefer a cleaner and simpler look without graphics.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n            <div style=\"padding: 0 16px 16px 16px;\">\n              <div style=\"position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background-color: #f9fafb; width: 100%;\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"913\" src=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-08bf5d3923b3a8d4-1763628511.gif\" class=\"wp-image-24414\" alt=\"Screenshot for step 8\" style=\"display: block; width: 100%; height: auto; object-fit: cover;\" \/>\n              <\/div>\n            <\/div>\n          \n            <\/div>\n          <\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>1 Drag the Custom CourseGrid onto your page where you want it. Unlike the normal Course Grid that shows all courses automatically, this one lets you pick only the specific courses you want to feature. 2 Click on a course card inside the grid to start customizing. Each card represents one course you want to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,34],"tags":[],"class_list":["post-23581","post","type-post","status-publish","format-standard","hentry","category-customize-your-site","category-help-center"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ourdemy.com\/en\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy\" \/>\n<meta property=\"og:description\" content=\"1 Drag the Custom CourseGrid onto your page where you want it. Unlike the normal Course Grid that shows all courses automatically, this one lets you pick only the specific courses you want to feature. 2 Click on a course card inside the grid to start customizing. Each card represents one course you want to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ourdemy.com\/en\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/\" \/>\n<meta property=\"og:site_name\" content=\"Ourdemy\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-13T04:15:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-20T08:49:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"861\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/person\\\/e7a7e53bb8a94cce8f134c3718702e42\"},\"headline\":\"What is a Custom Course Grid, and how can I choose which specific courses to display?\",\"datePublished\":\"2025-11-13T04:15:23+00:00\",\"dateModified\":\"2025-11-20T08:49:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/\"},\"wordCount\":310,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-0f175696fb0426b5-1763628488.gif\",\"articleSection\":[\"Customize Your Site\",\"Help Center\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/\",\"name\":\"What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-0f175696fb0426b5-1763628488.gif\",\"datePublished\":\"2025-11-13T04:15:23+00:00\",\"dateModified\":\"2025-11-20T08:49:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-0f175696fb0426b5-1763628488.gif\",\"contentUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-0f175696fb0426b5-1763628488.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ourdemy.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a Custom Course Grid, and how can I choose which specific courses to display?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#website\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/\",\"name\":\"Ourdemy\",\"description\":\"Make your own online academy\",\"publisher\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ourdemy.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\",\"name\":\"Ourdemy\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/ouracademy-02.svg\",\"contentUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/ouracademy-02.svg\",\"width\":3163,\"height\":884,\"caption\":\"Ourdemy\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/person\\\/e7a7e53bb8a94cce8f134c3718702e42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/ourdemy.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ourdemy.com\/en\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/","og_locale":"en_US","og_type":"article","og_title":"What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy","og_description":"1 Drag the Custom CourseGrid onto your page where you want it. Unlike the normal Course Grid that shows all courses automatically, this one lets you pick only the specific courses you want to feature. 2 Click on a course card inside the grid to start customizing. Each card represents one course you want to [&hellip;]","og_url":"https:\/\/ourdemy.com\/en\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/","og_site_name":"Ourdemy","article_published_time":"2025-11-13T04:15:23+00:00","article_modified_time":"2025-11-20T08:49:58+00:00","og_image":[{"width":1440,"height":861,"url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#article","isPartOf":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/"},"author":{"name":"admin","@id":"https:\/\/ourdemy.com\/#\/schema\/person\/e7a7e53bb8a94cce8f134c3718702e42"},"headline":"What is a Custom Course Grid, and how can I choose which specific courses to display?","datePublished":"2025-11-13T04:15:23+00:00","dateModified":"2025-11-20T08:49:58+00:00","mainEntityOfPage":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/"},"wordCount":310,"commentCount":0,"publisher":{"@id":"https:\/\/ourdemy.com\/#organization"},"image":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#primaryimage"},"thumbnailUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif","articleSection":["Customize Your Site","Help Center"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/","url":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/","name":"What is a Custom Course Grid, and how can I choose which specific courses to display? - Ourdemy","isPartOf":{"@id":"https:\/\/ourdemy.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#primaryimage"},"image":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#primaryimage"},"thumbnailUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif","datePublished":"2025-11-13T04:15:23+00:00","dateModified":"2025-11-20T08:49:58+00:00","breadcrumb":{"@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#primaryimage","url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif","contentUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-0f175696fb0426b5-1763628488.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/ourdemy.com\/what-is-a-custom-course-grid-and-how-can-i-choose-which-specific-courses-to-display\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ourdemy.com\/"},{"@type":"ListItem","position":2,"name":"What is a Custom Course Grid, and how can I choose which specific courses to display?"}]},{"@type":"WebSite","@id":"https:\/\/ourdemy.com\/#website","url":"https:\/\/ourdemy.com\/","name":"Ourdemy","description":"Make your own online academy","publisher":{"@id":"https:\/\/ourdemy.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ourdemy.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ourdemy.com\/#organization","name":"Ourdemy","url":"https:\/\/ourdemy.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ourdemy.com\/#\/schema\/logo\/image\/","url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2023\/09\/ouracademy-02.svg","contentUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2023\/09\/ouracademy-02.svg","width":3163,"height":884,"caption":"Ourdemy"},"image":{"@id":"https:\/\/ourdemy.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/ourdemy.com\/#\/schema\/person\/e7a7e53bb8a94cce8f134c3718702e42","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/ourdemy.com"]}]}},"_links":{"self":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/comments?post=23581"}],"version-history":[{"count":4,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23581\/revisions"}],"predecessor-version":[{"id":24427,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23581\/revisions\/24427"}],"wp:attachment":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/media?parent=23581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/categories?post=23581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/tags?post=23581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}