Home › Forums › Weaver Xtreme Theme › X-Plus Flex Columns Widget
- This topic has 42 replies, 3 voices, and was last updated 2 weeks, 4 days ago by
scrambler.
-
AuthorPosts
-
April 30, 2022 at 21:55 UTC - Views: 123 #70699
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!
April 30, 2022 at 23:28 UTC - Views: 126 #70701scrambler
ModeratorIt 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)
May 2, 2022 at 00:57 UTC - Views: 115 #70702GR8FL
ParticipantLooks 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.
May 2, 2022 at 01:21 UTC - Views: 113 #70704scrambler
ModeratorYou 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
May 2, 2022 at 12:40 UTC - Views: 108 #70705GR8FL
ParticipantI have not transitioned to using blocks. Maybe this is a good excuse to do that.
What widget shortcode plugin are you referencing?
May 2, 2022 at 16:04 UTC - Views: 105 #70706scrambler
ModeratorWidget Shortcode – WordPress plugin | WordPress.org
But I would definitely look into Blocks That is what they are good for
May 2, 2022 at 21:19 UTC - Views: 102 #70707GR8FL
ParticipantCan you point me to any sites using Weaver theme using blocks this way?
May 2, 2022 at 22:02 UTC - Views: 100 #70708GR8FL
ParticipantI 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.
May 2, 2022 at 22:02 UTC - Views: 99 #70709scrambler
ModeratorNo I don’t.
I would play with the Flex columns widgets
May 2, 2022 at 22:22 UTC - Views: 98 #70710scrambler
ModeratorI 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
May 2, 2022 at 23:38 UTC - Views: 92 #70711GR8FL
ParticipantCan’t access the page – says I am not allowed to preview drafts. Can you publish it?
And thank you, @Scrambler for doing this.
May 3, 2022 at 01:33 UTC - Views: 90 #70712scrambler
ModeratorMay 3, 2022 at 13:03 UTC - Views: 86 #70715GR8FL
ParticipantDid 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?
May 3, 2022 at 22:07 UTC - Views: 83 #70716scrambler
ModeratorJust 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;}May 13, 2022 at 16:04 UTC - Views: 78 #70740GR8FL
ParticipantI 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?May 13, 2022 at 16:17 UTC - Views: 71 #70742scrambler
ModeratorWhat do you mean by “Using the format,”
How are you creating the columns and rows exactly?
-
AuthorPosts
- You must be logged in to reply to this topic.