Home Page same like this website

Hi there,

i can only advise on my approach to creating that layout.

I would;

1. Set the Page Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

This will allow you to overide the theme spacing and allow for full width background or content.

2. Break the page into sections by adding a GenerateBlocks plugin Container Block for each of the sections:

https://docs.generateblocks.com/article/container-overview/

Make sure you add some padding to each container eg. 40px left and right, and whatever top and bottom padding you need.
Add backgrounds as you require.

3. Use a GenerateBlocks Grid Block to create:

a. the 2 column layous
b. the tables
c. the grid of icons

https://docs.generateblocks.com/article/grid-overview/

4. The GB plugin contains all the styling controls in each of its blocks, so you can use its Headline Block to add icons or style the text:

https://docs.generateblocks.com/article/headline-overview/

Can we achieve the exact design in mobile and pc including the search bar?

Hi there, everything worked perfectly expect the two.

1. How to add a background to the search bar same as in that website? (Check Pvt)
2. How to add the hover effect to the Iconic content same as in the Target Design (Check Pvt)
3. How to add icons for the text contents in the table?

My site: https://oflatestmedia.com/

Hi Rohith,

1. You may add a Background through the Container Block. Go to its Backgrounds settings and add an image as such: https://share.getcloudapp.com/NQuloNZz
2. Adding effects can be done through GenerateBlocks Pro: https://docs.generateblocks.com/article/effects-overview/

If you would like to do it through Custom CSS, add my-hover to the Container Block holding the icon and the text, and the add this CSS in Apperance > Customize > Additional CSS:

.gb-container.my-hover:hover {
    border: 1px solid #136d04;
    background-color: rgba(38,174,97,.05);
}

Kindly modify the values to your preference. 1px defines the border width, #136d04 defines to border color, and rgba(38,174,97,.05) defines the background color.

3. Headline Blocks and Button Blocks allow addition of Icons. You may add either of these in your "tables" to add icons. Example: https://share.getcloudapp.com/DOudq4AK

Reference: https://docs.generateblocks.com/article/buttons-overview/#icon

Hope this clarifies!

1. I have added the image but it is not displaying completely. It is displaying only as borders. (Check PVT)
2. The CSS Worked but I would like to activate the link for the entire icon box. And also, the link text in Icon box should be black color
3. I guess we can’t add headline in the tables right?

Are you referring to a WP Table Block? If yes, you can’t add other Blocks within those.

You’ll need to use a GB Grid Block.

Hope this clarifies!

What about these questions?

1. I have added the image but it is not displaying completely. It is displaying only as borders. (Check PVT)
2. The CSS Worked but I would like to activate the link for the entire icon box. And also, the link text in Icon box should be black color?

1. Select the Container Block with the Background image. In the Spacing Settings you can add some TOP and BOTTOM padding.

2. Select the Headline Block, and in Color Settings change the Link Colors.

1. How to add icons in table content same as the target website?
2. There's a search element in the home page. I would like to replace the Blue color 'Search' text with the 'Search' icon.
3. Under the 'Jobs by Category' section, I would like to enable the link click on the every individual boxes. As of now, only the image and text and activated with link. I want to make the whole individual box function as a link.
4. The search box is showing with rounded corners in mobile. I would like to make it as a box same as in the desktop view.
5. Also, the home screen image is not showing in full width. It is showing limitedly. There's a lot of space on the left and right side. We want to achieve it same on the target website

Please be aware that we can only go so far with helping you build your website. We provide the tools and support for those tools, but what we cannot do is give you step by step guidance on every action you need to take.

1. The Headline Block supports SVG icons:

https://docs.generateblocks.com/article/headline-overview/#icon

And heres how you add your own icons:

https://docs.generateblocks.com/article/adding-custom-svg-icons/

2. the core search block, in its toolbar there is an option to show an icon.

3. That is a feature of GenerateBlocks Pro

4. See my reply here:

https://generatepress.com/forums/topic/border-radius-issue-on-safari/#post-2115575

5. Refer back to #1 here:

https://generatepress.com/forums/topic/home-page-same-like-this-website/#post-2264761

Hello, the container is of full width only but the image is showing only half width. How to fix it?

Hi there,

Do you mean this image?

If so, the image is full width:
https://www.screencast.com/t/pHILDmR7q0T

Or do you mean the Jobs by category images?

Yes that image should come link the image in target website (Check PVT)

Oh that's because your page's content container is not full width.

You can set it to be full width in the layout metabox:
https://docs.generatepress.com/article/content-container/

You can find it here:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it