Step 1: Add and Configure the Gallery Widget
Add a new Gallery widget to your Projects page.
Click to add images and select all nine food images previously uploaded.
Click “Create a new gallery” and then Insert Gallery.
Under Image Size, set it to Full for best clarity.
Set Columns to 3.
Set Caption to None.
Set Link to Media File.
Turn Lightbox to Yes.
Step 2: Adjust Gallery Style
Go to the Style tab.
Set Gap to Custom and type in 10.
This will make sure there is even spacing between your images.
Step 3: Add Padding Around the Gallery
Select the outer container holding the gallery.
Go to the Advanced tab.
Set Top Padding to 60px.
Step 4: Add the “Let’s Chat” Callout Section
Navigate to the Services page and copy the bottom callout section.
Paste it beneath your gallery on the Projects page.
Step 5: Remove Background Styling From Callout
Click into the container and go to Style.
Remove the background by unselecting the Classic background type.
Go to Background Overlay and unselect Classic to remove the overlay image.
Step 6: Adjust Container Width and Alignment
In the callout container, go to Layout and set to Boxed.
Select the text box within the callout.
Go to Advanced > Width, set to Custom > 57%.
Center align the text.
Step 7: Apply CSS to Fix Image Ratio
Click the Save Options arrow > View Page in a new tab.
Click Customize > Additional CSS.
Paste the code below. This will make your images display as 1:1 squares.
.elementor-image-gallery .gallery-item img {
margin: 0 auto;
object-fit: cover !important;
height: 400px;
}
Step 8: Test Lightbox Functionality
Refresh the Elementor editor.
Click an image to verify the lightbox pops up correctly.
Note: You can rename image file titles (e.g. “salad-bowl”) to reflect nicer labels in the lightbox overlay.
Step 9: Tablet Responsive Settings
Enter Tablet View in Elementor.
Adjust padding of gallery section:
Top: 40
Right: 20
Bottom: 40
Left: 20
Adjust callout section padding:
Right: 20, Left: 20
Set callout text box width to 85%.
Step 10: Mobile Responsive Settings
Enter Mobile View.
Gallery should already be stacked nicely.
Set text editor in callout to 100% width.
Homework & Action Items
Open your site on a tablet, mobile phone, and a laptop browser window at half size. Note anything that looks off and adjust them.
Click on every button, link and menu item to make sure those are working properly.
Make sure no text is pressed up against the edge of the screen, and that there’s at least 20px of padding on the mobile sides.
- Make sure you’re saving along the way!