Skip to main content

At Discover eLearning we are big fans of page builder toolkits like WP Bakery Page Builder and Elementor. Although WordPress’ own propriety block editor system is continuing to grow in strength with plenty of momentum behind it from the wider WP community, there is no denying that for many site admins the speed and ease-of-use to create impressive looking page designs using these two options makes them an absolute must for many WordPress administrators.

We have use WP Bakery for many years here at Discover eLearning and have created several WordPress-based learning management system solutions for our clients that have utilised the page builder tool to create smart and impressive designs which our clients are then comfortably able to manage and administrate long after we have finished our ground-up development process.

Over this time we have amassed a number of different tricks and hacks that we tend to utilise to get the most out of WP Bakery, and for today’s Discover eLearning blog post we thought we’d share one of these tips with you today.

Why is some of my text missing when viewing the WP Bakery Page Builder?

If perhaps you are using different font colours throughout your site then it may very well be the case that some of your font will be a solid white colour (e.g. hex code #fff). Depending on what content block and column settings you are using, you may be able to apply the white font colour to a text block from within the block settings itself rather than changing anything at the paragraph code level. Sometime however that is not possible, such as when you need to use a span tag in order to make certain parts of your text appear white whilst the rest of the paragraph remains the same.

This will result in your WP Bakery Page Builder interface looking like this in administrator view:

WP Bakery Page Builder for WordPress example

The issue with this is that it leaves a permanent white gap where the text should be visible if it were any other colour. The only way usually to be able to read this section of text would be to highlight it with your mouse.

Depending on whether a large section of text is in white, or an entire paragraph block, can make scrolling and finding that section of content again in the future a problem.

How to make all text visible in WP Bakery Page Builder regardless of font colour

In order to get around this little problem we can implement a small and simple fix in order to apply some WP Bakery Page Builder interface specific styling which will apply to any page and any content block where a white font colour may be visible.

To apply the fix, just add the following code snippet to your active theme’s functions.php file:

add_action('admin_head', 'my_custom_wpadmin_css');

function my_custom_wpadmin_css() {
echo '<style>
.metabox-composer-content .content span{color:#000!important;} 
</style>';
}

If you already have an ‘admin_head’ action in place in your functions.php file that echoes a custom style tag to the page then simply only add the line starting with .metabox-composer-content between the opening and closing style tag.

This code snippet is particularly useful in order to include any styling and custom scripts to the WordPress backend view only, to be visible for the benefit of site adminstrators.

Once you have saved the functions.php and refreshed the page, you will see the results immediately:

This will now make reading all text when viewing the Edit Post/Page area of any part of your site much easier to work with, as there will now be no visible gaps whenever a white font is used in WP Bakery.

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has 15 years’ experience working in both private and public sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.