Using Elementor for private pages layout

Hello,

Sure. This is possible by using a code snippet. WP Customer Area, by default, resets CSS properties for each parent HTML node from your theme or any third party plugin, in order to handle a smooth integration of the private area without unexpected issues. Thus, allowing to prevent the theme or any other asset to affect the styling of the private area.

By using the below code snippet, you’ll be able to integrate any other third party plugin into the area. However, this might create graphical issues from CSS conflicts that should be manually fixed, depending on your theme or any external CSS stylesheet.

/**
 * Disable CUAR CSS resets in order to allow third-party plugins integration
 */
public function wpca_disable_cuar_css_resets()
{
    return true;
}
add_filter('cuar/private-content/view/disable-css-resets', 'wpca_disable_cuar_css_resets');

Note: Keep in mind that external plugins such as page builders use their own way to handle uploaded files (for instance). Any file uploaded through those plugins won’t follow the upload procedure of private files from WP Customer Area, but will, instead, be stored in the wp-content/uploads directory. It’s up to you to care about the fact those folders are unreachable threw their direct URLs if you want to keep them private.

For better management, you should paste any WPCA code snippet into a custom plugin.

Best regards.

• This reply was modified 1 year, 10 months ago by Thomas.

Hi,

thank you for the instructions.

I followed the steps and added the code snippet, but it breaks my site if I insert it as is. Instead it seems to work if I remove “public” before the function.

After doing this I tried adding some Elementor content on a private page. I added a gallery widget with 5 columns but if I visit the page the images are displayed in rows (one below each other), so something with the style is not working. Can you help me figure out why this happens?

Another question: when talking about private files and their privacy, do you refer to the files uploaded in Private Area > Files (I don’t see any Elementor tools here) or to those inserted in the pages managed through Elementor (for example the images of a gallery, as the one I’m trying to set up above)?

Hi,

Oh, sorry, you’re right, that was a mistake. I just copied that code snippet from a class but “public” shouldn’t be there. The correct code snippet is the following :

/**
 * Disable CUAR CSS resets in order to allow third-party plugins integration
 */
function wpca_disable_cuar_css_resets()
{
    return true;
}
add_filter('cuar/private-content/view/disable-css-resets', 'wpca_disable_cuar_css_resets');

if I visit the page the images are displayed in rows (one below each other), so something with the style is not working. Can you help me figure out why this happens?

Unfortunately, integrating third-party plugins into the private area is a personal customization and is going far beyond our support scope. As soon as you insert a plugin component into a theme, your theme might affect the component. In this case, the plugin component is inserted into our area, which is inserted into the theme. Integrating such components is just a matter of un-conflicting some CSS rules. I would recommend asking for help from a CSS development community, or best, hiring a developer.

Another question: when talking about private files and their privacy, do you refer to the files uploaded in Private Area > Files (I don’t see any Elementor tools here)

Wait… Are you actually trying to use Elementor to edit WPCA’s pages located in WP-admin > Pages ? I thought you were trying to add some Elementor components into WP-admin > Private Area > Private Files / Private Pages. This is not the same at all. Pages should be kept as they are. They include a shortcode, which loads the area, and you shouldn’t add any other content to it, or that may break the entire layout of the area. If you don’t see any Elementor tool in the Private Files section, it’s just because you first need to allow this custom post type in Elementor’s settings.
However, Elementor’s theme builder works fine. Else, to edit any section of the private area, we recommend to use our template system.

Could you please provide 2 screenshots :

• One screenshot of the admin edit post screen showing the page you are trying to customize
• One screenshot of the actual rendering on the frontend of your site

Please, hide any sensitive data, such as the name of your site or anything else, upload those screenshots on a public image sharing site, and post the links there. I’ll then let you know about the best way to achieve what you’re trying to do.

Best regards.

Hi Thomas,

sorry for my late reply.

Here are the screenshots you required:

Admin edit post screen showing the page I’m trying to customize:

and the Elementor’s editor inside the page:

As you can see I’m trying to insert a photo gallery that has 5 columns, but this is the rendering on the frontend:

I made this simple test just to see what can be done with Elementor inside a private page. I don’t need it for the private files, so I didn’t allow this custom post type in Elementor’s settings. Maybe this clarifies your doubt about where I want to use Elementor.

In WP Customer Settings I left active the option for the Skin “Includes the WP Customer Area skin to provide a stylesheet for the plugin”. If I disable it, the Elementor layout/style works fine on the frontend but everything else (like the private area menu) is unstyled, as you can see in this screenshot:

I’m looking for a way to mantain some styling for the elements like the private area menu and be able to add my style/structure to the page content.

An acceptable solution would also be to leave the default skin disabled (so that Elementor widgets will work as expected) and write my own CSS for the menu, but I’m wondering where I can retrieve the original CSS rules in order to restore them without having to write them again from scratch.

Hope this makes sense.

I look forward for your reply.

• This reply was modified 1 year, 10 months ago by valekichia.
• This reply was modified 1 year, 10 months ago by valekichia.

Hi,

Thank you for the additional information.

I’ll try to locally reproduce your issue.

In the meantime, you shoud really NOT disable the option “Includes the WP Customer Area skin to provide a stylesheet for the plugin” except if you’re able to rewrite all of them (and have time for that ^^). This will break many parts of the plugin, unless you rewrite them all by yourself. Disabling this option is actually “developer-oriented”, and unless you rewrite them all, the private area will not work as expected (not only the menu, but also everything else). Disabling this option is like : “unload half of the files required to let the plugin run smoothly”.

The correct way to achieve what you’re trying to do is to use the given code snippet. However, there might be an existing conflict preventing this Elementor component to properly work. I’ll give it a try and let you know in a few days.

Thank you for your patience.

Regards.

Hi,

thank you for your advise about the skin option. Given your explanation I will not disable it.

I await your updates about the issue with Elementor.

Thank you for your help!

Hello,

Where did you added the code snippet? Code snippets need to be added into a custom plugin, not into your theme functions.php file.

Also, I did some further tests, and I noticed that while in Elementor’s preview mode, the private area was not loaded. It makes it very difficult to preview and style, especially if you are using skins from the Design Extras add-on.

So, you might probably better using this code snippet instead :

/**
 * Allows the private area to be shown in Elementor preview pages
 *
 * @return void
 */
function wpca_elementor_preview_compatibility()
{
	$pa_addon = cuar_addon('customer-pages');
	remove_filter('the_content', [&$pa_addon, 'define_main_content_filter'], 9998);
	add_filter('the_content', [&$pa_addon, 'define_main_content_filter'], 9999999);
	add_action('wp_head', function(){
		echo '<style>#cuar-js-content-cols-sizer > .cuar-single-post-content {position: relative!important;} </style>';
	});
}

add_action('elementor/preview/init', 'wpca_elementor_preview_compatibility');

/**
 * Disable CUAR CSS resets in order to allow third-party plugins integration
 */
function wpca_disable_cuar_css_resets()
{
	return true;
}

add_filter('cuar/private-content/view/disable-css-resets', 'wpca_disable_cuar_css_resets');

See it in action :

Best regards.

Also,

Another question: when talking about private files and their privacy, do you refer to the files uploaded in Private Area > Files (I don’t see any Elementor tools here) or to those inserted in the pages managed through Elementor (for example the images of a gallery, as the one I’m trying to set up above)?

I missed that part a bit, sorry.

When I talk about the privacy about WP Customer Area’s files, this is all related to how you should secure your upload folder. This is a required step you shouldn’t avoid, because, by moving the upload folder outside your webroot folder, it prevents any files to be directly accessed from their direct URLs, which is a security measure.

By using any page builder’s feature, you’ll need to know that the files uploaded will be stored in the wp-content/uploads directory, which will, contrary to WPCA’s private files, be reachable through HTTP. Even if you post that gallery’s pictures in a private post, anyone able to catch direct URLs to those files will be able to download them.

That in my mind, it’s up to you to take care about the fact that any file uploaded threw Elementor (for instance in a gallery) should not be sensitive. If you want to be sure that those files stay unreachable from their direct URL, use, instead, the upload feature from WP Customer Area (dropzone inside private files’ posts).

I hope this actually answer your question.

About the Elementor compatibility : We’re actually releasing a new version of the plugin and its add-ons. Thanks to your report. We’ll probably consider creating a new Elementor compatibility add-on for that release to allow users to avoid those issues.

Best regards.

Hi!

I added the code snippet in a custom plugin as described in your instructions and updated it with the last snippet.

Unfortunately my image gallery still doesn’t show up in rows, both in frontend and backend.

Any ideas why this happens?

Hi,

Could you please :

• Clear your browser cache (Hit CTRL + F5 many times)
• Try the WPCA-Twenty-Twelve theme for testing purposes?
• Please take a screenshot like the one below. Open the dev-tools, styles panel, click the arrow, then click onto a thumbnail, then click an element in the list named dl class=”gallery-item

Also, you’ll probably get many CSS integration issues (notice that, on this screenshot, the margins around the thumbnails are not the same than those in my previous screenshot). This is because I manually removed them. CSS Integration issues, like margins, are quite commons when you integrate a plugin into another, himself integrated into a theme, himself integrated into a browser with extensions that might also inject some CSS rules. Unfortunately, these ones needs to be manually fixed, depending on your use case. There is no magic way to let everything work in one go without custom CSS tweaks there and there.

But I admit, the columns should at least work! There’s another issue in your case ??

Let me know about the results from the steps above.

Regards.

Hi!

Here are my answers per topic.

Privacy of WP Customer Area’s files.

So if my understanding is correct the instructions at your link won’t apply if using Elementor’s upload system. You suggest to use the dropzone inside private files’ posts, but to me it’s not clear how to use the files uploaded this way inside Elementor. How do I retrieve them / their URL?

Gallery inside Elementor and CSS integration issues.

I totally understand that some CSS tweaking is necessary to handle this nested structure. Aside from that I followed your instructions and this is the result:

After changing the theme the images do display columns, except for the last one! The same thing happens on frontend.

I found a “random” <br> tag before the last <dl> (in the next screenshot, see the blue line in the code inspector).

Let me know what do you think about it!

Regards

Hi!

Do you have any news?

Thank you

Hi @valekichia

We are currently releasing the new version but this might take a few days. The release is actually ready to publish but we still have a few documentations to write and translate, but the release will include a new Elementor Compatbility add-on which should solve your issues.

Thank you for your patience.

Best regards.

Hi Thomas,

that’s great news!

I look forward the new release and thank you again for your kind support! ??

Hello,

I am sorry for the delay.

We have a good news for you! We created a new free Elementor Compatibility add-on which actually fix of few issues. That’s not probably not all of them, but with this add-on activated, you’ll be able to insert components from Elementor into your private contents, out of the box.

Please note that you’ll need the WP Customer Area version 8.2.0 (updated last week), and any others add-ons updated, in order to prevent any error.

Do not hesitate to report any issue you’ll face using it.

Regards.

• This reply was modified 1 year, 8 months ago by Thomas.
• This reply was modified 1 year, 8 months ago by Thomas.