Skip Navigation

[Resolved] Help for web conversion from DIVI 4 to Toolset using only blocks

This support ticket is created 2 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 19 replies, has 3 voices.

Last updated by Francisco Ramón Molina Busquiel 2 years, 11 months ago.

Assigned support staff: Waqar.

Author
Posts
#1428853

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

You're very welcome and please find suggestions for some more points:

> And the icons ?, those icons are already in DIVI.

- For icons, Toolset Blocks use the light-weight "Dashicons" font library, that comes as a part of WordPress core:
https://developer.wordpress.org/resource/dashicons/

The simplest and most flexible way to include them in your design is through the "Button" block, under the Toolset section.
( screenshot: hidden link )

It will allow you to select the icon and include inline text (if needed) and also adjust design elements like text & background colors, padding & margins, border, size & font, etc.

Note: If you need to include these icons outside the block's design environment, you can also use their respective class in HTML.

Example:


<span class="dashicons dashicons-tag"></span>

> The color overlay does not allow you to enter a hexadecimal value.

- I've tested this and your observation is correct. The background image's "Overlay Color" setting for the container block only offers to enter the color in RGB or HSL formats.

I've noted this to pass on as internal feedback and for now, you can use any online converter, to get the HEX equivalent color code in these formats:
hidden link

> The color overlay does not allow a gradient or gradient types, so it is impossible to simulate the "hero" section of my homepage.

- There are two ways to achieve the same layout:

a). You can include a container block and set it to have a solid background image and 0px padding on all sides.
Next, you can nest another container block inside it and for this one, you can set the background type to "Gradient" and then adjust gradient type, levels, and colors with transparency.
( screenshot: hidden link )
OR
b). You can use just one container and instead of setting any background color, you can assign it a special ID for example "hero-section-container" to it.

After that, you can use the custom CSS code copied from the hero section on the other website:


#hero-section-container {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: linear-gradient(118deg,#063661 0%,rgba(43,78,136,0.67) 100%),url(<em><u>hidden link</u></em>)!important;	
}

> How do I separate the section lines?

- There are different strategies for them, based on the requirement.

a). For a plain line based separator, you can use Gutenberg's built-in "Separator" block, which offers a number of styling controls.

b). For a thicker separator which needs a solid color or background image, you can use an empty "Container" block and style it as needed.

c). For showing a separation, where the image of the separation, blends in with the lower section's background image, then you shouldn't use a separate "Separator" or "Container" block.

Instead, you should design the background image of the lower section in a way that includes both; the graphic for the separation and the lower section.

This way, when you'll set that image as the lower section's background image, it will represent separation as well as the start of the new section. You can adjust the top padding and margins, as needed.

> The columns are not responsive. The image of the "hero" on the right does not go to the line below when the screen is smaller. Look at the difference with DIVI.

- The "Columns" block is part of Gutenberg and the responsiveness enhancement is something that is already in the works.
( ref: hidden link & hidden link )

The same is also true for Toolset Blocks and responsiveness controls are planned for the next phase.

For now, you can include this custom CSS code and it will make all columns used in the column block, stack vertically on screens narrower than 981px (sams as your Divi website):


@media only screen and (max-width: 980px) {
.wp-block-columns {
flex-wrap: wrap !important;
}

.wp-block-columns .wp-block-column {
flex-basis: 100% !important;
margin-bottom: 20px !important;
margin-left: 0px !important;	
}
}

> How can I put icons next to the text, like in the "hero" of my homepage?

- You can include a container block and in that add a column block with two columns and adjust the widths as needed.

After that, in the left one, you can include the button block for the icon and in the right one, you can include heading or text blocks for the text.
( screenshot: hidden link )

> You cannot put margins to the columns. I have to put a margin for each element it contains and if I do so the text of the button in my "hero" section is misaligned.

- In such cases, I'll suggest adding a new container block in a single column and enclose the button (or any content block) in that container. This way, you'll have the full control to apply the padding and margins to the container block, with respect to the boundaries of the column, without affecting the inner content blocks.

For all the remaining points, I'll be able to write you back tonight and please keep sharing your questions or concerns.

regards,
Waqar

#1428873

Waqar,
Do not bother to work more this weekend. Rest well.
It is a lot of work all this, I would even have to create special images for the separators, it is impossible to do all this for the date that I indicated to you, and there are too many things that are pending for future versions of WordPress and Toolset (responsivity, ...), neither one nor the other facilitates the work to do all this work on time.
There are many pages to redo. 🙁
And although it will be possible to do everything that you have indicated to me, there would still be many more things to do so that the web will be simply close to the one I now have. In addition, I don't know how the other themes will be (GeneratePress, ...), but the Astra theme is unfortunate, it seems incredible that it has so much time, many things are missing, and that they have only had to do a theme and give header and footer appearance.
All this has helped me to verify on the ground that you have to advance much more with Toolset Blocks so that at least it gets a little closer to the ease and speed of design provided by DIVI, everything cannot be relegated to using custom CSS, in addition, DIVI incorporates many ready-to-use templates that make the design of a website even easier.
Even I would say that you would have to create your own well-designed base theme so as not to have to use themes such as Astra, after having used DIVI I was very sad to have to use Astra. 🙁
I'm sorry you had to work so hard for nothing.
Thanks for your help.
Regards,

#1430891

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Jose,

I totally understand and respect your decision and agree that this conversion will require a lot of work, considering the time frame.

Despite the unfortunate fact that you'll not be able to use a different theme and Toolset Blocks for this specific project, there are a lot of positive learning points to take away from this interaction. The specific challenges that you shared will surely help us understand and prioritize the development elements for the next releases.

We can't thank you enough for your cooperation, time and effort for bringing forward such a constructive and thorough feedback and can assure you that it will be reviewed and analyzed thoroughly.
(Amir is already in the loop and I'll also share some items that I noted through the respective channel)

Please keep your questions, feedback, and suggestions coming and my best wishes for your project and a new year ahead.

regards,
Waqar

#1431085

Hi Waqar,
It is a shame not to have had much more time to share more ideas, the basic idea was to verify that you could easily make a website like the one I had made with DIVI with Toolset Blocks plus a third party theme, I have been able to verify that for the moment it's not possible. 🙁
You are on the right path, but there are many improvements you can make with the blocks to facilitate the work of the web designer.
It would be a matter of making a detailed and exhaustive analysis of each point to improve in each of the blocks and even incorporate some more blocks.
If you want to compete with other page builders you should incorporate predefined templates that could be easily imported.
You should also think about the issue of creating a theme of yours to also have control of the theme.
I don't know what the other 2 themes will be like (GeneratePress, OceanWP), but I've had a very bad impression of Astra Pro. If these 2 themes are as bad as Astra you should think very seriously about creating your own theme.
If you achieve these goals I am sure that it could be a before and after in the creation of websites for wordpress, since the power of a sophisticated page builder would be united with the power of the management of new types, you could take much of the market of web designers and programmers.
However, you would also need to make improvements in regards to your integration with woocommerce and the power of Toolset Forms to resemble Gravity or Formidable Forms.
If you need any help or advice you tell me.
Although this is not an objection to say that at the moment you have left us thrown to all the developers that we use DIVI. 🙁
It has been a pleasure working with you, you are a great professional.
If we do not talk before I hope you have a happy new year and a great new year.
Regards,

#1431089

Thanks Waqar!