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
