Create a Presentation with scrolling inspirational quotes!

  • 2
  • Article
  • Updated 3 years ago
  • (Edited)


Hi Community!

It’s January, and everyone could use a presentation containing a scrolling list of inspirational quotes to help start the year off on a good note. This tutorial is great for beginners who are just getting started with the new Rise Vision Editor at https://apps.risevision.com.

Preparation:

  1. Make a copy of the presentation's code. Copy the code from this Google Doc to a safe place, we will be using it later in your Presentation.

  2. Make a copy of the background image. Save this background image that I've created and upload to your own Storage or media server.

  3. Make a copy of the quotes spreadsheet. Go to this spreadsheet that I've created and then go to File > Make a Copy.

  4. Publish your own copy of the quotes spreadsheet. On your own copy in Google Sheets, go to File > Published to the web > Publish. Also, make sure that the Spreadsheet is shared with “Anyone with the link”.


Once the above steps are ready, let's go ahead and create this presentation!

Creating the Presentation

Go to https://apps.risevision.com/editor, and create a brand new Presentation.

Go to the HTML tab. Select all of the HTML code therein, and paste over it with the code you copied over from that Google Doc in step 1. The animation below shows the whole process on how you can paste the code from this Google Doc into the HTML view of the Presentation:



Go back to the Design tab. We’re almost there!

inspirationquotesineditor

Now, let's change the background and spreadsheet to be pointing to your copies. This way you are free to make changes to the background image and quotes in the spreadsheet.

Editing the Presentation's Background Image

Click on the Gear icon next to the name of the Presentation. My Presentation is called "Quotes and Inspiration".

gearicon

In the text area under the screenshot of the image, select the Storage icon and select your own copy of the image that you have uploaded earlier from Step 2. If you decide to use another background image, this is where you can also change it to your own.

backgroundimage-change

Please note that the resolution that I've made it is 1366x768. If your Display resolution is different, you may need to use another image.

Once this is all done, press Save.

Editing the Quotes

Let's switch over the Spreadsheet to your own copy. That way, you can edit these scrolling quotes. Follow the steps below:

howtochangespreadsheet1

Then select the Google Drive icon as indicated below. It will pop up the Spreadsheets that is on your Drive. Make sure to select your own.

howtochangespreadsheet2

Once you are on your own copy, you can begin to edit the spreadsheet.

In the spreadsheet's cells, I have added some HTML code () which will center the cells (or the quotes). You can modify the quotes, delete and add more, but make sure that these are between the tags to keep them in the center.

If you add/delete the quotes, you will need to make sure that the Spreadsheet Widget range also reflects any changes that you make with the rows. For example in the default quotes spreadsheet, there are 60 quotes so the range is now B3 to B62 as indicated below:

range

In the Spreadsheet Widget are other items that I have customized for this presentation. I will explain them below:

Row Padding: I want there to be enough space between one row and the next since one quote is contained in each row. I have set this to 70px which offers enough space.

Data Format: This is what the font face, weight and size looks like. I have chosen a custom font and you are welcome to change the font to either of the main options, to another custom font or to any of the other font options in 'More Fonts...' option in the fonts menu.
Once everything is set up, make sure to Save and Preview and Publish!

Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
  • Happy

Posted 3 years ago

  • 2

There are no replies.