You can re-create the Top Gun Website using only WordPress and WP Video Lightbox to make your website as iconic as the movie itself. With this tutorial, you can re-create the official Tom Cruise website in just 15 minutes. Let’s get started!
Prerequisites
Please make sure you have the following installed and activated:
- WordPress 2023 (Theme)
- WP Video Lightbox (Plugin)
Setting Up the Front Page Template
- Navigate to
Templates
in your WordPress dashboard. - Click on
+ New
to create a new template. - Select
Front Page Template
. - Add a
Post Content Block
to this template.
This sets up the structure of your website, pulling only the content of your homepage into this template.
Designing the Hero Section
- Go to
Pages
and create a new page called “Home”. - Add a
Cover Block
to the page. - Upload your background image and set it to full width.
- Type “Watch Trailer” and position it at the bottom right of the cover block.
- Change the text color and lower the opacity of the cover block.
Building the Three-Column Layout
- Add a
Columns Block
to the page. - Insert a
Cover Block
into the first column. - Type “Coming Soon” and position it using the Matrix picker.
- Duplicate this column twice to create a three-column layout.
- Adjust the padding and margin between the columns.
Adding the Footer
- Insert a
Group Block
and transform it into aRow Block
. - Add a
Paragraph Block
and type the footer text. - Insert the
Social Icons Block
and add your social media links.
Implementing the Video Lightbox
- Install the WP Video Lightbox plugin.
- Insert the shortcode provided by the plugin into your page.
- Replace the video ID in the shortcode with your own video ID.
Note: WP Video Lightbox allows you to embed videos in a lightbox overlay, making it compatible with various platforms including YouTube and Vimeo. It’s a straightforward plugin that enhances the user experience by providing a clean and responsive video display.
Final Adjustments
- Navigate to
Global Styles
and adjust the top and bottom padding to reduce white space. - Go back to each
Cover Block
and change their minimum height to align with the original website.
Re-Create the Top Gun Website – Conclusion
You’ve successfully re-created the Top Gun website using WordPress and WP Video Lightbox. This tutorial walked you through each step, from setting up the front page template to implementing a video lightbox.