- This topic has 42 replies, 3 voices, and was last updated 2 weeks, 4 days ago by
.
-
Posts
-
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!
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)
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.
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
I have not transitioned to using blocks. Maybe this is a good excuse to do that.
What widget shortcode plugin are you referencing?
Widget Shortcode – WordPress plugin | WordPress.org
But I would definitely look into Blocks That is what they are good for
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.
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
Can’t access the page – says I am not allowed to preview drafts. Can you publish it?
And thank you, @Scrambler for doing this.
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?
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;}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?
- You must be logged in to reply to this topic.