[Resolved] Elements – use case

[Julia]

I’m just learning how to use GP and wondering what’s the best way to build my page. I’m trying to replicate this page https://solvingmetoo.com/, that I built using a page builder called OptimizePress.

Would you suggest I use Elements to build each of the episode blocks? For clarity, an episode block includes:
• the title
• the guest’s image
• the guest’s name
• a paragraph of text (in which there are hyperlinks)
• a button
• a line of text under the button

I understand that the main feature of an Element is that it can be used over and over again, right? And certainly that’s the case here …

However, it’s just the formatting that’s the same; the content for each episode block of course changes.

If Elements wouldn’t be the right tool, could you suggest what would?

Thank you in advance.

[Elvin]

Hi there,

If this is going to be a static page with the guest list being a static link, you won’t have to use the Block Element.

You can simply create the layout for 1 episode and duplicate it again and again like this:
https://share.getcloudapp.com/DOuDvPwX

Now, if this is going to be something dynamic, then Block Element is the way to go as it allows you to create content templates.

See this example:

See more GP videos on our official Youtube page here:
https://www.youtube.com/c/GeneratePress/videos

[Julia]

Thanks Elvin. I watched your video. So now my question is how do I create that layout for episode 1? (and yes, this will be static) Remember, I’m *just learning* … LOL

I’m not asking you to detail every single step, but could you point me in the right direction? Like do I start in customizer, or …?

I’ve watched a ton of GP’s videos so I kinda get the hang of it; but every time I sit down to actually DO something I’m like “wait, how do I get started??”

[Julia]

Oh wait, I think I got it — do I create a Layout Element???

[Julia]

pffft … nope, that’s not it. I think Layout Element is more for designing the layout of a given page, right? Not for creating a layout within a page …

But now I’m remembering that I saw something about Grids someplace …. Clicking through all my open tabs I can’t find it. But maybe I’ll find it and figure it out before you get back to me. 😉

[Elvin]

Thanks Elvin. I watched your video. So now my question is how do I create that layout for episode 1? (and yes, this will be static) Remember, I’m *just learning* … LOL

I’m not asking you to detail every single step, but could you point me in the right direction? Like do I start in customizer, or …?

It’s done within the content when you edit a post or page through the Block editor(Gutenberg).

Before we start, here’s the plugin/s I’m using: GenerateBlocks. https://generateblocks.com/

We need this to be able to use the following blocks:
Container Block
Grid Block
Button Block
Headline Block

In the editor UI, here’s what I did.
1.) Added a Container Block.
2.) Added a Headline Block within the Container Block. (This is the episode name)
3.) Added a Grid Block. (this is to create a grid for the image and description, 2 columns)
4.) On the left column of the Grid Block, Add an Image Block. (for the person’s portrait)
5.) On the right column, add Headline Block (for the name of the person and title)
6.) Below the Headline Block on the right column, add a paragraph block. (for the description)
7.) Below the Grid Block, add another Container Block. Set this Container Block’s width to the desired width of the button.
8.) On this newly added Container Block, add a Button Block.
9.) Style your Button Block.
10.) Below the Button block, add a paragraph block. (this will serve as the link for the transcript)
11.) Click the Main container block.(the first one you made, wrapper of all contents)
12.) Click on the spacing and set its border top so there’s border. 🙂

That’s basically it.

Here’s a breakdown of the structure: https://share.getcloudapp.com/8Lubw6q5

Here’s a sample video of how I did it. https://share.getcloudapp.com/jkuLn6Ak

Oh wait, I think I got it — do I create a Layout Element???

No you don’t have to.:)

[Julia]

Thanks Elvin – I’ve almost got it now: https://solvingmetoo.com/season-2-episodes-guests/

However a couple questions: (LMK if I need to mark this thread resolved and then ask all these questions via separate threads)

1. How do I cut and paste a button? In my first block, my button turns dark when I hover over it, which I don’t like. So in the second block I fixed it; but now I can’t figure out how to replicate it up above. I do see how to “Duplicate,” but that only puts a second button within the same container. With “Move to,” nothing happens. It seems to create a blue horizontal line, but then what?

2. Can i do a gradient with a hard edge instead of a fade? I seem to remember seeing somewhere in the documentation that I can. You can see that on my inspiration page https://solvingmetoo.com/ my buttons look like they have shine because the entire top half is just a smidge lighter than the entire bottom half; and I’d like to replicate that. Is that possible?

3. I’ve done all my formatting for Desktop. Do I now have to go through and tweak everything for tablet and mobile? I thought that with responsive themes, all that happened automatically …

4. It seems there are 2 different kinds of Button blocks. What’s the difference?

5. Is there a secret for how to click on the right thing? Like button, inner container, outer container, grid … I just sorta keep clicking around til the right thing lights up but that can take numerous tries. Is there a more precise method??

[Elvin]

However a couple questions: (LMK if I need to mark this thread resolved and then ask all these questions via separate threads)

Ideally, you open a new topic for unrelated things. But let’s do it next time and try to answer them all. I’ll let you know if its best to open a new one so this topic doesn’t get convoluted.

1.) You can’t cut and paste like you intuitively do in mac or PC files and folders. If you wish to move blocks, you click and drag them like this: https://share.getcloudapp.com/nOuomJqz

2.) You can do gradients like this: https://share.getcloudapp.com/WnuYE8eD
You basically play around with the angle and the percentage between the 2 colors.

3.) Check if the default setting is enough for your preference. If it’s not, you can change the display on other viewports with the mobile and tablet settings. “Responsive” means the capability to adjust to viewports(@media query). But the adjustments are things users define as GenerateBlock can’t magically guess how you want the layout to adjust. 😀

4.) The one with the black icon is the default button block by Gutenberg editor, the one with the blue icon is from GenerateBlocks.

5.) Use the list view icon as indicated here:
https://share.getcloudapp.com/KoudekDJ

See it in action here: https://share.getcloudapp.com/ApuYOmnK

[Julia]

That’s awesome thank you. I will dig into those answers tomorrow, and open new threads if I have followup questions.

[Elvin]

No problem. Glad to be of any help. 🙂

[Julia]

Hi Elvin,

I guess those Sharecloud links expire? I didn’t know that. Could you show me again please:

• how to move blocks
• how to do gradients
• how to use the list icon

Thank you!

[Ying]

Hi Julia,

Shoot some clips to explain the functions. But this is actually a GB question. Please post them in GB’s support system, thanks for your understanding 🙂

Free: https://community.generateblocks.com/
Pro: https://generateblocks.com/support/

• how to move blocks
https://www.screencast.com/t/SvFB4pQzA4

• how to do gradients
https://www.screencast.com/t/fO46oTVFzAIx

• how to use the list icon
https://www.screencast.com/t/5JT0at9rcAR1

[Julia]

how do I know what’s a GB question and what’s a question for here?

[Julia]

Regarding your videos:

With the list function, it seems to me that the List View is truncated. Like I can only see like 25 lines of my page at a time. Is that how it’s supposed to work, or am I doing something wrong?

Gradients: What I’m actually trying to do is create a 2-tone button like on this page: https://solvingmetoo.com/. I feel like I stumbled across something on one of the tutorials that said it’s possible to do a “hard” gradient, ie not one that fades, but one that makes a hard line between the 2 colors?

Moving buttons: (I said blocks by mistake in my earlier Q, I meant buttons). The problem that I encounter is that it’s very difficult to drop the button into the new place I want it. I typically have to try moving it 10 or 12 times until I luck out and it hits exactly right. Is there some kind of a trick I don’t know about?

[Julia]

And specifically regarding the buttons: what happened when I tried to drag it to a new location is that plopped itself down between 2 paragraphs within a Paragraph Block. While I eventually (12 or 15 tries later) got it moved where I wanted it, it had apparently auto-created a block with a Gutenberg button it, in between the 2 paragraphs of text in the Paragraph Block.

This in turn thrust my website into a continual “updating” mode. I could only get out of it by refreshing the page and hoping it had actually saved the last thing I wanted. When I went back to look at the Autosave version, I saw the self-generated block with a Gutenberg Button Block in it.

any ideas why that happened or how to make sure it doesn’t happen again?

[Author]

Posts