A service box section is a visually appealing way to showcase your services, features, or offerings on a WordPress website. Whether you’re a business owner, freelancer, or blogger, this guide will walk you through on how to create a service box section in WordPress.
Table of Contents
Method 1: Service Box Section in WordPress Using Elementor and Custom Coding
In this tutorial, we’ll be using the free themes “Hello Elementor” and “Elementor Pro.”
- First, we’ll create a new page.
- Then, insert a container.
- Set the Content Width to Full Width.
- Next, under Minimum Height, select VH (viewport height) and set it to 100.
- From Align Items, choose Center, and do the same for Justify Content.
- Now, click on “Add Elements”, then drag and drop a Heading onto the main page.
- Name it “Our Services.”
- Next, select the main container and go to the Style settings.
- Set the background to a gradient color. You’ll find the color codes in the description.
- For the second color, set the location to 70.
- Now, select the “Our Services” heading again and go to Style settings.
- Under Typography, choose Poppins, set the font size to 36, set the font weight to 700 or 800 (Bold or Extra Bold), and transform it to Uppercase.
- Set the letter spacing to 2 pixels. Make the heading color transparent, as we’ll use a stroke color instead.
- Set the stroke size to 1 pixel and choose a color from the description section.
- Next, in the Advanced settings, set the bottom margin to 50.
- Now, add another container, set the Direction to Row – Horizontal and set the minimum height to 280 pixels.
- To create the inner columns, add 3 sub-containers, then go to Style and center both Justify Content and Align Items.
- At this point, we’ll use custom CSS. You’ll find the code in the below file. Select the middle sub-container, go to Custom CSS, and paste the code.
- Set the border radius to 80 on all sides.
- Now, add a laptop icon, change its color, and set its size to 40 pixels.
- Add a new Heading, title it “Web Development”, and update the typography to: Montserrat, 24 pixels, Bold, and change the color.
- Next, add a Button Widget. We’ll use CSS here as well. You’ll find the code in the below file.
- Change the button text to “Book Now”, set the font to Montserrat, size to 14 pixels, and transform it to Uppercase.
- Set the border radius to 20 pixels, padding left/right to 40, and top/bottom to 20.
- Then, add an extra class to this button: Clay BTN. Change the background color, and paste the CSS.
- Now, duplicate the sub-container to create inner columns, and add some spacing between them. The current gap is too small, so we’ll change it to 40.
- Update the titles, icons, and text based on the services you offer—like Marketing or SEO.
- Then, view the layout across different screen sizes. In mobile view, increase the padding for each column to 25 pixels, and set the gap to 20 pixels.
- To improve the look on mobile, reduce the heading font size—feel free to adjust it to your liking.
These are all the steps you need to do if you want manual customization with some CSS coding. But, there is a better way if you want to reduce your stress.
Method 2: Service Box Section in WordPress Using BWD Services Showcase Addons for Elementor
You can do all of these customization by just installing BWD services showcase addons for elementor. Just download and install the plugin and start doing your customization. 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.