This guide explains how to create a service box section, which is a visually appealing way to present your services, features, or offerings on your WordPress website. It is a useful tool for business owners, freelancers and bloggers.
Method 1: Using Elementor + Custom Coding
This tutorial employs the freely available theme “Hello Elementor” and the premium plugin “Elementor Pro.”
- The first step is to create a new page.
- Next, add a container.
- Set the “Content Width” to “Full Width”.
- Select VH (viewport height) from the Minimum Height option and set the value to 100.
- Select Center for both Align Items and Justify Content.
- Click on “Add Elements,” then drag and drop a Heading element onto the main page.
- Give it the name “Our Services.”
- Then, navigate to the Style settings and choose the primary container.
- Apply a gradient color background using the color codes provided in the description.
- Position the second color at 70.
- Return to the “Our Services” heading and navigate to the Style settings.
- Select Poppins under Typography. Then, set the font size to 36, the font weight to 700 or 800 (Bold or Extra Bold), and change the text to uppercase.
- Change the heading color to transparent and apply a 2-pixel letter spacing. We will use a stroke color instead of the heading color.
- Choose a color from the description section and set the stroke size to 1 pixel.
- Then, within Advanced settings, adjust the bottom margin to 50.
- Next, include a new container and adjust its settings. Set the Direction to Row – Horizontal and establish a minimum height of 280 pixels.
- Add three sub-containers to create the inner columns. Next, navigate to Style and center both Align Items and Justify Content.
- Now, we will apply custom CSS. Locate the code in the file below. Choose the middle sub-container, navigate to Custom CSS, and insert the code.
- Round the corners by 80 on each side.
- Change the color and set the size to 40 pixels after adding a laptop icon.
- Change the heading to “Web Development”. Use Montserrat, 24 point, Bold and change the color.
- Add a Button Widget next. CSS will be used here as well; the code can be found in the file below.
- Make the button text “BOOK NOW” in all caps using Montserrat font at 14 pixels.
- Adjust the padding to 40 pixels on the left and right sides, and 20 pixels on the top and bottom. Then, set the border radius to 20 pixels.
- Next, incorporate an additional class, Clay BTN, to this button. Modify the background color, then insert the CSS.
- Next, add some spacing between the inner columns by duplicating the sub-container. Change the current gap to 40, as it is too small.
- Change the titles, icons, and text to reflect the services you provide, such as Marketing or SEO.
- Next, check the layout on different screen sizes. For mobile view, adjust the column padding to 25 pixels and set the gap to 20 pixels.
- Decrease the heading font size to enhance the mobile view.
These are the required steps if you want to customize manually with some CSS coding. However, there’s a less stressful alternative.
Method 2: Using BWD Services Showcase Addons for Elementor
Customization can be achieved by downloading and installing the BWD services showcase addons for Elementor. Buy the plugin.
Installation Process:
- Install BWD Services Showcase Elementor Addon using WordPress plugin installer or by uploading its files into the WordPress plugins directory.
- Activate the BWD Services Showcase Elementor Addon through WordPress Plugins menu.
- Click the Plugins => Add New
- Click Upload Plugin and then Choose the bwd-services-showcase.zip from your computer then click on the Install Now button.
- After activating, it doesn’t work without Elementor Page Builder plugin. Firstly, you should activate Elementor Page Builder.
- To activate newly installed plugin navigate the Plugins => Installed Plugins.
- Find the BWD Services Showcase Elementor plugin from the list and press/click Activate.
- Congratulations! plugin has been installed and activated on your website.
Check different styles of service showcases and choose the style you want. Simple!
You can also check our BWD Elementor Addons Bundle here.
Download the Code File