Layout Blog, Desktop and Mobile

Support
#1

Hi all

I’m sure you can help me with these layout issues.
for the blog layout I’m using WPBakery: Post Grid
Site Stack: Icon
Site URL: https://new.pibella.com/pibella-blog/ | (on progress | closed | IP on whitelist possible)

1)

2)
single post (here I’m not using WPBakery nor Cornerstone)

3)

4)

5)

many thanks for your help
ben

#2

Hi there,

Thanks for writing in.

Since this uses a layout coming from the plugin, then it may get more complex. The CSS is from WP bakery and generated, and overriding may or may not work.

For the meantime, please provide your login credentials as I can’t check it, it’s behind a coming soon page.

Have you tried essential grid? It will be a better option for replacing masonry type index page with additional filters (like your screenshot).

Thanks!

#3

Hi Rad
I wouldn’t mind to have the layout done with cornerstene as well, though I could not find any solution, perhaps you have an idea.

the side is not online yet, you can play around:
https://new.pibella.com/post-grid-testing/

could not find “essentiel grid” on Itelm Design)-:

any way, many thanks for your support
ben

#4

Hi there,

Manually creating it through cornerstone is more harder, the best is using Essential Grid and insert it in cornerstone builder. please check this https://theme.co/apex/forum/t/extension-essential-grid/68

Then you can use the skin builder feature from EG to create your desired layout for your items like from here https://www.themepunch.com/essgrid-doc/item-skin-editor/. And there, you can add many layers as you want, like excerpts. It will be hard to follow on the first try, it’s worth try than re-creating it over and over.

You could also control how many columns to display per device in your grid’s setting and it will respond well.

Thanks!

#5

Hi Rad
I tried the essentiel grid but could not get the desired layout.
do you think you coul provide me on my issues 1) to 5) with css (without 3)), so I would go with the layout I have so far.
thnks alot, ben

#6

Hi Ben,

Please try this CSS:

.vc_btn3-left a {
    padding: 8px 10px !important;
    font-size: 12px !important;
}

.single .entry-title:before {
    content: url(URL_OF_THE_IMAGE);
}

@media (max-width: 480px) {
    .single-post .entry-featured, 
    .single-post .entry-featured img {
        max-height: 300px;
        width: auto;
        float: left;
    }

    .single-post .entry-featured img {
        max-height: 280px;
    }

    .single-post .entry-featured {
        margin-right: 15px;
        margin-bottom: 15px;
    }

    .vc_non_responsive .vc_row .vc_col-sm-4 {
        width: 100% !important;
    }     
}

As for adding a Previous and Next button to the single posts, please try to add this code in the functions.php file of the child theme:

Kindly temporarily disable the plugin that disables the right click functionality on your site next time you will seek for CSS suggestions to us because it takes a lot of effort to inspect the elements for CSS when right clicking is disabled on the page.

Item #3 requires further customization which goes beyond the scope of our support. You might want to get in touch with a developer to do this if you’re not comfortable in making the changes.

Hope this helps.

#7

Hey Rad thats awesome, many thanks.
just the previous/next button on the singel post don’t shop up …

right click: I’m sorry about this, somehow I managed to disapble it and now I can’t remember where I’ve done it - you please help me )-:

best regards, ben

#8

… I say thanks to Jade!

#9

Hi there,

Please activate your child theme first. But please backup your site’s first as that process may reset your menu and widgets (different theme folder name).

Thanks!

#10

Yes I remember this problem, you know are menue and widgets also backuped with the x-theme JSON file?

#11

http://bluehuus.ch/x/pagination.png
do think you cank help me layouting the pagination, if possible with a button?

thnks and best regards, ben

#12

Hey There,

Before activating your Child theme, please go to X > Overview > Customizer Manager. Download the XCS files as it contains all your customizer settings including the menu assignments and widgets. After you downloaded it, you may activate the child theme and then go to X > Overview > Customizer Manager again and import the XCS file to make sure that you have all the previous X settings. To know more about customizer manager, please check this out:

For the post navigation, do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.nav-links {
    padding: 15px;
    margin-bottom: 20px;
}
.nav-links .nav-previous {
    float: left;
}

.nav-links .nav-next {
    float: right;
}

.nav-links a {
    color: #fff;
    background-color: #118005;
    padding: 5px 15px;
    border-radius: 4px;
}

Hope this helps. Kindly let us know.

1 Like
#13

Great x-support! Thanks alot, ben

#14

Glad to hear we managed to help!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.