How to Re-Create the Top Gun Website with WordPress & WP Video Lightbox

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

1. Navigate to Templates in your WordPress dashboard.
2. Click on + New to create a new template.
3. Select Front Page Template.
4. 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

1. Go to Pages and create a new page called “Home”.
2. Add a Cover Block to the page.
3. Upload your background image and set it to full width.
4. Type “Watch Trailer” and position it at the bottom right of the cover block.
5. Change the text color and lower the opacity of the cover block.

Building the Three-Column Layout

1. Add a Columns Block to the page.
2. Insert a Cover Block into the first column.
3. Type “Coming Soon” and position it using the Matrix picker.
4. Duplicate this column twice to create a three-column layout.
5. Adjust the padding and margin between the columns.

Adding the Footer

1. Insert a Group Block and transform it into a Row Block.
2. Add a Paragraph Block and type the footer text.
3. Insert the Social Icons Block and add your social media links.

Implementing the Video Lightbox

1. Install the WP Video Lightbox plugin.
2. Insert the shortcode provided by the plugin into your page.
3. 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

1. Navigate to Global Styles and adjust the top and bottom padding to reduce white space.
2. 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.