October 17, 2023

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

Play Video

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:


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.

Required Resources

Credit to Jamie Marsland
Join the WordPress journey with the expert guidance of Jamie Marsland, founder of Pootlepress. With a decade-long legacy of assisting individuals and businesses, Jamie shares practical WordPress knowledge derived from real-world experience. You'll find a wealth of WordPress tutorials, specialized advice for customizing WooCommerce with the Gutenberg Block Editor, and much more.
Visit
How to Re-Create the Top Gun Website with WordPress & WP Video Lightbox
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.