- This topic has 14 replies, 3 voices, and was last updated 8 years ago by
.
Hello,
Is there any way to add the visual page builder to Portfolio Posts? I would like to include longer more nuanced descriptions of the project, its milestones, the process, etc. And while the gallery is nice for showing multiple images, the ability to build a full content area would be ideal.
-Josh
Further confounding this problem. When I DID manage to turn on visual page builder for portfolio project, the text is way out of alignment with the content of the page.
The first 2 attached images. one at normal zoom, and another with chrome zoomed way out, so you can see how offset this is.
Even if I change to a gallery slider layout, the additional items push the content down then overlap.
Hi @cmurockstar,
Thank you for your question.
Could you please share me the page URL from your site where it is not displaying correctly so that i can troubleshoot it?
Best regards,
Shufflehound teamHere is another example, this time with “default” layout instead of “gallery slider”
http://hailpern.net/joshua2017/project/vintage-typewriter-2/
You can try resolving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.single-fw-portfolio .sh-section-container.container { width: 100% !important; } .single-fw-portfolio .fw-page-builder-content > section.sh-section { padding-top: 0; }Thanks Shufflehound Support! However, while this works great for great for gallery slider, for the “Default” layout it ends up creating a very narrow column:
http://hailpern.net/joshua2017/project/vintage-typewriter-2/
Any other suggestions for this type of layout (aside from “dont use it :P). I would be more than happy if we only had the title and “custom fields” to the right of the image, and then the entire content goes under it. That would be rockn’
I would be more than happy if we only had the title and “custom fields” to the right of the image, and then the entire content goes under it. That would be rockn’
You have to develop complex custom code to achieve this which is beyond the scope os support that we provide here https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
You can instead display them below each other using the below CSS code.
.single-fw-portfolio .sh-portfolio-single-default .sh-portfolio-single-right, .single-fw-portfolio .sh-portfolio-single-default .sh-portfolio-single-left { width: 100%; }Thanks – i think i ended up fixing it as such.
Adding custom CSS:
.sh-page-layout-default .sh-portfolio-single-description {
opacity: 0;
transition:opacity 0.6s ease-in-out;
}
.sh-page-layout-default .sh-portfolio-single-description.sh-portfolio-single-description-paint{
opacity: 1;
}and then adding the following custom JS
var parent = jQuery(“.sh-portfolio-single-default”);
if(parent.length > 0){
var child = parent.find(“.sh-portfolio-single-description”);
child.remove();
parent.append(child);
setTimeout( function(){
child.addClass(“sh-portfolio-single-description-paint”);
});
}You are most welcome here 🙂
Awesome great to see you got that fixed by developing custom javascript code but keep an eye on it as it may break if any javascript error occurs on your site.
Hi everyone,
I found this topic on the forum since i am also interested in having the Visual builder on my Portfolio projects.
However i couldn’t find the css code related to it. I would be really grateful if you could share it with me and the community.
Than you very much
Andy
Solution for this topic
Hi Andy,
I found this topic on the forum since i am also interested in having the Visual builder on my Portfolio projects.
You can enable the Visual builder on your Portfolio project by enabling the support for it from Page builder settings as shown in the attached screenshot.
Best regards,
Shufflehound teamSolution for this topic
Hi Andy – also when you do this, it is quite possible your layouts will be somewhat wonky. I had to add both custom CSS and JS to fix this. The CSS i used the built-in custom CSS in the theme. the built in JS for the theme didn’t work, so i downloaded a plugin that let me add JS site wide.
CSS
.single-fw-portfolio .sh-section-container.container {
width: 100% !important;
}
.single-fw-portfolio .fw-page-builder-content > section.sh-section {
padding-top: 0;
}.sh-portfolio-single-default .sh-portfolio-single-description {
opacity: 0;
transition:opacity 0.6s ease-in-out;
}
.sh-page-layout-default .sh-portfolio-single-description.sh-portfolio-single-description-paint{
opacity: 1;
}JAVASCRIPT
var parent = jQuery(“.sh-portfolio-single-default”);
if(parent.length > 0){
var child = parent.find(“.sh-portfolio-single-description”);
child.remove();
parent.append(child);
setTimeout( function(){
child.addClass(“sh-portfolio-single-description-paint”);
});
}@Andy You are always welcome here 🙂
