Skip to Content
Main Content

Hiker Looking Out Over Mountains

5 Minute Read | January 6, 2021

Using Page Builders to Manage and Display Complex Data on Your WordPress Website

5 Tips for Getting Your Data Ready for the Web

Updated: Jan. 6, 2021
Originally Published: Aug. 28, 2020

Many WordPress website owners have been taking advantage of page builder tools, such as Beaver Builder and Divi, to build and manage their websites. WordPress website builders provide an extra level of flexibility, making it easier to build webpages and templates without needing to know code. One of the biggest benefits of a page builder is that you can design around your content instead of trying to force your content into the constraints of a standard template. This also holds true for data.

Whether you’re a B2C or B2B company, your website might have a lot of product data, locations or events. The quality of your WordPress data management can influence user behavior and the success of your website overall. Managing and maintaining large amounts of data with a page builder template isn’t hard, but it does take time and a deep understanding of your data. Below are some tips on how to get your data ready for the web.

1. Get Familiar with Your Data

Understanding your data goes beyond just knowing all of the different fields. It means understanding how those fields are being used across products.

Let’s say your products have a name, description, color selection, size options, and a list of special features. Some key questions to consider are:

  • Do all the products have a list of special features? (Are the features similar across products or vastly different?)
  • How many colors does each product have? (How many color variations are there in total?)
  • What are the different lengths of data? (Do some products only have one sentence descriptions, while others have paragraphs of content?)
  • What format do we want the data to be displayed in? (What unit of measurement are you using? Is it rounded to the nearest decimal place? Two decimals?)
  • Are there any outliers? (Are there some products you want to include additional information for, such as client testimonials?)
  • Does your data have product images? (Do you have images for all the products?)
  • If a product is missing a product image, what should display instead?
  • Are there going to be relationships within the data? (Such as targeting related products?)

Having an intimate knowledge of your data will allow you to better prepare for the variations that will inevitably come up. Page builder templates can be quite accommodating on how to display or configure your data, but you need to know what to prepare for and plan accordingly.

2. Make Your Data Pretty

Structured data doesn’t have to be presented in a boring table listing row after row of information. The more familiar you are with the data, the better you can design for it. Take this health care website, for example. They have numerous assisted living centers across the nation and a page on their website dedicated to each location.

Some of the locations have Facility CMS Rating information provided, while other locations do not. The design accommodates for this data variation by centering the image originally located beside the rating when there is no rating data to display.

Location with Facility CMS rating shown

Location with Facility CMS Rating

Location without a Facility CMS Rating shown

Location without a Facility CMS Rating

Simply removing the Facility CMS rating would leave a clear gap on the page, causing the page to appear to the user that it’s either not loading correctly or something is missing. However, the page builder template allowed for conditional logic to be set up that centers the image over the empty data field, allowing the page to feel complete and seamless.

Example of Conditional Logic Settings field in the page builder

It’s important to understand how the layout of your page will be affected by missing information or images and to account for these variations in your design.

3. Have a Plan to Maintain Your Data

Once your data have been formatted correctly, it will need to be maintained moving forward to ensure the highest quality of information is being presented to your users.

Consider the following questions:

  • Who will be responsible for managing the data moving forward?
  • How will data be added moving forward?
  • How often does the data change or need to be updated?
  • Is it easy to add and remove products or items from the current data set?
  • Where does the data live beside the website?
  • Is the data backed up somewhere in case it needs to get restored?

If you’re making a lot of minor changes to the data, it might make sense to manage those changes directly within your WordPress website. However, if you find yourself making large changes across multiple products, it makes more sense to have an import/export procedure set in place.

You’ll also want to create documentation that outlines how and where the data are being used across your website so a new employee or intern can take over the data management if necessary.

4. Understand How Your Data Might Change Over Time

Another consideration is how your data will change and grow over time. As your business grows, so might your product line or product selections. Make sure the data structure set up for your website can accommodate this type of growth or change over time.

Luckily, some of the best WordPress page builders such as Beaver Builder work well with third-party plugins to provide needed flexibility. Once the data are setup, it’s easy to add and integrate a new field to the existing products. It’s also easy to create a new page template for a separate product line.

5. Use Plugins

Page builders offer a more flexible way to build out page layouts and templates that accommodate your content; however, they can’t manage data without the help of third-party plugins. Below are a few of the more popular WordPress data management plugin options:

  • Advanced Custom Fields
  • Custom Post Type 
  • Pods – Custom Content Types and Fields
  • Woo Commerce (for e-commerce stores)
  • WooPack (Beaver Builder Add-on for Woo Commerce)
  • WP Store Locator
  • The Events Calendar

Your plugin selection depends on your page builder and type of data. For example, using the Advanced Custom Fields and Custom Post Type plugins with the Beaver Builder page builder allows the user to create custom post types with specific data fields. The data fields will be available for content entry or editing at the bottom of each post.

Example of custom fields and custom post Type UI plugins with Beaver Builder

Above are examples of custom fields

These data fields can then be used to create a template using beaver themer. Beaver themer has modules or drag and drop blocks that allow you to target these data fields while also applying styling and coloring.

Final Thoughts

The biggest challenge of data are the initial organization and setup. Data needs to be formatted appropriately for each data field type and then laid out in a scannable format for the user. Once all the data are easily accessible on your site, the long-term maintenance begins. It just takes time and dedication to ensure your data are being presented in the best possible light.

If you need help determining the best, most effective way to display data on your WordPress website, our expert team can help! Don’t hesitate to reach out.

Authored By

Jenna Dehn

Jenna Dehn

UX Design Lead

hand-drawn owl

Get Expert Tips

3646817/Blog/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website5 Tips for Getting Your Data Ready for the Web5
<p><strong>Updated: Jan. 6, 2021 <br /> Originally Published: Aug. 28, 2020</strong> </p> <p>Many WordPress website owners have been taking advantage of page builder tools, such as Beaver Builder and Divi, to build and manage their websites. WordPress website builders provide an extra level of flexibility, making it easier to build webpages and templates without needing to know code. One of the biggest benefits of a page builder is that you can design around your content instead of trying to force your content into the constraints of a standard template. This also holds true for data. </p> <p>Whether you&rsquo;re a B2C or B2B company, your website might have a lot of product data, locations or events. The quality of your WordPress data management&nbsp;can influence user behavior and the success of your website overall. Managing and maintaining large amounts of data with a page builder template isn&rsquo;t hard, but it does take time and a deep understanding of your data. Below are some tips on how to get your data ready for the web. </p> <h2>1. Get Familiar with Your Data </h2> <p>Understanding your data goes beyond just knowing all of the different fields. It means understanding how those fields are being used across products. </p> <p>Let&rsquo;s say your products have a name, description, color selection, size options, and a list of special features. Some key questions to consider are: </p> <ul> <li>Do <strong>all</strong> the products have a list of special features? (Are the features similar across products or vastly different?)</li> <li>How many colors does each product have? (How many color variations are there in total?)</li> <li>What are the different lengths of data? (Do some products only have one sentence descriptions, while others have paragraphs of content?)</li> <li>What format do we want the data to be displayed in? (What unit of measurement are you using? Is it rounded to the nearest decimal place? Two decimals?)</li> <li>Are there any outliers? (Are there some products you want to include additional information for, such as client testimonials?)</li> <li>Does your data have product images? (Do you have images for <strong>all</strong> the products?)</li> <li>If a product is missing a product image, what should display instead?</li> <li>Are there going to be relationships within the data? (Such as targeting related products?)</li> </ul> <p>Having an intimate knowledge of your data will allow you to better prepare for the variations that will inevitably come up. Page builder templates&nbsp;can be quite accommodating on how to display or configure your data, but you need to know what to prepare for and plan accordingly. </p> <h2>2. Make Your Data Pretty </h2> <p>Structured data doesn&rsquo;t have to be presented in a boring table listing row after row of information. The more familiar you are with the data, the better you can design for it. Take this health care website, for example. They have numerous assisted living centers across the nation and a page on their website dedicated to each location. </p> <p>Some of the locations have Facility CMS Rating information provided, while other locations do not. The design accommodates for this data variation by centering the image originally located beside the rating when there is no rating data to display. </p> <p style="text-align:center"><img alt="Location with Facility CMS rating shown" class="animate-in lazy" data-src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-1.jpg?Large" src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-1.jpg?Thumbnail" /> </p> <p style="text-align:center"><em>Location with Facility CMS Rating</em> </p> <p style="text-align:center"><img alt="Location without a Facility CMS Rating shown" class="animate-in lazy" data-src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-2.jpg?Large" data-widget="image" src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-2.jpg?Thumbnail" /> <span title="Click and drag to resize">&#8203;</span> </p> <p style="text-align:center"><em>Location without a Facility CMS Rating </em> </p> <p>Simply removing the Facility CMS rating would leave a clear gap on the page, causing the page to appear to the user that it&rsquo;s either not loading correctly or something is missing. However, the page builder template allowed for conditional logic to be set up that centers the image over the empty data field, allowing the page to feel complete and seamless. </p> <p style="text-align:center"><img alt="Example of Conditional Logic Settings field in the page builder" class="animate-in lazy" data-src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-3.jpg" src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-3.jpg?Thumbnail" /> </p> <p>It&rsquo;s important to understand how the layout of your page will be affected by missing information or images and to account for these variations in your design. </p> <h2>3. Have a Plan to Maintain Your Data </h2> <p>Once your data have been formatted correctly, it will need to be maintained moving forward to ensure the highest quality of information is being presented to your users. </p> <p>Consider the following questions: </p> <ul> <li>Who will be responsible for managing the data moving forward?</li> <li>How will data be added moving forward?</li> <li>How often does the data change or need to be updated?</li> <li>Is it easy to add and remove products or items from the current data set?</li> <li>Where does the data live beside the website?</li> <li>Is the data backed up somewhere in case it needs to get restored?</li> </ul> <p>If you&rsquo;re making a lot of minor changes to the data, it might make sense to manage those changes directly within your WordPress website. However, if you find yourself making large changes across multiple products, it makes more sense to have an import/export procedure set in place. </p> <p>You&rsquo;ll also want to create documentation that outlines how and where the data are being used across your website so a new employee or intern can take over the data management if necessary. </p> <h2>4. Understand How Your Data Might Change Over Time </h2> <p>Another consideration is how your data will change and grow over time. As your business grows, so might your product line or product selections. Make sure the data structure set up for your website can accommodate this type of growth or change over time. </p> <p>Luckily, some of the best WordPress page builders such as Beaver Builder work well with third-party plugins to provide needed flexibility. Once the data are setup, it&rsquo;s easy to add and integrate a new field to the existing products. It&rsquo;s also easy to create a new page template for a separate product line. </p> <h2>5. Use Plugins </h2> <p>Page builders offer a more flexible way to build out page layouts and templates that accommodate your content; however, they can&rsquo;t manage data without the help of third-party plugins. Below are a few of the more popular WordPress data management plugin options: </p> <ul> <li>Advanced Custom Fields</li> <li>Custom Post Type&nbsp;</li> <li>Pods &ndash; Custom Content Types and Fields</li> <li>Woo Commerce (for e-commerce stores)</li> <li>WooPack (Beaver Builder Add-on for Woo Commerce)</li> <li>WP Store Locator</li> <li>The Events Calendar</li> </ul> <p>Your plugin selection depends on your page builder and type of data. For example, using the Advanced Custom Fields and Custom Post Type plugins with the Beaver Builder page builder allows the user to create custom post types with specific data fields. The data fields will be available for content entry or editing at the bottom of each post. </p> <p style="text-align:center"><img alt="Example of custom fields and custom post Type UI plugins with Beaver Builder" class="animate-in lazy" data-src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-4.jpg" src="/Northwoods-2020/Blogs/Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-4.jpg?Thumbnail" /> </p> <p style="text-align:center"><em>Above are examples of custom fields</em> </p> <p>These data fields can then be used to create a template using <a href="https://www.wpbeaverbuilder.com/beaver-themer/" linktype="3" target="_blank">beaver themer</a>. Beaver themer has modules or drag and drop blocks that allow you to target these data fields while also applying styling and coloring. </p> <h2>Final Thoughts </h2> <p>The biggest challenge of data are the initial organization and setup. Data needs to be formatted appropriately for each data field type and then laid out in a scannable format for the user. Once all the data are easily accessible on your site, the long-term maintenance begins. It just takes time and dedication to ensure your data are being presented in the best possible light. </p> <p>If you need help determining the best, most effective way to display data on your WordPress website, our expert team can help! Don&rsquo;t hesitate to <a href="/Contact-Us" linktype="2" target="_self">reach out</a>. </p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsManaging and maintaining large amounts of #data with a page builder isn’t hard, but it does take time and a deep understanding of your data. Here are 5 tips for getting your data ready for the web: https://bit.ly/3gGxgaS @northwoods #WordPress @WordPressJenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpg?ThumbnailWoman standing in front of a wood backgroundhttps://ctt.ac/p012o<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>/Northwoods-2020/Blogs/Social-Media-Cards/Blog---Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-.jpg?LargeUsing Page Builders to Manage and Display Complex Data on Your WordPress Website2021-01-06T00:00:00/Northwoods-2020/Blogs/Social-Media-Cards/Blog---Using-Page-Builders-to-Manage-and-Display-Complex-Data-on-Your-WordPress-Website-.jpg?MediumMany WordPress website owners take advantage of page builder tools, such as Beaver Builder and Divi, to build and manage their websites. Whether you’re a B2C or B2B company, your website might have a lot of product data, locations or events. Managing and maintaining large amounts of data with a page builder isn’t hard, but it does take time and a deep understanding of your data. Here are some tips on how to get your data ready for the web.3620811/People/Jenna-DehnJennaDehnUX Design Lead<p>Jenna listens closely to understand clients&rsquo; goals and uncover solutions for their marketing and design challenges. She specializes in developing wireframes and prototypes with a strong focus on UX/UI and&nbsp;collaborates with Northwoods&#39; digital strategists&nbsp;to ensure that strategy guides the design process. Jenna has a wealth of experience designing for data and creates stunning page layouts that showcase complex product information in a digestible format. She enjoys creating infographics, display ads, and illustrations that enrich marketing collateral and has a knack for using movement to bring websites to life. Away from Northwoods, Jenna enjoys downhill skiing, and her fuel of choice is Dr. Pepper. Be on the lookout for her cats Viper, Saber, and Flash, who are frequent guests during WFH calls.</p>Jenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpgJenna DehnAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesWebsite DevelopmentWordPressPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T12:29:53.48300