Using Visual Page Builder in Portfolio Post

Home Forums Jevelin Theme Using Visual Page Builder in Portfolio Post

Home Forums Jevelin Theme Using Visual Page Builder in Portfolio Post

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    RESOLVED Posts
  • 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.

    Attachments:
    You must be logged in to view attached files.

    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 team

    Here is the example:

     

    Notebook design

    Here is another example, this time with “default” layout instead of “gallery slider”

     

    Notebook design 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:

     

    Notebook design 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’

    Attachments:
    You must be logged in to view attached files.

    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 team

    Attachments:
    You must be logged in to view attached files.

    Solution 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”);
    });
    }

    Thank you so much cmurockstar and Shufflesound!

    All nice and working!

     

    Andy

    @Andy You are always welcome here 🙂

Viewing 15 posts - 1 through 15 (of 15 total)