Home Forums Weaver Xtreme Theme X-Plus Flex Columns Widget

Topic Resolution: Answered
Viewing 16 posts - 1 through 16 (of 35 total)
  • Author
    Posts
  • #70699
    Answered
    GR8FL
    Participant

    I am trying to get a handle on this feature. I am not sure if the X-Plus Flex Columns Widget is the solution.

    My goal is to have 3 text boxes across of equal size (width and height) regardless of whether the content fills it. It would look something like this page: https://area59aa.org/area-59-business/

    I see an image here under 3) Flex Align Items on this page: https://guide.weavertheme.com/x-plus-flex-widget-usage-and-customizations/

    (even though it’s showing 4 across).

    Is using the X-Plus Flex Columns Widget a practical way to do this? And if so, can you point me to a site that is using it? Or tell me how to get started?

    Or should I just figure out how to make CSS boxes and use columns as described here: https://guide.weavertheme.com/responsive-columns-and-widgets/ and displayed here: https://demo.weavertheme.com/columns/

    I also see this page: https://guide.weavertheme.com/widget-area-layouts/, but I am a bit overwhelmed with a lot of information, very lost/confused, and would appreciate a pointer in the right direction.

    Thank you!

     

    #70701
    scrambler
    Moderator

    It depends where the content is, but you have two options

    1) Using the primary / secondary Widget area settings, you can use the Custom Widget width boxes to make the rows of three columns, like for two rows of three.

    33.3, 33.3, 33.3; 33.3, 33.3, 33.3;

    and combine that with the options “Add side margins” and  “Equal height widget rows”

    Then we can use custom CSS to do rounded borders

    Complete guide of the widget area settings

    Widget Area Layouts – Weaver Xtreme Guide (weavertheme.com)

    2) Or use the flex column widget following the tutorial below

    X-Plus Flex Columns Widget: Usage and Customizations – Weaver Xtreme Guide (weavertheme.com)

     

    #70702
    GR8FL
    Participant

    Looks like there’s a couple of ways to go. I don’t have a sense on which is the best choice to make.

    Also not clear on using the primary or secondary widget areas to make rows of columns as I am already using them as sidebar widgets. So perhaps X-Plus Flex Columns Widget is the answer?

    Obviously, I am a bit confused.

    Also, am not getting email notifications again from these posts. It is not going into spam — just not getting them delivered.

    #70704
    scrambler
    Moderator

    You never said where you want these to go, as you mentioned the flex widget, I assumed you meant a widget area.

    If you are trying to create these boxes in the content of just one page, then you may want to look at Blocks, I am pretty sure you will find a block that will do that for you.

    Alternatively, you could use a flex widget, in combination with the widget shortcode plugin that would allow you to insert the widget in your content area using a shortcode

    #70705
    GR8FL
    Participant

    I have not transitioned to using blocks. Maybe this is a good excuse to do that.

    What widget shortcode plugin are you referencing?

    #70706
    scrambler
    Moderator

    Widget Shortcode – WordPress plugin | WordPress.org

    But I would definitely look into Blocks That is what they are good for

    #70707
    GR8FL
    Participant

    Can you point me to any sites using Weaver theme using blocks this way?

     

    #70708
    GR8FL
    Participant

    I did a test page using Blocks. I had to deactivate the Classic Editor plugin. It’s weird to not have a text editor — this is a visual editor on steroids. Seems this entire UI is one block after another.

    Yes, creating blocks this way is very easy and very fast. And then I was able to toggle back to the legacy editor after it was created.

    Certainly easier than using the

    shortcode.

    I have [show_if device=desktop] & [show_if device=mobile] at the top of each page that doesn’t lend itself to making sense in the Gutenberg UI. Yes, I see it on preview, but I am wondering if there’s an easier way to toggle between the two other than enabling/disabling the Classic Editor plugins.

    #70709
    scrambler
    Moderator

    No I don’t.

    I would play with the Flex columns widgets

    #70710
    scrambler
    Moderator

    I played with the Columns block, setting it to 3 equal columns, and adding a paragraph block in each column with some text.

    Do that as many times as you need rows

    Then I used the CSS below to make them the same height and add the border

    .page-id-xxx .wp-block-column {display:flex;min-height:300px;}
    .page-id-xxx  .wp-block-column p {border-radius:10px;border:3px solid black;}

    result

    TESTS – Test Site (nicolatrwst.com)

    #70711
    GR8FL
    Participant

    Can’t access the page – says I am not allowed to preview drafts. Can you publish it?

    And thank you, @Scrambler for doing this.

    #70712
    scrambler
    Moderator

    Sorry, did not realize it was a preview link

    TESTS – Test Site (nicolatrwst.com)

     

    #70715
    GR8FL
    Participant

    Did you use blocks to set this up and just applied the CSS? Or was this done with Flex Widgets as described on the Flex Widget page?

    #70716
    scrambler
    Moderator

    Just the Columns block, setting it to 3 equal columns, and adding a paragraph block in each column with some text.

    Do one column block for each row

    Then I used the CSS below to make them the same height and add the border

    .page-id-xxx .wp-block-column {display:flex;min-height:300px;}
    .page-id-xxx  .wp-block-column p {border-radius:10px;border:3px solid black;}

    #70740
    GR8FL
    Participant

    I started to do this with the blocks and found it difficult to navigate through the block editor. I am very used to the classic editor and would prefer it that way.

    Using the

    format, is there a way to maintain the same height for all columns regardless of the content? So if column one did not fill up, but column two did, then both columns would be the same height?

     

    #70742
    scrambler
    Moderator

    What do you mean by “Using the format,”

    How are you creating the columns and rows exactly?

     

Viewing 16 posts - 1 through 16 (of 35 total)
  • You must be logged in to reply to this topic.