In this post, we’ll show you why some well-known headers are effective and explain how you can easily create your own custom header with Beaver Themer.

What Custom Headers Are (And Why They’re Important)

Your WordPress website header is at the top of the page. It usually contains the site’s name, logo, and other identifying information. In this screenshot of the Beaver Builder website, there’s a banner in the top bar, then the main part of the header with a logo and navigation menu.

The header displays on every page, so visitors see it multiple times. In fact, the header is often the only element that remains consistent across all of your pages. As a result, your header plays a huge role in your website’s identity and helps to improve brand recognition.

On WordPress sites, your active theme controls nearly everything about your header. You can make a few tweaks in the WordPress Customizer, such as uploading your own header image, adjusting the color scheme, and perhaps controlling the layout a bit. Some themes have specific areas where you can add your logo and another branding.

However, the Customizer almost never gives you complete control over your header’s appearance. If you want to create a truly custom header that helps visitors remember your brand, you need more control over customization.

Examples of Effective Website Headers

Let’s look at some high-quality examples of custom website headers. They exemplify how this key design element plays a huge role in your site’s branding, navigation, and more.

WPBeginner

As a popular resource on all things WordPress, it’s not surprising that WPBeginner has an excellent, professional header. The orange color is a common feature across the website, making it a strong signifier for the site’s brand:

This header also includes a navigation menu so users can easily move between pages no matter where they are on the site. The lower portion is a prominent Call to Action (CTA), which points users in the direction of WP Beginner’s most popular resources.

WP Beginner’s header incorporates its branding, improves User Experience (UX) through clear and accessible navigation, and drives conversions with a highly-visible CTA. This example shows that you can pack a lot into a small space.

WP Engine

This WordPress hosting company provides UX and branding through its header. It displays the WP Engine brand name and logo prominently on the left. Like WPBeginner’s header, it has a simple and unobtrusive navigation menu:

This header offers some other very important features. First, it has a sign-in link so returning users can easily access their accounts.

Then there are the support features. You can open an instant chat window and talk to a customer support representative. You can also access a variety of self-help resources. By being placed on the header, these features are easily accessible from every page.

These features reinforce an image of WP Engine as a reliable hosting provider, so they both improve the UX and strengthen brand identity.

Blondish.net

Headers can be highly effective on smaller sites as well. Blondish.net is the website of WordPress developer, designer, blogger, and podcaster Nile Flores:

With the bright colors, the star logo, and key navigation links, this is a memorable header. The prominent color scheme provides a lot of personality to the site. If you were browsing the web for a developer to hire, this site would definitely get your attention.

A Cup of Jo

Popular lifestyle blog A Cup of Jo features a header that’s perfectly matched to its owner, Joanna Goddard, who comes across as a laid-back, approachable, yet sophisticated professional. Her header’s classic typography and streamlined look reflect great design and imagination, as you can see in this screenshot.

What captures your attention is the small image within the first ‘o’ in the blog’s title. It changes as you move from page to page, reflecting the topic at hand. For example, check out how it features slices of citrus fruit when you navigate to the Food page:

Small details like this dynamic photo can create an instant impression of the site and its creator even with a minimalist design.

Amazon

Even the biggest name brands use headers to reinforce their branding and encourage visitors to convert. Take the Amazon header, for example:

It has the well-known Amazon logo in the top-left corner and multiple navigation menus. There’s a cart icon that counts the number of items you’ve added, and not one but two CTAs – Try Prime and Shop Deals of the Day.

That’s a lot to squeeze into a small space. However, Amazon is known for providing access to a huge range of products, so the header’s design fits the brand’s image.

How to Customize Your WordPress Website Header 

Traditionally, in order to customize a theme, a developer would write custom code. This requires advanced coding skills, especially with the requirement for sites to be responsive.

Nowadays, even if you don’t have coding experience, you can still create highly effective custom headers by using Beaver Themer, our add-on for the Beaver Builder plugin. Beaver Themer gives you the power to create custom headers using the drag-and-drop front-end Beaver Builder editor, which is normally used for layouts in the content area.

Here’s how easy it is. This is the template for a Themer header layout:

You can see in the screenshot how Themer uses the Beaver Builder editor. The header template has two rows, with a top bar, a Heading module, and a Menu module. You can literally make a few clicks and have the same two rows, but what a difference:

Here’s all we did to change the template:

• Changed the top bar background to a dark color and made the text and icons white.
• Added a background image and overlay color gradient to the second row and made it full height.
• Moved the right column’s Menu module underneath the heading.
• Tweaked styles and row padding in the rows and modules.

Besides headers, you can create layouts for footers, archive and single post pages, search pages, 404 pages, and “parts” of pages such as sales banners, and similar layouts for WooCommerce, The Events Calendar, and Easy Digital Downloads, if you have those plugins installed.

Beaver Themer pricing is set at $147 per year. Since it’s an add-on, you’ll also need Beaver Builder to make it work.

Steps to Create Your Custom Header with Beaver Themer

Here is how you create a Themer layout for your custom header. Start by installing and activating a premium version of the Beaver Builder plugin and the Beaver Themer Add-On plugin. Then go to your site’s dashboard and click Beaver Builder > Themer Layouts in the sidebar.

Click Add New at the top of the screen. As shown in this screenshot, create a title for your header layout (it doesn’t display on your web page or in the URL), and set the Type as Themer Layout and Layout as Header:

Click the Add Themer Layout button. Then click Launch Beaver Builder, the blue button in this screenshot.

This opens the Beaver Builder editor with the Header layout template already imported. Modify the template to create your custom header, as shown in the following screenshot. Or you can delete one or both rows in the template and start from scratch.

Remember that you can use the Beaver Builder editor’s Responsive Editing Mode to view how your header will look on medium and small devices and make changes to settings that apply to only one device size. Just use the keyboard shortcut R while you’re in the editor to toggle large, medium, and small screen views.

One thing you’ll notice when you open the template rows and modules is that some of the fields use a field connection instead of static text. In this example, the “Demo Site” text that appears on the screen is dynamically created from the Site Title field connection, as shown in this screenshot.

You can create field connections by clicking the plus sign that appears on the right for eligible fields, then choosing one of the dynamic values in the list. In this case, the Site Title field connection draws its value from the WordPress setting found at Settings > General > Site Title, and the Site URL field connection draws its value from Settings > General > Site Address (URL). You can type in static text in those fields if you prefer, but the advantage of the field connections is that if you ever change your WordPress settings, the new values will automatically display in your header.

In other locations, field connections allow the value to change depending on which page the layout occurs on. For example, if you’re creating a single post layout and the Heading module’s field connection is set to Post Title, the heading changes depending on which post is being displayed. Besides the field connections that come with Beaver Themer, you can connect to WordPress custom fields, Advanced Custom Fields, or Pods custom fields, so your customization options are almost unlimited.

When you’re finished creating your header, save your changes in the editor by clicking Done > Publish.

Click Edit Themer Layout in the WordPress admin bar at the top of the page to return to the settings for your header, as shown in this screenshot.

Specify how you want to display your header. You can make it sticky, meaning that it will remain visible when users scroll down the page. Or you can make it an overlay with a transparent background:

Choose where to display your header by setting the location where it will appear, as shown in this screenshot:

If you choose Entire Site, your header will be visible on all your posts and pages. If you want to be more limited, you can choose specific types of posts or pages and add more than one location rule.

If there are any areas where you’d like your header to not be visible, use an exclusion rule. Select the Add Exclusion Rule button and specify which locations on your site you would like your header not to appear. For these excluded pages, you could use another Themer header layout or your theme’s header will display.

Once you’ve configured all the necessary rules, click the blue Update button. Your custom header is ready to go!

You can also create custom transparent headers with Beaver Themer. Here is a video tutorial that walks you through how to do it. Check it out below…

Conclusion

Effective branding and design are essential to any site. Your header can help establish your site’s identity and capture visitors’ attention.

With Beaver Themer, you can create custom WordPress website headers quickly without any advanced coding skills. You can test it out for free with our Live Demo site. 

Do you have any questions about using custom headers with Beaver Themer? Let us know in the comments section below!

The post How to Customize WordPress Website Header appeared first on Beaver Builder.

Fortunately, you can use a Beaver Themer header template in WordPress to easily adjust your theme header’s appearance. Choose from a selection of customizable header layout templates and use them for any website. 

In this article, we’ll talk about how header templates work and why you might want to modify yours. We’ll also show you how to use templates with Beaver Themer. Let’s get to it!

What Are WordPress Header Layout Templates?

Newer versions of WordPress enable you to modify theme template files using the Block Editor. This is called Full Site Editing; however, this feature is still pretty limited.

If you want better control over your header’s appearance, you might consider using header layout templates instead. These templates come with our Beaver Themer add-on and enable you to switch header styles almost immediately.

Beaver Themer is an add-on plugin for Beaver Builder that lets you modify theme template files and access full site editing using the page builder editor. Moreover, Beaver Themer is fully tested and functional, whereas WordPress’s full site editing is still in beta and not fully stable.

On top of getting access to templates, our tool gives you a great degree of control over how the header functions. You can use Beaver Themer to create sticky headers, configure overlays, and design unique elements for specific pages.

How to Use a Header Template In WordPress (In 3 Easy Steps)

To access header template layouts, you’ll need to use Beaver Themer. This add-on plugin for Beaver Builder lets you customize theme templates, template parts, and more. To give Beaver Themer a try, you can use our Beaver Themer demo site.

Keep in mind you’ll also need to use a theme compatible with Beaver Themer. The Beaver Builder Theme is the best choice if you want to use our page builder to customize multiple aspects of your website. Otherwise, you might want to check out our guide to the best Beaver Builder themes.

Step 1: Add a New Themer Layout and Configure Its Rules

After installing and activating Beaver Themer, you’ll see several new options appear in your WordPress dashboard. These include Themer Layouts and Templates.

To add a new Themer layout, go to Beaver Builder > Themer Layouts and click on Add New:

In the next screen, set a title for the template and select Themer Layout under the Type menu. For the Layout menu, select the Header option:

Click on Add Themer Layout and proceed to the next screen. Here you can configure some of the layout’s behavior.

Enabling the Sticky option means the header will remain visible as visitors scroll down each page. The Overlay setting works similarly, but it adds a level of transparency to the header:

The Location settings let you add location Rules for the header. That means you can choose on which page(s) this header template will appear:

If you want the new header design to appear on all pages, select the Entire Site option. Alternatively, you might use separate header templates for different parts of your website.

Finally, the Rules settings configure specific parameters that must be met for the header to appear. For example, you might display the template for only logged-in users. This setting can come in handy if you want to lead registered users to private parts of your website:

If you want to make your header template appear on all pages for all users, select the Entire Site option under Location, and don’t add any further rules. Finally, when you’re done with these settings, click on the Launch Beaver Builder button at the top of the page to open up the editor.

Step 2: Select a Header Template

Once you launch the Beaver Builder editor, you’ll see the default header layout template automatically populates for your. Here’s what it looks like:

The default header template includes two rows — one with contact information and links to social media and the other with space for your website title and main navigation menu.

To change this template, click on the plus icon in the top-right corner of the screen. Go to the Templates tab and look at the options inside. Beaver Builder includes five header layout templates, one of which you’re using right now.

Select any template, and Beaver Builder will ask if you want to replace the current layout or append it to the existing design. Select the first option:

Every header template has a different design and layout. Here’s another example from the Beaver Builder header template options:

Once you select a template, you can modify any of its modules. That means you can use the template as a starting point to help you quickly create the header you want for your website. Simply swap out the content with your own.

Step 3: Customize Your Header Layout Template

Since we’re using Beaver Builder to edit your header layout, you can easily update or swap out any of the modules you see here. In addition, you can modify any other aspect of the header’s layout and style.

For example, if the header template you’re using has a text heading, you can modify its text, size, color, and font, among other options. To do this, select the module, and its settings menu will open:

Every element in the header layout corresponds to a Beaver Builder module. For instance, if you select the Menu element, Beaver Builder will let you choose from existing menus on your site, change their orientation, use an accordion, add a logo, and more:

Note that if you don’t see any available menus to choose from here, you will first need to create one in the WordPress dashboard by going to Appearance > Menus.

Another useful element found in most Beaver Themer header templates is the collection of social media icons. We include these icons using the Icon Group module since most modern websites use social media for marketing purposes.

The Icon Group module enables you to change the icons for each platform, rearrange them, and remove elements you don’t need:

Before you finish customizing the header layout, remember you can add other Beaver Builder modules and rows to it. This process works the same as editing any page or post using our builder.

For example, you can add a Search module to the header if you’re using a template that doesn’t include one by default:

When you’re happy with the header’s design, click on Done and then Publish. That’s it!

If you set up the header to appear for the entire website, you should see the change right away. Otherwise, you’ll need to navigate to the page in question to see your new header.

Conclusion

With Beaver Themer, you can choose from a selection of header layout templates and use them for any website. Every template is fully customizable, and the process is very straightforward especially if you’re already familiar with Beaver Builder.

If you want to use and edit header layout templates on your WordPress site, you’ll need our Beaver Themer add-on. Once you activate the add-on, just follow these three easy steps:

1. Add a new Themer layout and configure its rules.
2. Select a header template or create one from scratch.
3. Customize your header layout template.

Related Questions

Do I Need Beaver Themer to Use Header Layout Templates?

Beaver Builder includes a broad collection of page templates you can use throughout your website. However, you’ll need Beaver Themer to edit theme templates for headers, footers, and other elements.

Does Beaver Themer Work Like Full Site Editing?

Both Beaver Themer and Full Site Editing enable you to edit theme templates. With Full Site Editing, you can edit and customize these elements using WordPress blocks. On the other hand, Beaver Themer lets you edit theme templates and parts with Beaver Builder modules. Additionally, Beaver Themer offers a collection of templates you can use to kickstart designs.

How Do You Add a Header and Footer to a WordPress Theme?

With Beaver Themer, you can choose from various header and footer templates. Our theme-building tool comes with attractive and user-friendly headers and footers, which you can edit to match your website’s design. Then, you don’t have to worry about manually editing your theme files and potentially breaking them.

The post How to Use a Header Template in WordPress appeared first on Beaver Builder.

In this post, we’ll discuss the advantages of using author page archives on your site. Then, we’ll show you how to create a WordPress author page with Beaver Themer. Let’s get to work!

An Introduction to WordPress Author Pages (And Why You Might Want to Use Them)

An author archive page is what you see when you click on the writer’s name in an article and a list of their posts is displayed:

There are several benefits to displaying an author page on your website. For instance:

• It can boost SEO rankings. An author archive page highlights key pieces of information. This helps search engines skim your content for keywords to find relevant data, which may in turn boost your site’s ranking in search results.
• It can increase a site’s credibility. Displaying multiple works by an author can make that user appear more knowledgeable and trustworthy. Readers may be more likely to see your page as a reliable source if it has numerous articles per author.
• Contributors can more easily find their past work. An author archive page streamlines the navigation process by listing all relevant articles, which helps both authors and readers find what they’re looking for.

By default, WordPress creates an archive page for your posts. However, it offers limited support in terms of personalization. With Beaver Themer, you can create a custom archive layout:

Using our tool, you can add personalized details to this page and make it more engaging. This can help reduce your bounce rate and encourage visitors to check out other articles on your blog.

How to Create a WordPress Author Page with Beaver Themer (In 5 Steps)

Now that you know what an author archive page is and how it can benefit your WordPress site, let’s look at how to customize this page.

For this tutorial, you’ll need to have Beaver Builder and Beaver Themer installed on your WordPress website. Once you have these two tools, you’re ready to get started!

Step 1: Create an Author’s User Profile

First, you’ll need an author profile that has a bio and an image. Navigate to your WordPress dashboard and click on Users:

From here, you can either select an existing user or create a new one:

We’ll be creating a test user for this tutorial. When you click on Add New, you’ll be asked to provide some information about the user:

For example, you’ll need to add a username and email. You’ll also need to select a role for the user. Using the dropdown menu, set the role to Author:

Then, click on Add New User. Your new profile will be added to the Users page:

Now, hover over the username and click on Edit:

On the next page, you can select a display name and write a bio:

You will also want to upload a profile picture through Gravatar. When you’re ready, click on Update User. This will save your changes to the user profile.

Step 2: Associate One or More Posts With the User

Now it’s time to create a test post for your user. If you already have posts associated with an author, you don’t need to complete this step.

Your test post will help you see what an author archive will look like. Start by navigating to Posts and click on Add New. Add a title and some text to the post.

Then, go to settings and click on the dropdown menu under Author:

Choose the test profile you created, then hit Publish:

This will provide a test post for your author archive page.

Step 3: Create a Themer Layout for Author Archives

Now that you’ve created a user and a new post, it’s time to create a Themer layout. Go to your WordPress dashboard and navigate to Beaver Builder > Themer Layouts:

Click on Add New. In the Title field, type in Author Archive. Then, in the Layout field, select the Archive option:

Click on Add Themer Layout. This will take you to a page where you can make modifications to your Themer layout.

Next to the Location field, click on the dropdown menu and select Author Archives:

Next, click on Launch Beaver Builder:

In the editor, set the Preview As to Author Archives:

This setting will automatically default to the user that is currently logged in and will only display posts by them.

Step 4: Customize Your Layout

Beaver Themer makes it easy to customize your layout. You have endless design options so that you can make the design perfectly fit your brand. Here’s an example to get started. Let’s start with the heading.

Hover over the row that contains the heading. Then, select the second icon in the toolbar to open the row settings:

In the Style tab, change the text color to white:

Then, navigate to the Background section and change Type to Photo:

In the Background Photo section, click on the plus sign next to Photo field and select Author Picture:

In the Author Picture box, you can customize the size of your image:

Under Default Image, select a photo. This can be a headshot of your author.

Next, you can customize the overlay of your image in the Background section:

Once you’re done, click on Save.

Now, let’s edit the name of the author. Select the Heading module to open its settings. Then, navigate to the Heading field and click on the plus sign:

Select Author Name. Then, choose how you want to display the name. This can be the first name, display name, or the nickname you entered in the user profile:

Once you’re done, click on Save.  

You can also display an author bio in this section. To do this, add a Text Editor module to the row:

Write your short bio in the WYSIWYG editor found under the General tab:

Alternatively, you can easily add the Author Bio that you entered into your user profile. To do this, click on the plus symbol, locate Author Bio, and click on Connect:

Next, click Save:

You can also change the way your posts are displayed. Click on the Posts module to open the settings:

In the Layout dropdown menu, choose your preferred layout. For example, the Masonry option will display your articles in coumns without a fixed height for rows:

When you’re happy with your changes, click on Publish:

You now have a customized author archive page!

Have fun experimenting with the different settings available. For example, you may prefer to use a plain background for the header. Or, you may wish to display the posts by that author in a neat list rather than blocks.

Step 5: Save Your Changes and Review the Author Page

Once you’ve completed your author page, you can review it to see if everything looks good. To do so, navigate to a post written by the author and click on their name:

This will take you to the author archive page that you created:

Now, the new author page will enable readers to find content written by a particular user and offers a better user experience.

Conclusion

If you have many contributors to your blog, you’ll need an easy way to browse posts by different authors. With an author archive page, users can find all articles by a particular contributor in one place.

To recap, here’s how to create an author page with Beaver Themer:

1. Create an author’s user profile or use an existing one.
2. Associate at least one post with the user so that they can render on your page.
3. Create an archive Themer layout for your author archive page.
4. Customize your template by adding a bio and author image and editing the layout of the posts.
5. Save your changes and review the author page.

Related Questions

What does Beaver Themer do?

Beaver Themer is an add-on plugin that enables you to build custom dynamic layouts for your website, including headers, footers and WooCommerce pages. It uses Beaver Builder’s intuitive drag-and-drop editor and comes with a library of professionally designed templates.

Do I need the Beaver Builder page builder to Use Beaver Themer?

You need to have the Beaver Builder plugin installed and activated on your website to use Beaver Themer. With these two tools, you’ll be able to create layouts for archives, posts, WooCommerce products, 404 pages, and more.

The post How to Create a WordPress Author Page with Beaver Themer (In 5 Steps) appeared first on Beaver Builder.

In this post, we’ll introduce you to sticky headers. Then, we’ll show you how to create one using Beaver Themer in four simple steps. Let’s get to it!

What Is a Sticky Header?

Before we dive into what a sticky header looks like, let’s first look at a traditional, non-sticky one:

In the above example, the website’s header features a neat navigation menu with links to other pages. From left to right, they are: Home, News, Schedule, About, and Contact Us.

It’s a straightforward and effective header, even featuring an eye-catching logo on the far left. However, the header disappears entirely when you scroll down the screen.

That means users will have to scroll all the way back up the page to access the menu again. This layout can create a negative UX, especially if your site features lots of content.

Enter: sticky headers. A ‘sticky’ header, also known as a persistent or fixed header, doesn’t move when a user scrolls down (or up) on a web page. As the name suggests, it ‘sticks’ to its permanent location on the screen, usually at the top:

You’ll usually find that sticky headers are highly popular among e-commerce stores in particular. That’s because online stores often promote multiple popular categories or products on their main pages.

For an e-commerce site, scrolling can simulate walking around and browsing in a physical store. To continue the metaphor, a sticky header allows you to instantly return to a particular location (or find a new one) without retracing your steps.

Sticky headers can benefit pretty much any type of larger website, from non-profits to educational institutions. Smaller businesses may even want to implement sticky headers on their mobile sites. Overall, a sticky header can significantly enhance the UX of your site.

How to Create a Sticky Header with Beaver Themer (In 4 Easy Steps)

Now that you know a bit more about sticky headers and their advantages, let’s explore how to make one. For this tutorial, we’re going to create a sticky header using our Beaver Builder plugin and Beaver Themer add-on. Keep in mind that you’ll need one of our premium page builder plans to use this feature.

Step 1: Set Up Your Header Elements

Before we configure our sticky header in Beaver Themer, we’ll start by creating a menu.

To add a menu, simply navigate to your WordPress dashboard and go to Appearance > Menus:

Give your menu a name and choose where you want it to be located. In this case, we’ll go with Primary Menu, so it appears in our header. Next, click on Create Menu:

Now you’ll need to add menu items. Select the pages you want to include in your menu from your Pages panel on the left. We’re going to add all four pages from our Most Recent list:

After you’ve made your selections, click on Add to Menu. Once you’ve added your pages, you should now see them on the right-hand side:

At this point, you can go ahead and drag and drop the pages (or use the arrows) to organize them in the order that you want them to appear. Then hit Save Menu in the bottom right corner.

Remember that you can always customize this menu in Beaver Builder before making it sticky. For instance, you could implement custom CSS to transform your menu items into buttons. After you’ve finished with any customizations, you can move on to the next step!

Step 2: Create a ‘Header’ Themer Layout

Until now, we’ve only worked in the standard WordPress dashboard, but you’ll need Beaver Themer from here on out. If you’re unfamiliar with the tool, don’t worry! It’s highly accessible and beginner friendly. Plus, we’re going to walk you through the entire process.

Still, if you’d like to get some practice in before using it, you can always check out our free Theme Builder Course. Otherwise, head to Beaver Builder > Themer Layouts > Add New:

On this screen, you’ll need to give your new Themer layout a name. Then, make sure Themer Layout is selected under Type and Header is selected for Layout:

After that, click on Add Themer Layout.

It’s important to note that if you see Unsupported next to any of the options in the Layout dropdown, this is likely because your theme is not compatible with Beaver Themer or Beaver Builder.

To avoid this issue, we recommend using a compatible WordPress theme such as our very own Beaver Builder Theme, which is designed specifically to work with all our Beaver Builder tools.

Step 3: Make Your Header Layout Sticky

Once you’ve created your new header Themer layout, you’ll automatically be led to a screen where you can edit its settings:

This is where you can make your layout sticky. Simply locate the Themer Layout Settings panel. Then, next to Sticky, select Yes in the dropdown menu:

You’ll also need to choose key configurations like the Sticky Breakpoint and Location of your layout. For this example, we’re going to implement our sticky header for All screen sizes and make it appear on our Entire Site:

You can even create more advanced rules (or rule groups) that dictate how your sticky header behaves. When you’re done making your selections here, click on Publish.

Then, you can preview your site on the front end to see your results:

As you can see in our example, the header is now sticky! Remember, if you’re not totally happy with the results, you can always go back and edit your Themer layout further. Otherwise, it’s time to customize your sticky header’s settings.

Step 4: Customize Your Header Layout Settings

As we mentioned, Beaver Themer not only enables you to make your header sticky, but it also lets you use advanced sticky header features. For instance, you can make your sticky header shrink.

To do this, simply return to your Themer layout settings screen and select Yes in the dropdown menu next to Shrink. In this scenario, here’s what your sticky header would look like:

As you can see, our blue sticky header shrinks and expands depending on scroll behavior. This feature can instantly elevate your site by making it look more professional. Plus, this shrinking header will allow users to see more of the screen at once.

Alternatively, you could return to your Themer layout settings and apply an overlay effect. This will give the header a transparent background. Just remember to click on Update in the upper right-hand corner to save your changes.

Conclusion

Sticky headers can be a great way to improve your site’s UX because they make your header navigation available to users no matter what part of the page they are browsing.

To recap, here’s how you can create a sticky header with Beaver Themer in four steps:

1. Set up your header elements.
2. Create a ‘header’ Themer layout.
3. Make your header layout sticky.
4. Customize your header layout settings.

Related Questions

How do you make the sticky headers using Beaver Builder theme?

If you want to enable a sticky header in the Beaver Builder Theme, go to Customize > Header > Header layout. It gives you advanced control over both your header and footer.

What Other Design Elements Can Help Improve My Site’s Navigation?

If your site features many pages, you might consider transforming your sticky header menu into a mega menu. You can set one up using the Beaver Builder Mega Menu add-on. Furthermore, adding anchor links to your content can help visitors navigate your pages quickly and easily.

The post How to Create a Sticky Header with Beaver Themer (In 4 Easy Steps) appeared first on Beaver Builder.

In this article, we’ll discuss how to integrate Beaver Builder tools with WooCommerce. Plus, we’ll introduce some of the most useful Beaver Builder WooCommerce modules and how you can use them on your website. Let’s get started!

How Beaver Builder Can Help You Design a Better eCommerce Site

One challenge of building eCommerce websites is that they tend to be expansive. Even a small online store needs shop sections, individual product pages, a checkout screen, contact forms, and more. All of those elements can take a lot of time to put together, especially if you’re not using the right tools.

WooCommerce is at the core of most WordPress eCommerce sites. This plugin enables you to transform any WordPress website into a full-fledged online store. However, WooCommerce is all about adding functionality, which leaves the design aspect up to you.

By adding Beaver Builder to your toolset, you get access to a page builder that integrates with WooCommerce right out of the box. Our plugin enables you to customize your site’s design in any way you like, so your store looks and functions exactly as you want.

Plus, if you have both the Beaver Themer add-on and WooCommerce installed, you get access to advanced WooCommerce modules that you can use to customize your store’s layout:

Along with modules, Beaver Builder also enables you to use templates. These are pre-built designs that you can use for all kinds of WooCommerce pages. You’ll find options for landing pages, special offer sections, Pricing Tables, Frequently Asked Questions (FAQs), and many more:

Although the shop and product pages are at the core of any online store, you’ll also need other types of content. Most successful eCommerce stores also have About Us pages, blog posts, and so on. With Beaver Builder, you can get all of these pages up and running quickly, and easily customize them to fit your store’s style.

An Introduction to Beaver Builder WooCommerce Modules

Beaver Builder modules are similar to WordPress blocks in functionality. You get to choose and place elements such as buttons, lists, headings, galleries, and more on any part of your site you want. The advantage of Beaver Builder is that you get access to more modules with greatly expanded customization options:

What’s more, if you add the Beaver Themer add-on to your site, you get access to an expanded toolset to help you build a better website. You’ll get fine-grained control over just about every aspect of your site’s functionality and appearance. For instance, you’ll be able to create layouts that you can apply to multiple posts, pages, and/or custom post types across your site, making it quick and easy to create a cohesive design.

Most importantly for our purposes here, if you use Beaver Themer alongside WooCommerce you can use a set of dedicated eCommerce modules. These work just like any other Beaver Builder module, but you can use them to customize layouts instead of individual pages.

That way, you can build designs and use them throughout your entire store. For instance, you could create a dedicated layout for product pages, and use it to feature each item in your shop to best effect. With the various modules on offer, you’ll be able to customize that layout to look and work precisely as you desire.

How to Use Beaver Builder WooCommerce Modules (5 Top Options)

At this point, you may be wondering just what you can do with our WooCommerce modules. In this section, we’ll show you how several of the most useful and versatile options work.

You might also like to watch this video tutorial that explains how to customize your WooCommerce single product page using Beaver Builder WooCommerce Modules and Beaver Themer:

1. Add to Cart Button

First up, let’s talk about “Add to Cart” buttons. These elements are crucial for making it easy to purchase the products you’re offering. Each one is a key Call To Action (CTA), encouraging visitors to buy what they’re looking at.

For that reason, it’s a good idea to include plenty of “Add to Cart” buttons in your WooCommerce store. While the default locations are a start, you may want to ensure that these buttons are more frequently placed and more prominently featured.

To do that, you can make use of a dedicated module. You’ll first need to create or open a Themer layout for editing. From your WordPress dashboard, go to Beaver Builder > Themer Layouts. Click Add New. 

In order to access all of the WooCommerce modules we’ll discuss, your layout type should be set to “Singular”:

Next, you should have a single product page assigned as the location:

Then, click the Launch Beaver Builder button to open up the editor. In the upper right hand corner, select the Modules menu from the content panel. Choose the Themer Modules option under Group. In the WooCommerce section, you’ll find the Add to Cart Button module:

To use this module, drag and drop it anywhere on the layout you’re editing. This process works just the same as when you’re using the Beaver Builder page builder to create a regular page or post. It’s a good idea to place this element on a prominent part of the layout, make sure it’s ‘above the fold’ (visible without scrolling), and leave plenty of white space around it.

Once you add the module, you can click on it to edit its style. The Add to Cart Button module enables you to change the colors of all its elements, including the text and background:

This is vital, because the colors you choose for your “Add to Cart” buttons can have a significant impact on how many conversions they generate.

In addition, you can conduct A/B tests to try out multiple color combinations and determine which is the most effective. You may also want to test various placements for your “Add to Cart” buttons.

2. Product Description

No product page is complete without a description of the item you’re trying to sell. When you add products to your WooCommerce site, you’ll want to make sure to include a thorough description of each item. That text should be clear and easy to follow, highlight the key benefits of the product, and include relevant keywords for Search Engine Optimization (SEO) purposes.

To choose where this text will appear, you can use the Product Description module:

Note that once you place it, you won’t be able to edit the text directly. Instead, you can choose between including an excerpt of the description, or its full text.

Since you’re building a product page, you’ll want to make sure the entire description is displayed. Still, even when you’re not using excerpts, it’s a good idea to make sure that your product descriptions are front-loaded. The first few sentences should include the product’s key details, and hint at why it will improve the customer’s life in some way. That way, you can grab visitors’ attention and encourage them to read on.

If you like, you can also edit the Product Description module’s visibility settings, and add animations to it. As with any module, you can even use the Advanced settings to add custom CSS IDs and classes.

3. Product Images

The text you use to describe your products and their benefits plays a significant role in how well they’ll be received. Just as important, but more easily overlooked, are product images.

If you’re running an online store, customers won’t be able to touch and examine the items you’re offering. So you’ll want to offer them as much visual information as you can. If you can demonstrate what your products look like, visitors should feel more confident in taking a chance on them.

For that reason, a single product image is rarely sufficient. Instead, it’s a good idea to feature as many photos as you can of each item. You’ll want to include high-quality images that show the product from multiple angles, and maybe even demonstrate what it looks like in use.

To display all of those images in a compact and easy-to-understand way, you can use the Product Images module. This element enables you to choose between multiple types of galleries for displaying all of the images associated with a particular product.

When you place the module, you can choose the thumbnail size for your images:

On the front end, this module will include a zoom icon, which visitors can use to see images at full size. That icon will appear to the right of the product images gallery.

So even if you choose a smaller thumbnail size, make sure to upload high-quality, high-resolution product images. That way, they don’t have to take up too much room on the page by default, but interested customers can see what your items look like in plenty of detail.

4. Product Price

Customers usually aren’t eager to buy products when they don’t know their price. Some stores choose to give out prices on contact only, but for most eCommerce ventures, you’ll want to include specific numbers on your product pages.

If you offer your items at competitive rates or run a lot of sales, you may also want to ensure that your prices are prominently featured. To customize where this information appears on your product pages, you can use the Product Price module.

Once you place it, this module will automatically display the price (or price range) that you’ve set for each item:

You can also modify this element’s alignment, font size, and color. As a general rule, you’ll want the price of a product to pop visually, so users can spot it without too much effort.

As for placement, it’s usually best to display the price near the “Add to Cart” or “Buy Now” button. This makes it seamless for customers to view the product, see its pricing, and then immediately add it to their carts. However, this is another key element where you may want to experiment with placing and color via a few A/B tests.

5. Related Products

Last but not least, a product page doesn’t have to be devoted to a single item. Along with the primary product, you can also display related items.

This is a great way for any store to increase its sales. Related products sections show customers other potential products they might like, without requiring them to navigate through pages of options. This technique is referred to as ‘cross-selling’, and it increases the odds that visitors will place larger orders.

Fortunately, you can get the job done easily with the Related Products module:

This module automatically determines what to show by searching your WooCommerce store for items with the same tags and/or categories as the page’s primary product. If there’s nothing relevant to display, the module simply won’t appear on the front end.

It’s best to place this element below all of the modules containing information about the page’s primary product. You don’t want it to draw attention away from the main CTA. Alternatively, if you want to feature related items more heavily, you can position them in a sidebar.

After placing the Related Products module, you can decide whether to display “Add to Cart” buttons for each featured item. In most cases, users will likely prefer to visit individual product pages before adding more items to their carts. So these buttons aren’t necessary, although you might want to experiment with enabling them to see if that increases conversions.

Conclusion

eCommerce websites can be among the most time-intensive projects to build. One online store might include a number of landing pages, along with hundreds (or even thousands) of product pages. Using tools such as Beaver Builder and WooCommerce can make designing this ambitious type of website much simpler.

The modules we’ve discussed above will help you create functional and conversion-generating product pages. Just keep in mind that there are many more WooCommerce modules available depending upon your needs. They’ll enable you to add product ratings, upsells, and more to your layouts!

Get started using Beaver Builder WooCommerce modules in our online course: Build E-Commerce Sites with Beaver Themer + WooCommerce

Related Questions

Why aren’t WooCommerce modules appearing in Beaver Builder?

The Beaver Builder plugin includes a WooCommerce module that allows you to add eCommerce features to your posts and pages. The rest of the WooCommerce modules require the Beaver Themer add-on. To see the full range of options, you will need WooCommerce, Beaver Builder, and Beaver Themer installed on your site.

How do I edit WooCommerce page layouts using Beaver Themer?

As noted above, head to Beaver Builder > Themer Layouts in your WordPress dashboard. Selecting Add New will enable you to create a new layout, which you can then edit and customize. To access the full range of WooCommerce modules, select “Singular” layout and assign a single product page as the location.

The post How to Use Beaver Builder WooCommerce Modules (5 Top Options) appeared first on Beaver Builder.

That’s where Beaver Themer can be your secret weapon. This add-on can give you complete control over these website cornerstones and help ensure that you get the very best out of every web page. In this post, we’ll show you how to build a better site using Beaver Themer. Let’s get started! 

An Introduction to Beaver Themer (And How It Can Help You Build a Better Site)

Our Beaver Builder plugin is ideal for designing the content area of single pages and posts . It’s particularly well-suited for creating stand-alone web pages that really capture the visitor’s attention, such as landing pages. You can create layout templates that create consistency in your content design and to keep your branding consistent and avoid confusion.

By using our Beaver Themer add-on, you can create a layout that is applied outside the content area, which is normally controlled by your theme. Examples where a Themer layout works like a template are posts, product pages, custom post types, and archive pages. This makes it easy to achieve that all-important design consistency and build a better site, while still having some degree of flexibility. 

Beaver Themer isn’t restricted to full-page designs. This powerful add-on extends Beaver Builder’s functionality to headers, website footers, announcement bars such as a Call To Action (CTA), and other partial layouts. In this way, you can customize every part of your website outside the content area using Beaver Builder’s familiar drag-and-drop editor:

This includes elements that would usually be defined by your underlying WordPress theme. Without Beaver Themer, you would need to access your theme’s PHP files in order to edit these areas. This requires specialist knowledge, and can be a time-consuming and frustrating process. 

After creating these partial layouts, you can apply them across your site. However, we understand that sometimes you may want to bend the rules and change an element that’s consistent across the majority of your website. For example, you might use a different header on your landing page, or create a unique CTA for the footer. With Beaver Themer, you have the flexibility to restrict partial layouts to specific pages only.

Just be aware that not all themes support Beaver Themer’s partial layouts. Currently, Beaver Themer pairs particularly well with the Beaver Builder Theme. It’s also supported by several third-party themes.

4 Ways You Can Build a Better Site Using Beaver Themer 

Beaver Themer allows you to use the Beaver Builder page builder to create layouts that you can apply anywhere on the page except the content area, so let’s see it in action! In this section, we’ll show you how to improve four crucial areas of your WordPress website using Beaver Themer. 

Before we begin, you will need to be sure that you have both the Beaver Themer and Beaver Builder page builder plugins installed and activated on your WordPress site. 

Additionally, bear in mind that we’ll be creating each new design as a Themer Layout. This means that each time you want to create a new layout, simply navigate to Beaver Builder > Themer Layouts > Add New in the WordPress dashboard. Now you’re ready to create any of the layouts listed below.

1. Create an Attention-Grabbing Header

The header is the first thing people see when they visit your site. An effective header will introduce your website and convince visitors that they’re in the right place. It’s also the perfect opportunity to establish your site’s branding. 

While powerful in many ways, out-of-the-box WordPress only gives you limited control over your header. Fortunately, Beaver Themer lets you create a completely bespoke header for your WordPress website. You can tailor it just as you would a refined suit.

After clicking on Add New, give your layout a descriptive name. Then open the Layout drop-down menu, and choose Header:

Select Add Themer Layout. On the subsequent page, open the Location drop-down menu, and specify whether you want to use this layout across your entire site or restrict it to a single page only:

If you want a consistent, site-wide design, then opt for Entire Site. Alternatively, you can link this header to a specific type of page, such as Author Archives.

After making your selection, click on Launch Beaver Builder. Also, note that the Beaver Themer templates come with some common field connections built-in. This includes the Site title field connection, which Beaver Builder will replace with your site’s title on the front end:

When designing your header, bear in mind that this is the visitor’s first taste of your website. For this reason, it’s often wise to keep the design simple. This can help avoid overwhelming the visitor with too much information.

You might also want to encourage people to actively engage with your header. Beaver Themer enables you to add a wide variety of interactive elements to it, including social icons, buttons, and search fields:

As in the example above, the Contact Us and Search buttons are excellent options. An interactive header can invite visitors to enter your site in a very engaging way. This can also be a great strategy to capture their attention and ensure that they’re not tempted to navigate away from your website.

2. Design a High-Converting Footer

With its position at the very bottom of your page, the footer is easy to overlook. However, it’s the place visitors most frequently refer to for information. If your footer isn’t up to par, you’re almost certainly missing out on conversions.

The good news is that Beaver Themer’s default Footer template already contains placeholders where you can quickly add crucial information about your site. This includes your contact details, an About Us section, and dummy links that you can update with just a few clicks.

After giving your Themer Layout a descriptive name, open the Layout drop-down menu. You can now choose Footer:

Next, click on Add Themer Layout. Now you can specify whether you want to use this template across your entire site, and then click on Launch Beaver Builder:

To edit any of the default blocks, simply click on them. This launches a popup containing all of the settings that you need to edit this placeholder information:

The Additional Resources area already contains a few placeholder links. In this case, they are FAQ, Privacy Policy, and Terms and Conditions. You can either embed your own links in the pre-existing dummy text or replace these URLs entirely. 

Alternatively, you may want to consider replacing the single Text Editor module with multiple columns. This can be a great way to display lots of links in an organized way. As in the below example, we have now have link-filled columns for About, Services, and Support:

Typically, visitors will scroll to your footer in order to access practical information, such as your contact details. This suggests that they’re ready to convert, so it also makes sense to include a CTA here. If you’re deploying the same footer across multiple pages, your CTA should represent a particularly high-value action:

For example, you might want to encourage the visitor to subscribe to your newsletter or request a callback. Many websites use their footer CTAs as lead generation tools. 

3. Turn Your 404 Page into a Conversion Opportunity 

Whenever the server can’t locate the requested web page, it’ll display a 404 error instead. Out-of-the-box, most WordPress themes provide a default 404 page:

However, if you rely on this stock design then you may be missing out on valuable opportunities. By creating a more useful and informative 404 page, you can even turn this negative situation into something positive. 

To help you get started, Beaver Builder provides a 404 template. To use this design, follow our instructions to create a new Themer Layout. You can then give this design a descriptive name, and open the Layout drop-down menu. 

When prompted, select 404, and then click on Add Themer Layout > Launch Beaver Builder. The editor will now load with Beaver Builder’s 404 layout type already applied:

To build a better site, we recommend focusing on reinforcing your branding. This may mean featuring the headers and footers you created in the previous steps in as many locations as possible. You can also display your site’s logo prominently, using our Photo module:

If you want to take your 404 design to the next level, Beaver Themer has no shortage of interactive and engaging blocks. This includes the Video module and the Audio module, which enable you to create a multimedia 404 page:

You can also improve the stock 404 design by adding functionality that helps the visitor locate the content they were originally looking for. For example, meany 404 pages include search bars:

Alternatively, you might add a Menu module to your 404 page. This enables visitors to browse through all of the available content, and jump directly to any page that catches their eye.

4. Redesign Your Archive Page

An archive is a list of your previously-published content. WordPress automatically generates an archive for all posts that fall under a specific post type, category, or tag. If you installed a theme or plugin that supports custom post types, then WordPress will also create an archive for these custom types.

A well-designed archive can help visitors easily navigate through months or even years of content. With this in mind, you may want to optimize this important page using Beaver Themer.   

As always, give your new Themer Layout a descriptive name. You can then open the Layout drop-down menu, and choose our Archive template. Next, click on Add Themer Layout > Launch Beaver Builder:

This layout template comes with the Archive Title module, which simply displays the title, such as Posts for a standard Posts archive, or Category for a category archive. 

There are several archive-specific modules that can help you build a better website. To view these modules, click on the + icon in the upper-right corner. Then, open the Group drop-down menu and select Themer Modules:

Archive Descriptions will pull content from the Description field of a post category. There are also several layouts that you can use. As the name suggests, List displays your posts vertically in a single column. 

Alternatively, you can divide your content into multiple columns by selecting the Columns module. This can be useful for displaying lots of content in a smaller space:

Meanwhile, the Masonry module displays your posts in columns. You can choose the width of each post in pixels, which makes this a highly-customizable layout:

If you opt for Gallery, then the post title and metadata are overlaid on the featured image. This is a good choice if your posts feature particularly eye-catching visuals.

Conclusion 

Most websites have various elements and pages in common. Although WordPress does provide most of this content out of the box, if you don’t optimize these default designs then you’re likely to miss out on conversions. 

Let’s quickly recap four ways that you can build a better site using Beaver Themer:

1. Create an attention-grabbing header.
2. Design a high-converting footer.
3. Turn your 404 page into a conversion opportunity.
4. Redesign your archive page.

Do you have any questions about how to build a better site using Beaver Themer? Let us know in the comments section below!

Image credits: Arminas Raudys, Alexander Dummer, Suzy Hazelwood.

The post 4 Ways You Can Build a Better Site Using Beaver Themer appeared first on Beaver Builder.

In this post, we’ll take a closer look at announcement bars and how they could be beneficial to your website. Then, we’ll show you how to add this feature to your WordPress site in three simple steps. Let’s get started!

What an Announcement Bar Is (And Why You Might Want to Create One)

An announcement bar is a horizontal bar at the top of a website’s homepage (although it may also be visible on other pages). It usually appears as a full-width banner above the header.

If you wish to highlight a message on your website, you might want to consider using an announcement bar. This can be an effective way to advertise a certain area of your business or website. In fact, these bars typically serve as ads. You can use them to advertise a sale, promotion, new product launch, or any other special offer.

For example, the following announcement bar features Assistant Pro, a tool that enables you to save creative content to the cloud:

When someone visits our website, this promotion is the first thing they see. By creating an announcement bar, we’ve made it easy for visitors to quickly navigate to the Assistant Pro website. 

The Benefits of Using Announcement Bars on Your Website

Announcement bars are effective because they are easily noticeable and direct users to the right place. Without them, visitors would have to find the specific page that features your sale or offer. This requires extra work that users might not want to do.

With this feature, you can keep your audience updated. Since they are placed at the top of the page, announcement bars have high visibility. Once they see your announcement bar, visitors can quickly learn about your special offers. 

Many website owners use pop-up windows instead, but these can be more intrusive than announcement bars. Pop-ups tend to cover the entire screen, interrupting what the visitor was doing.

However, an announcement bar doesn’t block any of your content. Visitors can continue to navigate your website while keeping that announcement at the front of their minds. You can even set an announcement bar to ‘stick’ to the top of the page, so users will still see it as they scroll through your content.

For their announcement bar, Udemy chose to feature a time-sensitive offer. This encourages users to take advantage of the promotion while it lasts:

Promoting time-sensitive offers, such as discounts and free shipping, can help create a sense of urgency. This can encourage users to take immediate action and check out your offer (or make a purchase). Therefore, adding announcement bars could generate more click-throughs to a specific page on your website.

Moreover, you can customize your announcement bar to have an aesthetically-pleasing design. This can make your website more professional, unique, and eye-catching. With a plugin like our own Beaver Builder page builder, you can personalize an announcement bar to reinforce your brand identity and attract attention. 

How to Add an Announcement Bar in WordPress (In 3 Steps)

Now that you’re aware of how announcement bars could benefit your website, it’s time to explore how to add this feature to WordPress. For this tutorial, we’ll be using our Beaver Builder plugin and the Beaver Themer add-on.

Beaver Builder is a page-building tool you can use to create and customize content in WordPress. Meanwhile, Beaver Themer is a powerful add-on that enables you to create and edit theme templates. With these tools, you can have full control over different elements of your site, including announcement bars.

Let’s look at how you can create an announcement bar in WordPress. To make things easier, we’ve also included a step-by-step video tutorial:

Before you proceed, you’ll need to have both the Beaver Builder and Beaver Themer add-on plugins installed and activated on your website. Note that you’ll need a premium version of Beaver Builder in order to access the add-on.

Step 1: Create a New Themer Layout

Once you’ve added both plugins to your site, you can start working on your first announcement bar. Navigate to Beaver Builder > Themer Layouts > Add New. Here, you’ll create a new Themer layout:

First, you’ll need to give your layout a name. For this example, you could use “Announcement Bar”.

Under the Type section, choose Themer Layout. In the Layout drop-down menu, select Part:

Then, save your changes by clicking on Add Themer Layout. You can now move on to the next step. 

Step 2: Configure the Layout Settings

When you save your new layout, the Edit Themer Layout page will open automatically. This is where you can configure your settings, including the location and visibility rules for your content. For instance, you can choose where the announcement bar will appear on the page, and who will be able to see it.

You can customize the location and visibility rules to fit your needs. We’ll focus on the settings that are most relevant for an announcement bar. 

To change the layout’s location, navigate to Position. For the announcement bar to be effective, it should reside at the top of the page. This will maximize its visibility. From the drop-down menu, choose Before Header:

Moreover, you’ll want the announcement bar to reach every user who visits your website. To do this, navigate to Location and choose Entire Site from the drop-down list. 

When you’re ready, click on Publish to save your changes. You can now start customizing your announcement bar. 

Step 3: Edit Your Announcement Bar’s Appearance

Once you’ve configured the layout settings, it’s time to edit the appearance of your announcement bar. To begin, click on the Launch Beaver Builder button on the Edit Themer Layout page. This will open up the builder. 

Next, drag and drop a text editor module onto the page. In the General tab, enter the text that will be displayed on the announcement bar. You can also add a link if needed. For instance, you might want to consider linking to your online store to drive sales from your landing page:

In the Style tab, you can change the font size, positioning, and line height of your text. You can also add spacing, capitalization, decoration, and text shadow. 

Additionally, you can navigate to the Advanced tab to customize the margins. For instance, if you want a narrow announcement bar, set the top and bottom margins to “0”.

Moreover, you can create a custom animation for your announcement. Adding motion effects can help draw attention to your promotion.

When you’re happy with your changes, click on Save. Next, you’ll need to edit your row.

Click on the announcement bar and navigate to the wrench icon. This will open the Row Settings:

In the Style tab, you can change the color of the text, link, heading, and background. If you want the announcement bar to fill the entire screen, choose Full Width. 

In the Advanced tab, you can edit the margins and padding of the bar. To make sure the text editor module is lined up with the header beneath it, set the bottom padding to “0”:

You also have the option to edit the announcement bar for different devices. To do this, click on the device icon to the right of each field. This will allow you to preview and adjust the announcement for each device size. If you enter custom values for either desktop, tablet, or mobile, they will only apply to that specific device. 

Under the same tab, you can change the duration of any added animation. You also have the option to create a delay if needed.

Once the announcement bar is customized to your liking, click on Done and select Publish. You should now see an announcement bar at the top of your website!

Conclusion

Adding an announcement bar to your website’s homepage can be an effective way to capture your audience’s attention. Whether you’re promoting a sale or offering free shipping, announcement bars provide a clear and simple method to communicate with your users.

To recap, here’s how to create an announcement bar in WordPress, using Beaver Builder and Beaver Themer:

1. Create a new Themer layout.
2. Configure the layout settings.
3. Edit the layout of the announcement bar.

Do you have any questions about setting up a custom announcement bar for your WordPress website? Let us know in the comments section below!

The post How to Add an Announcement Bar in WordPress (In 3 Steps) appeared first on Beaver Builder.

In this article, we’ll start by explaining how to build post templates with Beaver Builder. Then, we’ll explore five templates that you can create to save yourself time.

How to Create Single Post Templates With Beaver Builder

There are two ways to create single post templates. The first way is to create a flexible layout template for the content area of the post. Post authors benefit from being able to start with a common layout and style for their post, but they can modify any aspect of the layout and style to suit the needs of that specific post. This type of flexible template for the post content area can be created by using any premium version of the Beaver Builder plugin.

The second way is to use the Beaver Themer add-on plugin to design a Themer layout that controls the part of the post outside the content area. This means designing the layout for the post title, featured image location, post info, post meta, post navigation, and any other content that you want to appear with the post. In this case, the layout and style of the items on the page don’t vary, but the post information does. You also have control over which single posts a Themer layout applies to. For example, for posts that are related to products that you sell, you could add a display of related products anywhere on the same page.

You can use either method individually or use both together. In all cases, you avoid having to manually code the template then add it to a child theme. Instead, our drag-and-drop builder lets you create the templates without having to touch a single line of code.

Create and Save a Flexible Layout Template with Beaver Builder

Let’s start by showing how to create and save a layout template using Beaver Builder. To get started, purchase our Beaver Builder plugin and install it. After you activate the plugin, enter your license key under Settings > Beaver Builder > License:

Then click the Post Types tab and select Posts, then click Save Post Types:

Now we can create a post template. In the WordPress admin panel, head to Posts > Add New and click Launch Beaver Builder:

This brings you to the Beaver Builder editor interface. Click the Plus icon in the top right-hand corner, then select the Templates tab:

Select either the blank template or choose from one of the prebuilt content and landing pages. We’ll use the Contact page option as an example. Click the template to insert it into the layout. Then you can adjust it and add your own content as you see fit, using the drag-and-drop functionality:

When you’re done, save the template by clicking the drop-down menu in the top left-hand corner of the screen to display the Tools menu, then click Save Template:

Give your post a name before saving your changes. 

To use this template, add a new post as you normally would and launch Beaver Builder. Click the plus icon to open the Content panel, then click the Templates tab and choose Saved Templates from the Groups drop-down menu:

Select the name of the custom single-post template you’ve just created. After the layout loads, begin adding your content. When you’re done, click the Publish button to take your post live.

Create a Singular Post Layout With Beaver Themer

Beaver Themer works with the Beaver Builder plugin to build the layout, but it has the following expanded capabilities:

• It creates layouts outside the content area of the page, in areas normally controlled by your theme.
• It lets you apply the layouts to any specific location within your site.
• It uses field connections to draw information dynamically from the database, including content from WordPress custom fields and the Advanced Custom Fields plugin.
• It has conditional logic, which lets you fine-tune when the layout applies, or when a specific module is visible. For example, you can limit a row, column, module, or the entire layout to appear only when a user is logged in.

Let’s create a layout for single posts. Navigate to Beaver Builder > Themer Layouts from your dashboard:

Click Add New and enter a title, then choose Singular as the Layout. Click Add Themer Layout when you’re done:

On the next screen, you can configure where the theme is used and apply optional conditional rules. When you’re done, click Launch Beaver Builder to open the Beaver Builder editor.

From the Preview As drop-down menu at the top, you can choose a post or page to preview while you work on the layout:

Click the Plus icon in the upper right corner to open the Content panel, then click the Templates tab to see the choice of layout templates that you can apply to your Themer layout for starters. If you have plugins like WooCommerce, BigCommerce, Easy Digital Downloads, or The Events Calendar installed, you’ll see special templates for those plugins. 

Back on the Modules tab, go to the Themer Modules group to add modules that apply specifically to Singular Themer layouts, or add any of the standard Beaver Builder modules:

Continue to use the drag-and-drop interface to add or remove elements and customize the layout according to your needs. When you’re finished creating your Singular Themer layout, click Done, then Publish.

5 Time-Saving WordPress Single-Post Templates to Add to Your Toolkit

Below are five single-post or single-page templates to consider creating to help save yourself time.

1. Basic Product Page

If you sell physical items, one of the most useful post templates you can create is a basic single-product page. This will help ensure that the products on your website are displayed in a uniform manner and that you won’t leave out any key information or sections from page to page.

WooCommerce comes with a ton of features to help you manage your inventory and process orders. However, it can be somewhat limiting in terms of customizing product pages. Fortunately, you can use our Beaver Themer plugin to build a stunning and dynamic product page template to apply across your store.

When creating your template, you can choose Products as the Location, followed by All Products:

When you launch Beaver Builder, you’ll notice that the template is designed mainly for a post. However, to apply a template geared more towards a product page, open the Content panel and choose Templates > Product:

Click Preview at the top of the editor to select a product to preview as you create your layout. If you want to customize the modules, click the Wrench icon at the top of any module in the layout to open its settings, or add new modules from the Content panel:

When you’re done, remember to click Done > Publish to save your single-product template.

2. Landing Page

Another important type of page that you might often use as a website owner is a landing page. Designing effective landing pages is a critical part of generating leads and boosting conversions, so it makes sense to create a layout template for it.

This way, you can ensure that your landing pages all adhere to the same consistent layout and style. It also helps you save time when you want to quickly promote a new product.

There are a handful of key elements to include for effective landing pages, such as:

• A clear Call To Action (CTA)
• Attention-grabbing headers
• Clear, concise, and actionable copy
• High-quality images or video
• Testimonials

Landing pages are usually created as static pages rather than posts, so you can use the Beaver Builder plugin to create a layout template. Beaver Builder makes this effortless because it includes modules for all of the above elements, including a dedicated Call to Action module:

Beaver Builder has a Landing Pages group on the Templates tab, so you can start with a pre-built template and modify it and go rogue and easily create your own from scratch.

The actual content will change on individual landing pages, so just insert dummy text and images in your template, then quickly switch them out when necessary. When you’re done, save your landing page template by clicking Save Template on the Tools menu.

3. Featured Article

If you publish a lot of content on your site, you might want to create a featured-article post template. These are posts that you are promoting, so it might be worth going the extra step to ensure that they’re professionally designed.

Some of the elements you might consider including in this template are:

• Prominent headline
• High-quality image
• Blockquote
• Drop caps

To achieve this, you can use Beaver Builder to create a layout template for the post content, and/or you can style the part of the page outside the post content area with a Singular Themer layout. Start by creating a Singular Themer layout and the Post layout template:

If you want to demote a featured post in the future and make it look like a standard post, here’s an easy way to do that: 

1. Create a post category and assign any featured post to that category.
   Here we’ll assume the category is named “Featured.”
2. Create a Singular Themer layout for featured posts, and assign the location so that the Themer layout applies only to posts in the Featured category.

When you want to demote the post, just uncheck the Featured category box, and that special Themer layout will no longer apply.

4. Author Bio Page

If you run a website or blog with multiple contributors, you might want to add author bios. One way to do this is to insert an Author Bio module at the end of the post in a Singular Themer layout.

However, if you want to give your employees and partners more of a spotlight, you can also dedicate a page to them. In that case, it makes sense to create an author bio page template:

Aside from their names and titles, there are a handful of key elements you can include, such as profiles, bios, and links to their portfolios or social media accounts.

To create an author bio page template, we recommend starting with one of our Beaver Builder prebuilt layout templates. In the Content panel, navigate to Templates > Content Pages:

There are no author bio page templates specifically. However, there are several “About Me” options that would be an excellent starting point for creating this template.

If you have the skills to create custom post types and custom fields, you can easily create a custom post type with custom fields, then create a Themer Archive layout to display thumbnails of the author bios, which can be clicked to open each bio on a separate page. With Beaver Themer, you can use standard Beaver Builder modules but add field connections to the custom fields to display all the information about each author.

5. Frequently Asked Questions

As a website owner, it’s important to make sure that your website is helpful to potential customers. However, providing real-time customer service and support isn’t always possible.

This is why it’s a smart idea to include some self-help resources on your website, such as a knowledge base or section that answers frequently asked questions. This way, your users can search for answers to common questions themselves, and you don’t have to waste unnecessary time addressing repetitive questions:

Depending on how large your website is, you might want to create multiple FAQs pages. For example, you could have one for each of the products or types of services you offer.

You can select one of our Beaver Builder FAQs templates to get started. To do so, navigate to Templates > Content Pages:

There are two prebuilt layout templates to choose from: one that includes an image at the top and one that doesn’t. You can also start with a blank page, then use the modules to insert the elements you want. For example, you can use the Tabs module as the content layout for the questions and answers, rather than the Accordion module that is included with the templates.

Keep Your WordPress Templates Organized With Assistant Pro

Assistant Pro is a product developed in 2021 by the Beaver Builder team. It’s a cloud storage system designed specifically for WordPress assets like Page Layouts, Code Snippets and WooCommerce products. It’s easy to get started, just create a free account and start creating libraries to store your design assets in. We also have a free course on the details of how to use Assistant Pro in our Beaver Builder Course Library.

Conclusion

When you’re constantly adding content to your website, the process can get very time-consuming and redundant. One way to streamline it is to create single-post templates for pages on your site that you use relatively often.

As we discussed in this post, you can easily design post templates in WordPress using our Beaver Builder and Beaver Themer plugins. The more challenging aspect is determining which posts to build templates for. However, there are five main ones that we suggest considering:

1. Basic product page
2. Landing page
3. Featured article
4. Author Bio page
5. Frequently asked questions

Do you have any questions about creating single-post templates? Let us know in the comments section below!

The post 5 Time-Saving WordPress Single Post Templates to Add to Your Toolkit appeared first on Beaver Builder.

In this article, we’ll give you a brief overview of Beaver Themer. Then, we’ll take you through 14 video guides that show you everything you need to know about how to use it to customize your WordPress site. Let’s get started!

An Introduction to Beaver Themer

If you’re looking into Beaver Themer, chances are you’re already familiar with our powerful page builder, Beaver Builder. This tool can help you create dynamic web pages using a flexible and robust drag-and-drop interface.

You can use it to add prebuilt modules and layouts to any content area on your site. However, you might find yourself wondering if it’s possible to reap the benefits of these features in other areas across your site, such as your header.

That’s where Beaver Themer comes in. When added to Beaver Builder, this tool enables you to create layouts outside the content area and apply them to multiple locations or to your entire site. The layout and style of these areas are normally under the control of your theme: headers, footers, archive and post pages, 404 pages, and search pages. It also lets you add banners or more extensive layouts in areas before or after the header, footer, and so on.

Beaver Themer gives you the power to create highly customized layouts that no theme could achieve. The variety of design options ensures that each page looks unique while staying in harmony with the rest of your site.

If you’ve already purchased Beaver Themer and are interested in a quick-start guide, you’ve come to the right place!

However, you might not have made your purchase just yet. In that case, feel free to follow along with the tutorials below on our live demo site to get a feel for the features.

Keep in mind that Beaver Themer is an add-on for our premium page builder so you need a subscription for both Beaver Themer and Beaver Builder. Beaver Themer is optional, but we think these guides demonstrate how much it can enhance your web creations.

14 Beaver Themer Tutorial Videos to Watch

Considering all the features Beaver Themer adds to your WordPress installation, you may want some extra instruction when you’re first learning how to use it. Here are 14 of our most useful video guides to help you get started.

1. How to Install Beaver Themer Addon Plugin [Tutorial]

As you might have guessed, the first step in using the Beaver Themer add-on is installing it. This video guide will give you a brief tutorial on how to do just that. It covers everything from accessing your license key to activating the tool in your WordPress dashboard.

This video guide can get you off the ground in a little over 60 seconds. As such, it can be a particularly useful primer if you’re in the early stages of getting started with our products. It may also be helpful if you’re new to WordPress in general.

2. Beaver Themer Overview

After you’ve gotten settled and installed Beaver Themer, you can dive into its functionality. This video guide gives you an explanation of Themer’s basic operations.

This video includes using Theme layouts, templates, and categories. Additionally, you can gain an understanding of saved rows, columns, and modules. All of these functions help you create a catalog of go-to elements to replace your theme functionality, all over your site.

This video is a well-rounded introduction to using Beaver Themer. If you’re looking to find all the most important features without having to hunt for them, you can use this guide as a roadmap.

Finally, the run time for this content clocks in at just over seven minutes. As such, it’s an efficient way to get your bearings.

3. Introduction to Theme Parts for Beaver Themer

For our next guide, we’ll start getting into the finer details of Beaver Themer. You can use this video to learn the basics of creating Themer parts.

A Themer part is one or more rows of Beaver Builder layout that can appear before or after the header, above or below your page or post content, or before or after your footer, on any page of your site that you specify.

Themer parts are an easy way to include Calls To Action (CTAs), event and sale banners, and much more.

Not only do Themer parts let you insert content into areas of the site that would normally require another plugin or code, but you can also make the banners disappear throughout your site with a single click until the next time you need them.

The walkthrough in this video explains how to create Themer parts and demonstrates the page positions in which you can place them. 

Themer parts are a simple yet powerful facet of a stellar WordPress page. As such, it’s worth taking just under four minutes to familiarize yourself with their use. Note that this is an older video so the Themer UI has changed somewhat, but the concepts and capabilities are current.

4. Creating Single Post Layouts With Beaver Themer

Did you know you can also use Beaver Themer for single post layouts? This video gives you the information you need to create the ideal format for your blog content.

You can discover how to achieve the perfect layout and how to add a sidebar with WordPress widgets if you want one. Since Beaver Builder layouts are edited on the front end of your site, it’s an easy way to make changes while viewing your site from a typical user’s perspective.

If you’re ready to understand the full potential of a single post layout, this video is for you.

5. Creating Archive Layouts With Beaver Themer

Our next video guide gets into more specialized territory – creating archive layouts. You can watch it to learn the ropes of how to customize these page designs as well as apply extended functionality.

For example, you can use Beaver Themer to automatically display your most recent post’s featured image in the archive page’s header.

You can also find subtle yet impactful formatting tips. For example, lengthy archives can be unwieldy for your users to navigate. This video shares hints for making the most of your space so that it’s easy to read and navigate.

The video also shows you the various types of archives that your Themer Archive layout can apply to. You might want to design different Themer Archive layouts that apply separately to post archives, category archives, author archives, and so on. 

Old posts can demonstrate your depth of experience, or act as a repository of useful information. Therefore, we recommend that you pay attention to how you present your archives. By watching this video, you can figure out how to display your content in an appealing and practical way.

6. Editing Your Header Using Beaver Themer

Your header is an essential part of your web design as it typically appears on every page of your site. In this video tutorial, we’ll walk you through the basics of creating a Themer layout and deciding where to display it on your website.

We’ll walk you through the steps of creating a header to replace the old header on all pages of your site except posts or custom post types. Then, we’ll explain how you can set an execution rule so that the header displays on every page except your landing pages.

7. Creating a Transparent Header With Beaver Themer

Your WordPress site’s header is one of the first things users see when they arrive, making it highly important for establishing your brand identity and orienting visitors quickly.

One of the most notable features of Beaver Themer is that it enables you to customize your header using Beaver Builder’s drag-and-drop interface, including prebuilt layout templates and rows.

In this video, you’ll specifically learn about creating a transparent header and how to apply it to a couple of specific locations.

We’re particularly fond of the transparency aspect because it can go a long way towards smoothing out the look of your site, such as alternating this style with a more traditional opaque header to subtly signal differences between pages. Consider watching this video as an introduction to the process.

8. Creating a Custom WordPress Footer with Beaver Builder

Similiar to the header, the footer is an important aspect of your website. It’s where visitors typically go to find navigation links. You can also use it to add copyright information, contact details, social media icons, and more.

This video guide explains how you can create a custom WordPress footer using Beaver Builder and Themer. It shows you how to create a Themer layout and configure the layout settings. Then, it walks you through adjusting the footer layout and adding footer content.

9. Creating 404 Layouts With Beaver Themer

A 404 error appears when a user attempts to access a certain page that can’t be found. While most visitors would probably rather not encounter this message at all, it’s still a critical part of any site.

The next Beaver Themer video guide on our list can assist you in customizing what your audience sees if this problem occurs. It shows you how to edit your 404 page in WordPress using Beaver Builder and Beaver Themer.

There’s nothing wrong with a default 404 error page. Nevertheless, a little bit of personalization can help reassure visitors that your site is still up, and that they’ve simply tried to access a page that has moved or doesn’t exist.

Some websites use the 404 pages as an opportunity to make the site memorable by injecting humor or other unique content. Our video shows you how to customize this page with whatever layout you like.

If you’re a website developer, a custom 404 page goes a step beyond your client’s expectations and showcases your ability to provide unique services even when something on your site doesn’t work as expected.

A custom 404 page plus white labeling your client sites demonstrates professionalism as a developer.

10. Customizing WooCommerce Single Product Pages With Beaver Themer

WooCommerce is arguably one of the most popular plugins in WordPress history. Our video guide on the subject can teach you how to use Beaver Themer to improve your WooCommerce product displays.

You can use our guide to optimize individual items on your digital shelves. Additionally, you can learn how to customize your product archive pages so that your site’s style is consistent throughout.

It will teach you how to create a Singular Themer Layout to apply to your site, add basic product elements to your page, and enhance the page with a variety of features.

This video provides helpful knowledge for online store owners, managers, and developers. For one thing, an effective shop layout can showcase the full potential of your product line.

You may also discover ways to emphasize your brand’s design in-store. Sales can be tricky, but Beaver Themer’s features can give you a competitive edge.

11. Customizing WooCommerce Shop Page With Beaver Themer

Your online storefront design is important because it’s the first thing shoppers see when they arrive. It will help them form an impression of your brand. This tutorial will guide you through the process of customizing your WooCommerce Shop Page with Beaver Themer.

It will walk you through the steps of setting up your Storefront Page, creating a Themer layout, and customizing all elements of the page. The video will also discuss the WooCommerce Beaver Builder module that lets you change how to display your products, insert an order tracking form, and more.

12. How to Build Events Pages With Beaver Themer

Hosting events for your website’s audience is an effective way to grow your online community. Nevertheless, crafting the perfect events page can be tricky.

In this video, we show you how to create events with Beaver Themer and The Events Calendar plugin. With this guide, you can learn the foundations of building an events page. You’ll also discover the easiest way to add a relevant calendar that includes exact dates and times for your events.

This video could prove especially helpful if you run a business that relies on in-person events. It can also help you establish unique content marketing opportunities with webinars, run a fundraiser for your nonprofit, help customers find your pop-up shop, and much more.

13. Using Advanced Custom Fields With Beaver Themer

Tailoring your website to its exact purpose can improve its efficacy. As such, consider watching our video guide to using Advanced Custom Fields in Beaver Themer layouts.

This video shows you how to add custom fields for a heading, subheading, and photo gallery into a layout using Themer field connections: the mechanism responsible for displaying the correct content wherever the layout applies. It’s a simple way to take your layouts to the next level with custom content.

Watching this video can help you create more personalized pages. Zeroing in on small aspects such as these can have a big impact on your site’s final design.

We recommend that you take the time to watch this brief video and boost your customization skills.

14. Adding an Announcement Bar Using Beaver Themer

An announcement bar is a powerful element you can add to your website to help grab visitors’ attention. You can use it to post updates, special announcements, promotions, and more.

In this video tutorial, we’ll show you how to create a custom WordPress announcement bar using Beaver Themer. We’ll also explain how you can easily create Beaver Builder layouts in areas of pages or posts that are usually controlled by your WordPress theme.

This guide will take you through the process of creating a Themer layout and configuring the layout settings. Then, it shows you how to edit the top bar layout to fit your site’s aesthetic.

Conclusion

Even the savviest of developers can get turned around when acclimating to a new tool. Learning about useful technology such as Beaver Themer is crucial to professional growth, whether you’re a WordPress expert or starting your first website. By watching our video guides, you can make the adjustment period a whole lot easier.

In this article, we covered the contents of 14 highly useful Beaver Themer video tutorials.

From installation to advanced customization, we mapped out the best guides to help you get started with Beaver Themer and access a variety of handy features for designing your dream WordPress site.

Do you have any questions about using our Beaver Themer add-on? Let us know in the comments section below!

The post Beaver Themer Tutorials: 14 Videos to Watch appeared first on Beaver Builder.

Many of the sites didn’t pass Google’s Mobile-Friendly Test or took over a minute to download, flaws that affect search performance.

You might go looking for a specialty platform or a plugin to help you build a portfolio website but I have a secret to share. It’s really easy to create a professional portfolio site, or a portfolio section of a larger site, using WordPress, Beaver Builder, and Beaver Themer.

A portfolio that looks beautiful and is responsive, and one that’s easy to add, remove, and categorize portfolio content in the back end without touching the layout at all.

This means that if you’re a web designer you can easily turn the site over to the artist to maintain.

Best of all, you have the flexibility to create a great layout with exactly the content you want. Even better, if you want to modify the layout or style of your portfolio, you can make simple changes to the Beaver Themer layout without touching the content.

In this post we’ll show what it takes to set up a basic portfolio layout like this:

We’ll start by using standard posts and a Themer layout.

From there we’ll give you a path to learn some advanced techniques to structure your content better in the back end and give you more options to make your content unique: custom post types, custom fields, categories and tags, and custom taxonomies.

How can this be so easy?

If you’re thinking of how you can display the images in a portfolio, your first thought might be to use an image gallery, but there’s often information about each work, such as the title, date created, and materials used to make it, perhaps even a description, that most image galleries don’t have the flexibility to handle. 

There’s a better way to create a portfolio: create a post for each item.

If you’re used to thinking of WordPress posts as a typical blog entry, it might be hard to imagine, but you’ll see how well it works when you have Beaver Themer.

You can create an Archive-type layout to create one or more gallery pages and a Singular-type layout to present all the information for each individual item.

The image in the last section shows a simple portfolio on a typical WordPress archive page built with Beaver Themer, which uses the Beaver Builder editor to construct the page.

If you’re familiar with Beaver Builder modules, the layout uses a Posts module with a masonry layout. The number of columns automatically adjusts according to screen size, so it’s responsive without your lifting a finger.

Any item that you click in the portfolio opens to its own page, also controlled by a Themer layout:

In this example, the artwork title is the post title and the description is the post content.

You could also include a description on this page if you wanted, and later we’ll show you how to use custom fields to separate the artwork information from a description, as shown here:

You can also create categories for the items in your portfolio so that you can group them and display individual categories.

We’ll start by showing you how to create the portfolio items in the back end, then talk about how to create the Themer layouts to display the portfolio gallery and single items in the portfolio.

Step 1. Create a post for each portfolio item

If your site doesn’t have a blog and you don’t plan to have a blog in the future, you can use standard posts to create your portfolio.

If you do have a blog, or if you’re creating a site for a client and want to keep the back end tidy, you can create a custom post type. We’ll cover that later.

Note that for the posts, you’re going to use the WordPress editor, either the block or classic editor, because we’re going to create a Themer layout for these single posts and you can’t use a Themer layout and a Beaver Builder post layout together.

To create your standard posts:

1. In the WordPress admin panel, go to Posts > Add New.
2. Add a title for the post, which will be the artwork title you want to display.
3. Set the featured image for your post by clicking Set Featured Image, then upload the artwork image to the Media Library and select it.
   Be sure to add Alt text and a friendly Title for the image while you’re in the Media Library because this is important for accessibility and search and appears in the HTML page code.
4. Add any information about the post in the WordPress Block Editor or the WordPress Classic Editor.
5. Save the post and repeat for each portfolio item.

Step 2. Create the location for your portfolio

If you don’t want your portfolio to appear on the home page of your site, you have to create the page where you want it to appear. If you do plan to dedicate the home page to your portfolio gallery, skip to the next section.

1. On your WordPress admin panel, go to Pages > Add New. 
2. Create a title for this page, such as “My Portfolio,” and save it.
   The content for this page will be generated by WordPress, you don’t need to add anything yourself.

Step 3. Adjust the WordPress settings to point to your portfolio page

Now adjust your WordPress settings to point to your “blog,” which in this case is your portfolio page.

1. In your WordPress admin panel, go to Settings > Reading.
2. If your portfolio will be on your home page, choose Your latest posts. If your portfolio is on the page you created in the previous step, choose A static page, and in the Posts page field choose that page title.
   
   

Now if you look at the page you selected for your portfolio or your home page, you’ll see an unformatted WordPress “archive” of all of your portfolio items.

This archive is generated by WordPress and the formatting and content are controlled by your WordPress theme.

That’s fine for now. If you’re new to WordPress, here’s some basic information about how standards posts and archives work.

Step 4. Create a Themer layout for your Portfolio archive

Now we’ll design the layout for that WordPress-generated archive page by creating a Themer layout. If you need to install Beaver Themer, follow these instructions.

First, create an Archive-type Themer layout:

1. In your WordPress admin panel, choose Beaver Builder > Themer Layouts.
2. Click Add new.
3. Enter a title, such as My Portfolio Archive.
   This title only appears in the back end.
4. In the Layout field, choose Archive.
5. Click Add Themer layout.

Now add the location for your Themer layout: 

1. In the Location field, click in the Choose box and choose Post archive.
2. Click Publish.
3. Click Launch Beaver Builder.

The Themer layout opens with an initial template that contains two modules: a Heading module and a Posts module.

Open the Heading module and you’ll see that the title being used is a field connection to the Archive Title:

The field connection means that whatever type of archive you’re viewing (post, post category, post tag, etc.) you’ll see the correct name for the archive type.

However, you want this archive to reflect your portfolio, so remove the field connection in the Heading field and enter your heading, such as My portfolio.

Open the Posts module beneath the heading. This is where you’ll make the changes that will set the content and style of this page.

Let’s change the settings to match the screenshot shown in the first section of this article.

1. On the Layout tab, set the Layout field to Masonry.
2. In the Featured Image section, set Image to Hide.
3. In the Post Info section, set Author to Hide.
4. Set Date to Hide.
5. In the Post Content section, set Content to Hide.
6. Set More Link to Hide.
   Now you should be seeing the correct information for your portfolio: a masonry layout where each item has a featured image, a title, and whatever you entered for post content.
7. Save the module and publish the page.

Now you can check the page on your site that you designated as your portfolio, and you should see your Themer layout.

Step 5. Create a Themer layout to display single portfolio items

If you view any of your individual items, you’ll find they’re also displayed as default blog posts, with settings coming from your theme.

Let’s create a Themer Singular-type layout that will format the page with layout and content more suitable for your portfolio.

Create a Singular-type Themer layout:

1. In your WordPress admin panel, choose Beaver Builder > Themer Layouts.
2. Click Add new.
3. Enter a title, such as My Portfolio Items. 
4. In the Layout field, choose Singular.
5. Click Add Themer layout.

Add the location for your Themer layout: 

1. In the Location field, choose Posts and then All Posts.
2. Click Publish.
3. Click Launch Beaver Builder.

The layout opens with a template, but just go ahead and delete all those rows.

Here’s what we’re aiming for, the post featured image, the post title, and post content, with instructions below:

Beaver Builder has special modules when you’re building Themer layouts, which save some steps, so we’ll use those.

1. In the Beaver Builder editor, click the plus sign to open the Content panel, then click in the Group field and choose Themer layouts from the dropdown.

2. Drag the Featured Image module to form a new row, then save it.
You don’t need to make any changes to this module.

3. Drag the Post Title module into a new row. You’ll see the heading text display whatever post you’re previewing, but the heading is left-aligned and possibly the type is too large, so let’s fix that.

4. On the General tab, change the HTML tag to match what fits on that position on your page. Here we’ve selected h2:

5. On the Style tab, in the Typography section click Font to open that subsection and change the Align setting to the center toggle, then save the module.

You can change any other typography settings here if you wish.

6. Open the Content panel, click in Group to change to Standard modules, then drag a Text Editor module into the same row below the post title and open it for editing.

7. Click the plus sign next to the Visual and Text tabs to open the field connection list.

8. Choose Post Content.


You’ll see the post content appear for the item that you’re previewing.

9. Save the module.

Now let’s add some navigation at the bottom of the post so your visitors can go directly from item to item.

1. On the Modules tab in the Content panel, select the Themer modules group and drag the Post Navigation module into a new row at the bottom of your layout.

2. Save the module without changing any of the settings.

3. Publish the Themer layout.

To view your layout in action, go to your gallery archive page and click any of the items on display.

That’s it! You’ve created a basic portfolio. Change Style with a Few Clicks

Portfolio variations

Now that you’ve created a basic portfolio framework, you have the full power of Beaver Builder behind you to create style and layout variations with just a few clicks. Here are some examples.

Change the post layout

With a single change to the Posts module, you can switch to a columns layout, where the tops of each column layer line up horizontally, or a gallery layout, where the title is displayed over the image on mouseover, as shown here:

You can also create animation by using a Posts Carousel or Posts Slider module. Here’s an example of a carousel (minus the animation):

Change the background

Prefer dark backgrounds? Change background and text colors in the rows and you have a whole new look.

You can also change the post background and text inside the Posts module if you wish, plus many other options, such as image size, the spacing between images, and text color.

More advanced portfolio architectures

Here are some other ways you can set up your portfolio. We won’t show you all the steps to set up these features but just want to give you some ideas of how flexible and sophisticated this system can be.

Create a custom post type

Instead of using a standard post for your portfolio, you can create a custom post type (CPT).

It’s easy to create custom post types with a free plugin like CPT UI, and we recommend you learn how to do this because we can almost guarantee you’ll think of many other uses for CPTs. 

We created a CPT called “My Portfolio,” which appears in the WordPress admin menu:

You can see that this improves usability on the back end because it’s easy to see where to go to manage your portfolio.

When we configured the CPT, we set up the portfolio items to include the title, featured image, and content area like standard posts, so the UI for entering content is familiar. 

Create custom fields

You can add custom fields to your standard or custom post types, which also facilitates data entry on the back end and standardizes data presentation on the front end. 

In our example, the content area for each portfolio item contains three pieces of information: the year, the medium, and the dimensions for that piece of art.

Suppose that instead of typing that information into the post content area, we create three custom fields for this information.

You can choose from many custom field types, allowing, for example, free text entry or radio buttons or checkboxes.

You could offer a choice of year and medium so users could enter that data with a mouse click instead of free-typing information in a uniform format every time.

You can make the fields obligatory if you want to ensure that these details are not forgotten. 

Custom fields offer several advantages:

• They make data entry easier.
• They remind you to provide that information for every post.
• The information is consistent, and consistently formatted, on the front end. 

In our example, using custom fields frees up the content area for other information, such as a description or story about the piece of art.

Here’s a screenshot of one of our custom posts in the WordPress block editor. You can see that the three custom fields appear below the text editor.

The Dimension field was set up so users can add additional units of measurement and it will be saved after adding.

Beaver Themer supports the Advanced Custom Fields plugin as well as WordPress custom fields and the Pods plugin, which means that in your Themer layouts you can easily set up field connections to display those custom field values.

You can also use field connection shortcodes, which return a text value so you can use more than one field value, or text plus a field value, into a Beaver Builder editor setting.

To create a shortcode, you click that same plus icon for the field connect but choose Insert instead of Connect.

Then a screen appears so you can specify information about the custom field and the shortcode is created and inserted automatically.

Here we’ve added a Text Editor module to the Themer Singular layout, as shown in this screenshot.

The string is long but was constructed one shortcode at a time (in square brackets) with commas or the times sign (x) separating the fields. When viewed after saving, the editor displays what you’ll see on the front end:

To display these custom field values in your portfolio, you can tweak the standard HTML output in the Posts module to include custom fields.

As shown in the following screenshot, change the Post Layout field to Custom, then click Edit Post Custom Layout.

The default HTML layout is displayed and you can modify it from there to add the custom field shortcodes.

In our custom layout, we used a pipe to separate the three custom field values, as shown in the output.

Create categories, tags, or custom taxonomies

In our example portfolio, we’ve got photographs mixed with oil on canvas mixed with chalk, human faces mixed with abstract drawings.

Suppose you want the ability to categorize your art in various ways so you can group or filter what’s displayed.

In WordPress, there are two built-in taxonomies: categories, which can be hierarchical, and tags, which are not. You can create any categories or tags you want for use with standard posts.

If you have a custom post type, you can apply the same categories and tags that you’re using for standard posts, but in many cases, it makes more sense to create one or more custom taxonomies.

A custom taxonomy can be hierarchical like categories or nonhierarchical like tags, but in WordPress terminology, any custom taxonomy has “terms”  rather than “categories” or “tags.” 

You can use the CPT UI plugin or other plugins or the manual method to create custom taxonomies.

Then define your actual terms from the WordPress admin dashboard, just as you do for categories and tags.

Whether you use categories, tags, or terms from custom taxonomies, WordPress automatically creates an archive page for each term and you can add a location for your Themer Archive layout so it applies to these archive pages as well.

Here’s an example. We created a custom taxonomy called Portfolio categories and assigned it to the My Portfolio CPT.

As this screenshot shows, the custom taxonomy appears in the WP admin panel under the CPT.

We created two hierarchical sets of terms:

We went back through the portfolio posts and assigned the appropriate terms to each one. 

Then in the Themer Archive layout, we modified the custom post layout to add a row that would display the post terms for each item.

We followed the procedure to add a field connection shortcode and got this panel of display options to choose from:

We set the Location for this Archive layout to include Post Category archives, and now when you click one of those category links on the archive pages, the category archive opens with the correct title and the correct post formatting:

Summary

In this post, we showed you the basic steps to creating a beautiful, responsive portfolio with Beaver Builder and Beaver Themer.

We showed you Themer basics of specifying locations and using field connections to easily create your portfolio. We showed how easy it is to change the style and layout of these pages. 

We also ventured into the advanced territory: creating custom post types, custom fields, and custom taxonomies.

We didn’t include every step of how to make these work but hope that if you’ve never used custom post types in WordPress you’ll be inspired to dig in and do more learning.

Do you want to create your own portfolio? Give it a try and let us know how it goes!

The post Create a Professional Portfolio with Beaver Builder and Beaver Themer appeared first on Beaver Builder.