Front Page Modification

Home Forums Modern Front Page Modification

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19039

    rusher7
    Participant

    Front Page Modification

    Resolved

    Hi,

    You might have seen my tweet asking for the same thing, but I’m looking to modify the front page so that it looks like this:
    goal

    In mobile, it would behave like this:
    sda
    Where the sidebar in the middle wraps under the category posts.

    When I have tried to accomplish this with beaver builder, I had to remove the featured image on the frontpage and then encountered huge margins on either side of the widget/row areas, making the accomplishment of this without too much wasted space an issue on either side. Another issue is the title of the page getting in the way, which I used a title deleting plugin to resolve (but I think caused issues with the featured post slider).

    I actually enjoy the post displays for portfolios, etc. and I’d like to use those grids to display posts for different categories if it is at all possible.

    I also tried using the page with sidebar as the front page, but that disabled the latest post display w/ the theme.

    That gives me an idea: maybe if I can just convert the ‘page with a sidebar’ into a compatible front page, that displays the recent posts and featured, that would work.

    Ideally, the display boxes for most recent category posts would be stylized along with the theme.

    I’ve also looked at your other themes to see if they might be a better fit. If you think they would be, let me know. If one of your premium ones are more suitable, maybe I can make-do with this one until I can afford it.

    #19042

    Oliver Juhas
    Keymaster

    Hi rusher7,

    Please understand that I can only provide tips for theme modifications – please read terms of service and theme documentation. Your layout would require quite some coding and as such I can only suggest hiring someone that can help you with such advanced theme modification.

    You certainly can not achieve such layout with free Beaver Builder Lite plugin due to it does not contain any module to display your meal prep posts.

    But here is an example of what I was able to build using Beaver Builder Pro with some additional custom CSS (that you can actually put directly into Beaver Builder layout CSS):

    /* Stretching the page content: */
    .fl-builder .site-main .entry-content-container {
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    /* Hiding the page title accessibly: */
    .fl-builder .site-main .entry-header {
        position: absolute !important;
    	width: 1px;
    	height: 1px;
    	line-height: 1px;
    	word-wrap: normal !important;
    	-webkit-clip-path: inset(50%);
    	clip-path: inset(50%);
    	clip: rect(1px, 1px, 1px, 1px);
    	overflow: hidden;
    }
    
    /* ...or hide the title inaccessibly when providing yoour own: */
    .fl-builder .site-main .entry-header {
    	display: none;
    }

    Result:

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 3 months, 1 week ago by  Oliver Juhas. Reason: Editing the code for all Beaver Builder layouts, not just "Front page" template
    #19043

    Oliver Juhas
    Keymaster

    After reading your tweet, here is solution to stretch page content for Elementor page builder with custom CSS:

    /* Stretching the page content: */
    .elementor-page .site-main .entry-content-container {
    	max-width: none;
    	padding: 0;
    	margin: 0;
    }
    
    /* Hiding the page title accessibly: */
    .elementor-page .site-main .entry-header {
    	position: absolute !important;
    	width: 1px;
    	height: 1px;
    	line-height: 1px;
    	word-wrap: normal !important;
    	-webkit-clip-path: inset(50%);
    	clip-path: inset(50%);
    	clip: rect(1px, 1px, 1px, 1px);
    	overflow: hidden;
    }
    
    /* ...or hide the title inaccessibly when providing yoour own: */
    .elementor-page .site-main .entry-header {
    	display: none;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #19045

    rusher7
    Participant

    Hey Oliver,

    That looks pretty darn good! Did you just add the CSS and then beaver build the with a 2 column layout that gives the left column more width than the right column? If so, then I only need to get a beaver widget somewhere third-party to show my latest category posts how I would like.

    That looks super close to what I am going for, so I am curious how you accomplished it. At the very least it would be better than my current make-do solution of just the title acting as a front-page excerpt.

    I will investigate the Elementor one, too. :) If you know anyway to have the same effect on those margins and title without the premium price of CSS addition in beaver/elementor, let me know.

    It looks like you added 3 rows, each row with 3 post columns, maybe using the post widget you made in your Amplifier plugin, on the default front page template. Unless the left side is one big widget grid. If not on the front page template, it looks like you somehow made the page with sidebar template compatible with being set to the front page without killing the header.

    Thanks a lot for the help/tips.

    • This reply was modified 3 months, 1 week ago by  rusher7.
    • This reply was modified 3 months, 1 week ago by  rusher7.
    • This reply was modified 3 months, 1 week ago by  rusher7.
    #19049

    Oliver Juhas
    Keymaster

    Hi rusher7,

    Did you just add the CSS and then beaver build the with a 2 column layout that gives the left column more width than the right column?

    Yes, the custom CSS does the whole trick to create a layout you aim for. You can then build any layout you want with Beaver Builder or with Elementor (I’ve provided the CSS code for Elementor too).

    If you know anyway to have the same effect on those margins and title without the premium price of CSS addition in beaver/elementor, let me know.

    For the custom CSS addition you don’t need to purchase Beaver Builder or Elementor. Just put the CSS code globally into your WordPress according to instructions in “YOU MIGHT BE INTERESTED…” section in my replies.

    The reason why you would need to purchase Beaver Builder Pro or Elementor Pro is that they contain a dedicated page builder module to display posts. If you decide to purchase one of those, please use the links I’ve provided here – they are affiliate links, so, that way I will get a share of the purchase (price for you is the same still) and you will support also me :)

    It looks like you added 3 rows, each row with 3 post columns, maybe using the widgets you made in your Amplifier plugin on the default front page.

    Actually, I have added only 1 row, with wide column for content and narrow column for sidebar. Then I’ve added a Beaver Builder Pro “Posts” module, set it way I wanted and duplicated it 2 more times…

    Modern theme is not compatible with WebMan Amplifier plugin, sorry.

    But I guess you could search for a plugin that will display posts in columns and than use that one within your Beaver Builder/Elementor layout. That way you don’t have to purchase pro versions of page builder plugins.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19050

    Oliver Juhas
    Keymaster

    …it looks like you somehow made the page with sidebar template compatible with being set to the front page without killing the header.

    No, my example is using a “Front page” page template.

    Please, try/test yourself – that way you will get more feeling of how it works and what you can do with a page builder plugin. Just apply the custom CSS and play with your layouts ;)

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.