Do you want to customize the site and pin the elements? This guide shows how to fix all divi elements with or without coding. Recently, we saw how to use divi to fix titles so that users can browse content. It’s a good first step, but there’s more to do. Divi is a highly customizable theme that personalizes all parts of the WordPress site. Therefore, this tutorial will introduce various methods of fixing divi elements. Why fix the divi element? By default, the element in the site is not fixed, so when the user scrolls down, the element disappears from the screen and the user sees new content. However, you can always show the most important elements on the site to help customers find what they need. That is, even if the user scrolls down, the element is always fixed on the screen. For example, you can fix a column that contains the main menu, the registration form, or the main information required by the user.
The idea is to make these elements appear more clearly to help visitors. Fixed elements can also help increase sales and transition. For example, in order to increase sales, many online stores will fix suggestions and major click inducement questions (CTA). How do I fix \/ fix divi elements? There are two main ways to fix divi elements. Using the built-in divi builder plug-in and a little coding, this guide introduces two ways to fix elements. Both options will complete the operation, so choose the option that best suits your technology.
1) Divi builder comes with divi, and if you’re already using the theme, you don’t need to install anything. To pin elements, you must first create a page and then use the visual builder to add, remove, and edit elements. In this presentation, you will use accountant, one of the pre created layout packages, but you can also use real-time pages or new pages. Before creating a page, navigate to Page > New on the word press dashboard, and then create a new page. 
From now on, we will use the divi visual builder, so clicking the use divi builder button will see the drag and drop visual builder. When the default template import generator opens, three options are displayed. Choose a layout built from scratch, or choose the first option if you want to create an existing page and copy a custom design. The divi builder makes it easy to create unique page designs on your site. Alternatively, you can copy an existing page design or select a pre created layout. For us, we will use the pre created layout template (accountant). Therefore, select the pre created layout selection option for importing the accountant template, and then select the desired option from the list.
After that, using classic editor, the screen will display the following: However, it is easier to use visual builder, so we will switch to visual builder. Switch to visual builder Title displays options for using a visual builder named build on front end. Click it to view the changes of the screen and make it easier to view the modification results at the front end. The accountant template is provided with the right column and the press release addition form. However, if the scroll is not fixed, the scroll will disappear. So let’s take a look at how to fix the newsletter subscription window.
Male fixed menu WordPress plug-in installs and activates divi elements and uses the fixed menu plug-in. So open the WordPress dashboard and insert
In > new, search fixed menu and fixed header of scroll. Then click Install and activate. Using this simple plug-in, you can fix the menu, header or all elements immediately. Settings > pin menu (or any!) Please go to. The fixed menu setting has two main custom setting options. Let’s first look at how to customize basic advanced preferences. The name of the fixed element must be specified. In our case, we call it #sticky and set the space between the top page and the element to 50px. If the interval is uncertain, please don’t worry. It can be changed later.
Then save the default settings and go to the advanced settings tab. Here, we will explore the viscous elements. For example, set the Z-index field to 99998 and add #stop to the push element field. Push elements help to stop floating fixed components (described in detail later). There are other advanced customization options, but they are not involved now. Therefore, you can save the settings after adding these values. Then open the page created using the divi visual builder. Add the CSS class to the newsletter subscription component to make it a fixed component. There are two columns. The left column shows blog posts and the right column shows the \
To add a custom CSS ID, open the divi settings section and select column 2. Under the Advanced tab, the section adding CSS ID, CSS class and CSS custom code will be displayed. To pin this element, simply add the pin element set in preferences. In our case, add stike in the CSS ID field and save the settings. Ensure that all divi compiler settings are saved. Otherwise it will not work. You can then preview the page. The above revised the press release inclusion form. However, because it overlaps with other elements in the site, we will make some changes. At this point, the advanced push element ID will take effect. In our case, we will ensure that the newsletter widget stops before querying the form.
Stop adding CSS, so you should mention the push CSS ID in the query form as before. To do this, open the press release section settings in divi, navigate to the Advanced tab, add stop to the CSS ID, and save the changes. Then refresh the page at the front desk. You can see that the press release subscription box is fixed, but it will stop after reaching the contact form, which does not overlap with other parts on the website. In the same way, the divi element can be fixed on the site according to the same steps. Let’s look at how to use fixed menus and divi builder to fix social icons.
The process of pasting and fixing social media icons is very similar. However, before you start, remember to remove the fixed CSS ID from column 2, because using the free version of the fixed menu can fix one element at the same time. The fixed CSS ID must then be added to the social media icon element. As before, click the element, navigate to the Advanced tab, and then add the custom CSS ID to the appropriate field. Then save the settings and view the results at the front end. Male: as you can see, we locked the social media icon!
If you don’t want to install plug-ins, you can program fixed elements. Let’s see how to do it. 2) Make all divi elements sticky with a little coding. This section describes how to programmatically fix divi elements.
。 In this case, we’ll show you how to fix the title with a little coding instead of fixing the newsletter subscription component. You can create custom site templates in the divi theme builder that generates custom titles. In this demonstration, first generate the global header. There are three options. Create layout from scratch select an existing page copy this presentation create a title from scratch. In the next step, you must select the required number of rows in the header. The tutorial selects a single line layout. As mentioned earlier, after creating a title, you can edit the title and add multiple elements, such as menus, images, custom links, etc. Drag and drop divi Builder allows you to resize and populate the title with a few clicks. In this case, add the menu to the title. The CSS class of the header must be mentioned before continuing to add the CSS class. In the title settings, navigate to the Advanced tab and add a custom CSS class. Add PA stick header to the custom CSS class. Male then displays the part where you saved the changes and inserted the code under the integration settings in the divi theme options. Adding JavaScript code now starts the interesting part. Copy the following JavaScript code: 
JQuery function ($){
var headerHeight = $(‘header.et-l.et-l–header’). outerHeight();
$(window). Bind (\
Var windowheight = $(window). Height ()
if ($(window). Save and paste your changes into the topscrol editor (). Add CSS, and then set the elements to be fixed on the website. For us, copy the following CSS code and paste it into the CSS editor to fix the title at the top\/* To make certain elements stronger**
.pa-sticky-header {
Position: fixed! important
Top: 0\/* Sets the distance from the top of the page to the title**
Width: 100%;
}When you look at the front end of the website, you can see that the header is fixed. You can also customize the head and change the position, size, etc. Similarly, you can use it based on code and fix other elements in divi. For example, it can be used to anchor forms, buttons, or columns. It is recommended that you now know how to create fixed elements in the divi installation, but we will learn some tips before completing the guide. The non animated divi builder plug-in allows you to add Hoover effects to elements, parts, and so on. However, if you use the Hober effect on fixed elements, the site may be damaged. It is recommended not to use it. If there are technical problems during installation, disabling the hover animation effect will restore everything to normal. Preview changes before publishing divi Builder allows you to view changes on the screen. This is useful to ensure that the alignment is correct and that the elements do not overlap with other artifacts on the site. In the free version of the restricted sticker element WP fixed menu of the free version, only one fixed element can be added. Therefore, if you want to add more elements to the website, it is recommended to upgrade to the professional version starting at $39. Male conclusion in general, modifying some elements is a good option for users to see more clearly. In this guide, you see two options for immobilizing divi elements. Use the divi builder plug-in programming method. If there is no coding technology, you can use the divi builder plug-in. This is the simplest and most familiar method for beginners. Live preview mode allows you to view all changes immediately. plug-in unit
If you don’t want to install or just want to code, you can programmatically fix all elements. Javascript code is used by default, and the required elements are customized and fixed. The style of the theme is CSS code. You can add to CSS or use additional CSS sections in divi. Before doing so, you must mention CSS classes in the element. What method do you use to fix elements? Do you know anything else? Please inform the comments section below. If this tutorial is useful, please share it with friends and colleagues bloggers on social media. For more tutorials, see the blog.
