EDITS.WS

Tag: Divi Resources

  • EMPIRE – Divi Child Theme Overview

    The Empire Child Theme is a Woocommerce-based eCommerce website theme for online stores. It uses Divi as its main theme. The design is clean and modern with beautiful typography and impactful images. The child theme comes with 10+ pages and 3 dark mode pages. In this post, we’ll take a look at the Empire Divi child theme to help you decide if it’s the right Divi child theme for you.

    Let’s get started!

    Installing Empire Divi Child Theme

    Installing the Empire Divi Child Theme is simple and straightforward. First, upload the theme to your WordPress website, then activate the theme.

    Empire Divi Child Theme Add Theme

    Once the theme is activated, you will see a new tab in your WordPress dashboard called “Empire Demo Content Importer”. Select the Easy Demo Import tab and start the import. This will automatically import the layouts to your website and install the recommended plugins.

    Empire Divi Child Theme Import Options

    Empire Divi Child Theme Pages

    Empire comes with 10+ layouts and 3 dark mode layouts. We’ll go through each page and discuss the designs.

    Empire Divi Child Theme Homepage

    Let’s take a look at the Empire Divi child theme homepage layout. The homepage includes a header, CTA sections, videos, images, number counters, and much more. Throughout the page, there are loading animations, hover effects, and parallax image effects to achieve an eye-catching, engaging website design. Let’s take a look at each section on the home page.

    Empire Divi Child Theme Home Layout

    Hero

    The hero section is the first component on the home page. It features some text and a button. The logo and menu are at the top of this section, and the menu is sticky at the top as you scroll down the page.

    Empire Divi Child Theme Home Hero

    CTA Section

    This call to action section has a title and some text content below. It also has a button to prompt users to action.

    Empire Divi Child Theme Home

    Services

    This section features text on the left side and an image on the right. The text on the left is formatted to fit the theme so all you need to do is replace it with your own content. There is a quote section to highlight some text as well. This section also has two buttons.

    Empire Divi Child Theme Home

    Video

    The video section has a purple overlay when you hover over it, highlighting the video in a unique way. There is an image background to this section as well.

    Empire Divi Child Theme Home

    CTA Section

    Another call to action here, with some stylized text on an image background and a button below.

    Features

    The features section has two versions: a light and a dark version. These sections can be used to show off your services or offerings, and highlight what makes your business unique. Below this section, there are four number counter modules that count as you scroll to the section.

    Empire Divi Child Theme Home

    CTA with Video Background

    This section is a call to action with a video background and a dark overlay. It is an eye-catching design to draw your website visitor’s attention.

    Empire Divi Child Theme Home

    Image Layout

    The next section is a simple grid image layout with some text and a button in the top left corner.

    Empire Divi Child Theme Home

    Text and Video

    In this section, there is some featured text with a repeating background video below.

    Empire Divi Child Theme Home

    Image Hover Reveal

    This is one of the more unique sections in the Empire Divi child theme. There are many images in a grid layout. When you hover over any of the images, text appears with an animation delay with an overlay background.

    Empire Divi Child Theme Home

    Video Layouts

    Here are three more video section layouts. The first section has a full-width video preview. When you hover over the video, there is a purple overlay.

    Empire Divi Child Theme Home

    The second video section includes some text on the left side as well as a button. When you hover over the video, there is a purple overlay.

    Empire Divi Child Theme Home

    The third video section is on an image background with a dark overlay and has space for some text below. Like the others, this one also has a purple overlay on hover.

    Empire Divi Child Theme Home

    Testimonials

    There are two designs for a testimonial section, one light and one dark. Both are testimonial sliders so that you can showcase multiple testimonials.

    Empire Divi Child Theme Home

    This is another simple text and image section with a fullwidth parallax image above. There is also a button below the text in this section.

    Empire Divi Child Theme Home

    CTA Section

    Here is another CTA section. It features two images, one of them with a purple overlay and some text, and a button.

    Empire Divi Child Theme Home

    Blurbs

    This section features a large image and six blurbs with an icon and some text. You can use this section to highlight some of your features or offerings.

    Empire Divi Child Theme Home

    CTA Section

    Another CTA section, featuring a heading and a button. The background image has a parallax effect.

    Empire Divi Child Theme Home

    Video and Text

    Here you have a background video that plays automatically as well as some text.

    Empire Divi Child Theme Home

    Image and Text

    Here are some more layouts with text, images, and buttons. The section below has an image background with an overlay.

    Empire Divi Child Theme Home

    Empire Divi Child Theme Home

    Store

    The store layout section includes a section for some featured products with a button to go to the store. There are images that link to product categories, as well as some more featured products below. Finally, there is a section to display customer reviews.

    Empire Divi Child Theme Home Store

    Blog

    The blog section has some recent posts displayed with a link to view the full blog. Each post also has a featured image.

    Empire Divi Child Theme Home Page Variations

    Empire comes with a couple of homepage variations. There is a dark mode, which has darker backgrounds for most of the sections.

    Empire Divi Child Theme Home Dark

    There is also a homepage variation with a video header. The rest of the content on this page is variations of the layouts we covered above.

    Empire Divi Child Theme Home Video Header

    The other homepage variation features a split header with a transparent overlay on the right side with the header text and a button. Like the other variation, the rest of the layouts on this page are variations of the layouts already covered.

    Empire Divi Child Theme Split Header

    Empire Divi Child Theme Interior Page

    The interior page is one of the premade layouts that comes with the Empire Divi child theme. It features a header with an image background, a section for text with some buttons, a couple of CTA sections, a testimonial section, and some images which are used as buttons to guide the user to another page.

    Empire Divi Child Theme Interior

    Empire Divi Child Theme Services Page

    The services page is set up so that you can highlight your service offerings with little blurbs.

    Empire Divi Child Theme Services

    The page includes some text, a services display with icons, CTAs, and a pricing table.

    The services page also has a dark mode variation, pictured above.

    Empire Divi Child Theme Services Dark

    Empire Divi Child Theme Team Page

    The team page features large images for all of your team members. For each team member, their name and title are listed and there is space for a short bio. Below, their email address and social media links are listed.

    Empire Divi Child Theme Team

    Also on this page is a section to highlight any open roles you might have.

    Empire Divi Child Theme Job Board

    Empire Divi Child Theme Contact Page

    The contact page is fairly simple, with a short blurb of text and a contact form, as well as information for help and support and the address.

    Empire Divi Child Theme Contact

    There is a dark mode version of the contact page as well.

    Empire Divi Child Theme Contact Dark

    Empire Divi Child Theme Blog Page

    The blog page for this theme is very simple, with a large image showcasing the featured image, and the post title, date, and excerpt below.

    Empire Divi Child Theme Blog

    Empire Divi Child Theme Blog Post

    The blog post page is also a simple design, with the featured image set at the very top with the menu bar as well as the title, author, and date listed over the image.

    Empire Divi Child Theme Blog Post

    Empire Divi Child Theme Shop

    Empire is an eCommerce-focused theme that uses WooCommerce. The shop page features an image header, some featured products, a link to open a shop category, and reviews.

    Empire Divi Child Theme Shop

    Empire Divi Child Theme Product Page

    The product page has an image header with the product title and subtitle. Then you have your product, with photos on the left-hand side. On hover, you can zoom in to see the product photos up close. On the right side is the product information including the product name, price, description, size, color, and a button to add to the cart.

    Empire Divi Child Theme Product

    Below this section, there are some modules where you can display additional photos, descriptions, information about the measurements and materials, features, and reviews. At the bottom of the page, you can find related products.

    Empire Divi Child Theme Product Features

    When you add a product to your cart, the shopping cart sidebar appears where you can see the products in your cart, see your total cost, and choose to open the cart, go to checkout, or continue shopping. While this window is open, the rest of the website is faded with a black overlay.

    Empire Divi Child Theme Pop Out Cart

    Empire Divi Child Theme Cart Page

    The cart page is fairly standard and lists the content of the cart, a place to enter a coupon code, the cart total, and a button to proceed to checkout. Contact information is listed on the right side.

    Empire Divi Child Theme Cart

    Empire Divi Child Theme Header

    The header for the Empire Divi child theme is built with the WordPress menu customizer. The menu consists of a logo on the left, menu items with some drop-down options, and a call to action button on the right.

    Empire Divi Child Theme Header

    Empire Divi Child Theme Footer

    The footer for the Empire Divi child theme is built with the Divi Theme Builder.

    Empire Divi Child Theme Footer Layout

    The footer consists of a logo and a text area for a short description. It also includes a section for social media icons, copyright information, and links to legal pages. In the middle, there is a menu section, and on the right, there is the contact information and a call-to-action button.

    Empire Divi Child Theme Footer

    Empire Divi Child Theme Video Tutorials

    The Empire Divi child theme also comes with a page of 13 video tutorials. This is a very helpful resource so that you can learn how to further customize the child theme.

    Empire Divi Child Theme Video Tutorials

    Where to Purchase the Empire Divi Child Theme

    The Empire Divi child theme is available in the Divi Marketplace for $59. It includes unlimited website usage and one year of support and updates.

    Empire Divi Child Theme Purchase

    Final Thoughts

    The Empire Divi Child Theme is a great child theme to use if you need an eCommerce website with lots of content layout options for you to use. It has a simple but elegant design and uses different motion effects throughout the site to draw your attention and highlight content on the page. The installation is quick and easy, so the only setup required is to replace the content with your own and set up your WooCommerce shop. Overall, I would recommend this theme for anyone who wants to set up an eCommerce website with Divi without having to design the website from scratch.

    We would love to hear from you! Have you tried the Empire Divi Child Theme? Let us know what you think about it in the comments!

    The post EMPIRE – Divi Child Theme Overview appeared first on Elegant Themes Blog.

  • How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module

    The Divi Fullwidth Header module makes it easy to add beautiful hero sections to your website. The module comes with two buttons, a title text, subtitle text, body text, a logo, and an image, making the customization options endless.

    In today’s post, we’re going to demonstrate how to re-create hero sections using the Divi Fullwidth Header. We’ll start our design by using 3 premade layout packs and design our sections with a focus on balancing the primary and secondary buttons. We want the primary button to stand out, as it’s our main call to action while keeping the secondary button visible and accessible without overtaking the primary button.

    Design Principles of Primary and Secondary Buttons

    Primary buttons and secondary buttons help guide your website visitors towards certain actions. Primary buttons are typically the most common or desired action and secondary buttons are a less common action. This helps guide visitors to where they want to go.

    To accomplish this, primary buttons should stand out visually and secondary buttons should not stand out as much. That means primary buttons should be more distinctive and have more visual weight so that it attracts more attention.

    Now that we have an understanding of how primary and secondary buttons work, let’s get to the tutorial!

    Design Preview

    Here’s a look at the three fullwidth headers we will be designing today.

    UX Fullwidth Header

    Divi Retirement Center Fullwidth Header

    Financial Planning Fullwidth Header

    Download the Layouts for FREE

    To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    To import the header template to your Divi Library, do the following:

    1. Navigate to the Divi Theme Builder.
    2. Click the Import button at the top right of the page.
    3. In the portability popup, select the import tab
    4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
    5. Then click the import button.

    Once done, the section layout will be available in the Divi Builder.

    Let’s get to the tutorial, shall we?

    What You Need to Get Started

    To get started, you will need to do the following:

    1. Install Divi on your WordPress website.
    2. Add a Page and give it a title.
    3. Enable the Visual Builder

    Ux Fullwidth Header Design Steps

    Now that we have our page set up, let’s start with the fullwidth header for a UX landing page.

    Setting Up Our Page

    Before we can begin styling, we’ll need to load the free UX premade layout pack from the Divi Library. When you enable the Visual Builder you’ll see three options pop-up, select Choose A Premade Layout.

    Load Layout Pack

    To do load the UX layout pack onto your page:

    1. In the “Premade Layouts” tab use the search function to find the UX layout pack.
    2. Once you’ve found it click on it. This will bring up the layout details and pages available.
    3. Click on the landing page design, then click “Use This Layout”.

    We’ll be recreating the top section of the layout as a fullwidth header module.

    Delete First Section

    Since we are going to recreate the first section using the Fullwidth Header module instead, we’ll need to delete this section. Hover over the section and click the trash icon.

    Add Fullwidth Section

    Before we can add the fullwidth header, we need to add a fullwidth section.

    Click the “+” arrow to bring up the Divi sections and then click “fullwidth”. This will automatically bring up the Divi Fullwidth Module library.

    Add Fullwidth Header

    Inside the Divi Fullwidth Module Library, click “Fullwidth Header”.

    Adding  Content

    Before we begin styling the module, let’s add the content needed for this module.

    Add Text Content

    Underneath the Text tab, add the following content:

    1. Title: Improve Your UX Design Knowledge
    2. Subtitle: UX Design Course
    3. Button #1: Course Overview
    4. Button #2: Learn More
    5. Body: Placeholder text

    Add Images

    Now that we have our text content in place, we need to add two images to our design.

    1. In the Images tab, add the logo image (the stars) and the header image (the photo of the person holding a phone).

    Change Background Color

    In the Background tab, configure this setting:

    1. Background Color: #131517

    Styling The Fullwidth Header

    Now that we have our content set up, let’s add some styling to it via the Design tab.

    Scroll Down Icon

    Let’s add the scroll down icon, the downward arrow.

    1. This design uses a scroll down icon, so toggle this option to yes.
    2. Select the downward arrow icon and then set the icon color to white.

    Image

    Let’s add curves to our images by rounding the corners.

    In the image tab, configure the following settings:

    1. Image Rounded Corners: Click the chainlink button to unlink the corners, then type 1000px in the bottom left and bottom right input boxes. This will round the bottom left and bottom right corners of our images.

    Title Text

    Here let’s style the title text for this module. In the Title Text tab, configure these settings:

    1. Title font: PT Sans
    2. Title Font Weight: Bold
    3. Title Text Size: 5rem
    4. Title Line Height: 1.2em

    Body Text

    This is where we style the body text of this module. In the Body Text tab, configure these settings:

    1. Body Font: Mukta
    2. Body Text Size: 18px

    Subtitle Text

    This is where we style the subtitle text for this module. In the Subtitle Text tab, configure these settings:

    1. Subtitle Font: Mukta
    2. Subtitle Font Weight: Bold
    3. Subtitle Font Style: Uppercase
    4. Subtitle Text Color: #13d678
    5. Subtitle Letter Spacing: 3px

    Button One

    This is where we can set custom styles for button one, the primary button. In the Button One tab, configure these settings:

    1. Use Custom Styles For Button One: Yes
    2. Button One Color: #ffffff
    3. Button One Background: #13d678
    4. Button One Border Width: 0px
    5. Button One Border Radius: 100px
    6. Button One Font: Mukta
    7. Button One Font Weight: Bold
    8. Show Button One Icon: Yes
    9. Button One Icon: Right Arrow
    10. Only Show Icon On Hover For Button One: No

    Button Two

    Now let’s style the secondary button, the second button. In the Button Two tab, configure these settings:

    1. Use Custom Styles For Button One: Yes
    2. Button One Color: #ffffff
    3. Button One Background: #303030
    4. Button One Border Width: 0px
    5. Button One Border Radius: 100px
    6. Button One Font: Mukta
    7. Button One Font Weight: Bold
    8. Show Button One Icon: Yes
    9. Button One Icon: Right Arrow
    10. Only Show Icon On Hover For Button One: Yes

    Add Button Links

    Don’t forget to add links to your buttons! In the Link tab, configure the following settings:

    1. Button #1 Link URL: Paste the URL for button one here.
    2. Button #2 Link URL: Paste the URL for button two here.

    Save Your Design

    Now that we have our fully designed Fullwidth Header, make sure to save your design!

    1. Click the green arrow at the bottom right of the module window.
    2. Then click the save icon on the Divi toolbar to save your page design.
    3. Exit the Visual Builder.

    Have Fun Experimenting

    The ways to style the Divi Fullwidth Header module are endless. Taking advantage of the primary button and secondary button can help direct your visitors to the page you want them to view or take the action (like submit an inquiry) you want them to take.

    Let’s take a look at two other Fullwidth Header examples that have a primary button that stands out.

    Divi Retirement Center Fullwidth Header

    Button Styles

    Let’s look at the unique styles for the primary and secondary buttons.

    Button One

    In the Button One Tab, configure the following settings:

    1. Use Custom Styles For Button One: Yes
    2. Button One Text Size: 14px
    3. Button One Color: #ffffff
    4. Button One Background: #0a0a0a
    5. Button One Border Width: 0px
    6. Button One Border Radius: 10px
    7. Button One Font Weight: Bold

    Button Two

    In the Button Two Tab, configure the following settings:

    1. Use Custom Styles For Button One: Yes
    2. Button One Text Size: 14px
    3. Button One Color: #ffffff
    4. Button One Background: #0a0a0a
    5. Button One Border Width: 0px
    6. Button One Border Radius: 10px
    7. Button One Font Weight: Bold

    And there you have it! Two unique buttons, one that stands out, and one that takes the second seat.

    Financial Planning Fullwidth Header

    Button Styles

    Let’s look at the unique styles for the primary and secondary buttons.

    Button One

    In the Button One Tab, configure the following settings:

    1. Use Custom Styles For Button One: Yes
    2. Button One Text Size: 18px
    3. Button One Text Color: #ffffff
    4. Button One Background Color: #1b4ffe
    5. Button One Padding: 15px Top and Bottom; 25px Left and Right

    Button Two

    In the Button Two Tab, configure the following settings:

    1. Use Custom Styles For Button Two: Yes
    2. Button Two Text Color: #1b4ffe
    3. Button Two Background Color: Transparent
    4. Button Two Icon Color: #1b4ffe

    Final Thoughts

    The Divi Fullwidth Header makes it easy to create stunning hero sections on your website. Making strategic use of the primary and secondary buttons will improve your user experience and help website visitors take the actions they want to take. The customization options are endless with the Fullwidth Header so have fun experimenting!

    The post How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module appeared first on Elegant Themes Blog.

  • Get a Free Marketing Agency Layout Pack for Divi

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

    This time around, the design team has created a beautiful Marketing Agency Layout Pack that’ll help you get your next marketing agency website up and running in no time!

    This layout pack includes:

    – 8 Premade page layouts strategically designed for any Marketing Agency website (including a footer design)
    – Original, royalty-free photos and graphics + customizable source file (see below)
    – Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

    This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

    divi layout

    Check Out The Divi Marketing Agency
    Layout Pack Below

    Get it for free today!

    Marketing Agency layout pack for Divi

    Landing Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Home Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Services Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Service Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Portfolio Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    About Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Blog Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Contact Page Design

    Marketing Agency Layout Pack for Divi

    View The Live Layout Demo

    Key Features

    If you’re looking to get a new Marketing Agency website, you don’t want to miss out on the Marketing Agency Layout Pack for Divi! Each page layout is built to impress your visitors with world-class web design. And it has everything you need to promote Marketing Agency services, and much more. Use it to get your next Marketing Agency website up and running today!

    Live Demos

    Click the links below to see a live demo for each of the layouts included in the pack.

    1. Marketing Agency Landing Page (live demo)
    2. Marketing Agency Homepage (live demo)
    3. Marketing Agency Services Page (live demo)
    4. Marketing Agency Service Page (live demo)
    5. Marketing Agency Portfolio Page (live demo)
    6. Marketing Agency About Page (live demo)
    7. Marketing Agency Blog Page (live demo)
    8. Marketing Agency Contact Page (live demo)

    Access This Layout Right Now
    Directly from Your Divi Builder

    Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

    To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Marketing Agency Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

    Marketing Agency Layout Pack for Divi

    For more, check out this video to learn how you can get this layout pack up and running today.

    Subscribe To Our Youtube Channel

    Authentication Required

    Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

    Marketing Agency Layout Pack for Divi

    You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

    Use Layout Images for FREE with No Licensing Restrictions

    Divi Marketing Agency Layout Pack for Divi

    The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

    Download the Full Res Image Assets

    New Layout Pack Every Week!

    We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

    The post Get a Free Marketing Agency Layout Pack for Divi appeared first on Elegant Themes Blog.

  • Divi Plugin Highlight: Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack is a layout pack with 25 different homepage layouts that work with the Divi builder. The layout packs are built with different types of businesses in mind, but all layout packs can be completely customized and are flexible enough to fit whatever type of site you need to design. In this post, we’ll take a look at all of the layouts that come with this layout pack to help you decide if this is the right product for you.

    Let’s get started!

    Installing Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Then, open your page in the Divi Builder.

    Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired homepage layout and begin importing the layout. Once the layout has been imported, all you need to do is replace the content with your own and you’re done!

    Homepage 25 Divi Layout Pack

    Let’s take a look at each of the 25 layouts you get with the Homepage 25 Divi Layout Pack.

    Architect Layout

    The architect layout starts with a large header image with text, followed by an about us section with links to read more and an informational video. Next is a list of services and a list of projects, which both feature some hover effects. There is a why choose us section with skill bars, and then a list of logos. The footer for the page is kept simple, with address, phone, email, and social media information listed. The page also uses lots of slide-in effects for the content on the page.

    Divi Product Highlight Homepage 25 Divi Layout Pack Architect

    Auto Repair Layout

    The auto repair layout has a large header image with a white border and text alongside a CTA button. The about us section features some round images and some text next to checkmarks that have a subtle hover effect. Next is the services section. Each service has an image and title, and there is a hover effect for each card in this section. Next under the “our works section” is a gallery with images you can click on to view full-screen. Finally is the contact section with address, phone, and email information as well as a footer bar with some links and copyright information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Auto Repair

    Beauty Salon Layout

    The beauty salon layout features an elegant layout with lots of loading animations. The page begins with a large header with a CTA with the address, email, and phone information listed conveniently below. Following this is the services section, with some introductory text and a list of services over images that have a hover darken effect. There is a button to view pricing information and a 25% off offer with a button to view. Below this, there are two customer reviews and a list of logos. Finally, there is a reservation form and the footer features social media links.

    Divi Product Highlight Homepage 25 Divi Layout Pack Beauty Salon

    Business Layout 1

    Business Layout 1 begins with a header section with some text, a phone number, and a contact form overlaying a large photo background. There is an about us section with text, a photo and icon, and a CTA button. Next, the services section features three services with a description, a photo, and a CTA. There is a pricing table and a why choose us section with icons and CTA buttons. The layout also features a gallery section and a FAQ section. The footer features contact information and opening hours over a large image.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 1

    Business Layout 2

    Business Layout 2 has a header image with social media icons, text, a CTA button, and three blurb modules that concisely convey company information above the fold. The services section features three services with a photo, some text, and a CTA button. The about section has text and a CTA button on the left, with two photos on the right along with a number representing the years in business. There is a large gallery strip following this, as well as an FAQ section. The last section on the page is a contact form alongside contact information. This layout also features lots of loading animation throughout the design.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 2

    Business Layout 3

    The third business layout has a large header image with some text, a CTA button, and some blurb icons on the right. The about us section below features some text, a customer testimonial, and a photo. The services section has a similar design to Business Layout 2. There is a gallery section following this, as well as customer reviews and FAQs. The footer features contact information and opening hours as well as a contact form.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 3

    Business Layout 4

    Business Layout 4 has a simpler header with text and a blue banner below with text and a CTA button. The about section features text, an image, a CTA button, and a phone number. The services section displays each service with an image and a line of text. There is a why choose us section in this layout with blurb modules and a nice hover effect. Next is a pricing table and a gallery section, then some customer reviews. Finally, the last section features a contact form and social media icons.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 4

    Business Layout 5

    The fifth business layout has a simple header image with some text and a CTA button. The about section has an image on the left with a button over it, and about text on the right. The services section features three services with an image, a button, and some text. There is a pricing table, a why choose us section with blurb modules, a gallery, and a FAQ section. Finally, the page ends with some contact information. The page features several hover effects and animations throughout.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 5

    Business Layout 6

    Business Layout 6 begins with a large image header with text and a CTA button within a white border. The about section features some text, a CTA button, and two circular images. There are six cards listed in the services section, each with an image and some text. Following this is the gallery section, then customer reviews and FAQs. Finally, the contact information is listed at the bottom of the page.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 6

    Business Layout 7

    The seventh business layout has a large header with a CTA button and three blurb modules with an icon and contact information as well as open hours. The about section has text, a customer review, and a circular image. The services section spans the width of the screen, with each box containing text and a CTA button for more information about each service. The why choose us section features some text and arrows with hover effects, a round image, a CTA button, and a phone number. Then there is a pricing table, a gallery section, and FAQs. Finally, the page ends with a contact form alongside some contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 7

    Business Layout 8

    This layout features a box over the large header image that contains some text and a CTA button. The about us section is simple as well, with a button over the large image and some text on the right. The services section features an icon over each image and has space for some text and a CTA button for each service. The pricing table features space for 4 different pricing plans and includes an icon for each plan as well as text and a CTA button. The why choose us section displays some blurb modules with large icons overlaying a background image. Finally, the page has a gallery section, a review section, an FAQ section, and ends with a contact form and social media links.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 8

    Business Layout 9

    Business Layout 9 features a simple header with text and a CTA button. The about us page features some text, a button, and an image on the right side. Next, the services section lists some text, a CTA button, and an image with an overlaid icon. There is also a pricing table and a why choose us section with blurb modules in this layout, followed by a gallery section, customer reviews, and FAQs. Lastly, the page ends with contact information and opening hours.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 9

    Business Layout 10

    Finally, the last business layout features a header image with the header text on a colored background. The about section has some text, a CTA button, and an image. The services section features three cards, one for each service, with text and a CTA button. The pricing table is the 4-tier pricing table we saw in Layout 8, followed by the why choose us section with blurb modules with icons. The layout also has a gallery section, customer reviews, and FAQs. And finally, the layout ends with some social media links and a contact form.

    Divi Product Highlight Homepage 25 Divi Layout Pack Business 10

    Dance Studio Layout

    The dance studio layout features a pink and grey color palette and uses engaging photography throughout the layout. The header features an icon and heading text on a pink background over a darkened image. The about section features text, a CTA button, and an image. There are three boxes below with an icon that list three dance styles. The dance course section is a collage-style section with images and cards with course information and a CTA button on them. The dance classes section features two cards with two sets of class information listed. Finally, there is a client review slider and the page ends with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Dance Studio

    Fashion Store Layout

    The fashion store layout features a split-style header with text and a CTA button on the left side and an image on the right. Following this is a list of logos and large images that link to different shop pages. There are some logos and text below that represent different store services such as free shipping and customer support. Next is a recent products section that uses the Woo Products module that works with WooCommerce. There is another split image/text section promoting daily discounts with a CTA button, followed by testimonials and an email sign-up form to receive a discount.

    Divi Product Highlight Homepage 25 Divi Layout Pack Fashion Store

    Fitness Layout

    This layout uses a black, white, and green color scheme with dark images. The header features a large background image, some text, a CTA button, and social media links. The about section features text, a CTA button, and two images with some hover effects. The services section highlights three services with images, a CTA link, and some text. There is a section with information about the trainers, with some text and a CTA alongside a large image, followed by some number counters representing information about the gym. Next is a section featuring membership benefits, with some text and a CTA button. There is a fitness services section utilizing blurb modules with a large icon and description text. Then is a section for membership plans, with another large image alongside text and a CTA. Finally, there are three testimonials and the page finishes with a newsletter subscription form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Fitness

    Furniture Shop Layout

    The furniture shop layout begins with a large image with header text and an arrow with a button to explore popular categories. Below is the categories section with large image cards linking to each category. There are some icons below this with shop feature such as free shipping and customer support. Following this is an introduction to a collection, with a large image and some description text. Next is the new products section, which uses the Woo Products module. Next is an image with some text advertising a discount, and then the discover more section with linked images to discounts and top-rated products. There is an email subscription form, and the page ends with blurb modules featuring contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Furniture Shop

    Gardener Layout

    The gardener layout begins with a large image of flowers with social media icons, header text, and a CTA button. Overlaid are three blurb modules featuring three services. The about section features text and a CTA button on the left, with an icon and image on the right. Next is the why choose us section with arrows and text with a hover effect. The our works section features a gallery, and the page ends with a contact form and contact information listed.

    Divi Product Highlight Homepage 25 Divi Layout Pack Gardener

    Green Energy Layout

    The green energy layout begins with a large header image with header text, three checkmarks next to some company qualities, and a CTA button. The about us section has some text and a CTA button next to an image with a hover effect. Next, there are three cards representing three types of green energy. The services section features three services, each with an image, an icon, description text, and a button. There is a why to go green section that has a large image and a box with some text and a button. Following this is a how we work section with some icons on the right and description text on the left. There are some number counters below this representing relevant data. After this is a testimonial section on a large image background, then a why choose us section with a skill graph. Finally, the footer has social media icons, links to some internal pages, and copyright text.

    Divi Product Highlight Homepage 25 Divi Layout Pack Green Energy

    Gym Layout

    The gym layout uses a black, blue, and white color scheme with lots of loading animations. The header is a large image with header text and a button, and there are two additional buttons at the bottom of the header. Next is the services section, with description text, a CTA button, and an image for each service. The our trainers section features an image with text on the right, along with a CTA button. Below is information about the gym, classes, and online workouts. Then there is a section with a large image that features the fitness services, followed by another section with text to describe membership plans. The why choose us section has a skill bar graph, customer testimonials, and four number counter modules. This is followed by an FAQ section and a contact section with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Gym

    Handyman Layout

    This layout features a header with heading text, a CTA button, and blurb modules with contact information. The about us section features text, a round image, and a customer testimonial. The services are presented on colored backgrounds with text and a CTA button. Next is the why choose us section, with arrows and text, a CTA button, a phone number, and a round image. The our works section is a gallery section, followed by a contact form, contact information, and a footer bar.

    Divi Product Highlight Homepage 25 Divi Layout Pack Handyman

    Interior Designer Dark Layout

    This is the dark version of the interior designer layout. The header features a large image with heading text and a CTA button. The about us section features an icon, text, and an image with a label over it. The our services section is laid over an image and also features an icon. The why choose us section displays some customer reviews, a CTA button, and an image. Following this is the our works section, which is a gallery module. The how we work section features three steps, each with a photo, description, and CTA button. Finally, there is contact information, a contact form, and a footer bar.

    Divi Product Highlight Homepage 25 Divi Layout Pack Interior Dark

    Interior Designer Light Layout

    And this is the light version of the interior designer layout. The layout is the exact same as the dark version, but the primary background color is light.

    Divi Product Highlight Homepage 25 Divi Layout Pack Interior Light

    Photography Layout

    The photography layout uses a black and white color scheme and black and white filters on the photos. There is a large header image with text and social media icons, followed by some about text. There are four photos that represent and link to four different styles of photography and some additional text below this. The how we work section also has a large photo, text, and a CTA button. There is a featured works section with a CTA button and a gallery, and then the page ends with a contact form and contact information.

    Divi Product Highlight Homepage 25 Divi Layout Pack Photography

    Travel Agency Layout

    Our final layout is the travel agency layout. This layout features a large header image with headwear text and a CTA button. Overlaying the header is a newsletter subscription sign-up form. Following this is a list of icons, then some introduction text and three different cards with an image, text, and a button. Then there are three linked images that feature activities you could book, with some description text. The why choose us section has some text and then an image with a link and some more text. Next are some testimonial blurbs. Finally, the page ends with a button to a contact form and an image.

    Divi Product Highlight Homepage 25 Divi Layout Pack Travel Agency

    Purchase Homepage 25 Divi Layout Pack

    Homepage 25 Divi Layout Pack is available in the Divi Marketplace. It costs $19.99 for unlimited website usage and lifetime updates. The price also includes a 30-day money-back guarantee.

    Final Thoughts

    Homepage 25 provides several beautiful home page layouts for your next design project. Each layout is unique and is styled for a specific industry, but every design can be totally customized to fit whatever you need. Keep in mind that these home page layouts only contain the one page and all contain CTA links to various sub-pages, which you will have to design yourself. Nonetheless, if you are looking to get a head start on your next design project with a home page template, this product will surely help you out.

    We would love to hear from you! Have you tried Homepage 25 Divi Layout Pack? Let us know what you think about it in the comments!

    The post Divi Plugin Highlight: Homepage 25 Divi Layout Pack appeared first on Elegant Themes Blog.

  • Download a FREE Category Page Template for Divi’s Conference Layout Pack

    Hey Divi Creators! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies. This time around we’re building upon the Divi Conference Layout Pack with a brand new Category Page Template that matches the rest of the pack perfectly. Hope you enjoy it!

    divi layout

    Check Out The Divi Conference
    Category Page Template Below

    Get it for free today!

    Divi Conference Category Page Layout for Desktop

     

    Divi Conference Category Page Layout for Tablet and Mobile

     

    Download The Category Page Template For The Divi Conference Layout Pack

    To lay your hands on the free Divi Conference Category Page Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    How to Upload The Template

    Go to Divi Theme Builder

    To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

    Opening the Divi Theme Builder to Import the Divi Conference Category Layout

    Upload Website Template

    Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

    Opening the import export functionality of the Divi Theme Builder

    Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates’.

    Save Divi Theme Builder Changes

    Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Category Pages. Save the Divi Theme Builder changes as soon as you want the template to be activated.

    Save the imported category page layout within the Divi Theme Builder

    How to Modify The Template

    Open Category Page Template Body Layout

    To modify the template’s elements, start by opening the template’s body layout.

    Start the process for editing the Divi Conference Category Page Layout

    Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with a normal Divi page.

    About the Template

    This category page template has a few dynamic elements that will work automatically including:

    • Category Page Post/Archive Title
    • Blog Module 1: Displays the most recent post within the selected category. This module has the admin label of Featured Blog Post
    • Blog Module 2: Displays the next six most recent posts within the select category. Includes a 1 post offset (it doesn’t include the most recent post in this module since it is showcased within the featured blog post module.

    Here is a quick illustration that identifies the dynamic elements of the Divi Conference Category Page Template.

    Showing the modules that automatically populate with content within the Divi Conference Category Layout

    Updating the Template’s Dynamic Elements

    Category Page Title

    The Page title is added using a text module that displays the post/archive title as dynamic content. By default, the category page title is going to be the name of the current category.

    Dynamic category title within the page title section

    Blog Module(s)

    Posts for Current Page

    Since this is a template that has been assigned to all category pages for the site, there are going to be one or more blog modules that are set to display posts for the current page. This is how the template displays the posts dynamically for each category page.

    How the featured post section is updated dynamically with Divi's dynamic fields feature

    You can update the rest of the settings (like post count) to adjust the module elements and design. However, make sure to keep the option Posts for Current Page set to YES.

    Post Offsets

    If more than one blog module is used on the template, the post offset option is used in conjunction with the previous blog module to preserve the order of dynamic posts by picking up where the previous blog module left off. For example, if the previous blog module had a post count of 1, the next blog module will have a post offset of 1 to display posts starting at #2.

    Editing the second blog post module with the category's latest posts

    Keep this in mind when making updates to blog modules’ post count and offsets.

    New Freebies Every Week!

    We hope you’ve enjoyed the Divi Conference Layout Pack and the Category Page Template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

    The post Download a FREE Category Page Template for Divi’s Conference Layout Pack appeared first on Elegant Themes Blog.

  • How to Include a Scroll Down Button in Your Divi Fullwidth Header Module

    Divi’s Fullwidth Header Module includes a button that indicates to the user they can scroll down. Once they click it, they automatically get redirected to the next section. This is a simple button with several icons to choose from and its color and size are fully customizable. In this post, we’ll look at how to customize it and see four Scroll Down Buttons you can include in your Divi Fullwidth Header Module. We’ll also see how to style it with CSS for even more design options.

    Let’s get started!

    Scroll Down Buttons Preview

    First, let’s look at the designs we’ll create in this post.

    Desktop Scroll Down Buttons Example One

    Desktop Scroll Down Button Example One

    Phone Scroll Down Buttons Example One

    Desktop Scroll Down Button Example One

    Desktop Scroll Down Buttons Example Two

    Phone Scroll Down Buttons Example Two

    Desktop Scroll Down Buttons Example Three

    Phone Scroll Down Buttons Example Three

    Desktop Scroll Down Buttons Example Four

    Phone Scroll Down Buttons Example Four

    Scroll Down Buttons Fullwidth Header Design

    First, we’ll create our Fullwidth Header design. I’m building it from scratch using designs from the free Therapy Layout Pack that’s available within Divi. Create a new page and add a Fullwidth Header Module to a new fullwidth section.

    Fullwidth Header Design

    Fullwidth Section Divider

    We’ll add a Divider for this fullwidth header. Open the settings for the Fullwidth Section.

    Divi Scroll Down Button Fullwidth Header Module

    Next, scroll to Dividers. Click the Bottom tab and choose the 8th Divider Style. Set the Color to #e5e8f0 and enter 10vw for the Height. Close the section’s settings.

    • Dividers: Bottom
    • Divider Style: 8th style
    • Color: #e5e8f0
    • Height: 10vw

    Divi Scroll Down Button Fullwidth Header Module

    Fullwidth Header Text

    Next, open the Fullwidth Header Module and add your Title, Subtitle, and Button Text. Delete the dummy text for the Body Content and leave it empty.

    • Title: Start Your Journey to Feeling Better Today.
    • Subtitle: Name, licensed therapist
    • Button One Text: make an Appointment
    • Body Content: None

    Fullwidth Header Text

    Fullwidth Header Images

    Scroll down to Images and choose a wide Header Image. I’m choosing an image that comes with the Therapy Layout Pack. You can find the image by scrolling down that post and downloading the image assets.

    Fullwidth Header Images

    Fullwidth Header Background

    Scroll down to Background. Delete the Background Color and select the Gradient tab. Change the first Gradient Stop’s Color to #2e5b61 and set the position to 25%. Leave the second Gradient Stop at 100% and change the Color to rgba(46,91,97,0.5).

    • Gradient Stop One: #2e5b61, 25%
    • Gradient Stop Two: rgba(46,91,97,0.5), 100%

    Fullwidth Header Background

    Enable Place Gradient Above Background Image.

    • Place Gradient Above Background Image: Yes

    Fullwidth Header Background

    Fullwidth Header Background Image

    Next, select the Background Image tab and choose a full-screen image. I’m using another image from the Therapy Layout Pack.

    • Position: Top Center

    Fullwidth Header Background Image

    Fullwidth Header Layout

    Next, select the Design tab and enable Make Fullscreen.

    • Make Fullscreen: Yes

    Divi Scroll Down Button Fullwidth Header Module

    Fullwidth Header Scroll Down Icon

    Next, enable Show Scroll Down Button. We’ll style this button in our examples, so we’ll leave it in the default settings for now.

    • Show Scroll Down Button: Yes

    Fullwidth Header Scroll Down Icon

    Fullwidth Header Image

    Next, scroll to Image and change the Top Left Rounded Corners to 200px for desktops. Set the rest of the Rounded Corners to 0px. Change the Rounded Corners to 100px for tablets and phones.

    • Rounded Corners desktops: 200px Top Left, 0px all others
    • Rounded Corners tablets and phones: 200px Top Left, 0px all others

    Fullwidth Header Image

    Fullwidth Header Title Text

    Next, scroll to Title Text. Use H1 for the Heading Level. Choose Cormorant Garamond for the Title Font, set the Weight to Bold, and the Color to #e1ecea.

    • Heading Level: H1
    • Font: Cormorant Garamond
    • Weight: Bold
    • Color: #e1ecea

    Fullwidth Header Title Text

    Next, set the Size for all three screen sizes. Use 90px for desktops, 40px for tablets, and 24px for phones. Change the Line Height to 1.1em.

    • Size: 90px, 40px, 24px
    • Line Height: 1.1em

    Fullwidth Header Title Text

    Fullwidth Header Subtitle Text

    Next, scroll to Subtitle Text. Change the Font to Inter, the Weight to Bold, and the Color to #e1ecea.

    • Font: Inter
    • Weight: Bold
    • Color: #e1ecea

    Fullwidth Header Subtitle Text

    Set the Size to 22px for desktops, 20px for tablets, and 16px for phones. Change the Line Height to 1.6em.

    • Size: 22px, 20px, 16px
    • Line Height: 1.6em

    Fullwidth Header Subtitle Text

    Fullwidth Header Button

    Scroll down to the settings for Button One and enable Use Custom Styles for Button One. Change the Size to 14px, the Text Color to #2e5b61, and the Background Color to #e1ecea.

    • Use Custom Styles for Button One: Yes
    • Text Size: 14px
    • Text Color: #2e5b61
    • Button Background: #e1ecea

    Fullwidth Header Button

    Change the Border Width to 0px and the Border Radius to 50px. Use Inter for the Font and change the Weight to Semi Bold.

    • Border Width: 0px
    • Border Radius: 50px
    • Font: Inter
    • Weight: Semi Bold

    Fullwidth Header Button

    For the Button Padding, use 20px for the Top and Bottom and 40px for the Left and Right.

    • Padding: 20px Top and Bottom, 40px Left and Right

    Fullwidth Header Button

    Fullwidth Header Scroll Down Buttons Examples

    Now that we have our Fullwidth Header, let’s see how to style the Scroll Down Buttons. We’ll look at four examples with various combinations of icons, colors, and sizes.

    The Scroll Down Buttons include three settings. Each setting can be adjusted for each screen size independently. Settings include:

    • Icon selection – choose from 11 icons. They include various arrow designs with or without background including non-circled, circled, and solid.
    • Color – the standard Divi color selector.
    • Size – the standard Divi size adjustment.

    Fullwidth Header Scroll Down Button Examples

    It also includes a CSS field in the Advanced tab. We’ll use all these settings.

    Scroll Down Button Example One

    For our first example, we’ll use a non-circled icon without a background. Select the first icon, change the Color to #e1ecea, and change the Size to 66px for desktops, 60px for tablets, and 50px for phones.

    • Icon: 1st icon
    • Color: #e1ecea
    • Size: 66px for desktops, 60px for tablets, 50px for phones

    This creates a light green down arrow that works well with the rest of the design and stands out enough to inform the user.

    Scroll Down Button Example One

    Scroll Down Button Example Two

    For our second example, we’ll use a circled icon. Select the seventh icon and change the Color to #e8c553. We’ll set the icon larger for this one. Change the Size to 78px for desktops, 70px for tablets, and 60px for phones.

    • Icon: 7th icon
    • Color: #e8c553
    • Size: 78px for desktops, 70px for tablets, 60px for phones

    This color is a variation of the yellow in the layout pack, but it’s lighter which works better over the green background. The icon has sharp corners, but the circle matches the rounded design of the layout.

    Scroll Down Button Example Two

    Scroll Down Button Example Three

    For our third example, we’ll use an icon that’s circled and has a background. This colors the background and creates the icon with an opening that allows the background image of the website to show through. For the best results, we’ll need to pay close attention to the icon’s size and the color of the button’s background.

    Select the eighth icon and change its Color to #0e4951. Set the Size to 60px for desktops, 56pc for tablets, and 50px for phones.

    • Icon: 8th icon
    • Color: #0e4951
    • Size: 60px for desktops, 56px for tablets, 50px for phones

    The green is a darker shade of the green in the background. The darker shade stands out over the green and still matches the rest of the layout.

    Scroll Down Button Example Three

    Scroll Down Button Example Four

    What if you want to combine colors, so you have a background color behind the cutout icon? We can do this with CSS. For this example, we’ll use CSS to create a background shape behind the icon that will show through the cutout icon. The icon itself will use the standard settings.

    Select the eleventh icon and change the Color to #e1ecea. We’ll set the icon smaller for this one and create a large background shape. Change the Size to 50px for desktops, 40px for tablets, and 30px for phones.

    • Icon: 11th
    • Icon Color: #e1ecea
    • Size: 50px for desktops, 40px for tablets, 30px for phones

    Scroll Down Button Example Four

    Next, go to the Advanced tab and scroll down to the Scroll Down Button’s CSS field and enter this CSS:

    border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

    This CSS format adds padding to the Top, Right, Bottom, and Left. I’ve used this padding to create a background oval that goes well with the design of the header using design cues from the layout.

    Scroll Down Button Example Four

    Scroll Down Buttons Results

    Desktop Scroll Down Button Example One

    Desktop Scroll Down Button Example One

    Phone Scroll Down Button Example One

    Phone Scroll Down Button Example One

    Desktop Scroll Down Button Example Two

    Phone Scroll Down Button Example Two

    Desktop Scroll Down Button Example Three

    Phone Scroll Down Button Example Three

    Desktop Scroll Down Button Example Four

    Phone Scroll Down Button Example Four

    Ending Thoughts

    That’s our look at four Scroll Down Buttons you can include in your Divi Fullwidth Header Module. The scroll button includes several icons to choose from and you can style its color and size. Using the CSS field, you can style the button even further. The combinations of the button’s styling options and CSS give you lots of design possibilities with your Scroll Down Buttons.

    We want to hear from you. Do you style the Scroll Down Buttons in your Divi Fullwidth Header Module? Let us know in the comments.

    The post How to Include a Scroll Down Button in Your Divi Fullwidth Header Module appeared first on Elegant Themes Blog.

  • Get a Free Charter Boat Layout Pack for Divi

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

    This time around, the design team has created a beautiful Charter Boat Layout Pack that’ll help you get your next Charter Boat website up and running in no time!

    This layout pack includes:

    – 7 Premade page layouts strategically designed for any Charter Boat website (including a footer design)
    – Original, royalty-free photos and graphics + customizable source file (see below)
    – Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

    This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

    divi layout

    Check Out The Divi Charter Boat
    Layout Pack Below

    Get it for free today!

    Charter Boat layout pack for Divi

    Landing Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Home Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Services Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Service Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    About Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Blog Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Contact Page Design

    Charter Boat Layout Pack for Divi

    View The Live Layout Demo

    Key Features

    If you’re looking to get a new Charter Boat website, you don’t want to miss out on the Charter Boat Layout Pack for Divi! Each page layout is built to impress your visitors with world-class web design. And it has everything you need to promote Charter Boat services, and much more. Use it to get your next Charter Boat website up and running today!

    Live Demos

    Click the links below to see a live demo for each of the layouts included in the pack.

    1. Charter Boat Landing Page (live demo)
    2. Charter Boat Homepage (live demo)
    3. Charter Boat Services Page (live demo)
    4. Charter Boat Service Page (live demo)
    5. Charter Boat About Page (live demo)
    6. Charter Boat Blog Page (live demo)
    7. Charter Boat Contact Page (live demo)

    Access This Layout Right Now
    Directly from Your Divi Builder

    Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

    To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Charter Boat Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

    Charter Boat Layout Pack for Divi

    For more, check out this video to learn how you can get this layout pack up and running today.

    Subscribe To Our Youtube Channel

    Authentication Required

    Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

    Charter Boat Layout Pack for Divi

    You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

    Use Layout Images for FREE with No Licensing Restrictions

    Divi Charter Boat Layout Pack for Divi

    The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

    Download the Full Res Image Assets

    New Layout Pack Every Week!

    We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

    The post Get a Free Charter Boat Layout Pack for Divi appeared first on Elegant Themes Blog.

  • Divi Product Highlight: Slider Mega Pack

    Slider Mega Pack is a Divi layout pack with 50 slider layouts for your next web design project. The sliders are all built with Divi modules and can be easily customized with your own content and styles. In this product highlight, we’ll take a look at the layouts Slider Mega Pack has to offer and help you decide if it’s the right product for you.

    Let’s get started!

    Installing Slider Mega Pack

    Slider Mega Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Next, open your desired page in the Divi Builder.

    Divi Product Highlight Slider Mega Pack Install

    Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired slider layout and then begin importing the layout. Once the layout has been imported, all you need to do is replace the text and images and you’ll have a beautiful slider on your page!

    Divi Product Highlight Slider Mega Pack Install-32

    Slider Mega Pack Fullwidth Slider Layouts

    Slider Mega Pack comes with 32 fullwidth slider layouts. The fullwidth slider layouts are ideal for showcasing large images alongside some text and can be a great way to capture your visitor’s attention. It’s also a great way to share information or showcase some features of your service. All of these sliders have different layouts and designs, so you are sure to find a slider that will work for you! Let’s take a look at each of the 32 fullwidth slider layouts.

    Slider Mega Pack Layouts 1, 2

    The first slider layout is a text slider and features a photo background with a dark overlay over the left side of the photo. The text and the button change on each slide.

    The second slider layout is the same as the first layout, except the dark overlay and the text are on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 2

    Slider Mega Pack Layout 3

    The third slider layout has a vignette effect on the image and features changing text and buttons in the middle. There are navigation dots at the bottom as well as previous and next buttons on each side.

    Divi Product Highlight Slider Mega Pack Slider Layout 3

    Slider Mega Pack Layout 4

    This slider features multiple images on a blurred background of the image, with navigation arrows on each side and navigation dots at the bottom.

    Divi Product Highlight Slider Mega Pack Slider Layout 4

    Slider Mega Pack Layout 5

    Slider layout 5 also features multiple images on a blurred background of the same image. It has navigation arrows to the bottom left as well as navigation dots on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 5

    Slider Mega Pack Layout 6

    The sixth slider layout features changing text on a blurred transparent square over a parallax photo background. Navigation arrows to each side and navigation dots on the bottom.

    Divi Product Highlight Slider Mega Pack Slider Layout 6

    Slider Mega Pack Layout 7

    Layout 7 is similar to layout 6, with a parallax background and text slides. Navigation arrows are at the bottom left corner and the navigation dots are on the right side.

    Divi Product Highlight Slider Mega Pack Slider Layout 7

    Slider Mega Pack Layouts 8, 9, 10

    Slide layouts 8,9, and 10 feature text over multiple images that have a zoom-in effect. In these layouts, the navigation arrows are on each side and navigation dots are at the bottom of the slider. The text in Layout 8 is centered.

    The text in Layout 9 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 9

    And the text in Layout 10 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 10

    Slider Mega Pack Layouts 11, 12, 13

    Layouts 11, 12, and 13 feature a large image with text and a button on each slide, with navigation arrows to each side and navigation dots at the bottom. Layout 11 is center-aligned.

    Slider 12 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 12

    And slider 13 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 13

    Slider Mega Pack Layouts 14, 15, 16

    These layouts 14, 15, and 16 all have a greyscale effect on the photo and a parallax effect as you scroll. There is a bold underline over the header text. The text is center-aligned for layout 14.

    Slider 15 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 15

    And slider 16 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 16

    Slider Mega Pack Layouts 17, 18

    Layouts 17 and 18 feature a large image with slide text in a dark overlay box. For Layout 17, the text is on the left and the navigation is on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 17

    For layout 18, the navigation is on the left and the text is on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 18

    Slider Mega Pack Layouts 19, 20, 21

    Sliders 19, 20, and 21 all feature a greyscale photo overlay and have a zoom-in effect. There are no navigation buttons. Slider 19 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 19

    Slider 20 is right-aligned.

    And the text in slider 21 is centered.

    Divi Product Highlight Slider Mega Pack Slider Layout 21

    Slider Mega Pack Layouts 22, 23, 24

    These layouts are the same as the three above, except the photos have a zoom-out effect. Layout 22 has left-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 22

    Layout 23 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 23

    And Layout 24 has centered text.

    Divi Product Highlight Slider Mega Pack Slider Layout 24

    Slider Mega Pack Layouts 25, 26

    Slider layouts 25 and 26 have a large image that zooms in and text over a dark overlay box. Layout 25 has the text aligned to the left and navigation icons on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 25

    Slider layout 26 has the text aligned to the right and the navigation icons on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 26

    Slider Mega Pack Layouts 27, 28

    The next two layouts are the same as the two above but the image zooms out instead. Slider layout 27 has text aligned to the right and navigation icons to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 27

    Layout 28 has navigation icons to the left, text to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 28

    Slider Mega Pack Layouts 29, 30

    These two sliders feature a large image that zooms in and a different style of navigation icons. Layout 29 features the text on the left and the navigation icons on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 29

    Layout 30 features the text on the right and the navigation icons on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 30

    Slider Mega Pack Layouts 31, 32

    These next layouts are the same as layouts 29 and 30 but the image zooms out. Layout 31 has text on the left and navigation on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 31

    Layout 32 has text on the right, navigation on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 32

    Slider Mega Pack Fullwidth Post Slider Layouts

    The Slider Mega Pack also comes with 18 post sliders. These sliders showcase posts from your blog and display the post information and a button to read the post. It uses the post’s featured image as the background image for the slide. You can select a category of posts to display, or simply display your most recent posts. Like the regular sliders above, all of the post sliders are completely customizable and come in a variety of layouts, alignments, and styles.

    Slider Mega Pack Layouts 33, 34

    These sliders use a greyscale image effect and a parallax effect. Text is on the left and navigation is on the right with layout 33.

    Navigation is on the left and text is on the right with layout 34.

    Divi Product Highlight Slider Mega Pack Slider Layout 34

    Slider Mega Pack Layouts 35, 36, 37

    Layouts 35, 36, and 37 feature a large featured image with navigation arrows on each side and navigation dots below. The image has a zoom-in effect. The text is centered in Layout 35.

    Divi Product Highlight Slider Mega Pack Slider Layout 35

    In this layout, the text is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 36

    And in this layout the text is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 37

    Slider Mega Pack Layouts 38, 39, 40

    These slider layouts are the same as the three layouts above, but the image zooms out instead. Layout 38 is centered.

    Layout 39 is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 39

    And layout 40 is right-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 40

    Slider Mega Pack Layouts 41, 42

    These layouts feature a parallax image with text on one side and navigation arrows on the other. For layout 41 the text is to the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 41

    For layout 42 the text is to the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 42

    Slider Mega Pack Layouts 43, 44

    Layouts 43 and 44 are similar to the layouts above but the image zooms in. In layout 43, the text is left-aligned.

    Divi Product Highlight Slider Mega Pack Slider Layout 43

    The text is right-aligned in layout 44.

    Divi Product Highlight Slider Mega Pack Slider Layout 44

    Slider Mega Pack Layouts 45, 46

    45 and 46 are again a similar design to the layouts above, but the image zooms out instead. 45 has left-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 45

    And layout 46 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 46

    Slider Mega Pack Layout 47, 48

    Layouts 47 and 48 feature a dark overlay square for the post title and navigation arrows. The image zooms in. Layout 47 has the text on the left and arrows on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 47

    Layout 48 has the text on the right.

    Divi Product Highlight Slider Mega Pack Slider Layout 48

    Slider Mega Pack Layout 49, 50

    Finally, slider layouts 49 and 50 are similar to layouts 47 and 48, but the images zoom out. Layout 49 has the text on the left.

    Divi Product Highlight Slider Mega Pack Slider Layout 49

    And layout 50 has right-aligned text.

    Divi Product Highlight Slider Mega Pack Slider Layout 50

    Purchase Slider Mega Pack

    Slider Mega Pack is available in the Divi Marketplace. It costs $9.99 for unlimited website usage and lifetime updates. The price also includes a 30-day money-back guarantee.

    Final Thoughts

    Slider Mega Pack comes with 50 prebuilt slider layouts with beautiful transitions, effects, and navigation layouts that can be easily customized with the Divi Builder. If you are looking for some unique slider layouts that are customized beyond the standard Divi options, this product might be just right for you. We would love to hear from you! Have you tried Slider Mega Pack? Let us know what you think about it in the comments!

    The post Divi Product Highlight: Slider Mega Pack appeared first on Elegant Themes Blog.

  • Download a FREE Header & Footer for Divi’s Conference Layout Pack

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies. We recently shared a brand new Conference Layout Pack. To help you get your website up and running as soon as possible, we’re sharing a global header & footer template that matches this layout pack perfectly as well! Hope you enjoy it.

    divi layout

    Check Out The Divi Conference Header and Footer Template Below

    Get it for free today!

    Header Design

    Header Layout for Desktop in the Divi Conference Header and Footer Freebie
    Header Layout for Tablet and Mobile in the Divi Conference Header and Footer Freebie

    Footer Design

    Footer Layout for Desktop in the Divi Conference Header and Footer Freebie

    Footer Layout for Tablet and Mobile in the Divi Conference Header and Footer Freebie

    Download The Header & Footer Template For The Conference Layout Pack

    To lay your hands on the free global header & footer template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    How to Upload The Template

    Go to Divi Theme Builder

    To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

    Navigating to the Divi Theme Builder

    Upload Default Website Template

    Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

    Opening the import export functionality of the Divi Theme Builder

    Navigate to the import tab, upload the JSON file which you were able to download in this post, and click on ‘Import Divi Theme Builder Templates’.

    Import settings for the header and footer layout pack

    Save Divi Theme Builder Changes

    Once you’ve uploaded the file, you’ll notice a new header and footer in your default website template. Save the Divi Theme Builder changes as soon as you want the template to be activated.

    Saving changes with newly imported Header and Footer Layout

    How to Modify The Divi Conference Header and Footer Templates

    Open the Divi Conference Header Template

    To modify the header template’s elements, start by opening the template.

    Editing the Divi Conference Header Layout

    Select Menu of Choice

    Select a menu of your choice in the Menu Module for the desktop and tablet view.

    Selecting menu for the desktop menu

    Choose Menu for Mobile

    Switch to the mobile view

    Switch from desktop to mobile view within the Divi Theme Builder

    Select a menu of your choice in the Menu Module for the mobile view.

    Select a menu for the mobile version of your Header Layout

    Edit Social Media Links

    This header has social media icons on the top left. Open the settings for this module and add/edit the social media accounts as needed.

    Editing social media icon links with the Header Layout

    Adjust the social media icons for mobile

    Switch to the phone view, and also edit the social media icons for the mobile view.

    Editing social media icons for mobile

    Change the Button CTA

    Switch back to desktop view and edit the button module to link to your destination of choice.

    Edit the button CTA in the Header Layout

    Edit the Text CTA

    Edit the text module with content of your choice.

    Edit the text CTA within the top right header

    Modify the Text CTA for Mobile

    Switch to mobile view, and edit the text CTA within.

    Edit the text module for mobile

    Save Header Template Changes

    Once you have made all necessary changes to your satisfaction, exit out of all modules and save your header template. Next, navigate back to the main Divi Theme Builder landing page.

    Save edits to the Divi Conference Header Layout

    Open Footer Template

    Continue by opening the footer of the Divi Conference Layout Pack.

    Editing the Divi Conference Layout Footer

    Update Footer Content

    You will need to go through and update the content of the footer, including adding your own text, link URLs, and connecting your email marketing tool of choice to the email optin module. Don’t forget about the copyright text at the bottom of the footer as well.

    Edit footer content links, logos, and email marketing integrations.

    New Freebies Every Week!

    We hope you’ve enjoyed the Divi Conference Layout Pack and the Header & Footer freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

    The post Download a FREE Header & Footer for Divi’s Conference Layout Pack appeared first on Elegant Themes Blog.

  • How to Style a Grid Item in Divi’s Filterable Portfolio Module

    Having an area on your website to showcase your work is important. If you’re a stylist, you could create multiple projects within your WordPress website to show your concepts. If you’re a brand designer, you can use a portfolio to showcase your past work. Furthermore, we can even go a step further and add in various categories for our projects. This is where Divi’s Filterable Portfolio Module comes into play.

    With this module, we are able to display our hard work in a way that is easy and organized. In today’s tutorial, we’ll be styling the Filterable Portfolio Module’s individual grid items. We’ll be using layouts from the Divi Conference and Divi Online Yoga Instructor free layout packs that come with every purchase of Divi. As with all things Divi, we have the ability to style this module to make it match our needs and wants. However, before we get into styling, let’s learn a bit more about the module.

    What is Divi’s Filterable Portfolio Module?

    Projects are part of a custom post type that works similarly to posts. You can find these inside your WordPress dashboard.

    The Projects custom post type that comes with every Divi install

    This is where you’ll create your individual projects that will populate your Filterable Portfolio Module. The module gives us two ways of showing our projects: in a grid format, or in a fullwidth format. For us, we’ll be using and styling the grid format. With the Filterable Portfolio Module, we will be able to showcase our most recent projects. Users of our site will be shown a filter bar on top of our portfolio grid. From there, they can cycle through the various portfolio categories that we allow to be displayed within the module.

    Here’s an example of a vanilla setup of the module with some sample projects:

    The Divi Filterable Portfolio Module with sample projects

    Areas to Consider When Styling Divi’s Filterable Portfolio

    Like all Divi modules, the Filterable Portfolio Module comes with a number of features that we can style to our needs and wants. As such, most of the features that accompany the module we are able to edit within the Design tab of the modules settings modal box. We can edit the follow areas and more:

    • Project Title
    • Project Category
    • Thumbnail
    • Filter Text
    • Thumbnail Hover
    • Pagination

    This isn’t a full list, and we haven’t even begun to talk about how CSS has add deeper customizations to this module!

    How We’ll Be Styling Divi’s Filterable Portfolio Module

    As mentioned earlier, for this tutorial we’ll be using two layouts from the Divi Conference and Divi Online Yoga Instructor. Below, you can catch a glimpse of the work that we’ll be doing during this tutorial.

    Divi Conference Event Layout

    The Divi Conference Event Layout with the Filterable Portfolio Module

    Divi Online Yoga Instructor Landing Page Layout

    The Divi Online Yoga Instructor Layout with the Filterable Portfolio Module

    You can easily download both layouts from within the Divi Builder. Now, let’s get started!

    Styling Divi’s Filterable Portfolio Module: Divi Conference Edition

    First things first, we’ll need to install the event page template from the Divi Conference Layout Pack. After you have created your new page in WordPress and activated the Divi Builder, we’re going to enter into the Divi Library.

    Enter the Divi Layout Library

    Click on the Load from Library icon to enter into the Divi Layout Library

    Load the Divi Layout Library

    Locate Layout Within the Divi Layout Library

    Using the search feature within Divi’s Layout Library, search for the Divi Conference Event Page layout.

    Search for the Divi Conference event page layout within the Divi Layout Library

    Install the Layout

    Once you have selected the layout, click the Use This Layout button to install the layout into your page.

    Install selected layout

    Remove and Replace Image Module

    We’re going to remove the Image Module pictured below to make room for the Filterable Portfolio Module that we’ll be styling. Click on the Delete icon after hovering over the image to remove the photo.

    Remove Image Module

    Insert the Divi Filterable Portfolio Module

    With the Image Module removed, we can now make space for our Filterable Portfolio Module. We will click on the Add Module Icon (the grey plus sign) and then select the module from the module modal box that pops up.

    Insert the Filterable Portfolio Module

    Setting the Post Count and Portfolio Layout

    By default, this module will showcase your work in a one column. However, we’ll be using the Grid layout which comes by default with 4 columns. As such, we recommend choosing a number that is a multiple of 4 (4, 8, 12, 16 etc.) as the Post Count for your portfolio. For this tutorial, we’ll be using 12 projects in our grid.

    Setting the Post Count and Portfolio Layout

    Begin Styling Divi’s Filterable Portfolio: Title and Meta Text

    Now that we have our projects showing up as a grid, let’s tie in some of the design elements from our selected template. In this case, we’ll be using the styling that comes with the Divi Conference Layout Pack within our new module.

    Text Styling

    • Text Alignment: Center
    • Text Color: Dark

    Title Text Styling

    • Title Heading Level:H2
    • Title Font: Krona One
    • Title Text Color: #000000

    Meta Text Styling

    • Meta Font: Default (Open Sans)
    • Meta Text Color: #ff6651

    Text styling edits for your newly added module

    Styled titles within the Filterable Portfolio Module

    Now that we have our styling in place for the titles within the portfolio grid, let’s make some edits to the actual shape of the project thumbnails themselves.

    Modify Border and Rounded Corners of Project Thumbnail

    Within our Divi Conference Layout Pack, we are using a unique combination of rounded corners to give a unique shape to some of the key images within the pack. Let’s apply this styling to the thumbnails of our module.

    Image

    • Image Rounded Corners: 50px 50px 50px 0px
    • Image Border Styles: All
    • Image Border Width: 3px
    • Image Border Color: #000000
    • Image Border Style: Solid

    Adding the corners and borders to the featured image

    Rounded corners and border styling added to portfolio list items

    This will cause our thumbnails to have a shape that matches the rest of the other images throughout the layout pack.

    Customizing the Hover Overlay

    Let’s go a step further with our styling and make a slight edit to the overlay that comes by default with this module. We’re going to change the color as well as the icon that’s used right out of the box.

    Overlay

    • Zoom Icon Color: #bcf5fd
    • Hover Overlay Color: #ff6651
    • Hover Icon Picker: Zoom

    Setting for the hover overlay effect

    As you can now see, we’ve added the brand colors of this layout into the overlay, as well as changed the icon that Divi provides by default for this module’s hover overlay feature.

    Hover styling from in effect within the Divi Conference Event Page Layout

    Styling the Pagination

    We’re now going to start using small snippets of CSS to add some further customization to our Filterable Portfolio Module. Firstly, we’re going to style the pagination of this module. Next, we’re going to remove the border that appears above with a single line of CSS

    Pagination Text

    • Pagination Font: Krona One
    • Pagination Text Alignment: Center
    • Pagination Text Color: #ff6651
    • Pagination Text Color (Hover): #000000

    Styling the pagination of the Divi Filterable Module

    For our CSS, we will be moving to the Advanced tab of our module. Secondly, we will click on the Custom CSS tab. Next, we will enter in the following code snippet to remove he border on top of our pagination, giving it a cleaner look.

    Portfolio Pagination

    border-top: 0px;

    Portfolio Pagination CSS

    Using Custom CSS & Divi Settings to Style the Filter Text

    For the Filter Text, we’ll be taking things up a notch. We are going to use CSS to change the background as well as the hover effects. We want to have a close seamlessness between the newly added module and the styling of the layout pack. First, let’s enter in our Divi settings for the font.

    Filter Criteria Text

    • Filter Criteria Font: Krona One
    • Filter Criteria Text Color: #ffffff
    • Filter Criteria Text Color (Hover): #000000

    Filter criteria text styling

    As it currently stands, our filter appears to have disappeared. This is because in its default state, it is white text on a white background. However, we’re going to change that with some custom CSS in two places. Firstly, we’re going to add a snippet of CSS within the Page Settings that’ll add a background to the filter text. Secondly, we’ll style the Active Portfolio Filter using the Advanced tab of the module.

    Access page settings

    To access the Page Settings, click on the three dots on the middle of the screen. Then, select the gear icon which will open up the Page Settings. Next, you will navigate to the Custom CSS tab, and enter in the following to add a background to the Filter Text.

    Access and enter into the page settings for adding additional CSS

    Custom CSS

    In this CSS snippet, we are targeting the background color of the filter. We are also targeting and styling its hover state. Next on the agenda, let’s add a bit more CSS to the module and showcase our Active Filter tab more prominently.

    /* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

    Using Page Settings to set the color of the background of the module's filters

    Styling the Active Portfolio Filter Tab

    The Active Portfolio Filter Tab draws our user’s attention to the current portfolio category that they’re visiting. Right now, this filter has white text and a light background. We’re going to go into the Advanced tab of the Filterable Portfolio Module and add some text to the default and hover states of this feature. These are the CSS properties we’ll add in a default state:

    background: #ff6651;
color: #ffffff !important;

    Active Portfolio Filter styling

    Hover State

    On hover, we’ll change the background to black.

    color: #000000!important;

    Background styling of hover for Active Portfolio Filter

    Final Look Styling Divi’s Filterable Portfolio with Divi Conference

    Here’s the final look!

    Finished Styling Divi's Filterable Portfolio Module for Divi Conference

    And now, here’s what it looks like when we hover!

    Finished Styling Divi's Filterable Portfolio Module for Divi Conference

    Styling Divi’s Filterable Portfolio Module: Divi Online Yoga Instructor Edition

    Similarly to the Divi Conference edition, find your layout within the Online Yoga Instructor Layout Pack inside the Divi Builder. We’ll be using the Landing Page Layout for this tutorial. Scroll down to the section Classes section with the title All Upcoming Classes Section.

    Updating the Online Yoga Instructor layout

    Inserting Filterable Portfolio Module

    From here, we’re going to delete the rows with the classes. Click the purple icon with three dots on it. Next, select the Wireframe view. Lastly, you’re going to delete the two rows that have three columns within them.

    Rearranging the layout in preparation for our new module

    Next, we’ll replace them with a single column within the row within which. Then, we’ll add our Filterable Portfolio Module.

    Inserting Filterable Portfolio Module into newly created row

    Like the previous example, we will be using the Grid Layout for this module with a multiple of 4 for the Post Count. Now, let’s do something a bit different with the information that we showcase on the card. In the Content tab, let’s navigate to Elements and unselect the Show Categories. This will mean that the Portfolio Module will only show the name of the project without the name of the category that it’s in.

    Disable show categories for the module

    Style Filter Criteria Text, Project Title and Pagination Text

    Let’s set the style foundation for the text portions of our module. The body text for this layout is Open Sans and the font used for the main headings is Cinzel. Therefore we’ll be using a combination of these two fonts throughout out styling process.

    Text

    • Text Alignment: Center
    • Text Color: Light

    Title Text

    • Title Font: Cinzel
    • Title Text Color: #ffffff

    Title and Text Styling - Part One

    Filter Criteria Text

    • Filter Criteria Font Weight: Bold
    • Filter Criteria Text Color: #ffffff

    Pagination Text

    • Pagination Text Color: #ffffff

    Title and Text Styling - Part One

    This is what our Filterable Portfolio Module is looking like right now. It’s not much, but we’re slowly getting there!

    New text styling implemented into the portfolio module

    Creating a Translucent Hover Overlay

    Let’s pull some inspiration from the various modules and beautiful gradients within this layout. For this, we’re going to create a translucent hover overlay and style the icon that shows up on hover as well.

    • Zoom Icon Color: #323741
    • Hover Overlay Color: rgba(255,201,165,0.85)
    • Hover Icon Picker: Search leaf and see icon above

    Styling the hover overlay

    Adding a Border to the Portfolio Grid Items with Custom CSS

    Similar to our first tutorial, we’re now going to use some CSS to add more interest to our Filterable Portfolio Module. Now, we are going to add a border around each individual portfolio grid item. Use the CSS snippet below within the Custom CSS portion of the Page Settings to add our border. We’ll also be assigning the CSS Class border to this module.

    • CSS Class: border

    Custom CSS

    /* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

    Adding a CSS class to our module in addition to custom CSS

    Here we now have our Filterable Portfolio Module with a nice border – and soe padding – around each grid item.

    Some padding and a border for the portfolio module

    Adding CSS to Style Pagination Border

    Unlike our previous example, let’s add some color to the border for our pagination with some CSS. This will also go within the Page Settings > Custom CSS area.

    /* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

    Styling the Filter Criteria Text

    Similar to our Divi Conference Portfolio Module styling, we want to add some jazz to our category filters. Again, we want to pull from the styling that is already present within the template provided to us. Here’s the CSS that we’ll be adding into our Custom CSS section to target the background and hover of our Filter bar.

    /* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

    With these two new additions to our Custom CSS, this is what our Filterable Portfolio Module is shaping up to be.

    Filter text and border styling added to Divi's Filterable Portfolio Module

    However, notice how the Active Portfolio Filter is lost. It still has a light background with white text on top of it. Let’s go into the module’s settings and add some CSS to change this.

    Custom CSS

    Active Portfolio Filter:

    background: #ffffff;
color: #323741 !important;

    Styling the Active Filter setting with Custom CSS

    Removing Animation From Module

    To provide a cleaner experience, we’ll be removing the default animation that comes with the Filterable Portfolio Module. For this, we’ll first need to go back into our Page Settings and add some CSS that will target the portfolio grid items and remove the slide-in transition that occurs out of the box with Divi.

    Custom CSS

    /* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

    Change Portfolio Grid from Four Columns to Three

    Our final CSS addition will be to transform our Portfolio module from four columns to three. This will allow us more room to see our projects. Also, we’ll be adding an additional row to our module. Here’s the final CSS snippet that you’ll be able to use to convert your columns.

    Custom CSS

    For this last snippet, we’ll be adding the CSS ID #three-column-grid to our module. We will still be keeping our CSS class from before intact.

    /* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}

#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}

#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}

#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

    Adding CSS ID

    Styling Divi’s Filterable Portfolio: In Conclusion

    As with most of Divi’s modules, the settings that come with Divi can be further expanded upon with CSS. Showcasing your work is an important part of running a business, blog or brand online. As such, having an organized manner in which to display your work is key. Glean from the tips that were shared today to partake in your own journey of styling Divi’s Filterable Portfolio module and show us your work in the comments or on social media!

    The post How to Style a Grid Item in Divi’s Filterable Portfolio Module appeared first on Elegant Themes Blog.