ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner...
Transcript of ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner...
![Page 1: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/1.jpg)
Rotary
ClubRunner Tutorial
Website Designer
![Page 2: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/2.jpg)
Rotary
ClubRunner
Website Designer
![Page 3: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/3.jpg)
Rotary
ClubRunner
Website Designer – Template
Click “Edit Content”
Click the Designer button
![Page 4: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/4.jpg)
Rotary
ClubRunner
Select one of the themes starting with “Full Width Top Band”
Note: ClubRunner has discontinued templates using banners so only use the themes with “Full Width Top Band”.
Click “Content Template” Website Designer – Template
![Page 5: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/5.jpg)
Rotary
ClubRunner
Main Section
Carousel or banner
Side Column Widgets
Widget “bank”
Elements of Designer Section
Note: this example is Full Width Top Band above Left Sidebar
![Page 6: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/6.jpg)
Rotary
Side Column Widgets
ClubRunner
Main Section
Carousel or banner
Elements of Designer Section
Club meeting info section
Home page stories section
![Page 7: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/7.jpg)
Rotary
Use the Themes option to choose the look of your page. Once you have the one you like, click the Publish button
ClubRunner
Website Designer – Themes
![Page 8: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/8.jpg)
Rotary
ClubRunner Tutorial
Carousel / Banner Design
![Page 9: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/9.jpg)
Rotary
From the Essentials tab in the Widget area, drag “Carousel” to “Banner (Full Width)”
ClubRunner
Creating a Carousel (Banner): Step 1 Two steps are involved – setting up the Carousel in the Website Designer and then creating the pictures to display.
![Page 10: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/10.jpg)
Rotary
Hold mouse over “Banner (Full Width)” to modify content (pencil) and settings (gear)
ClubRunner
In Content – choose a photo album (more on this later)
In Settings, consider options in bottom
Creating a Carousel (Banner): Step 1
![Page 11: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/11.jpg)
Rotary
ClubRunner
The pictures used for the carousel should all be the same dimensions – ie1600 pixels wide by 400 px height.
Use a photo editing software to crop or build pictures. You can use your own images or visit images.rotary.org or use Google images.
Creating a Carousel (Banner): Step 2
![Page 12: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/12.jpg)
Rotary
On Admin page, select Edit Photo Albums from the Website Manager section
ClubRunner
Find the album you selected earlier or create a new one. Click “Photos”
Creating a Carousel (Banner): Step 2
![Page 13: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/13.jpg)
Rotary
Use one picture if you want a single banner, or add photos to create a carousel slide show
ClubRunner
Click Add Files and then navigate to the folder in your computer to upload pictures.
Creating a Carousel (Banner): Step 2
![Page 14: ClubRunner Tutorial · Website Designer – Themes . Rotary ClubRunner Tutorial . Carousel / Banner Design . Rotary From the Essentials tab in the Widget area, drag “Carousel”](https://reader034.fdocuments.net/reader034/viewer/2022042418/5f347ad64d47f213da276e1d/html5/thumbnails/14.jpg)
Rotary
ClubRunner
Arrange the pictures in the order that you want them to show
Tip: if you later add pictures or reorganize the order, you will need to delete an existing photo (you can upload it again) for the changes to take effect.
Creating a Carousel (Banner): Step 2