Framerate Theme for YOOtheme Pro
It's showtime, everyone! Here comes Framerate – our new theme package for YOOtheme Pro. Framerate is a movie and TV show review site filled with 200+ demo posts. Thanks to dynamic content, it's the biggest and most complex demo website we've ever built. The frequent use of sliders and slideshows gives Framerate a modern, dynamic look. With its flat style, bright colors and additional dark style variations, Framerate is perfect for all sorts of review websites like for movies, TV shows, music and gaming as well as any other media related websites. Let's get right into it.
Page Layouts
Framerate is a review website for movies and TV shows which comes with 11 different layouts. The movie reviews are teased by using their poster images in full width sliders across the layouts.
Home
Movies
Movie Category
Movie Index
Movie Post
TV Shows
TV Show Category
TV Show Post
About
Post Index
Post
Here is a detailed description of all layouts.
| Page | Type | Description |
|---|---|---|
| Home | Page | Presents the latest and most popular movie reviews, TV show episodes and news in different sections. |
| Movies | Page | Shows an overview of all movie categories and their latest reviews in full width sliders. |
| Movie Category | Template | Shows an overview of all movie reviews from the category in a 5-column grid layout. |
| Movie Index | Template | Shows an overview of all movie reviews in a 5-column grid layout. |
| Movie Post | Template | Shows the movie review, further information about the movie, its related actors and related movie reviews. |
| TV Shows | Page | Shows an overview of all TV shows and their latest episodes. |
| TV Show Category | Template | Shows an overview of all TV show episodes grouped by season using a tab navigation. A sidebar to the right shows further TV show information. |
| TV Show Post | Template | Shows the episode review, further information about the TV show, its related actors and related episode reviews. |
| About | Page | Introduces the team, their philosophy and contact information |
| Post Index | Template | Displays news in a 2-column grid layout with an additional sidebar showing popular news. |
| Post | Template | Introduces the post with a hero image. The meta data and the author's avatar are aligned to the left of the post. |
Styles
Our new theme has a clean, flat style with a bright primary color and white background. Outlined buttons with slightly rounded borders as well as headings with distinct line decorations give the theme a fresh modern look. In addition, we created 3 dark styles which work especially well on movies, TV shows, music or gaming websites.
In addition to the default style, Framerate comes with 5 other style variations, each with a different beautiful color scheme. From light, dark to black, Framerate has something for every one. Just choose the one that fits your website best.
Black Red
Black Blue
Dark Blue
White Purple
Light Orange
Content Types and Custom Fields
In addition to the blog and its posts, Framerate comes with pages and templates for movie and TV show reviews filled with 200+ demo posts. In Joomla these content type are created by assigning custom fields to the Movies, TV Show and Actor categories, while in WordPress Movie, TV Show and Actor custom post type is used.
Movies
Movie reviews are grouped into different genres. The movie category has 1 custom field to define the text color for the background image.
| Category Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Image Text Color | list | select | Background image text color |
The movie post type has 16 custom fields which are dynamically mapped into the category and single post templates.
| Movie Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Image Text Color | list | select | Background image text color |
| Image Intro | - | image | The intro image of the movie |
| Teaser Title | text | text | Alternative title used to mix the review with blog posts on the home page |
| Teaser Image | media | image | Alternative image used to mix the review with blog posts on the home page |
| Teaser Image Alt Text | text | Alternative image alt text used to mix the review with blog posts | |
| Teaser Image Text Color | list | select | Background image text color |
| Summary | textarea | textarea | A short summary of the review used in the beginning |
| Directors | text | text | Movie directors |
| Writers | text | text | Movie writers |
| Runtime | text | text | Movie runtime |
| Country | text | text | Movie production country |
| Release Date | calendar | date picker | Movie release date |
| Studio | text | text | Movie production studio |
| Actors | articles | relationship | A list of actors related to the movie |
| Links | repeatable | relationship | A link to the movie's website with title and link fields |
| Related Movies | articles | relationship | A list of related movies |
TV Shows
TV show episode reviews are organized in a simple one-level category hierarchy with no further sub categories. In this special use case, each TV show is a category. There are 56 episodes sorted into 6 TV shows.
The TV show category has 14 custom fields which are dynamically mapped not only in the category template, but also in the single post template for episodes.
| Category Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Image Text Color | list | select | Background image text color |
| Intro Image | media | image | Category intro image |
| Intro Image Alt Text | text | - | Category intro image alt text |
| Teaser Title | text | text | Alternative title used to mix the review with blog posts |
| Teaser Image | media | image | Alternative image used to mix the review with blog posts |
| Teaser Image Alt Text | text | - | Alternative image alt text used to mix the review with blog posts |
| Teaser Image Text Color | list | select | Background image text color |
| Creators | text | text | TV show creators |
| Runtime | text | text | TV show runtime |
| Country | text | text | TV show directors |
| Duration | text | text | TV show duration |
| Studio | text | text | Production studio |
| Actors | articles | relationship | Actors related to the TV show. |
| Links | repeatable | relationship | A link to the TV show's website with title and link fields |
The episode post type has 12 custom fields which are dynamically mapped into the single post template.
| Post Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Intro Image | - | image | Episode intro image |
| Teaser Title | text | text | Alternative episode title used for featured episodes |
| Teaser Image | media | image | Alternative episode image used for featured episodes |
| Teaser Image Alt Text | text | text | Alternative episode image alt text used for featured episodes |
| Season | list | select | Episode season |
| Episode | list | select | Episode number |
| Summary | textarea | textarea | A short summary of the review used at the beginning |
| Directors | text | text | Episode directors |
| Writers | text | text | Episode writers |
| Runtime | text | text | Episode runtime |
| Release Date | calendar | date picker | Episode release date |
| Actors | articles | relationship | A list of actors related to the movie |
| Related Episodes | articles | relationship | A list of related episodes |
Actor
There is another post type for actors. Actors are only shown in the movie and TV show templates, and have no further category or post templates. There are 24 actors mapped on movies and TV show pages.
News
The default Post has 2 custom fields to define the text color for the background image.
| Post Field | Type (J) | Type (WP) | Description |
|---|---|---|---|
| Intro Image Text Color | list | select | Background image text color |
| Image Text Color | list | select | Background image text color |
In Joomla, we added two custom fields for the user: Image and Image Alt text grouped under Author field group. In WordPress the default profile picture is used.
| User Field | Type (J!) | Description |
|---|---|---|
| Image | media | User image |
| Image Alt Text | text | User image alt text |
3rd Party Integrations
To get the same result in the WordPress and Joomla demo packages, we are using several 3rd party plugins. For more information on all pre-installed and activated plugins, take a look at the installation documentation for Joomla and WordPress.
Free Quality Stock Images
Framerate comes with more than 340 lovingly curated and free-to-use images. Take a look at some of them below. These images can be found in the Framerate collection in the Unsplash library.
Important Notes
Currently, the Framerate layouts are not available in the layout library. This is because their content is loaded dynamically, and most of the mapped custom fields, content sources or handpicked articles and categories will not be available in your installation. But we are working on a solution to convert these dynamic layouts to static layouts which we will add to the layout library.
Now go ahead and explore our Framerate theme. As always, let us know what you think in the comments below.
- Movie review site with 200+ demo posts
- 11 page builder layouts
- 6 beautiful styles
- 4 content types and 47 custom fields
- 340+ lovingly curated and free-to-use images
- Powered by the YOOtheme Pro page builder
- Available as WordPress theme and Joomla template
