Home Forums Showcase New Website for Presbyterian Church

This topic contains 18 replies, has 3 voices, and was last updated by  Weaver 6 months, 1 week ago.

Viewing 16 posts - 1 through 16 (of 19 total)
  • Author
    Posts
  • #54842

    Maureen
    Participant

    Hi everyone. I just finished this new website for a local church. Built with Weaver Xtreme and Xtreme Plus and Elementor.

    http://www.pcbarrington.org/

    Feedback always welcome.

    #54843

    scrambler
    Moderator

    Nice an clean looking 🙂

    #54844

    Weaver
    Keymaster

    Looks nice. I see you created the our ministry team page using elementor.

    That web design pattern is one I’ve recently recognized, and have added as a Gutenberg block in a plugin.

    I just used my new block to essentially create your page almost exactly. I used different images, but copied your text just to see.

    It took me about 4 minutes to recreate it. That of course did not count creating the text nor picking the images, but still, the actual creation was amazingly brief.

    So I think I’ve picked a good design pattern to include in my plugin. While the new Gutenberg editor will not do everything that Elementor or other page designers do, I do believe that once a few good plugins are released with new blocks, it will come close to many of the features of page designers.

    I was sort of excited to see your page as a proof-of-need case for the block I built. My plugin (which I’m about to release, actually, along with Weaver 4) has another block that allows you to build the most amazing parallax block I’ve ever seen. On top of the (optional) bg cover image (just there, or in parallax), you can add an image in one column, and up to three text blocks in arbitrary positions on the second column. I’ve been playing with it, and have been amazed at what all it can do. Will have a demo up before long.

    My two examples give me great hope for reducing the need for page builders and have Gutenberg serve most needs. It has a small, but real learning curve, but beyond that, I’ve been most impressed. While it has some back-end overhead, there is essentially no overhead on the front-end – very fast with no need to load extra JS support files.

    This isn’t exactly related to your nice site, but your example sort of made my day at this particular moment since I just finished some of the fine details on my new gutenberg block plugin.

    #54845

    Weaver
    Keymaster

    One comment about your site – I’d like to see the menu bar fit on a single line instead of wrapping.

    #54846

    Weaver
    Keymaster

    Sorry to go on, but the e-giving page could be reproduced with one of the blocks in my plugin as well, but the way yours worked just inspired me to add a new options – either resize or stack the image and text columns on mobile devices. It had been resizing nicely, but I can see the benefits for stacking in come cases! Thanks for the idea!

    #54858

    Maureen
    Participant

    Happy to help with the ideas for your All In One Text Block plugin!!

    I think your stacking ability would have helped me with all the page layouts. For example, on the E-Giving page, there are 3 containers/blocks: E-Giving header, the icon cross, and the photo/text (2 col. container).

    When seen on mobile, the icon cross is teeny-tiny. I removed it on mobile views. I don’t  think that would happen with your plugin and it’s stacking ability.

    There is a learning curve with Elementor also, and I have spent a great deal of time learning it.

    I also think the page builders are pushing out new features fast and furious to compete with Gutenburg.

    I’ll have to test Gutenburg soon.

     

    #54859

    Maureen
    Participant

    Re: no wrapping on the menu bar.  I guess I would have to make the text smaller to avoid wrapping?

    I don’t see any other way.

    TX!

    #54861

    scrambler
    Moderator

    Before we discuss that, I just noticed that your site does not scale under 872px, which means it never turns to mobile.

    Did you do that on purpose (how), or else you probably have some content with a fixed or a minimum width causing it

    #54862

    Maureen
    Participant

    My switch point is 767, which is the Weaver default for Smart Menus, which is what I am using. I checked on my iPhone (home page only) and it looks good.

    Is there a page you viewed on mobile that is not working properly?

    #54863

    scrambler
    Moderator

    if I shrink the browser on desktop, it does not get under 872 and does not switch to mobile

    Apparently it is only on edge, will investigate further

    #54864

    scrambler
    Moderator

    @weaver, something appears to be broken with Weaver and Edge.

    Weaver sites do not scaled down below 872 pixel  (even this site).

    Strangely it works on IE.

    Any Idea what may be going on ?

    #54866

    Weaver
    Keymaster

    @scrambler,

    I cannot reproduce any issues with Edge.

    An I don’t know exactly what you mean by scaled down below 872. Do the Images not get responsively smaller? Does the menu not switch to mobile mode?

    #54867

    scrambler
    Moderator

    OK, this is a freakish one.

    It was only doing it on my laptop, basically, if was to shrink the browser, when it reached 872 pixel wide, the site would stop scaling, and therefore would never switch to mobile and be cropped.

    I went into the Edge settings on the laptop to see if there was a reset, but did not find one. Yet after that, it worked fine on the laptop.

    No idea what can cause that, I will keep an eye to see if it happens again.

    @maureen to prevent the menu to stack, indeed you can only play with text size and padding, but if you want to minimize the change, you can do that in an @media rule that will only be active when the browser is below the width that causes the stacking (1030px)

    @media (min-width:768px) and (max-width:1030px){
    .menu-primary .wvrx-menu-container li a {font-size:.75em;padding-left:.3em;padding-right:.3em;}
    }

    @weaver, it looks like there is a small CSS bug that sets the right margin of menu items to zero (Rule in yellow below), causing the menu items without an arrow to be misaligned (see Maureen Home and contact us items)

    @media(min-width:768px) {
    .menu-primary .wvrx-menu a{border-right:1px solid inherit;}
    .menu-primary ul.wvrx-menu > li:first-child {border-left:1px solid inherit;}
    .menu-primary .wvrx-menu ul > li:first-child{border-top:1px solid inherit;}
    .menu-primary .wvrx-menu ul a {border-top:none;border-left:none;border-right:none;border-bottom:1px solid inherit;}
    .menu-primary .wvrx-menu-container li a{padding-right:0em;}
    .menu-primary .menu-hover.menu-arrows .has-submenu > a{padding-right:1.5em;}
    .menu-primary .menu-arrows.menu-hover .toggle-submenu{margin-right:0em;}
    .menu-primary .wvrx-menu-container{margin-top:0px;}
    .menu-primary .wvrx-menu-container{margin-bottom:0px;}
    .menu-primary .wvrx-menu,.menu-primary .wvrx-menu-container{text-align:left;}
    }

     

    #54869

    Maureen
    Participant

    Thanks Scrambler. The @media rule worked great.

    And yes, there is a misalignment in the menu. I honestly don’t remember seeing that. If I had I would have worked on it. Also see PCB Member menu link.

    #54871

    Weaver
    Keymaster

    @scrambler

    Are you testing that with the V4 beta? I fixed something with an issue with the arrows, I think,. but probably not in the 3.2 version still in release.

    But what would be the correct CSS?

    No, it is there in 4.

    #54872

    Weaver
    Keymaster

    It looks like changing it to a .75em right padding fixes it. Seems to be there only with separators.

Viewing 16 posts - 1 through 16 (of 19 total)

You must be logged in to reply to this topic.