When we get a call from one of your favorite science coordinators for help, we clear our calendars!

Our friend, Marcie Cogar, called us and asked for help in creating buttons for her Castleberry ISD Science Fair Canvas course. You can guess where our first stop for designing was… Canva!

We met together, went to Canva and began designing. Canva does have Canvas button templates, however, we found a template in the stickers templates that we really liked, so we made stickers instead.

We created buttons for each step of the Science Fair process for the students to follow. Each button is linked to a page with information needed for the Science Fair.

Now we had to figure out how to add the buttons to the Canvas course. 🤔

Stephanie came to the rescue with a Canvas code to make a grid within the Canvas page that aligns all of the images. In addition to making the images symmetrical, the code also allows the images and alt text to be readable for screen readers and the built-in Immersive Reader by Microsoft. YAAASSSS!! This makes our hearts sooo happy! The page looks great and the information is accessible.

After adding the buttons to the grid, we then created a page for each button to link to with the information regarding the button topic.

We linked each button to it’s corresponding page by clicking the link button in Canvas and selecting course link.

Each of the course pages appear on the right hand side of the page. We selected the page we wanted each button to be linked with and clicked save!

Now each button is linked and Marcie has an AWESOME Canvas Course for each secondary student at Castleberry ISD to utilize and complete their Science Fair Projects with ease!

Check out this TikTok to hear about the process from Stephanie, Jeni, and Sallee.

Canvas & by salleeclark

Resources:

We know all this information has you jumping with joy and you want to make this for your own Canvas course.

Good News! 🎉

We have the Canva button templates for you & the html code! This should make the process a little easier for you and your friends!

Grid Layout Canvas HTML Code 

Copy the code below and add it to your Canvas pages to create a grid that is accessible and appealing to your course.

Click here to see an interactive tutorial on using the html code in Canvas.

<div class=”grid-row”>

    <div class=”col-xs-12 col-md-3″>

        <p style=”text-align: center;”>Insert Image 1 here</p>

        <p style=”text-align: center;”>Image 1 description or information</p>

    </div>

    <div class=”col-xs-12 col-md-3″>

        <p style=”text-align: center;”>Insert Image 2 here</p>

        <p style=”text-align: center;”>Image 2 description or information</p>

    </div>

    <div class=”col-xs-12 col-md-3″>

        <p style=”text-align: center;”>Insert Image 3 here</p>

        <p style=”text-align: center;”>Image 3 description or information</p>

    </div>

    <div class=”col-xs-12 col-md-3″>

        <p style=”text-align: center;”>Insert Image 4 here</p>

        <p style=”text-align: center;”>Image 4 description or information</p>

    </div>

</div>

---

Canva Template!

Subscribe to our Jenallee newsletter to access all of the #Jenallee Canva Templates for FREE!