22305 comments found.
One of my client’s sites has an active Total Theme licence but I see the following error when attempting to update the WPBakery Page Builderr plugin from the “Install Required Plugins” page:
An error occurred while updating WPBakery Page Builder: Automatically updates for the plugin are available to the clients with a valid support period – you can renew it here. To update manually, visit our customer center to download the latest version.
I believe that when I bought it, Total Theme came with a lifetime WPBakery licence included through the theme licence. But this seems to have stopped working.
Hi,
This is Aj the theme author.
If you are getting this error, it generally happens because you’ve disabled “WPBakery Builder Theme Mode” in the Theme Panel. Disabling the option allows users to activate their own custom license: https://totalwptheme.com/docs/activate-wp-bakery-page-builder/
Please make sure that setting is disabled and if you still get an error, you can always temporarily de-activate the WPBakery plugin so it’s functions are not running as this error can also happen if you’ve temporarily disabled the theme which caused WPBakery to cache an extra check that gets disabled when the theme is activated.
Now, there is actually a newer version of WPBakery that’s not yet shipped out with the theme but it can be updated via the WP admin, to do so, simply delete the WPBakery Page Builder plugin fully and then re-install it via Appearance > Install Plugins. More on the upcoming changelog here: https://totalwptheme.com/docs/upcoming-update-changelog/
Last, technically you don’t get a “standard” plugin license with the theme purchase, what you get is a “bundled” license. You can learn more here – https://totalwptheme.com/docs/bundled-product-license/
Let me know if you have any issues or followup questions!
- AJ
Hi Aj,
I’m looking for a way to edit the Tag and Category pages.
Specifically, I’d like to add a title section with a background – similar to what’s possible on the Blog page via Theme Settings, where I can define a title and choose its style and Background Color.
Is this something that can be done via the backend, or would I need to customize it using a child theme? If a child theme is required, could you let me know which template file(s) I should modify for the Tag and Category pages?
Thanks in advance and best regards,
Hi,
You have a couple options, neither require a child theme or custom code:
1) If you define an image for your categories and tags, the theme by default will use the page title with background settings. If it’s not, then it means it has been disabled in the Theme Panel. Make sure these 2 options are enabled: https://a.cl.ly/nOurqLK8 – this is the simple option but to customize it fully would require a child theme, unless you enable the Background Image title style globally for your whole site in the Customizer.
2) For full control, and what I recommend, is to create a custom template to use for your blog archives. This is very simple – https://totalwptheme.com/docs/category-taxonomy-template/ – you will want to disable the page title for the blog archives so you can then create it in the template. I made a quick video example: https://a.cl.ly/QwuzOwyg – as you can see creating a template will give you full control over the design for your categories and tag archives.
You can assign this template to the main blog as well by making sure your blog page is set as the Posts Page under Settings > Reading rather then using the blog template for the main blog page.
- AJ
Thanks a lot for your reply!
Just to clarify: I don’t want to use an image in the background. In Theme Settings > Title, there’s a Post Title Style option called “Solid Color White Text” – I’ve applied that to the Blog Page, and I’d like to achieve the same look for the Category and Tag pages as well.
Do I now need to create a new dynamic template and assign it like you show in the Template Setting? Is there a other option? When I create a dynamic template, the breadcrumb appears above the template content. So then i have to change that to…
Thanks again! Best regards,
Hi,
Honestly, if all you want is to have a background color for your title I don’t really see the need for creating any templates or even using the theme settings for this on the blog page. Generally your title design should be the same across the whole site and you can just customize your title globally via Apperance > Customize > Page Header Title. See here: https://a.cl.ly/2NuegDde
The Theme Settings metabox (like where you customized the blog page title) should pretty much only be used for creating landing pages (like a custom page for a sale that you want to share via social media where you may want things to look very different). For the most part you should be controlling your site design globally via the Customizer or using Dynamic templates this way you can always control things globally – if you use the Theme Settings metabox to customize many pages manually and then you want to change them, you will need to go back and edit each one.
Now, if you create a dynamic template it will give you full control over the whole design – if that’s what you need. For the breadcrumbs, what you can do is select “Custom” for the breadcrumbs location in the customizer under General Theme Options > Breadcrumbs and then insert the breadcrumbs element into your dynamic template wherever you want them to show up. Example video from the Publisher demo: https://a.cl.ly/z8uWNWN0
- AJ
Hi Aj,
thank you so much 
.
Best regards
Hey AJ, just a quick question regarding cards element and pagination:
I have a cards element with Callback (child theme function) query that gets posts that have the same author ID as the page that I have the post cards element on:
function related_art_by_author() { }
// Set up the arguments for WP_Query
$args = array(
'post_type' => 'art',
'posts_per_page' => 12,
'order' => 'DESC',
'author' => get_the_author_meta('ID'), //current author
'post__not_in' => array(get_the_ID()), //skip current post
);
return $args;This somehow works but fails as soon as I paginate. No matter what kind of pagination I choose from the second page ongoing, it shows all posts available from any authors.
How can i make pagination work with the callback functionality? Thanks in advance 
Hi,
Add ‘pagination’ => true, to the list of arguments. Enabling pagination slows down the query, so the theme specifically requires you to tell it that you want pagination, this keeps all non-paginated queries optimized.
But you don’t need a custom query you can simply use this built-in option: https://a.cl.ly/d5ukmDmG – I just tested though and realized when choosing this query type its not letting you choose this option: https://a.cl.ly/yAuRwnGJ – I’ve patched that for the upcoming update.
- AJ
Thank you AJ! The pagination argument did not properly work for me, but I found out that I can enable the option “query related by author or staff” as soon as I enable the “staff” post type. I think this option should be independent of this. But it works for now! Great 
Hi,
That Query Type “query related by author or staff” was originally just “Related by Staff” and I changed it so it could support the post author but forgot to add the check around it so it only displays when staff is enabled. Thanks for the heads up, I will fix this in the upcoming 6.4 update so the option is always visible – sorry for the confusion!
- AJ
ps: You should be able to technically disable the Staff post type after you’ve selected the option and it will keep working.
Hi AJ
I have a page where the entire header and footer has disappeared! Neither have been disabled and I’m at a loss to explain it. Probably something simple.
This is a dev site and I’ve previously given you access via a support ticket, I can resend it if needed.
https://meliorclinics-k9qs.temp-dns.com/contact/Thanks
James
Hi James,
Your site needs an initial user/password to even look at it.
Here are 3 things to check:
1. The page template, make sure you aren’t using the Blank or Landing Page template which will do that.
2. Theme Settings Metabox – https://totalwptheme.com/docs/page-settings-metabox/
3. WPBakery added a function that handles this behavior, but it’s not ideal, so it’s disabled in the theme by default, though it can be enabled if needed. I made a video to show you: https://a.cl.ly/7KulYX6W (if it’s disabled on your site, you might want to try enabling it and checking the template, just in case there’s a WPBakery bug).
The reason I’m critical of this option is that plugins can’t reasonably account for how every theme works. The way WPBakery tries to create a blank page isn’t compatible with many themes, so the theme has to override that functionality just to make things work properly. This really falls under theme responsibilities, not something a plugin should attempt to handle. That’s why I have code that turns of this module when you first install the theme.
- AJ
Hi AJ
The reason I gave the URL without password is because you have looked at this recently via a support ticket, so I wondered if you still had access to it that way.
Anyway – turns out it was number 3 on your list! I must have accidentally clicked the Bakery Blank layout at some point. I’ve switched it back to WP Default and the header and footer are back! I don’t think I would have noticed that – thanks for suggesting it.
James
AJ, I have used the Total theme for over 50+ projects, but I have encountered an error that I do not understand.
With my newest site, when I enable js_composer ( the WP Bakery Page Builder, my site times out. If I disable the builder, my site is up. I would love if you could take a look and see if there is some kind of error causing this crash.
I have also purchased a second license of the Total theme and replaced the majority of the code, but I still get the same error.
I am not receiving this error: Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16384 bytes) in /code/wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php on line 531
Hi,
This is a common server error that happens when the default memory limit is too low – You’ll want to increase your server’s memory limit to 512MB. It looks like your server is set to 256MB but it ran out of memory anyway.
See here: https://totalwptheme.com/docs/increasing-memory-limit-to-php/
Now, on demos like this: https://totalwpthemedemo.com/pottery/ – I’m not only using WPBakery but also WooCommerce (which is quite large) and my memory is only set to 126MB – so perhaps you have a 3rd party plugin on your site consuming a lot of memory.
If you would like submit a private ticket – https://my.totalwptheme.com/ – with your site logins and I can install the Query Monitor plugin and help figure out what is consuming so much memory.
- AJ
Hi AJ, I hope you are well. I think there is a problem with the search icon under off-canvas menu element. It displays an input bar, I give the keywords but there is no way to move on and display results.
Update: It works in English, but not in Greek
Hi,
Sorry for the troubles. There is a known bug that has already been patched for the upcoming 6.4 update – https://totalwptheme.com/docs/upcoming-update-changelog/
“Fixed – Issue with modal search not working correctly for non-Latin characters when displaying live results.”
Now, last update I actually added an option that lets you turn off the Ajax and use a standard search. This setting is located under Customize > General Theme Options > Search Modal > Live Results
This will work like the search on the docs site (same link as the upcoming changelog if you want to try it out). I personally would recommend using this new option because most WordPress hosting platforms will not cache ajax results (for good reason) so the search function can be much slower and consume more resources then directing people to an actual search results page. Plus, you will have more control over the search results by sending users to an actual search page since you can create a custom template for search results. It also allows users to bookmark your search results if needed. The ajax function is nice, but for most sites I would say it’s probably not the best option of the two.
- AJ
Hi. After the last Woocommerce update, the store notice gets duplicated. I’ve read that it is a common issue for other themes too. Is there any temporary fix, until an updated version of the Total theme is released? Thanks.
Hi,
Thank you for reporting the issue, WooCommerce made some changes that require changing how the theme handles modifying the notice to insert it in the correct position.
I’ve fixed the issue for the upcoming update – https://totalwptheme.com/docs/upcoming-update-changelog/
Now, if you aren’t using the theme’s Toggle Bar element you may want to just disable the WooCommerce notice and use the theme’s Toggle Bar because it’s a bit more optimized and you have more control over it’s design. See the docs here: https://totalwptheme.com/docs/toggle-bar/ (the upcoming Total 6.4 update has some optimizations for the toggle bar as well)
- AJ
ps; If you are using a child theme you can add this to your child theme functions.php for an immediate fix as well:
remove_action( 'wp_body_open', 'woocommerce_demo_store' );
Basically WooCommerce used to insert the notice in the wp_footer hook but they updated their plugin to instead use the wp_body_open hook.
Thank you for your prompt reply AJ! I used the Top Bar feature, as a temporary workaround, and enabled it on the Home and the Shop pages only (as I had it disabled on all pages by default). I will try the Toggle Bar though, considering its better optimization.
Hi AJ, I have been looking for documentation on the Meta Query but am not sure I even need to use it. I’d just like to show a carousel of a specific category (and perhaps products within that category). I set Query Type to “Related by Taxonomy” and then Post Types = “product”. Then Taxonomy is “Product categories (product_cat)”.
But, I don’t see anywhere to do the “Query” like I see for other things.
So, I see “Meta Query” but am not sure what to use for “Key”—I tried “product_cat” and then ”=” and Value is “crab” (my category). Also tried “product_cat-crab” as the value. I tried “Char” as type and a few others but its not working.
I must be missing something as I know it has to be easier.
Thank you.
Hi,
The Meta Query is for getting posts based on meta data (custom fields) – categories are not meta, they are taxonomies.
If you just want to display a carousel for products from a specific category you would just use the Include Terms field: https://a.cl.ly/mXu4wbjv
In WordPress “terms” is a general word used to refer to items assigned to “taxonomies” such as categories and tags. If I were to name the field “Include Categories” then it’s not clear that you can also select from any taxonomy.
The “Related by Taxonomy” Query type is for displaying related posts to the current posts. This is intended for use with dynamic templates – https://totalwptheme.com/docs/related-items-dynamic-template/ – so if you create a custom template for your products you can display related products from the same category as the current product.
- AJ
ps: I decided to rename the fields in the next update so they are more obvious: https://a.cl.ly/YEuYLDd9
Thank You!!
Hi, I just received a critical vulnerability report from Wordfence about the WP Bakery Page Builder plugin – see here:
https://www.wordfence.com/threat-intel/vulnerabilities/id/a0489172-279c-4397-a937-bca4840a196f?source=pluginI can’t get support from wp-bakery as the plugin is bundled with Total. Any chance of an update? date of vulnerability – 26/06/25 my version is 8.4.1
Thanks
Hi – any news on this. Wondering if there was an update? Many thanks.
Hi,
I just replied to your ticket on the subject.
For anyone else wondering this is noted on the upcoming changelog: https://totalwptheme.com/docs/upcoming-update-changelog/ (which is a great resource to bookmark so you can see what changes are coming and also any important notices).
The vulnerability in WPBakery can only be exploited by users with author-level access and above. These users already have significant permissions, such as deleting content or uploading potentially harmful files. For this reason, it’s important to only assign these roles to users you fully trust.
Because the risk is low and limited to trusted users, the vulnerability didn’t require an immediate theme update. Since I’m currently wrapping up Total version 6.4, I’ve chosen to include the fix in that release. This way you’ll receive one consolidated update instead of two back-to-back.
- AJ
Can we get an updated version with WP Bakery 8.5, as there is a security vulnerability in lower versions?
Hi,
This is Aj the theme author.
The vulnerability in WPBakery can only be exploited by users with author-level access and above. These users already have significant permissions, such as deleting content or uploading potentially harmful files. For this reason, it’s important to only assign these roles to users you fully trust.
Because the risk is low and limited to trusted users, the vulnerability didn’t require an immediate theme update. Since I’m currently wrapping up Total version 6.4, I’ve chosen to include the fix in that release. This way you’ll receive one consolidated update instead of two back-to-back.
I’ve also mentioned this in the upcoming changelog – https://totalwptheme.com/docs/upcoming-update-changelog/ – which is a great page to bookmark so you can see what updates are coming and any important notices.
- AJ
To followup, I have updated the version of WPBakery that gets installed with the theme. So if you want to update WPBakery now, you can simply delete the plugin via the WP admin then go to Appearance > Install Plugins and re-install WPBakery. This will download and install version 8.5.
just updated woocommerce to version Version 9.9.5 – and getting the message – Your theme (Total Child) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce.
I Suspect this is the same issue as previously reported some while back and when you release the next version of total it will be fixed
and from you last response , this should not affect the website function
just thought I would mention
Hi,
This is AJ the theme author.
I am aware and the fix is in the next update. You are correct, it’s a tiny non-site breaking change which didn’t worry an immediate update.
Since customers do ask about this, I also wrote a doc here: https://totalwptheme.com/docs/woocommerce-outdated-templates/
- AJ
*Edited due to user being idiot
Well, if you need anything at all let me know!
Hi AJ, For some reason the featured image for blog entries or staff are not getting posted. Any idea what could it be? Thanks M
Hi,
Not sure what you mean by “not getting posted”. When you select it in the WP admin is it not staying selected? Or are they simply not showing up on the frontend?
Can you share a sample link with the issue?
I am assuming it used to work but it has stopped working for some reason?
- AJ
Yes, looks like there’s a plugin conflict. The image upload but it doesn’t get assigned. Seems to be an issue with eventon.
Hiya AJ. I hope all’s been well and that you had a nice weekend.
I just learned of the LLMS.txt file and after using a website to create the AI LLMS files for my websites, I noticed this at the beginning of each file:
A quick navigation link to bypass introductory content.The rest of the AI txt file looks okay.
Should I delete this line or is it proper to leave in place?
I’m not sure what causes it to be there and I don’t recall ever having activated a “skip to” on any of my websites. Or perhaps it’s always been present and I’m just now noticing it after creating the LLMS file?
Cheers!
Frank
Hi Frank,
Are you perhaps referring to an “llm.txt” file which is used for AI stuff?
Honestly, I’m not too familiar with this file type, but I would assume you can remove the skip to content text…
- AJ
Thanks AJ!
Yes, it is an llm file but it is being labelled as llms.txt for some reason. Maybe the “s” is from “Models” (Large Language Models). LOL!
I was just more curious on how that line is being generated as even the Yoast feature generates that line.
Anyhoot, cheers!
Frank
Hi AJ
This is a Post Types Unlimited question.
I would like to assign an order to them, so that when they are output in Cards they appear in an order of my choice. At present, it defaults to “most recent first” however I have a requirement to manually order them.
I couldn’t see if I could enable the “Order” setting seen by default on WP Pages.
I tried this plug in but found it quite buggy. https://wordpress.org/support/plugin/post-types-order/Thanks
James
Hi James,
You can enable the order option available for pages by enabling “Page Attributes” in the “Supports” option. Then whenever you display the items you will need to use Orderby > Menu Order (technically the order you see on pages is a legacy option added before the WordPress menu dashboard existed so menus only contained pages in the order based on this field).
If you prefer a plugin, I recommend this one: https://wordpress.org/plugins/post-types-order/ – this plugin, like most re-ordering plugins simply sets the “menu_order” on the posts, via a drag/drop and can automatically sort items on the front-end as well by hooking into pre_get_posts. Useful if you have many posts that need sorting.
I actually created my own post type ordering plugin that I use on the Total landing page. I think I will look into adding the function directly into the PTU (Post Types Unlimited) plugin, I think more often then not you need custom sorting for post types.
I’m actually updating PTU “soon” because I want to make it possible to add post types and taxonomies without registering them. This way, when using Total, if you have a plugin that registers a post type and/or taxonomies and you want to be able to access the theme’s PTU settings so you can easily modify the layouts and such you can.
Need to finish and test Total 6.4 then I’ll work on the PTU update
- AJ
Thanks AJ. I’ve enabled Attributes and it works.
Yeah, that was the plug in I mentioned, but I found it a bit confusing / buggy (?). For some reason, the pages in WP Admin loaded in date descending order, rather than the defaul apha. I don’t know why that happened and I couldn’t stop it happening – annoying. Anyway in this case there are only a handful of posts that actually need ordering, so will do manually.
Thanks !
hi! is there a simple way to show an users profile image (in the top bar for example, or anywhere) when logged in?
Hi,
You can use the theme’s Image element to display an avatar by changing the source to “Current User Avatar” – either using the page builder (WPBakery or Elementor) or as a shortcode: [vcex_image source=”user_avatar”]
But this is going to display for everyone.
If you are using WPBakery could create a new Dynamic Template (choose the “Part” Type) so you can use the theme’s “Access” option. Here is a basic example: https://a.cl.ly/rRuKegYr – you would obviously want to add more info as well as another row for logged out users.
And if you want to display the user name next to the avatar you can use the Heading element and set the Source to “Current User” – https://a.cl.ly/p9uyDZRe
Total doesn’t have many user functions because generally if you are creating a site with members you would be using some sort of membership plugin which will have the functions you need for this.
This shortcode could be useful as well: https://totalwptheme.com/docs/login-loggout-shortcode/
- AJ
So easy!!! This theme never stops amazing me. Didn’t know the “access” option! Thank you very much! How many more unknown (to me) options might be there… (and I read the changelog every time). Thanks for the amazing support.
Hi AJ, Hope you’re doing allright? Quick question… I just got a warning from WordFence about the WPBakery Page Builder <= 8.4.1 having a critical issue… https://www.wordfence.com/threat-intel/vulnerabilities/wordpress-plugins/js_composer/wpbakery-page-builder-841-authenticated-author-stored-cross-site-scripting-via-grid-builder
It advices to completely disable the plugin or update tot version 8.5.. This plugin was bundled and shipped with the theme when I bought it, and has been updated regularey . Will there be an update any time soon? Cause this causes to brake my site when I need to disable it for the moment.
PS: I remember it originally was also shipped with a plugin called js_composer. Now known as visual Composer. I was wondering why you abandoned this builder plugin as it seems to be the better choice at the moment? Where as WPBakery uses deprecated ways to code, slacking in usability and speed? https://visualcomposer.com/visual-composer-vs-wpbakery-review/
Thanks
Hi,
I will push out an update with the latest version of WPBakery asap, thank you for the heads up!
If you read the article you linked to, you can see that the user needs to have author access to your site in order to exploit the vulnerability. If you don’t have any authors on your site that you don’t trust then it’s not a concern (you should only add authors to your site that you trust).
Always look at the WordFence articles because more often then not, the vulnerability isn’t a huge concern. Like in this case, someone would need to hack your site and become and author first to even be able to exploit the WPBakery vulnerability.
The plugin is still in a folder named js_composer and it was actually renamed to “WPBakery Page Builder” – it was Visual Composer originally. Now what they call “Visual Composer” is a completely different plugin that works differently and I don’t like it at all, so I would never recommend it.
- AJ
ps: If you don’t like WPBakery, Total is now fully compatible with the free and popular Elementor plugin. Unfortunately there is no way to “convert” WPBakery into Elementor, so it would be a manual process if you wanted to swap over. You could always create a staging version of your site and mess around with Elementor to see if you like it more and want to switch over.
Thanks AJ … some time ago now I switched to DIVI for some other sites I’m running .. I’m now thinking about investigating to see if I want to switch to Elementor. but since DIVI hase upgraded with the Divi 5 version I’m not sure anymore, becouse it is a huge price difference since I have a lifetime licence from DIVI. Regards Rinni
Me again, did you push it trough alreay? Because if I login again I don’t see the update in the “install plugins” section under the “appearance” menu.
Hi Rinni,
No the update isn’t ready yet, once it’s live you should get an email from ThemeForest and it will be noted on the changelog: https://totalwptheme.com/docs/changelog/
But if your site is using DIVI and not the WPBakery Page Builder, then you shouldn’t have WPBakery enabled or installed. Unless for some reason you are using WPBakery on some pages and then Divi on others?
Also, if you are using DIVI, it’s working well for your site and you’ve already paid for a lifetime membership, I don’t see any reason to switch to something else.
- AJ
ps: I forgot to mention that if you are using DIVI and you aren’t using WPBakery anywhere after deleting it from your site you can then go to the Theme Panel and uncheck it so that the theme doesn’t bother you with installation/update notices. See the docs here: https://totalwptheme.com/docs/disable-bundled-plugin/
No no, stil using Total and WPbakery on this particular site. For other sites I switched to DIVI. Thanks for the info! I’m going to have a look Elementor light and decide where to go from there I think. It is more expensive but I read everywhere that it should be better and much faster, even compared to the new Divi 5 setup.
The base Elementor plugin is completely free – https://wordpress.org/plugins/elementor/ – and if you use it with Total you have access to a lot more options and functionality: https://totalwptheme.com/elementor-integration/
I still notice the plugin is not updated and I got another warnig from wordfence? Can you please fix this ASAP Thanks
For the record, i’m not using DIVI on this site. As I mentioned earlier just stil working with Total and WPBakery on this particular site. And it’s a webshop so I hop e you are able to do the update very soon so my site is secure! Many thanks in advance. Thanks
Hi,
Please log into your site and delete then re-install the WPBakery plugin as mentioned in the notice on the upcoming changelog: https://totalwptheme.com/docs/changelog/
If you had already done this once before, the reason you may be seeing the WordFence warning again is because there is a newer plugin version that has an additional patch. So, you will need to delete and re-install the plugin again if you want the immediate fix, or simply wait for the official theme update to be released this week.
If you look at the latest vulnerability reported by WordFence – https://www.wordfence.com/threat-intel/vulnerabilities/wordpress-plugins/js_composer-2/wpbakery-page-builder-for-wordpress-85-authenticated-contributor-stored-cross-site-scripting – you can see that the user that can exploit the vulnerability needs a role of contributor or higher, which is already a user role that can do all sorts of things. The real concern would be if your site has users with high permissions that you do not trust.
If there is ever a security vulnerability that is of great urgency I will of course release a theme update immediately. Otherwise, there is no point in my sending out such frequent theme updates that are simply going to annoy my customers.
- AJ
Hi AJ,
Apologies but I need to ask again about column spacing with WPBakery, I’m finding this really frustrating. Let’s say I have a two column row with just a text block in each. On desktop I’d like to increase the spacing between, and on mobile they’re flush against each other. So I change the inner column padding to 60px which looks better on desktop but on mobile I now have 30px padding on the left and right of the column meaning it doesn’t align with the site container.
I know I can use css framework classes to help with this but for me when it’s text + image the ‘full width columns on tablet’ option makes for better viewing on tablet than stacking at 768px. So with that meaning the columns stack at 959px I would need to use custom css to create nice spacing.
Am I missing something? There’s no way in the builder to increase column spacing on larger displays and not have that knock the vertical alignment out on smaller devices? I know this is baked into how column spacing on WPBakery works but it’s not ideal.
If I need to use custom css so be it, but this seems such a basic thing that it’s bizarre a builder as mature as WPBakery is incapable of this out the box.
Thanks, Paul.
I reset the theme back to default and now increasing the column retains vertical alignment on mobile. Do you know what would cause the padding to be added left/right when I changed the inner column gap initially?
Hi,
I’m not sure what you mean by “I now have 30px padding on the left and right of the column meaning it doesn’t align with the site container” – The way WPBakery column spacing works is by adding left/right padding to the columns (correct) but it also adds a negative left/right margin to the outer row to offset this spacing so that the content is always inline with the site. If your content is not inline either it’s because you added left/right margins to the row or there is custom CSS breaking things.
I also don’t understand what you mean by “There’s no way in the builder to increase column spacing on larger displays and not have that knock the vertical alignment out on smaller devices?” – When you increase the column spacing it will add more space between columns (aka left/right padding) and increase the default margin below columns so when they stack it’s the same spacing. It shouldn’t “knock the vertical alignment out” (not sure what that means).’
I see your new comment…So to recap, increasing the columns spacing does change the left/right padding of the columns. This is how the spacing works.
It’s always best if you can share an example of what you are doing so I can provide the best feedback possible.
For example, depending what you are doing – the Grid or Flex Container element may be helpful because it will allow you to enter a custom “Gap” (spacing) and you can use responsive units (vw, vmin, vmax) or CSS functions (clamp/calc).
Also when working with text and images, one “trick” I’ve been using when creating demos is adding a side margin to the image to increase the space via theme utility classes. Example: https://a.cl.ly/OAu1DlbO
Another thing to mention is for some layouts you could use theme elements instead of rows, for example the Feature Box can be used for left/right content – https://totalwptheme.com/elements/feature-boxes/
I agree that the way WPBakery rows works by using left/right padding on rows and a negative margin on the row to offset the padding isn’t ideal. But there isn’t anything I can do about that and I don’t know if WPBakery would change how things work because it could cause a lot of issues with customers updating their sites.
WPBakery rows use percentages for the widths and there are responsive options in the columns that allows you to change column widths and different breakpoints. For this reason it’s impossible for WPBakery to change to use CSS grids for rows. And due to CSS limitations it’s impossible to switch to a flexbox model using “Gap” because the gap is not considered in the browser’s calculation when using percentage based columns 
- AJ
ps: For future sites or if you want to re-do your site at some point, you could consider using Elementor instead of WPBakery which is fully supported by Total. It has some drawbacks (I think WPBakery is faster, easier and slimmer) but it does offer a lot more flexibility when it comes to spacing and controlling the design responsively. Unfortunately there is no way to “convert” WPBakery into Elementor, so it would be a manual process. You could always create a staging version of your site and mess around with the builder to see if you like it more.
Here’s an example – https://total.style960.com
Second and third rows here are identical except for the column count. Both rows have an inner column gap of 60px, but the second row does not align on mobile. The third row also with the same inner column gap does align on mobile. What’s the difference between the two because it’s not custom css?
I looked at Elementor last week but I don’t like the UI, I find WPBakery (at least the version that comes with Total) much easier and snappier to use.
Hi,
What do you mean by “does not align on mobile”?
All the rows look exactly the same to me: https://a.cl.ly/8LuEOvQB
Now, one thing I do see on your site is that you are using the “Remove Bottom Column Margin” on the row, then you are adding extra classes (s960-fwc-two and s960-fwc-three) to manually add a top margin to the second and 3rd columns at the 959px breakpoint via custom CSS.
This works when you have the “Full-Width Columns On Tablets” setting enabled (which you do) – but if you disable that option you will have issues because the default stacking breakpoint in wpbakery is 768px. So from 768px – 959px the last 2 columns will have an extra margin at the top if you disable “Full-Width Columns On Tablets” due to your custom classes and CSS.
Perhaps that’s what you are referring to?
- AJ
ps: I agree with your thoughts on Elementor.
Hi AJ,
I’ve put a screenshot on the same page, issue starts around 550px.
I’m deliberately testing full width columns because some content is too narrow (in my opinion) at the default 768px – i.e text + image at 810px on iPad portrait orientation. I’ll not use those classes where I do use that breakpoint though.
Thanks, Paul.
This happens when the row stretch is set to ‘stretch row.’ Check the 3rd row where the row stretch is left at default and the alignment on mobile is correct.
Hi,
Oh, ok I see the issue now, it’s very easy to see when swapping off the custom gutter: https://a.cl.ly/p9uyqAGZ
This is going to be pretty dam tricky to fix and I’m trying to think of a good solution so I can implement it in the next update.
Essentially when you enable full width, the theme uses advanced CSS to stretch the row so it renders nicely (WPBakery uses javascript instead). This is the SASS used in development if you want to see how that works: https://gist.github.com/wpexplorer/e120f665c6bf18a28117757202de9a37
What’s happening is, if the selected spacing on the row is greater than the space between the edge and the window and the content it will push out. Default WPBakery spacing is 30px so there is only 15px on either side which for most screens will be smaller than the space between the edge of the window and the content – https://a.cl.ly/wbudE6wv – if the padding is larger than this space it will shift the content over.
And you are correct, it’s only an issue when using the Stretched row because when the row is stretched the default left/right negative margin on the row which is used for offsetting the padding is removed.
The only fix I can think of is to include the gap in the CSS calculation and have the stretch row overflow on the sides. I will see if I can come up with a good solution. Otherwise the “fix” would be to insert a section first and stretch the section, then insert your row with columns inside it.
Now, most the time, you aren’t going to have stretched rows (aka rows with backgrounds as it’s the only reason to stretch it) that also only have columns inside. Can you think of any examples? Usually a stretched row will have a single column or multiple rows of content, in which case you would be inserting a Section a section first and stretching it.
And of course, don’t ever stretch rows unless you really need them to be stretched…
Thank you for bringing this to my attention!
- AJ
Ok, so if I were to compensate for the padding by making the stretched row extend outside of the viewport by an equal amount as the inner gap, what will happen is any background inside the element would get clipped. I believe this would be a bigger issue.
Alternative I could come up with some CSS that removes the left/right padding from columns automatically if they are stacked or 100% wide. The problem with doing that is it will now cause issues with columns that have backgrounds. If a customer had added a background to a column and now the left/right padding is stripped it will look terrible.
I think the best solution if you need a row with columns that is also stretched is to create a section first and stretch that section. This isn’t a super common layout so I don’t think it’s a big deal.
I’m not sure what the best way to communicate this to the end user. Perhaps updating the description on the stretched row field. But since WPBakery moved the descriptions inside a tooltip, I’m not sure how often customers would read it.
If you have any good ideas or other solutions I’d love to hear them!
- AJ
ps: If you have your own WPBakery license, maybe you can go over to their plugin page and bug them about adding a new “Modern Row” that uses a CSS grid
Hi AJ,
I understand now why this issue exists. Although to be honest for me if the workaround is as simple as using a section to contain the row then I don’t really see it as an issue at all.
I think maybe add an article to the documentation and include a notice if possible on the changelog are good options.
I’m afraid I don’t have a WPBakery license – I don’t think I would use the plugin at all if it wasn’t for Total. How it’s implemented in Total is the difference maker.
Appreciate your help as always with this.
Thanks, Paul.
Hi AJ,
My client has requested a popup which will ask visitors to confirm “I am a healthcare professional” when viewing some of the site’s pages (not all of them). The only popup plugins I can find are for age verification, cookie consent, general notifications etc. and don’t seem to be suitable for my needs. Obviously, the popup would need to appear only once per session, so the visitor can browse the relevant pages without being asked more than once.
Please can you advise me if you happen to know where I should look for this?
Thanks a lot,
Charles
Hi Charles,
I don’t have any recommendations for a plugin to do this. It may be something best done with custom code.
You could create your own popup with a little custom code in a child theme or custom plugin. If you do, Total has built-in JS for creating dialog windows, see here: https://totalwptheme.com/docs/modal-dialogs-html
If you want I am available for hire and I can code this for you, would probably take about 1-2hr and I charge $75hr. Email me at wpexplorer [at] gmail dot com if interested.
- AJ
Hi AJ
Using a shortcode for a theme button [vcex_button]
https://totalwptheme.com/docs/shortcodes-list/How do I change the button text? It’s defaulting to “Button text” and I can’t see a parameter that changes it.
Thanks
James
Hi James,
The button element uses the inner content so it can support html, so you would do it like this:
[vcex_button]Button Text Here[/vcex_button]
- AJ
