Custom Code

Apart from the plethora of elements and the various styling options on Droip, you can also add Custom Code. This is useful if you wish to customize your page further and make it your own using HTML, CSS & Javascript.

📝 Note: There may be cases where your Custom Code interferes with Droip’s performance and thus we cannot promise complete compatibility.

Compatible Code

As mentioned earlier, the compatible code that you can use is HTML, CSS & Javascript.

In the case of HTML Tags, make sure to use the appropriate opening and closing tags to ensure your code will work as it should. And, keep in mind not to include the tags <html>, <body>, or <head> in your custom code as it will cause your site/page to break.

Adding Custom Code

To add your Custom Code, head over to Pages > Settings > Custom Code. Here, you’ll find the following two text boxes:

Inside <head> Tag: Enter code inside the <head> tag.
Before </body> Tag: Enter code that’ll be placed before the </body> tag.

Inside Tag

Inside <head> Tag

Code added here will be placed after <head> and before </head> tags. HTML tags like <link>, <meta>, and <style></style> must be placed here. You can also add the <script></script> tags but that will slow down your page’s load speed.

Before </body> Tag

Code added here will be placed before closing </body> tag. One thing to note is that adding <script></script> tags here instead of inside <head> tag usually helps to improve the site’s performance.

Pop-ups, also known as modals, are versatile dialog windows used to display information that requires user attention without navigating away from the main content. They are commonly used for confirming actions, providing additional information, or collecting user input.

Creating a Pop-up

To add a Pop-up to your page:

Navigate to the Pages panel in the left sidebar.
Click on the + icon and select New Pop-up to create a new Pop-up.
Enter a name for your Pop-up, save it, and start editing.

Designing a Pop-up

Using Droip Elements and various customization options, you can create Pop-ups that seamlessly integrate with your website while meeting your specific needs.

Pop-up Settings

The Pop-up Settings allow you to control various aspects of the Pop-up. Select the pop-up on the canvas and click on the settings icon from the inline editor editor to access the following:

Pop-up Name

Assign a label to identify the Pop-up in the builder.

Display Conditions

Determine where and for whom the Pop-up will appear:

Set Display Condition to Entire Site

The Pop-up will be displayed across all pages of the website, ensuring it reaches every visitor regardless of their navigation path.

Set Display Condition to User Role

Restrict the Pop-up to specific user roles. You can select roles such as Administrator, Editor, Author, Contributor, Subscriber, or any custom roles available on your website.

Set Display Condition to Posts

Choose whether to display the Pop-up on specific blog posts. You can:

Select individual posts where the Pop-up should appear.
Target entire post categories to ensure the Pop-up is shown on all posts within the chosen category.
Select tags to ensure the Pop-up is shown on all posts within the chosen tags.

Set Display Condition to Pages

Select specific pages where the Pop-up will be shown. This allows for targeted messaging, such as displaying a subscription offer only on the pricing page or showing an announcement on the homepage.

Triggers

Set conditions for displaying the Pop-up:

On Page Load: Display the Pop-up immediately when the page loads.
On Page Exit: Show the Pop-up when the user is about to leave the page.
Show After: Define a delay (in seconds) before the Pop-up appears.
Show Count: Set how many times the Pop-up should be shown to the same user.

Close Options

“X” Icon: Choose whether to display the close icon.
Close Buttons: Customize the appearance and functionality of close buttons.
Close by Clicking Outside: Allow or prevent users from closing the Pop-up by clicking outside it.

Animation

The Animation settings allow you to add motion effects to your Pop-ups for a more dynamic user experience. You can select from a library of pre-defined animations, including:

Fade In: The Pop-up gradually appears on the screen.
Slide In: The Pop-up slides into view from the selected direction (top, bottom, left, right).
Zoom In: The Pop-up starts small and scales up to full size.
Bounce: The Pop-up animates with a bouncing effect.
Rotate: The Pop-up rotates into position.
Many more animation styles are available to enhance the user experience.

You can also adjust:

Easing: Control the speed curve of the animation.
Duration: Set how long the animation lasts.

Pop-up Layout

Pop-up Layout allows precise control over the Pop-up’s positioning on the screen.

Set Position

The screen is divided into 9 equal sections (3 columns, 3 rows).
Assign the Pop-up to a preferred section (e.g., top-left, center, bottom-right, etc.).

Horizontal & Vertical Offset

Fine-tune the Pop-up’s position relative to its assigned section.

Example: To position a Pop-up 50px from the top, set Vertical Offset to 50px. To position it 50px from the left, set the Horizontal Offset to 50px.

By adjusting these settings, you can ensure an optimal, user-friendly experience for visitors.

The Pages Panel in Droip lets you create pages within your project. You can create new pages, add pre-made utility pages, browse and use templates, or create popups for various use cases.

Clicking the + button at the top opens a menu with four options:

New Page – Create a new blank page.
New Utility Page – Add pre-made utility pages like 404, password retrieval, login, and more.
New Template – Choose from a growing library of full-site templates.
New Popup – Create popups for modals, alerts, or promotional messages.

Action Menu Options

Click on the ellipsis icon (•••) beside each page to open the Action Menu, which includes the following options:

Settings – Access the Page Settings panel.
Duplicate – Create an exact copy of the selected page.
Rename – Change the name of your page.
Preview – View the page before publishing.
Import – Import a Droip page in the form of a .zip file.
Export – Export this page as a .zip file.
Delete – Remove your page. A confirmation popup will appear before deletion.

Applying Variable Mode

Clicking on the Variable icon lets you apply the Variables Mode to the page. This allows you to maintain consistent brand styles across all your pages by applying the global variables you’ve set for the project.

Page Settings

The Page Settings panel is organized into the following tabs:

General

The General tab allows you to define essential details about your page:

Title – Set the page name.
Slug – Edit the auto-generated page URL (slug) for better readability.
Page Description – Provide a short description of your page.
Status – Set the page status.

SEO Settings

The SEO tab helps optimize your page for search engines. It includes:

SEO Title Tag – Define the page title that appears in search results.
Meta Description – Add a brief description to improve SEO.

📝 Note: If you have an OpenAI API key added, you can generate a Meta Title and Meta Description with AI in one click.

Use the Preview field to see how your page will appear on SERPs. Once satisfied, hit Save.

Open Graph

Customize how your page appears when shared on social media platforms:

Add Cover Image – Upload a cover image to serve as a thumbnail.
Open Graph Title – Set a title for your webpage.
Same As SEO Title – Toggle to match the Open Graph Title with the SEO Title.
Open Graph Meta Description – Provide a brief description.
Same As SEO Meta Description – Toggle to match the Open Graph Meta Description with the SEO Meta Description.

In this tab, you can add Custom Code to your page, allowing further customization using advanced features. For more information on using Custom Code, refer to our Custom Code Documentation.

Search & Filter Pages

The Search & Filter options on top of the pages panel allow you to easily locate and organize pages within the project. With just a few clicks, you can quickly find the specific pages you’re looking for, making page management more efficient and streamlined.

Migrate With Droip

Droip offers a seamless migration option for existing pages, allowing you to edit them in Droip without losing your content.

To migrate a page:

Open the page from the WordPress admin dashboad.
Click Edit With Droip on the top of the page editor.
A popup will appear with the message Safely Migrate to Droip.
Click Convert to retain your existing content.
The content will load on the Droip canvas, ready for editing.
To start fresh, click Start From Blank (this will erase all existing content, so proceed with caution).
Click Back on the popup to exit without making changes.

📝 Note: Starting from blank will delete all existing content permanently. Ensure this is your desired action before proceeding.