Adding the lightbox effect will allow users to view your images in a distraction-free environment without leaving your website. However, the default WordPress gallery block does not support lightboxes.

In this article, we will show you how to easily add a gallery in WordPress with a lightbox effect, step by step.

Why Add the Lightbox Effect in WordPress Galleries?

By adding the lightbox effect to the galleries on your WordPress website, you can show off your images in a more professional way.

This effect allows you to display your images in a pop-up window on your website when a user clicks on them.

Lightboxes help create a more immersive viewing experience for your visitors and even make it easier for them to share your images on social media or download them on their computers.

If you have a photography website, then adding a lightbox effect will enable users to view your high-resolution images in a distraction-free mode, increasing engagement.

Similarly, if you have a WooCommerce store, then adding a lightbox effect to your product galleries can also help customers view the product up close and make an informed decision.

Having said that, let’s see how to easily add a WordPress gallery with a lightbox effect, step by step.

How to Add a WordPress Gallery With a Lightbox Effect

You can easily add a WordPress gallery with a lightbox effect using Envira Gallery.

It is the best WordPress gallery plugin that allows you to create fully responsive and modern image galleries for your website.

Envira Gallery is also super fast and has a drag-and-drop builder, professional gallery templates, and many features, including adding tags, audio, social sharing, and the lightbox effect.

First, you need to install and activate the Envira Gallery plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Envira Gallery » Settings page from the WordPress admin sidebar to enter the license key.

You can get this information from your account on the Envira Gallery website.

After that, you need to visit the Envira Gallery » Add New page from the WordPress dashboard to start creating your own gallery.

From here, type a title for the image gallery and click the ‘Select Files from Your Computer’ button to upload images.

Or, if you want to add media library images to your gallery, then click the ‘Select Files from Other Sources’ button. This will launch the media library from where you can upload gallery images.

Remember that you can only upload one image from the media library at a time.

Once you have done that, scroll down to the ‘Currently in your Gallery’ section, where you will see a preview of your gallery on the right with settings in the left column.

Now, click the pencil icon on top of each image to open the ‘Edit Metadata’ prompt on the screen.

From here, you can add the caption, status, title, and alt text for individual images.

After that, don’t forget to click the ‘Save Metadata’ button to store your settings.

Next, switch to the ‘Configuration’ tab from the left column to change the layout of your gallery according to your liking.

From here, you can select a layout, number of columns, image size, dimensions, themes, and more.

For detailed instructions, please see our beginner’s guide on how to create an image gallery in WordPress.

Once you have configured the gallery layout, switch to the ‘Lightbox’ tab from the left column and check the ‘Enable Lightbox?’ option.

After that, select a lightbox theme from the ‘Gallery Lightbox Theme’ dropdown menu. If you choose the ‘Legacy’ option, then the lightbox effect prompt will have an older layout.

On choosing the ‘Base (Dark)’ option, the lightbox prompt will have a dark base as its layout.

Next, you must select if you want to display the image title or its caption in the lightbox prompt. You can also display both or none of them if you like.

Once you have done that, choose the image size for the lightbox from the dropdown menu.

After that, check the ‘Enable Gallery Arrows’ option. The lightbox prompt will now show two arrows that the viewers can use to switch to different images in your gallery.

You can also configure other settings for your lightbox, including its transition effect, open/close effect, enable lightbox supersize, and more.

Once you are done, don’t forget to click the ‘Publish’ button at the top to store your changes.

To add your image gallery to a WordPress page/post, open the page in the block editor.

Here, you need to click the add block ‘+’ button in the top left corner of the screen to open the block menu. Next, add the Envira Gallery block to the page/post.

After that, select the image gallery that you just created from the dropdown menu in the block itself. Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

Now, you can visit your WordPress blog to view the image gallery and then click on any image to see the lightbox effect.

Alternative: Use NextGen Gallery to Create Image Portfolios and Galleries in WordPress

Envira Gallery is the best option for adding lightbox images to your WordPress website. Alternatively, you can use NextGEN Gallery to create fully responsive and visually pleasing galleries and portfolios on your WordPress site.

NextGEN Gallery is the best Envira Gallery alternative because it supports a wide range of gallery types, has eCommerce-related features, and allows you to add watermarks, lightboxes, image comments, and more.

Additionally, NextGEN Gallery allows you to accept online payments via Stripe or PayPal, making it easy to sell your images online.

It is an advanced gallery plugin with features for professional photographers, graphic designers, and visual artists, making it one of the best WordPress portfolio plugins on the market.

For detailed instructions, you may want to see our tutorial on how to add a portfolio to your WordPress site.

We hope this article helped you learn how to easily add a WordPress gallery with a lightbox effect. You may also want to see our beginner’s guide on how to do basic image editing in WordPress and our expert picks for the best tools to create better images for your blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Gallery in WordPress with a Lightbox Effect first appeared on WPBeginner.

A travel business site lets you advertise your tour packages, take bookings directly, and communicate with your users. This will allow you to reach more customers, generate more leads and sales, and even improve customer service.

In this article, we will show you how to make a travel business site in WordPress, step by step.

Which Is the Best Website Builder to Make a Travel Business Site?

In our expert opinion, WordPress is the best website builder to make a travel business site. It is used by over 43% of the websites on the internet and is super reliable, secure, easy to use, and scalable.

WordPress is used by many different kinds of businesses to sell their services or products, and you can easily set up a travel company using a travel booking plugin.

However, you should know that there are two types of WordPress on the market.

WordPress.com is a blog hosting platform, whereas WordPress.org is an open-source, self-hosted software. For more detailed information, you may want to see our comparison between WordPress.com and WordPress.org.

For a travel company, we recommend using WordPress.org because it is completely free, gives you full control over your website, and can easily integrate with any third-party travel plugins.

For more details, you may want to see our complete WordPress review.

That being said, let’s see how to easily make a travel business site in WordPress, step by step. Here is a quick overview of the steps we will cover:

Step 1: Choose a Domain Name and Hosting Plan

To create a WordPress site, you will first need to get a domain name and web hosting.

A domain name is the name of your website on the internet. This is what customers will have to type to visit your site, like www.tourism.com or www.traveladventures.com.

Web hosting is where your website lives on the internet. To choose the perfect hosting plan for your travel business, you may want to see our list of the best WordPress hosting services.

You will notice that even though WordPress.org is free, the domain name and web hosting are where your costs will add up. The average cost for a domain name is $14.99/year, while hosting costs start from $7.99/month.

This can be a bit expensive if you are just starting out and have a shoestring budget.

Thankfully, Bluehost is offering a HUGE discount to WPBeginner readers along with a free domain name and an SSL certificate.

Bluehost is a WordPress-recommended hosting service and one of the best in the business.

To get a discount on Bluehost, just click on the button below.

This will take you to the Bluehost website, where you have to click the ‘Get Started Now’ button.

You will now be taken to the Bluehost Pricing page, where you can select a hosting plan according to your travel business site needs.

We recommend opting for the Basic or Choice Plus plan, as they are the most popular web hosting plans among our readers.

Upon making your choice, simply click the ‘Select’ button under a plan.

This will direct you to a new page where you have to pick a domain name for your travel business site.

We recommend choosing a name related to your business that is easy to pronounce, spell, and remember.

The easiest option would be to choose the name of your existing travel business. However, keep in mind that this domain name may already be taken by some other website.

In that case, you can try adding some extra keywords or use your location to make your domain name stand out. For more ideas, you may want to see our beginner’s guide on how to choose the best domain name.

If you are just starting your travel business and do not have a name for it yet, then you can also try WPBeginner’s Free Business Name Generator to come up with an interesting name for your company.

After choosing a name, just click on the ‘Next’ button to continue.

This will take you to the next step, where you will be asked to provide your account information, business email address, name, country, phone number, and more.

Once you have provided those details, you will also see optional extras that you can buy.

We generally don’t recommend buying these extras straight away, as you can always add them later if your business needs them.

After that, type in your payment information to complete the purchase.

Once you have done that, you will receive a confirmation email with details to log in to your Bluehost dashboard. This will be your control panel where you will manage your travel business site.

Now, it’s time for you to install WordPress.

Step 2: Create a New WordPress Website

If you signed up for Bluehost using our link above, then Bluehost will automatically install WordPress on your domain name for you.

However, if you want to create a different WordPress site for your travel business, then you can do that by clicking on the ‘My Sites’ tab in the Bluehost dashboard.

Once you have done that, click the ‘Add Site’ button and select the ‘Create New Site’ option.

This will open the Bluehost wizard on the screen, which will walk you through the whole setup process.

You can start by adding a title and an optional tagline for your website. After that, just click the ‘Next’ button to continue.

You will now be asked to choose a domain name and path for your travel business. If you already have a domain name, then you can select it from the dropdown menu under the ‘Domain’ option.

However, if you still haven’t purchased the domain, then you can do that by visiting the ‘Domains’ page on the Bluehost dashboard.

Once you have chosen a domain, leave the directory path blank and let Bluehost fill it in for you.

Now, the setup wizard will show you a list of optional WordPress plugins that you may want to install on your website, like WPForms and OptinMonster.

Most of these tools are must-have WordPress plugins that will help you improve your overall site quality. To install any of these plugins, just check the box next to its name.

After that, click the ‘Next’ button once again to set up your travel business site.

You will now see a ‘WordPress installed successfully’ message with information about your new website on the screen. From here, click the ‘Log into WordPress’ button to access your admin dashboard.

If you want, you can also log in to your WordPress dashboard by going to yoursite.com/wp-admin/ in your web browser.

Step 3: Choose a Theme for Your Travel Business

WordPress themes are professionally designed templates that control how your website looks on the front end.

Upon visiting your newly installed WordPress site, you will notice that it currently has the default theme activated, which will look like this:

If you want to make your travel business successful, get more leads, and impress your customers, then you should replace the default theme with one that matches your niche.

You can install any of the popular WordPress themes on your site and then customize them according to your liking.

You can also use themes that were specifically designed with the traveling niche in mind. For details, you may want to see our list of the best WordPress themes for travel blogs.

However, if you want to easily customize your travel business site in just a few clicks, then we recommend using SeedProd.

It is the best WordPress page builder on the market that allows you to create landing pages and even an entire theme without using any code.

It also comes with travel-related templates and advanced blocks that will let you set up your travel business site in just a few minutes.

First, you need to install and activate the SeedProd plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the SeedProd » Theme Builder page from the WordPress dashboard and click on the ‘Theme Template Kits’ button.

This will take you to a new screen where you will see a list of premade templates that you can use on your website.

When you find the ‘Travel Theme’ or ‘Travel Blog’ template, click on it to launch it in the drag-and-drop builder.

SeedProd will now create all the page templates that you will need for your travel business and launch the home page in the page builder.

Here, you can drag and drop any block from the left column into the page preview. For detailed instructions, see our beginner’s guide on how to create a custom theme in WordPress.

Once you are done, don’t forget to click the ‘Save’ button at the top.

If you want to use another travel-specific theme on your website, then you may want to see our tutorial on how to install a WordPress theme.

Once you have activated your theme, just visit the Appearance » Customize page from the WordPress admin sidebar. Here, you can change the theme’s appearance in the customizer.

If you are using a block-based theme, then you will have to visit the Appearance » Editor page from the WordPress dashboard.

This will open the full site editor, where you can drag and drop the blocks from the left column to customize your travel business site.

Once you are done, don’t forget to click the ‘Save’ button to store your settings.

Step 4: Create a Home Page and Navigation Menu

WordPress uses two content types by default, which are posts and pages.

Pages can be used for home page, a Contact Us page, or an About Us page. On the other hand, posts are used to create articles and blog posts for your website.

These posts are then displayed in reverse chronological order on your website’s home page.

To further promote your travel business, it is a good idea to start a travel blog on your website. This will help improve your search engine rankings and gain more customers.

For detailed instructions, you can see our beginner’s guide on how to start a travel blog in WordPress.

However, even if you plan to write blog posts, we recommend creating a different page for your articles and not displaying them on the home page.

Instead, you can design a custom home page for your website that represents your travel business in a visually pleasing way.

For details, see our tutorial on how to create a custom home page in WordPress.

Once you have finished designing your homepage, you need to visit the Settings » Reading page in your WordPress dashboard and choose the ‘A static page’ option in the ‘Your homepage displays’ section.

Next, open the ‘Homepage’ dropdown and choose the page you want to use.

If you want to create a separate page for travel blogging, then you can see our tutorial on how to create a separate blog page. Finally, click the ‘Save Changes’ button to store your settings.

Upon adding different posts and pages to your travel business site, you will also need to add a navigation menu at the top.

This navigation menu will show an organized structure of your site and help your visitors navigate through it.

To create a navigation menu for your WordPress site, please see our step-by-step guide on how to add a navigation menu in WordPress.

Step 5: Create Image Galleries for Your Travel Business

Showing image galleries is extremely important for travel business sites.

This is because these galleries can show high-quality images of stunning scenery, exciting activities, and comfortable accommodations that can help inspire potential travelers and convince them to book a trip with you.

Plus, these image galleries can also be used to promote specific travel packages, tell a story about your adventure travel company, increase brand awareness, and much more.

To create image galleries in WordPress, we recommend using Envira Gallery. It is the best WordPress gallery plugin on the market that comes with amazing features like lightboxes, tags, watermarks, and more.

First, you need to install and activate the Envira Gallery plugin. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, visit the Envira Gallery » Settings page and enter your license key. You can find this information in the Envira Gallery account area.

Next, head to the Envira Gallery » Add New page from the WordPress dashboard. Here, click the ‘Select Files from Your Computer’ button to upload images from the computer.

If you want to add images from the media library, then click the ‘Select Files from Other Sources’ button.

Once you have uploaded the images for your travel package, scroll down to the ‘Currently in Your Gallery’ section.

Here, click the pencil icon on top of each image to open the ‘Edit Metadata’ prompt.

Once that prompt appears on the screen, you can add titles, descriptions, tags, and alt text to your images.

Next, click the ‘Save Metadata’ button to store your settings.

After that, you can further configure other gallery settings according to your liking. For detailed instructions, you may want to see our beginner’s guide on how to create an image gallery in WordPress.

Finally, click the ‘Publish’ button at the top to store your settings.

Now, visit the WordPress page/post where you want to add the image gallery for the travel package.

Here, you need to click the ‘Add Block’ (+) button in the top left corner of the screen to open the block menu. Next, add the Envira Gallery block to the page/post.

After that, just choose the image gallery that you created for the travel package from the dropdown menu inside the block.

Finally, go ahead and click the ‘Publish’ or ‘Update’ button to store your settings.

You can now go ahead and add multiple image galleries to show your travel packages, different destinations, and much more on your WordPress travel business site.

Step 6: Install and Set Up the WP Travel Engine Plugin

By default, WordPress does not come with any built-in functionality for travel businesses. That is why you’ll need to use a third-party plugin like WP Travel Engine to set up trips and bookings on your site.

WP Travel Engine is a popular free WordPress plugin that allows you to create an SEO-friendly travel booking site in minutes.

First, you need to install and activate the WP Travel Engine plugin. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, the plugin will launch a setup wizard on your screen where you have to click the ‘Let’s Get Started’ button.

You will now be taken to the ‘Currency Setting’ step, where you have to choose your website’s base currency, its symbol, and a thousand separator.

After that, click the ‘Continue’ button to move on.

In the next step, you need to configure the email settings. Here, type the email address where you want to receive notifications when a user books a trip next to the ‘Sales Notification Emails’ option.

If you don’t want to receive any notifications, simply toggle the switch at the top.

After that, toggle the ‘Enable Enquiry Email’ option if you want to be able to send emails to customers who book a trip using your website.

Next, type the email address that will be used to send emails to customers next to the ‘From Email’ option and click the ‘Continue’ button.

You will now be taken to the ‘Page Settings’ step, where you have to choose different pages for the checkout, terms and conditions, booking confirmation, and other pages.

Here, you can select any of the pages that you have already published on your website or choose a page created by the plugin.

For example, if you have an existing checkout page, then you can select that page from the dropdown menu. If you don’t have one, then you can leave the setting as it is, and the plugin will create a custom page for you.

Once you are done, click the ‘Continue’ button.

In the ‘Payment Gateway Setting’ step, you have to toggle on the switches for the ‘Book Now Pay Later’ option and the ‘PayPal’ option.

After that, add your PayPal email ID into the ‘PayPal Email/ID’ field.

These payment gateways will then be added to your travel business site. Next, click the ‘Continue’ button to move on.

You have now successfully configured the WP Travel Engine plugin.

In the last step, just click the ‘Go to dashboard’ button to exit the setup wizard.

Step 7: Create a Travel Package for Your Business

Upon configuring the plugin, it is now time to create a travel package for your website. To do this, just visit the Trips » Add New page from the WordPress admin dashboard.

This will open the block editor, where you can start by adding a title and details for your travel package. You can also click the ‘Add Block’ (+) button in the top left to add an Image, Heading, or Quote block.

You can also add the image gallery that you created for the travel package by dragging and dropping the ‘Envira Gallery’ block from the block menu.

Once you have done that, expand the ‘Destinations’ tab in the block panel on the right and click the ‘Add New Destinations’ link.

Here, you can add the name of the country or city for the travel package you are offering. This feature will help you organize your travel packages by different destinations.

It will also help your users if you plan to offer multiple packages for the same destination.

Next, expand the ‘Activities’ tab and click the ‘Add New Activities’ link. Here, you can add all the activities that you will offer your clients on this trip, like snorkeling, hiking, scuba diving, visiting heritage areas, and more.

This option can also help you further categorize your trip. For example, if a user who does not have a specific destination in mind but likes hiking types this keyword into the search box, they will be shown all the travel packages that have hiking listed as one of the activities.

After that, you can also add a featured image, trip type (adventure, leisure vacation, business trip), and tags for your package from the block panel.

Now, it’s time for you to configure the trip settings. For this, scroll down to the ‘WP Travel Engine – Trip Settings’ section.

Here, you can type in the trip code and the day and night duration of the trip.

You can also enable a cut time for the travel package. This means that users won’t be able to book this trip after a specified date.

Then, you can also set a minimum and maximum age for the trip and the minimum or maximum number of participants for the trip.

Once you are done, don’t forget to click the ‘Save & Continue’ button to store your settings.

This will take you to the ‘Date and Price’ tab, where you have to click the ‘Add A New Package’ button.

Next, you will have to add a package name and click the ‘Edit Pricing and Dates’ link.

This will open a prompt on the screen where you can expand the ‘Adult’ tab and then type the price for the trip. You can set the price for per person or per group.

After that, you can set a price range for children and click the ‘Save and Close’ button once you are done.

Next, click the ‘Continue’ button to move on.

This will take you to the ‘Overview’ section, where you can add a title and description for your trip.

You can even add trip highlights like a snorkeling adventure under the ‘Trip Highlights’ section. After that, click the ‘Save & Continue’ button.

You will now be taken to the ‘Itinerary’ section, where you can start by adding a title.

Next, add a title for the day 1 itinerary and write all the activities that will be part of the first day of the trip. To add multiple days for the trip, you will have to click the ‘Add Itinerary’ button.

Once you are done, click the ‘Save & Continue’ button.

In the ‘Includes/Excludes’ section, you will have to add a section for all the things that are included in the trip price, like the hotel booking, breakfast, and more.

Similarly, you will also have to add a section for all the things that are excluded from the trip pricing, like snorkeling fees, dinner, and more.

Upon doing that, click the ‘Save & Continue’ button.

You will now be taken to the ‘Trip Info’ section, where you have to add a title and then choose trip facts that may not have been added before from the dropdown menu.

For example, if you want to talk about the hotel that your clients will be staying in, then you can select the ‘Accommodation’ option and click the ‘Add Fact’ button.

After that, you can simply add the hotel’s name and link next to the ‘Accommodation’ option.

You can also add other details for the trip, like admission fees, arrival city, best season, payment methods info, hotel transfer, WiFi, meals, and more.

Once you are done, click the ‘Save & Continue’ button.

You will now be taken to the ‘Gallery’ section, where you can toggle the ‘Enable Image Gallery’ switch if you haven’t already added a gallery with Envira.

You can then add images, and the gallery will automatically be created for you. You can even add a video gallery for the package by toggling the ‘Enable Video Gallery’ switch.

Next, you are able to add a YouTube or Vimeo video to your package. Upon doing that, click the ‘Save & Continue’ button to move on.

This will take you to the ‘Map’ section, where you can add a title, map image, and an iframe code for the hotel where your clients will be staying or for the general trip location.

Then, click the ‘Save & Continue’ button.

In the FAQs section, you can click on the ‘Add FAQs’ button and add questions that are frequently asked by your users. This will help answer customer queries and even improve your search engine rankings.

Upon adding the FAQs, simply click the ‘Save & Continue’ button.

Now, scroll back to the top and click the ‘Publish’ button to make your trip package live. After that, you can visit your WordPress website to view the package in action.

You can now create more packages for your travel business site by repeating the process.

Step 8: Add a Contact Form to Your Travel Business Site

Once you have created multiple travel packages that you plan to sell on your website, it is a good idea to also add a contact form.

This form will allow customers to reach out to you if they have any questions, which can help improve customer satisfaction. Plus, it can even help you build an email list by allowing you to collect customer information.

We recommend using WPForms to add a contact form to your website.

It is the best WordPress contact form plugin on the market that comes with 1000+ premade form templates, a drag-and-drop builder, protection from spam entries, and more.

First, you need to install and activate the WPForms plugin. For detailed instructions, see our tutorial on how to install a WordPress plugin.

After that, all you have to do is use the WPForms ‘Simple Contact Form’ template and then add it to any page or post using the WPForms block.

For detailed instructions, see our tutorial on how to create a contact form in WordPress.

Other than a contact form, we also recommend using a professional phone service on your travel site to make it easier for users to reach out to you or make bookings over the phone. This can lead to more conversions.

You can easily add a phone service for your travel business using Nextiva.

It is the best business phone service for small businesses that is super easy to use, offers an easy setup, has a lot of features, and has reasonable pricing.

Plus, Nextiva also comes with other features like online faxing, live chat, online surveys, CRM, call analytics, and more.

For details, see our tutorial on how to set up an auto-attendant phone system for your website.

Step 9: Add Customer Reviews on Your Website

Another way to build trust among potential customers and increase conversions is to add customer reviews to your travel business site.

If you already have reviews for your trip packages on Yelp, Facebook, or Google, then you can easily add them to your website using the Smash Balloon Reviews Feed Pro plugin.

It is the best WordPress customer reviews plugin on the market that lets you add reviews to your website in a visually pleasing layout.

For more detailed instructions, see our tutorial on how to show Google, Facebook, and Yelp reviews in WordPress.

Step 10: Use AIOSEO to Improve Search Engine Rankings

Once you have finished making your travel business site, it is important to focus on its search engine optimization (SEO).

This can help you rank higher and get more traffic to your website. In turn, this can lead to more conversions and interest in your travel business.

We recommend using All in One SEO (AIOSEO) to optimize your WordPress site.

AIOSEO comes with an amazing setup wizard that automatically helps you choose the best SEO settings for your business. Plus, it offers features like an on-page SEO checklist, XML sitemaps, a broken link checker, a schema generator, and more.

You can also add FAQs and their schema, track individual keyword results, do image SEO, use a social media assistant, and use the link assistant feature to further optimize your website.

For more details, you may want to see our complete WordPress SEO guide.

Bonus Tools to Boost Conversions on Your Travel Business Site

By now, you should have a functional travel business site up and running. Here are some plugins that you can install to improve your business and get more conversions:

• OptinMonster: It is the best conversion optimization and lead generation tool on the market. It can be used to create opt-in forms that will help build you an email list.
• MonsterInsights: It is the best analytics solution for WordPress. This will help you see where your visitors are coming from and optimize your business strategy based on real data.
• PushEngage: It is the best push notification software that allows you to send personalized web push notifications to your customers. For example, you can let users know when you’ve published a new blog post or released a new travel package.
• SearchWP: It is the best search plugin on the market that allows you to create a better search form for your website. This way, users can find the travel deals they are looking for.

We hope this article helped you learn how to make a travel business site in WordPress. You may also want to see our beginner’s guide on how to determine the ideal size of a web server for your website and our top picks for the must-have WordPress plugins to grow your business website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Make a Travel Business Site in WordPress (Step by Step) first appeared on WPBeginner.

Introduced in WordPress 5.9, Full Site Editing has changed how users can build their websites using WordPress. It’s designed to be flexible and easy to use for beginners.

In this article, we will show you how to use the WordPress Full Site Editor. By the end of this guide, you can easily create a great-looking website with WordPress in no time.

What Is Full Site Editing (FSE) in WordPress?

WordPress Full Site Editing (FSE) is essentially a continuation of the Gutenberg project. It’s a feature that uses the block content editor interface for WordPress.org’s built-in website and theme customization tools.

This means you can use the block content editor not just for creating your page or post content but also for a header, footer, sidebar, and more.

The goal of Full Site Editing is to simplify website building in WordPress. While WordPress is pretty user-friendly, it wasn’t always the easiest to use for beginners.

For starters, the previous Classic Editor is quite barebones. When you create a new page, you can’t see what it looks like right away. Instead, you have to switch back and forth between the preview page and the editing interface to see the page’s appearance on the front end.

Some people also find the WordPress Theme Customizer limiting as it doesn’t have a drag-and-drop functionality.

In other words, you can’t move and edit elements around exactly how you want to. That’s why many people install a WordPress page builder plugin to get more flexibility in their design.

The Gutenberg project aims to solve these problems by introducing newer, more user-friendly website-building tools, including Full Site Editing.

With FSE, beginners can create their WordPress websites using an easy drag-and-drop block editor and see a live preview as they make changes.

What You Should Know Before Using WordPress Full Site Editing

Before using the WordPress Full Site Editor, you should know that this feature is only available for WordPress block theme users.

If you use a non-block (classic) theme, then you won’t have access to the Full Site Editor. Instead, you’ll have to use the WordPress theme customizer or a supported page builder to make customizations.

If you want to see some block theme inspiration, then go ahead and check out our guide to the best WordPress Full Site Editing themes.

Another thing to remember is that WordPress Full Site Editing works the same way as the Gutenberg block content editor. With that in mind, we recommend reading our guide on how to use the WordPress block editor.

In this guide, we will focus on how to use WordPress Full Site Editing features to edit your web page design, content, and layout. You can use these quick links to skip to a specific topic:

How to Access WordPress Full Site Editing Features

To access the WordPress Full Site Editor, you need to go to your WordPress dashboard and head to Appearance » Editor.

After that, you will land on the WordPress Full Site Editor.

Here’s what the interface looks like:

On the left side, you will find a panel with the main settings. Meanwhile, the right side has a preview of what your website looks like. You can click on that side if you want to edit your website right away.

There are 5 main settings: Navigation, Styles, Pages, Templates, and Patterns. Let’s go through all of them one by one.

How to Edit Your Navigation Menu With FSE

The first setting at the top is Navigation, which allows you to edit your block theme’s navigation menu. Go ahead and click on it.

There are several things you can do on this page.

When you click on the three-dot button next to ‘Navigation,’ you can Rename, Duplicate, or Delete the menu.

You can also rearrange or remove the page(s) listed in the menu.

To do this, click the three-dot button next to one of the pages. You’ll see options to Move up, Move down, and Remove the page. If you want to edit that specific page, then you can select the ‘Go to …’ button.

Another thing you can do is customize the menu design and links.

To do that, just click the pencil ‘Edit’ icon to open the block editor.

Now, the editing interface for the navigation menu will appear, which looks like the regular block editor.

Adding, Editing, Removing, and Rearranging Menu Elements

Before we continue, note that the location of your website navigation menu will depend on your theme. It may be at the top, on the side, or hidden, appearing only when you click a certain button.

To add a new page link, you can click the ‘+’ add block button within the menu. Now, simply type in the name of the page, post title, or external URL you want to insert into the navigation menu and select it.

If the page you want to link to has not been created yet, then you can still add a link to the navigation menu.

Just type in the name of the draft page in the search bar and click ‘Create draft page.’ WordPress will then make a page using that name that you can edit later.

If you want to edit the page’s link, name, and tab settings, simply select the page and click the link icon in the block toolbar.

Once you’ve done that, select the pencil button.

Now, you’ll be able to change the page’s link and make the link open in a new tab.

Once done, just hit ‘Save.’

You can also add new navigation menu elements here besides page links.

All you need to do is click the ‘+’ add block button. After that, you will find some navigation block options that are available for you to use, like the Site Logo or Site Tagline.

Sometimes, you may have to scroll down to find these blocks. You can also choose ‘Browse all’ to see the complete list of the block choices.

At one point, you may also want to rearrange the menu elements.

To do that, select a block and choose one of the arrow icons to move the block to the left or right.

Now, if you want to remove a page link or other menu elements, you can select the element you want to delete.

Then, click the three-dot menu on the block toolbar and choose ‘Delete.’

Creating a Submenu

If you have a lot of web pages, like if you run an online store, then you may want to create a dropdown submenu. This way, your navigation menu won’t be cluttered with many links and will look much more organized.

The first step to creating a submenu is clicking the ‘+’ add block button and selecting the ‘Submenu’ block.

Next, you will select a page or URL that functions as the submenu’s parent menu.

For instance, if you run a blog, then you may use your blog page as the parent menu. Within the submenu, there will be links to the individual category pages of your blog content.

In this example, we will select ‘Blog.’

After you’ve done that, simply click the ‘+’ add block button.

It should be below the parent menu.

At this point, you can type in the name of the page link you want to insert and select that. Feel free to repeat this step to add as many submenu links as needed.

Once you are done with the navigation menu, don’t forget to save your changes by clicking the ‘Save’ button in the top right corner.

How to Change Your Website’s Global Styles With FSE

The next setting below Navigation is Styles. This feature lets you change the design of your entire website.

Once you are inside the Styles page, you will see some predefined style options, each with different colors, typography, and layout choices. Note that these predefined options will look different from one block theme to another.

You can also click on the eye icon next to ‘Styles,’ which represents the Style Book.

With this, you’ll be able to see the style options’ typography and what the text blocks will look like using this style, like the headings, paragraphs, lists, and so on.

Similar to the previous section, the pencil button on this page will bring you to the editing interface.

Here, you will mainly use the right-hand panel to change the typography, colors, and layout to your exact needs.

Typically, you will see your homepage in the editor. However, the changes you make here will also be reflected in the other web pages.

Editing Your Website’s Typography

To change your website’s fonts, navigate to the Styles sidebar on the right and select ‘Typography.’

Now, you’ll see several Text elements you can edit: Text, Links, Headings, Captions, and Buttons.

The settings in the Text element determine what the fonts across your entire site will look like. That means if you make changes to this element, they will be reflected in all the blocks that use text on your website.

That said, you can click on the Links, Headings, Captions, or Buttons element to edit the style of these specific blocks so that they look different from the rest of the text.

For instance, if you want your headings to have a different font from the paragraph block to stand out more, then you can configure the settings in the Headings element.

Generally, you can modify each element’s Font, Size, Appearance, and Line Height.

The font choices depend on the theme you are using. Meanwhile, Appearance controls whether you want to use a regular, bolded, or italic version of the font.

Some elements may have specific settings, so be sure to explore them one by one.

For instance, the Headings element has options to customize the letter spacing and letter case.

Customizing Your Website’s Color Palette

Let’s move on to setting the color scheme for your website. To do that, simply click on ‘Colors’ in the Styles panel. You’ll see two sections: Palette and Color.

Choose the colors within ‘Palette.’

In the Palette’s Solid tab, you’ll see the Theme, Default, and Custom sections.

Theme includes colors that can be used to customize the color palette of your entire website.

Meanwhile, the Default colors can modify blocks with color settings. Note that some themes may not include this feature, so you might not see this in your editor.

Lastly, Custom colors are colors that you can add to the theme. You can use this setting if neither the Theme or Default color options are suitable for you.

To add a new Custom color, just click the ‘+ Add color’ button and use the color picker tool.

If you want to change a Theme, Default, or Custom color, simply select a color and use the color picker tool to switch to a different option.

Remember that blocks that use these colors will also be affected.

Let’s switch to the ‘Gradient’ tab. It’s similar to the Solid tab, but the color options are in the form of gradients, which are a mix of two or more colors.

The Theme options include some gradient options using the theme’s solid colors. On the other hand, the Default settings are color gradients that you can use to customize blocks.

Duotone colors are filters you can add to blocks with images. You can only view which duotones are available, but you can’t edit them here.

You can also create custom gradients if needed.

To do that, simply click the ‘+ Add color’ button. Then, you can select the Linear or Radial gradient type and customize the direction of the gradient by changing the Angle.

Additionally, feel free to select more colors into the gradient mix by clicking on a spot in the slider. A color picker will show up for you to choose a color.

Going back to the Colors tab, you can customize the specific color settings of your Text, Background, Link, Captions, Button, and Heading.

Simply click on an element and select a Solid or Gradient color to change the element’s color. You can also select the preview section to access the color picker.

Adjusting Your Website’s Layout

The last option in the Styles tab is Layout. This is where you can modify the space between your web page elements.

At the top of the Layout panel, you will find settings to change your page’s Content and Wide width. The Content width determines the default width for an individual block when their alignment setting is None in the block toolbar.

On the other hand, the Wide width decides the default width for blocks when they are set to Wide width alignment.

Below that is Padding, which controls the outer spaces around your web page content.

Using the available sliders, you can set the top, bottom, left, and right padding. If you want to be more specific with the padding size, then you can click on the slider icon to insert a pixel size, like in the screenshot below.

Toward the bottom, you will see the Block Spacing settings. This option determines the spaces between individual blocks so that they are not too close or far from each other. You can edit this the same way as you edit the Padding.

Remember to click the ‘Save’ button at the top right corner to make your changes official.

How to Customize WordPress Pages With FSE

So far, we’ve covered Navigation and Styles. Let’s now move on to Pages. In this tab, you will see a list of your existing pages. We will talk more about editing them later.

If you want to manage multiple pages at once, then you can click the ‘Manage all pages’ button at the bottom.

This will bring you to the All Pages section in the WordPress dashboard.

You can also create a new page right in the Full Site Editor.

To do that, simply click the ‘+’ Draft a new page button in the left side panel. After that, give your new page a name and hit ‘Create draft.’

From there, you can start customizing the page.

To edit an existing page, select a page that you want to modify. In this case, it’s ‘Page: 404.’

After that, click the pencil ‘Edit’ button.

You will then see the editing interface for that specific page.

Editing pages using the Full Site Editor is essentially the same as using the block editor.

For more information about this, we have several guides for you to read. You can start with these:

• How to Create a Custom Page Using the Full-Site Editor (Block-Based Themes Only)
• How to Create a Landing Page in WordPress Using the Block Editor (No Plugin Required)
• How to Create a Separate Page for Blog Posts in WordPress

How to Edit WordPress Templates With FSE

On the Templates page in the WordPress Full Site Editor, you’ll see a list of the templates provided by your theme.

In WordPress Full Site Editing, Templates are predefined structures that you can use to design a specific type of page on your website.

For instance, many WordPress block themes will come with a Single Post template. This page template defines the layout of a blog post page, which means that every blog post on that website will use that template.

This feature can be helpful if you have multiple pages on your WordPress blog and many of them use the same layout.

If you need to change the same element on those pages but don’t want to edit each one individually, then you can simply modify the template. Then, the changes will apply to all the pages using that template.

To edit a template, you can click on it. After that, you will see details about the specific template, its patterns, and when it was last modified. We will talk more about patterns in the next section.

Now, just click the pencil ‘Edit’ button.

Now, you can edit the page template like you edit other elements using the block editor. You can add new blocks and customize the block or page settings.

If you want to create a custom template, select the ‘+ Add New Template’ button in the left panel.

From here, just select which page the new template should apply to.

Alternatively, you can scroll down to the bottom and choose ‘Custom template.’

At this stage, you will see the editing interface with a blank page that you can start adding blocks to. For a step-by-step example, check out our guide on how to create a custom homepage template using the block editor.

To manage all of the templates at once, you can go back to the Templates page and click the ‘Manage all templates’ button.

On this page, you can view all your template descriptions, add a new template, or clear the customizations you’ve made on the template to restore its default settings.

Here’s what it looks like:

If you are editing a page or post using the block editor and want to change its template without going to Full Site Editing mode, then you can also do that.

Simply go to the page or post and open the Page or Post Settings sidebar. Then, find the ‘Template’ section within ‘Summary’ and click on it.

You can use the dropdown menu to change the page template or click ‘Edit template’ to access the template editor right away. Alternatively, feel free to click the ‘Add template’ button to create a new custom template from scratch.

How to Modify WordPress Patterns With FSE

In WordPress Full Site Editing, Patterns are ready-to-use sets of blocks that you can insert into a page or post. When you create a pattern, it will be added to your block directory, and you can easily add it to any post or page on your website.

Patterns are useful when you need to use the same set of blocks for multiple pages or posts. Many people have used it to design custom call-to-action banners or image galleries in their blog posts.

Plus, you have the option to make these patterns ‘synced.’ This means that if a pattern is used in multiple posts or pages, then any modifications you make will automatically apply to all instances where the pattern is used.

On the Patterns page in WordPress Full Site Editor, you will see a collection of patterns.

The menus marked with a folder icon contain a list of default patterns offered by your chosen theme. These are locked and cannot be edited.

Below that, you’ll find ‘Template Parts,’ which are a special type of pattern used in your website structure and not necessarily a part of your page content. Examples include your website’s header, footer, comment section, and so on. These are all customizable.

To add a new pattern, click the ‘+ Create pattern’ button in the left panel and choose between creating a new pattern or a template part.

If you are confused about which one you should pick, then a pattern is similar to a reusable block you can add to your page or post content. Meanwhile, a template part is more like a set of blocks that are a part of your template structure, like a header, footer, or sidebar.

A template part will automatically have a syncing ability, so all the changes made to it will apply across your website. On the other hand, a pattern can be synced or unsynced.

After that, you must name the template part or pattern and choose whether to make it synced. Once you’ve done that, simply hit ‘Create,’ and you’ll be redirected to the editing interface.

For more information about creating and using patterns, you can check out our beginner’s guide on how to use WordPress block patterns.

When editing a page or template, you may want to adjust a block pattern or template part, too. You can do that right in the editor without going to the Patterns menu.

Simply hover over the pattern or template part. After that, click ‘Edit.’ You will then be redirected to the Full Site Editor for that element.

Tips to Make the Most Out of WordPress Full Site Editing

Now that you are familiar with the basics of Full Site Editing, let’s discuss some tips and tricks to make the most out of it.

Use the Command Search Bar

With the command search bar, you can navigate quickly to a certain part of your website or perform actions to edit your web design.

This feature can be helpful if you want to find a specific setting in the Full Site Editor immediately instead of going through different buttons and menus.

If you are in the main menu of the Full Site Editor, then you can click on the magnifying glass icon to use it.

Alternatively, you can press Ctrl/Command+K on your keyboard while in the editing interface.

Then, simply type in what you want to find or do. For instance, you can add a new post or page without returning to the WordPress dashboard.

Manage Blocks With List View

When you are editing a page, template, or pattern, you may find yourself adding so many blocks that it’s hard to keep track of them all.

This is where the List View can come in handy. With this feature, you can see every block added to the page, template, or pattern, including the ones nested in another parent block.

To activate the List View feature, all you have to do is hit the three-line button at the top left side of the editor’s menu bar. You will then see all the blocks used in that page, post, template, or pattern.

If you want to configure a specific block that’s inside a group, row, column, or similar, just click on that block from the List View. From there, the block will be selected, and the toolbar will appear.

Get Familiar With Keyboard Shortcuts

If you want to get faster at editing your website, consider learning keyboard shortcuts. With shortcuts, you can navigate through different buttons and settings using your keyboard instead of going back and forth by moving your mouse.

The shortcuts used in the block content editor will also work in Full Site Editing. You can check out our list of WordPress keyboard shortcuts for more information.

Limitations of WordPress Full Site Editing

WordPress Full Site Editing has definitely made it easier for new WordPress users to customize their websites. Still, this feature has some shortcomings.

For one, you will need a block theme to use it. There are many new block themes available, but there are not as many as regular WordPress themes. If you use WooCommerce, then your theme choices may be even more limited.

Plus, switching themes can be a hassle, as you will have to set up the theme again and check if there are compatibility issues with your WordPress plugins.

Furthermore, a lot of your customization relies on the options offered by your WordPress theme. This can limit your creativity when building your site.

How to Use a Full Site Editing Alternative

If you are looking for a WordPress Full Site Editing alternative, then you can check out SeedProd. It’s a powerful page builder plugin and theme builder with 300+ mobile-friendly templates to create any kind of website.

The drag-and-drop builder is easy to use, and there are 90+ page blocks available for content elements. There are also dozens of pre-built sections, like calls to action, that are optimized for conversions, so you won’t need to design these elements from scratch.

You can read our SeedProd review and our article on how to create a custom WordPress theme for more information.

We hope this beginner’s guide has helped you learn how to use WordPress Full Site Editing (FSE). You may also want to check out our list of the best WordPress page builder plugins and our article on common WordPress block editor problems.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post A Complete Beginner’s Guide to WordPress Full Site Editing first appeared on WPBeginner.