Using Webflow to build and host your website, but starting to feel boxed in? Or maybe you love its design freedom but aren’t thrilled about the hosting limitations or the price tag that comes with it?

If you’re looking for more control, flexibility, and scalability, WordPress opens the door to all of that and more. The only catch is the complexity behind switching platforms.

That’s why this guide exists! Below, you’ll find a clear, step-by-step breakdown on how to migrate from Webflow to WordPress without the stress or the mishaps.

Why Move From Webflow to WordPress

Webflow is undeniably powerful, but even with its strengths, there are plenty of reasons you might start looking beyond it, such as:

• Needing greater functionality: Webflow gives you great visual control, but falls short when you need to extend your website’s functionality, as its app and widget selection is limited compared to WordPress’s massive plugin ecosystem.
• Avoiding platform lock-in: Webflow also makes it hard to fully “own” your website. Self-hosting isn’t straightforward, and if you rely on its built-in CMS, moving your site elsewhere means losing your dynamic features, effectively locking you into Webflow’s ecosystem or leaving you with a static website. And even after exporting, any update (no matter how small) has to be made inside Webflow first, then manually re-exported and reuploaded.
• Outgrowing Webflow’s pricing model: Webflow can start as an affordable option, but as your site grows, so does your bill. Expanding becomes less and less feasible as advanced features, CMS items, and increased traffic, among other things, are gated behind a paywall.

So, while Webflow is a strong platform, its limitations can become more noticeable as you expand. And although migrating from Webflow to WordPress may seem like extra work, making the switch when your site is still manageable can be the right call in the long run.

Pre-Migration Steps

Now that you know why you should move from Webflow to WordPress, let’s walk through the key pre-migration steps you need to take:

[Optional] Backup Your Webflow Site

Migrating from Webflow to WordPress won’t affect the version of your site inside Webflow, as you’re only exporting a copy. Still, it’s always wise to be cautious; backing up your Webflow site beforehand gives you a safety net to fall back on, just in case.

Make an Inventory

It’s also a good idea to make an inventory of your site and all the content it contains. It may feel like a hassle, but it will make things much easier when you’re double-checking that everything has been successfully migrated.

Get Hosting & Install WordPress

Next, it’s time to set up your WordPress website.

When choosing WordPress, you have two options: WordPress.com and WordPress.org.

If you choose WordPress.com, hosting, domain, and site maintenance are all handled for you. However, it can be quite restrictive when it comes to custom domains, access to all themes, etc, unless you upgrade to higher-tiered paid plans, which can get quite expensive. 

This can be especially limiting if your goal is to migrate a Webflow site to WordPress as seamlessly and cost-effectively as possible.

On the flip side, if you choose WordPress.org, you’ll need to set up your own domain and hosting, but you’ll also gain greater flexibility and control, which is ideal when migrating from a more restrictive platform like Webflow.

To get your hosting, there are numerous providers to choose from, such as Bluehost, Hostinger, and more. But no matter which option you choose, be sure to select it wisely, as hosting can directly impact the success and longevity of your website.

Pick the Right Website Builder as Your Webflow Alternative

As mentioned earlier, migrating from Webflow to WordPress involves creating a copy of your Webflow site and bringing it to a WordPress environment.

But what happens after you import it? 

Usually, if you export a Webflow site and self-host it, every single update (even tiny text changes) has to be done inside Webflow, exported again, and reuploaded manually. That’s slow, tedious, and completely defeats the purpose of moving to WordPress.

To avoid that cycle, you need a WordPress website builder that replaces the Webflow editor entirely, so that you can run, maintain, and grow your site from one place.

So what tool can give you WordPress flexibility while still keeping the same visual design freedom you’re used to in Webglow?

The answer is Droip.

Droip is the ideal Webflow alternative for WordPress. 

It’s a powerful drag and drop builder with an intuitive visual editor, unlimited creative freedom, granular control, and all the modern design capabilities you can expect, including:

• Instant Figma to WordPress Handoff
• Dynamic Content Management
• Real-time Collaboration & Co-editing
• Extensive Free WordPress Theme Library
• Form Builder & Form Data Manager
• Popup Builder
• Interaction and Animation Builder
• And more

With an all-in-one solution like Droip, you get the full flexibility of WordPress and the seamless, familiar visual workflow of Webflow, but without its limitations.

And unlike many tools out there, Droip gives you access to its full set of capabilities across every plan. There are no hidden costs or paywalls after the initial purchase. So no matter which plan you choose or how much your site grows, you always have everything you need to build, customize, and scale your website.

To get started with Droip, check out our in-depth guide on how to build a WordPress website from scratch.

How to Migrate From Webflow to WordPress

Once your WordPress website and website builder are all set up, it’s finally time for you to migrate your site from Webflow to WordPress.

Export Your Content From Webflow

The first step in migrating from Webflow to WordPress is exporting your content:

• Step 1: Open your Webflow project and make sure you’re in Design Mode. 

• Step 2: Click on the Webflow icon in the top-right corner to access the Export Code panel.

• Step 3: Hit the Download Zip button to save your exported content to your local device.

Note: This Webflow export will not include CMS or native form functionality. It only provides a fully static version of your site’s pages, styles, and assets.

Import Your Content to WordPress Using Droip

Next, it’s time to bring your Webflow content to the WordPress environment:

Step 1: Open the Droip editor on your WordPress website.

Step 2: From the Pages panel on the left sidebar, click on the plus (+) icon to create a new page. Then, open the Insert panel (plus (+) icon), go to Elements, and add the Code element.

💡 Tip: To avoid theme conflicts and start with a completely blank page, download Droip’s Base theme from Account Settings > Downloads on the Droip website, then install and activate it via WP Admin > Appearance > Themes.

Step 3: Unzip your exported Webflow files, open the HTML file of the page you want to import, copy its content, and paste it into the Custom Code Editor.

Step 4: Next, bring over your styles and scripts. From your exported files, find the relevant CSS and JS code for that page, and paste them into the Custom Code Editor as well. Also, make sure to:

• Wrap your CSS code with HTML Style tags.
• Wrap your JS code with HTML Script tags.

💡 Tip: To simplify things and save time, feed the HTML, CSS, and JS files into an AI generator and have it sort and organize everything page by page.

Step 5: Once you’ve pasted all of the relevant code for that page in the Custom Code Editor, hit Migrate.

And that’s it! Using this method, you can easily migrate all your pages, complete with their content, styling, and animations.

All that’s missing is the dynamic content, since Webflow exports don’t include it. But don’t worry, because we have a solution for that too, which we’ll cover shortly!

Visually Tweak Your Imported Pages

Now, normally, once you export a Webflow site, any changes, no matter how big or small, require editing in Webflow, then manual re-exporting and re-importing. 

But with Droip in WordPress, that’s no longer the case.

By clicking the Migrate button (instead of Embed) in the Custom Code editor, your Webflow content is converted into fully editable Droip elements.

Now you can visually customize everything in Droip. Tweak layouts instantly, update content, adjust styling, and more, all without the need for Webflow and manual re-export & re-import.

To update text content:

Simply double-click on any text element and type.

To adjust the style: 

Select the element in question and use the Style Panel options.

To completely redesign your website:

• Use Droip’s extensive library of free WordPress themes for quick & effortless results,
• Migrate design directly from Figma to WordPress,
• Or build from scratch using Wireframes, Pre-built options, and Elements.

Create & Display Dynamic Custom Content

One of the biggest setbacks when migrating from Webflow (and one of the major ways the platform keeps users locked in) is losing its built-in Dynamic Content capabilities.

But with Droip and WordPress, all is not lost. 

WordPress already offers a variety of Dynamic Content handling options, but with a one-stop solution like Droip, you don’t need to rely on third-party plugins. 

Using Droip’s native Dynamic Content Manager, you can visually create custom content types, add your content, define relationships, and display everything dynamically with ease.

Check out our Dynamic Content playlist to get started and learn how to build powerful dynamic websites in Droip.

Configure Your WordPress Site

Before making your site live, you need to configure some essential WordPress website settings, such as:

• Site Title & Tagline: From the WordPress website’s backend settings, set your title and tagline to make it more understandable for users and search engines.

• Time Zone & Language: From the same settings, set basic things like your Time Zone, Language, Date Format, etc, for your website.

• Membership: Enable this option if you want users to be able to register on your website.

• Permalinks: Set SEO-friendly URLs from Settings > Permalinks. The “post name” option is a recommended choice.

Finally, secure your website by using strong passwords for all accounts, enabling SSL to encrypt data and authentication, and performing regular backups.

Point Your Domain to WordPress

You’ve successfully migrated your content from Webflow to WordPress and configured all your settings! Now the final step is to take your original domain (the one pointing to your Webflow site) and point it to your WordPress site instead.

This will allow visitors to use the same address to visit your website and avoid the hassle of updating links, broken redirects, or losing traffic along the way.

To point your domain to your WordPress website:

Step 1: Log in to your domain registrar and locate your DNS settings.

Step 2: Update either the:

• Name Servers: Replace the original name server with the one provided by your new WordPress hosting.

• IP: Or, you can update the record, i.e, point your domain directly to your WordPress host’s IP address.

💡 Note: Keep in mind that DNS changes can take anywhere from a few minutes to 24–48 hours to take effect worldwide.

Step 3: Next, update the WordPress site URL from WP Admin > Settings.

Step 4: Finally, visit your domain to test whether it’s pointing to your WordPress website. 

Start Fresh With WordPress Today!

That’s our guide on how to migrate from Webflow to WordPress done!

Keeping your website modern, dynamic, and fully under your control and out of Webflow’s isn’t rocket science. 

You just need the right tools, like Droip, to not only efficiently recreate your site but also unlock greater capabilities, control, and scalability.

So why wait? Start fresh with WordPress and Droip today!

Building your first WordPress website can feel daunting — but we’re here to help.

You may have seen this title before, but if you want a clear, step-by-step guide on how to build a WordPress website from scratch, this is it.

By the end of this guide, you’ll know exactly which tools to go for, how to customize your design, how to add functionality, and how to launch your website, all without breaking a sweat.

So let’s dive in!

Step 1: Plan Your Website

A little planning goes a long way.

Before diving into building a website, take the time to figure out some key aspects, such as:

• Purpose of This Website: What is your website for? A blog, portfolio, business site, or something else?
• Target Audience: Who is this site for, and what do they need from it?
• Website Pages: Decide what pages you need — Home, About, Services, Contact, Blog, etc.
• What Actions Visitors Should Be Able to Do: What do you want visitors to do? Read blogs, sign up for a newsletter, or fill out forms?
• Functionality to Be Added: Identify the features your site needs based on the desired actions of your visitors.
• Types of Content Needed: Identify the types of content you need, like text, images, videos, etc.

Defining these details first will make the actual website-building process smoother and more efficient.

Step 2: Choose Your WordPress Plan

Once you’ve nailed down the basics, it’s time to choose the right WordPress plan for your website.

There are mainly two types: WordPress.com or WordPress.org.

WordPress.com is a fully-managed service that provides both the free WordPress software and hosting in one convenient package.

It does have a free plan, but customization is very limited. You’ll need to upgrade to higher-tiered, paid plans to install plugins and get access to all themes, which can get quite expensive.

So, it’s not the best choice if you want more control, need advanced functionality, or are working within a tight budget.

WordPress.org, on the other hand, provides the same free WordPress software, but you’ll need to arrange your own hosting and domain.

In return, you get complete control over your website, the freedom to install any plugins or themes, and full ownership of your content.

In short:

• WordPress.com is simple and beginner-friendly, perfect if you want an easy, secure setup with built-in maintenance and don’t need to dive into deep customization or advanced features.

• WordPress.org, which powers over 43% of all websites worldwide, is ideal if you want flexibility, scalability, and total control over your site’s design and functionality.

Step 3: Get Your Domain & Hosting Ready

If you went with WordPress.com, you can skip this step, as your hosting and domain name are already taken care of.

However, if you choose WordPress.org, you’ll need to set up your own domain name and hosting.

These are key to your website’s success, so it’s worth knowing how to choose them wisely.

Choose a Domain Name:

Find and purchase your domain through providers like GoDaddy, Namecheap, Bluehost, and others.

When choosing a domain name:

• Keep it short, easy to spell, and memorable.
• Make sure it’s relevant to your brand or niche.
• Avoid using numbers and symbols if possible.
• Choose the right domain extension (like .com, .net, .org, .edu, etc.)

Pick a Secure & Flexible Hosting:

Your hosting will determine how fast and reliable your website will be, so go for a plan that offers strong performance, reliable support, and good security at a good value.

💡 Tip: You can also simplify things by looking for bundled solutions that offer both domain and hosting in one combined package to make things easier and more feasible!

Step 4: Install WordPress

For WordPress.org users, now that your hosting and domain are all figured out, it’s time to install WordPress and set up your website.

Install WordPress

Installing the WordPress software is quick and easy. You can either install it automatically through your hosting provider or run a manual installation:

• Step 1: Download WordPress.

• Step 2: Create a database.

• Step 3: Upload, unzip, and save the downloaded WordPress files to your server’s root directory.

• Step 4: Finally, access your domain on a browser to run the WordPress installation script.

• Step 5: Follow the on-screen prompts to set your language, database details, site title, username, password, etc, and complete the process.

Initial Setup

Once you’ve installed WordPress, it’s important to configure a few key settings, such as:

• Site Title & Tagline: From your domain, go to WP Admin > Settings > General and set your title and tagline to make it more understandable for users and search engines alike.
• Time Zone & Language: Also set basic things like your time zone, language, date format, etc.
• Membership: Enable this option if you want users to be able to register on your website.
• Permalinks: Set SEO-friendly URLs from Settings > Permalinks. The “post name” option is a recommended choice.

Finally, secure your website by using strong passwords for all accounts, enabling SSL to encrypt data and authentication, and performing regular backups.

Step 5: Choose a Website Builder

After your WordPress website is set up, it’s time to start actually designing it.

Now, while the WordPress platform comes with a default editor and a wide array of website-building plugins, many of them are limited in capability.

To build modern websites, you need a modern website builder that lets you:

• Visually design your website with ease
• Customize every granular detail
• Adapt seamlessly to any screen size
• Work with dynamic content
• Collaborate in real-time with your team
• And more

Most traditional WordPress builders fall short here, often relying on add-ons or extra plugins just to get things done.

But not Droip.

Built as a one-stop solution, the Droip WordPress website builder lets you craft contemporary WordPress websites with no code and no extra plugins.

With Droip, you can:

• Choose from an extensive WordPress theme library at no extra charge
• Visually design your site with full control
• Collaborate, co-edit, and communicate with your team in real-time
• Display and manage dynamic content
• Craft complex interactions and animations effortlessly

And more, with a level of control never before seen in WordPress.

And the best part?

All of this comes at a fraction of the cost of traditional website builders that are bogged down with limited functionality and add-on dependency.

What’s more, no matter which Droip plan you go for, you get access to the full Droip toolkit and template library; the only differences are the number of sites you can create and the plan duration.

So with Droip, you basically get everything you need to build a WordPress website, hassle-free and budget-friendly.

How to Install Droip

Installing Droip is also super quick and straightforward. All you need to do is:

• Step 1: Create an account on the Droip website and purchase the plan that best fits your needs.

• Step 2: From your Droip account, go to Downloads, and save the latest version of Droip.

• Step 3: In your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload the file you just downloaded.

• Step 4: Click Install and then Activate.

• Step 5: Finally, go to the Droip Account > Subscriptions > Licenses, add your site, copy the license key, paste it under WP Admin > Droip Settings > License, and click Activate.

And that’s it — Droip is ready to use with no additional setup needed, giving you all the tools you need to build your website right away!

Step 6: Choose Your WordPress Theme

You’ve chosen and installed your website builder. Now it’s time to think about your WordPress theme.

Themes are a game-changer. They let you build professional-looking websites quickly without starting from scratch.

And like plugins, WordPress offers a huge variety of themes to choose from, but these can be very hit or miss and often come with a price tag.

If you want to avoid the hassle or don’t have the budget, Droip has you covered with its free and extensive WordPress theme library.

Covering a wide range of niches, every template comes complete with all the essential pages, is fully customizable, and endlessly scalable with Droip.

From portfolios and agencies to apps, restaurants, and more, you’ll find an option for almost any type of website, ready to launch in just a few clicks.

How to Install a Droip WordPress Theme

Installing templates in Droip is a breeze. Here’s how it’s done:

• Step 1: Download the Droip Base Theme from your Droip account > Downloads, then upload, install, and activate it from WP Admin > Appearance > Themes.

• Step 2: In the Droip editor, click on the Templates icon located on the left sidebar and browse the library to find a template that fits your needs.

• Step 3: Click on a template to view its details, then hit Import to install, and click on Proceed to confirm.

And that’s it! Your template pages, their content, site settings, and more are now all in place.

From here, you can easily replace content, connect & display dynamic collections, customize the design, and put on the finishing touches, without having to start from scratch!

Step 7: Design Your WordPress Website

Next, it’s time to design your website.

Whether you’ve started with a template or are building from scratch, Droip offers some nifty design tools you’ll want to get familiar with to make the whole process a lot smoother. Let’s explore them.

Convert Instantly From Figma to WordPress

Already have a design in Figma that you want to incorporate into your WordPress website?

No problem!

With the Figma to Droip tool, you can import sections or even fully designed pages directly from Figma with pixel-perfect accuracy and auto-responsiveness, ready for publishing with just a few final touches.

No more developer dependency. No more manually converting designs to code. No more waiting days or weeks for results.

With Droip’s Figma to WordPress tool, you can go from design to development instantly!

Save & Reuse Styles Globally With Variables

When it comes to website design, consistency is key.

This is where Variables in Droip come into play.

Instead of manually applying and reapplying colors, fonts, or sizes across every page, you can save them as Variables and reuse them across your site!

Need to make a change? Just update the variable once and watch it take effect everywhere it was assigned, in true global synchronous fashion.

Want to refresh your entire site’s look for a seasonal campaign, festival, or dark mode but without breaking your default design?

You can simply define Variable Modes, i.e., alternate values for every Variable.

This will let you switch between themes at the section or page level, or you can even let visitors do so on the front end using Interactions!

Design Cohesively Using Class Manager

If you love consistency and efficiency, you’ll also be glad to know that Droip also supports CSS Classes!

If you’re new to the concept, think of classes as style cheatsheets.

Basically, Droip’s native Class Manager lets you visually create, organize, and apply CSS classes to elements across your website without having to recreate the same style over and over.

This again allows for synchronous styling, where changing the style of one element automatically changes the style of all other elements using the same class, instantly.

Droip lets you take it even further with Child Classes, which let you build on an existing CSS style on an element without altering the original CSS or changing the other instances.

Get Full Creative Freedom With the Extensive Style Panel

We’ve talked a lot about tools that make your web design more cohesive and efficient. But how do you actually design your pages?

Enter Droip’s pride and joy: the Style Panel.

Did you know 95% of CSS can be handled visually using this Style Panel without any custom code required?

That’s right.

With Droip, you get granular control over every aspect of design. From Typography and Backgrounds to Effects, Interactions, and more, you can customize every detail visually, precisely, and efficiently.

And it’s not just the usual options, either. From gradient backgrounds to glass effects, cursor trails, and more, the Style Panel lets you add unique, eye-catching touches that make your website truly stand out.

Step 8: Add Functionality

Once your website design is ready, it’s time to make it truly functional.

With Droip, this is effortless thanks to its built-in features. Here’s what you can do:

Display Dynamic Content in WordPress

Not all content can, or should, be displayed statically.

Take items like works, services, blogs, testimonials, teams, etc, for instance. These follow a pattern and evolve constantly, making static display impossible to manage.

Fortunately, with Droip’s built-in Dynamic Content Manager, you can define custom content types in WordPress without the need for external tools like ACF.

Then you can simply add your data and display it dynamically through collection lists or dynamic templates.

This lets you update content directly from the Content Manager once and have it reflected automatically wherever that content is used without any repeated manual changes!

It also means you can expand your content effortlessly without worrying about changing the design, giving your website true scalability as it grows.

Visually Build Forms & Manage Form Data Natively

Forms are one of the most powerful features of any website, whether it’s for collecting data, capturing leads, or engaging visitors.

With Droip, you can build forms visually with ease, using either individual form elements or getting a head start through pre-built Form sections.

Depending on your website needs, you can create:

• Contact forms
• Newsletter subscription forms
• Booking forms
• Feedback forms
• And more

To secure your forms, Droip lets you limit submissions, restrict IPs, and even integrate easily with reCAPTCHA for spam protection.

Speaking of integrations, you can also connect with popular automated email marketing tools right from within Droip through Droip Apps, helping you grow your audience seamlessly.

And once your website is live and you can collect data through your forms, you can view, manage, and export submissions directly from the built-in Form Data Manager in Droip for easy tracking and analysis.

Create and Utilize Powerful Popups

Popups are another tried-and-true way to grab attention, capture leads, and boost engagement.

But it needs to be done right — because there’s a thin line between engaging your audience and driving people away.

But they can be quite handy as you can use them to:

• Promote exclusive campaigns
• Grow your email list using a newsletter sign-up form
• Share important notices, ask for cookie consent, etc
• And more!

With Droip’s built-in Popup Builder, you can visually craft eye-catching modals with the same level of control you get in pages.

You can also choose when, where, and how your popups will appear, whether it’s after page load or before page exit, and more, giving you the control needed to maximize their impact.

Craft Complex Animations & Interactions

Ever gotten major design-envy after browsing a highly interactive website with eye-catching, complex animations and wondered how they pulled it off?

Think staggered animations, parallax scrolling, cursor trail, hover effects, all those impactful interactions that bring a website to life.

Lucky for you, in Droip, you too can create all of that once again, visually, with no code, using the:

• Animation Library: Apply quick, preset animations to elements for instant motion and visual flair without having to build them from scratch.

• Custom Response Editor: Visually craft intricate, multi-layered interactions entirely from the ground up with ease. For instance, you can:
  • Trigger multiple actions with a single event
  • Connect different triggers to different target elements
  • Design staggered or sequential animations
  • And much more

• Text Animation: Bring your text to life instantly! Animate them by character, word, or entire element, then customize the style by adjusting the timing, delay, and more to create the perfect effect.

Whether subtle or complex, with Droip, achieve professional-grade interaction and animations with no CSS, no coding, simply pure visual control.

Integrate With Droip Apps To Extend Capabilities

Don’t see a specific feature you need? Explore Droip Apps, the built-in hub that makes it easy to extend your website’s capabilities even further.

With a variety of tools for social logins, automated email marketing, and live chats, it lets you connect seamlessly with popular platforms, all without leaving the editor or manually installing plugins.

Some of the integrations available include:

• Google Login
• X (formerly Twitter) Login
• MailerLite
• Mailchimp
• Zendesk
• LiveChat
• And many more

Through Droip Apps and its seamless integrations, you can elevate the user experience and make your website truly powerful.

Step 9 (For Teams): Collaborate in Real-Time

In Droip, multiple users can also collaborate in real-time, making teamwork seamless and efficient.

With the complete collaboration suite built in, team members can:

• Co-edit the same page from anywhere, seeing changes live and labeled so no one overwrites another’s work.

• Communicate directly on the canvas, reducing miscommunication and forgotten tasks.

• Backup multiple versions of a page that can be restored at any time.

• Keep clients in the loop using a shareable view-only link of the design within the editor.

With everyone connected directly on the workspace, collaboration is faster, smoother, and far more streamlined.

Best of all, you don’t even have to do any special setup in Droip to access real-time collaboration, nor do you have to juggle multiple external tools or third-party plugins.

Step 10: Optimize Your SEO

Your website is designed, and all the features are in place. The next crucial step is making sure people can find it, which means optimizing for SEO.

Here’s how you can do that:

• Use relevant keywords throughout your copy. Make sure to keep it natural and impactful — avoid keyword-stuffing.

• Further optimize page visibility using Droip’s built-in SEO tools. For meta titles and descriptions, you can use Droip AI for suggestions or to refine text directly in the editor. And for single-page templates, you can even define dynamic SEO using tags so each item has unique metadata.

• Add alt text for images to improve accessibility and help search engines understand your content. Enable lazy-loading for media to enhance performance.

By following these little steps, you can improve the website experience, the search engine’s understanding, and consequently boost visibility on SERPs and organic traffic.

Step 11: Audit Your Website

We’ve almost reached the finish line! But before you go live, make sure to test and optimize every aspect to ensure a flawless experience for visitors.

In Droip, this is easier than ever using the built-in Audit tool, which automatically detects missing links, metadata, alt text, and other issues that could impact performance or SEO.

Next, run user testing and cross-browser testing to confirm your website looks and functions perfectly across all devices and browsers.

You can also use popular speed and performance testing tools online to analyze your site’s loading times and overall efficiency.

Doing this will help you catch any design inconsistencies, usability issues, or performance hiccups and ensure your website is at its best when launched. 

Step 12: Launch Your WordPress Website

Huzza, you’ve finally built your WordPress website! 

Now comes the most exciting part — going live.

If you’ve been building on a staging site, there’s no need to stress about the transition. 

With Droip’s Project Export & Import feature, moving your WordPress website from staging to live is smoother than ever. You can carry over your entire design, content, and settings in just a few clicks.

Once your site is live, celebrate your launch! Share the news on socials, start promoting your content, and grow your audience.

And remember to keep it thriving by running regular maintenance checks, updating your content to keep things fresh, and scaling as your brand grows. 

Wrapping Up

And there you have it, everything you need to know on how to build a WordPress website from scratch!

From sketching your website blueprint and choosing the right WordPress setup to building your WordPress website with Droip, you now have a complete roadmap to get started.

And the right tools, like Droip, make the journey a whole lot easier, letting you design, customize, add functionality, launch, and grow without limits.

So what are you waiting for? Start building your dream website today!

Great artists deserve the best stage — and for photographers, that stage is a stunning website that puts their work in the spotlight.

That’s why in this guide, we’ll show you how to create a photography website in WordPress with no code, hassle-free, and ready in no time.

So let’s dive right in!

Step 1: Find the Right Platform & Website Builder

To build a photography WordPress website without code, the first step is finding the right platform and website builder.

There’s no shortage of options, from WordPress builders to SaaS solutions and more. But SaaS platforms can often lock you into their ecosystem, offer limited flexibility & customization, and have high or recurring costs.

That’s why, if you’re looking for flexibility at an affordable price point, WordPress is your best bet.

However, with numerous website builders on the platform to choose from, it can get overwhelming.

To make things easier, here’s a breakdown of what an ideal WordPress website builder should let you do:

Work easily with images: It’s a photography portfolio website, so handling images should be a breeze! This means easily adding, viewing, and managing images. Bonus points if the editor lets you tweak images directly within the editor.

Freely customize your design: Photography websites rely on visuals. Find a tool with a real-time visual editor and granular control, which gives you the freedom needed to create a website that reflects you perfectly.

Make it responsive across any device: Stunning visuals lose their impact if they break on a different device. Avoid this by choosing a responsive website builder to adapt your design with ease.

Organize and display content dynamically: Another must-have for future-proofing your website is dynamic content! Then, you can update and add content from one place — making alterations and expansion hassle-free.

Optimize for speed and performance: A photography portfolio with all its high-quality images can slow down your site. Look for a website builder that generates fast and smooth pages with clean-code output and optimized media.

Avoid extra plugins and expenses: Don’t fall into the extra plugin black hole as it’ll slow down your site and break the bank. Instead, choose a one-stop website builder that offers everything built in.

Now, not all website builders on WordPress are truly no-code, nor do most offer a real-time visual editor and other necessary capabilities.

But one notable exception to this is the Droip WordPress website builder.

The all-in-one super-solution ticks all of the right boxes, giving you everything you need to build a professional photography portfolio website with no code required.

Like for starters, it comes with a growing library of WordPress themes, many of which are perfect for professional online photography portfolios. Best of all, you can use any of them without extra costs and get complete freedom to customize everything to fit your style and needs!

Beyond its real-time editor and free WordPress themes, Droip is genuinely a one-stop solution with powerful built-in features such as:

• Figma to WordPress Handoff
• Dynamic Content Manager
• Synchronous Global Styling Using Variables
• Real-time Collaboration & Co-editing
• Interaction and Animation
• And more!

Plus, Droip’s clean code output, lack of reliance on third-party JavaScript libraries, and automatic CSS and JS compression ensure flawless performance — making it the best choice for photography portfolio websites with heavy media.

Step 2: Install and Set Up Your WordPress Website

After choosing your website platform and builder, it’s time to go ahead and set it up.

For WordPress, this is super easy to do:

Step 1: Go to the WordPress website and download its latest version.

Step 2: Next, create a database for your site.

Step 3: Upload the WordPress files to your hosting server or local device if it’s a staging site.

Step 4: Navigate to your domain on a browser to run the WordPress installation.

Once your WordPress website is all set up, you can then install the website builder, which in our case is Droip:

Step 1: Create an account on the Droip website and choose a Droip plan that best fits your needs.

Step 2: Make your purchase and from your Account > Subscriptions > Downloads, save the latest version.

Step 3: Upload this file by going to your WordPress website > WP Admin > Plugins > Add New > Upload Plugin.

Step 4: Hit Install and Activate. Then activate your license to finish.

Step 3: Design Your Website With Droip

Finally, it’s time to get started on designing your website. Droip makes this really simple with four different ways to kick things off:

• Import from Figma to WordPress: Already designing on Figma? Instantly bring your work into WordPress for development with the help of Droip.

• Install any one of Droip’s free WordPress themes: Perfect if you’re a beginner, running short on time, or just want the simplicity of a pre-designed website that’s fully customizable.

• Use Pre-built Wireframes, Sections, Pages, and Components: Alternatively, if you want more creative freedom or feel overwhelmed by complete templates, Droip’s pre-built options work great to give you that flexibility while still keeping the process fast and simple.

• Start from scratch on a blank canvas: For ultimate creative freedom, you can start from scratch on a blank canvas using Droip’s built-in elements and create a completely unique website.

Method 1: Import From Figma to WordPress

If you have a design ready on Figma or prefer it, no need to fret. With Droip, you can import your designs from Figma to WordPress instantly. 

No more waiting weeks or even months for developers to recreate your design. Instead, with just a few steps, you can have a fully-functional, pixel-perfect, and responsive website ready to go.

Check out our Figma to WordPress guide to learn all about it.

Method 2: Use a Droip WordPress Theme

Droip also offers tons of ready-made, free WordPress themes with all the essential pages, making them the easiest and fastest way to get your website up and running!

Here are some creative portfolio WordPress themes that you can try at no extra cost, like:

• Lumora – Creative Portfolio & Photography WordPress Theme
• Artixan — Creative Portfolio WordPress Theme
• Filmmage — Video Production Agency WordPress Theme
• Facio — Fashion Agency & Portfolio WordPress Theme
• Forges – Creative Studio & Agency WordPress Theme
• Wowe — Creative Agency WordPress Theme

Visit the Droip WordPress theme library to explore all the available options.

To install a Droip WordPress theme, do the following:

Step 1: In the Droip editor, click on the Templates icon on the left sidebar.

Step 2: Browse the Template Library to find an option that fits your photography website.

Step 3: Click the template’s Details button to view more information, hit Import to install, and click Proceed to confirm.

That’s it! Your portfolio WordPress theme is now installed — complete with pages, site settings, and more.

💡 Note: For best results, use the Droip Base Theme with these templates. Download it from your Droip Account > Downloads, then upload, install, and activate it via WP Admin > Appearance > Themes.

Once your free WordPress theme is imported, you need to:

• Replace placeholder content with your own
• Swap images and other media
• Tweak layouts and design to match your brand
• Update navigation and links
• Optimize for performance and SEO

Method 3: Use Pre-Built Wireframes, Sections, Pages, and Components

Droip also offers a library of Wireframes, Pre-built Sections, Pages, and Components that you can mix and match to quickly build your portfolio. 

Wireframes: Think of these as web design blueprints — unstyled structures with content placeholders that give you a head start while leaving plenty of room for your creativity. There are options for every need, including Portfolio and Image Gallery Wireframes.

Pre-built Sections: Fully styled blocks that you use by simply swapping the demo content with your own. Showcase sections are perfect for presenting your photography in a unique, eye-catching way.

Pre-made Pages: Ready-to-use pages for landing, portfolio, pricing, and more — ideal for quickly creating companion pages for your website.

Pre-designed Components: Choose from a range of fully designed buttons, cards, etc that you drop anywhere on your site to boost both functionality and style without extra setup.

Method 4: Start From Scratch on a Blank Canvas

Last but not least, you can start entirely from scratch on a blank canvas by using Droip’s built-in elements:

Step 1: In the Droip editor, click on the plus icon on the left sidebar and go to Elements.

Step 2: Drag and drop elements to add layout, content, etc.

Step 3: Use the Style Panel to customize these elements. 

With this approach, you get complete freedom to design every part of your website exactly the way you envisioned it.

Speaking of elements, here are some key media options in Droip that can take the way you showcase images to the next level:

The Image Element

Droip’s basic Image element is quite powerful on its own. It lets you add images from the Media Manager, upload new ones, and even pull directly from third-party image libraries like Unsplash & Pexels after integrating.

Then, from the Image element’s settings, you can set things like:

• Image Alt Text
• Loading Style (Auto, Eager, or Lazy)
• HiDPI
• And more

Grid, Flex & Stack Structures

Droip also includes several layout elements to showcase your photography portfolio images easily and effectively:

Grid & Flex: Showcase your images in a clean, structured layout using Grid or Flex. Grids are two-dimensional with rows and columns, while flex is one-dimensional, either horizontal or vertical.

Stack: Easily craft striking image masonry layouts, adding visual uniqueness to your design.

Slider, Carousel, & Lightbox

If you want your portfolio to feel more immersive, then Droip’s more advanced elements are the way to go.

Instead of just displaying the photos, they encourage viewers to engage with your work and experience it more fully. From Sliders and Carousels to Lightbox, you have plenty of options to showcase your photography in style.

Slider: Basically an interactive slideshow, a Slider is perfect for putting your best shots front and center, one at a time.

Carousel: Another type of interactive slideshow, but where Sliders show single items at a time, Carousels display multiple. This makes them ideal for showcasing your creative range or the variety of projects you can deliver.

You can convert your Slider into a Carousel like this:

Step 1: In the Droip editor, click on the plus icon on the left sidebar, go to Elements, and drag the Slider element onto your page.

Step 2: Set the width of each slider item from the size panel. For example, use 50% to display two images at once, 33% for three, and so on. (You can also play around with uneven widths to give a sneak peek of the next item in the carousel.)

Step 3: Finally, add an image element to every slider item, wrapped in its own div, and add your photos.

Just like that, you’ve got your Image Carousel!

Lightbox: A combination of a modal and a slider, the Lightbox element takes the immersive viewing experience to another level. Works great if you want your audience’s focus to be solely on your featured projects with no distractions.

Step 4: Go Beyond Design and Add Functionality

Whatever method you start with, once your design takes shape, it’s time to refine the finer details and then add functionality. With Droip, you can edit images to better fit your website, display dynamic content, capture leads with forms, add interactive effects, and more.

Edit Images Using Built-in Image Editor

You’ll also find that Droip comes with a built-in Image Editor. This is great if you have some last-minute adjustments to make or want your images to match your design better.

To access it, select the image on the canvas you want to edit and click on Adjust.

You’ll then find the image adjustment toggles here as well as the tabs for Crop & Edit and Filters.

Alternatively, you can go to the Media Manager directly, select your image, and access the Image Editor options from there.

Display Dynamic Content

Static placeholder content is easy to swap with what’s relevant, but listings like Portfolio, Services, etc, are constantly evolving alongside your website. So manually adding and managing these to a page can quickly get messy and tough to scale — especially as your brand expands.

This is where Droip’s Dynamic Content Manager comes in.

While replacing template content, use the Content Manager to create custom content types for Portfolio, Services, and more. Then, you can add your data just once and display it dynamically anywhere on your website through lists and single-page templates.

This approach makes updating your content effortless and allows your portfolio website to scale seamlessly as your brand expands.

Check out the Dynamic Content Manager playlist on YouTube to learn more.

Use Forms & Form Data Manager to Capture Leads

Forms are a vital part of any website as they let you capture leads, collect important data, and connect with your audience directly from your website.

For instance, most photography portfolio websites use contact forms so potential clients can easily get in touch.

With Droip’s built-in Form builder, you can create forms for any purpose from simple contact and inquiry forms to newsletter sign-ups and more.

You can also strengthen form security by connecting with reCAPTCHA and automate email marketing campaigns by integrating with the MailChimp API.

Plus, with a native Form Data Manager, you can access, organize, and manage your responses with ease.

To learn more, check out the Form Builder documentation.

Add Interaction & Animation

Finally, bring your website to life by adding engaging interactions and animations. In Droip, this is easily done through the:

Animation Library: Use the preset animations for quick effects.

Custom Response Editor: Visually build advanced, layered interactions in WordPress without code.

Text Animation: Instantly animate your text elements.

You can check out our interactions and animations playlist for more guidance and inspiration!

Step 5: Run Final Audit & Publish

We’re almost at the finish line, but before you go live, take a moment to run a final audit.

Here’s where Droip’s built-in Audit tool comes in handy. It can quickly catch missing links, alt text, and other issues for you to fix.

Next, you should also use any reliable online tool to check your website’s performance and find what areas, if any, you need to improve.

Once everything looks good, you’re ready to go live! 

If you’ve been working on a staging site, Droip makes it effortless to switch from staging to live in no time. Otherwise, you can publish directly.

Launch Your Photography Website Today

And that’s our guide on how to create a photography website in WordPress with no code, all wrapped up!

Launching an online photography portfolio on WordPress has never been easier or more flexible. With Droip, it can just be a matter of picking a free WordPress theme, swapping in your content, customizing the style, adding functionality, and bam — you’ve got your website.

So why wait? Get Droip and start building your dream website visually today!

Struggling to effectively organize and display your website content with the limited default WordPress post types? You’re not alone because Posts and Pages can only go so far. What you need to do is define Custom Content Types.

The best part is that you won’t require external tools or complex code to achieve it! In this article, we’ll show you how to create custom content types in WordPress without extra plugins.

What is Custom Content Type

Not sure what custom content types are or why you need them?

It all starts with understanding WordPress Post Types, which are a way to organize different kinds of content in WordPress, the most common being Posts and Pages.

The problem is that these default post types don’t work well for various other types of content, such as portfolios, services, projects, events, teams, etc.

This is why you need to define a new custom content type, tailored to your specific needs, to organize and display content properly.

How to Create a Custom Content Type in WordPress

Now that you know what custom content types are and why you need them, let’s finally explore how to create custom content types in WordPress!

Pick a Builder With Built‑in Content Manager

So, how do you create custom content types in WordPress without extra plugins?

Using a WordPress website builder with a built-in Dynamic Content Manager, like Droip, of course!

The Droip WordPress builder is a one-stop tool that lets you visually create, manage, and display custom content types without any extra tools or hassle.

Plus, with other built-in capabilities like premade templates, unlimited breakpoints, Figma to WordPress handoff, visual interaction builder, form builder & manager, and more — you’ve got an all-in-one website building solution at a fraction of the price of other, more limited options and with no extra costs!

Create Custom Content Types Using Droip

Now, let’s come to the meat of the matter, i.e., how to create custom content types using the Droip website builder.

In Droip’s Content Manager, custom content types are defined through Collections. To create one, follow these steps:

Step 1: Click on the Content Manager icon on the left sidebar.

Step 2: On the Content Manager dashboard, click on Add or Add New Collection.

Step 3: Choose one of the preset collections or start from scratch.

Step 4: Name your new collection so it clearly describes its content, e.g., Works, Recipes, Team Members, etc.

Step 5: Next, add fields to store relevant information. Click on the plus icon and choose your desired field type. The Droip Content Manager offers a variety of field types to suit your needs.

Step 6: Finally, configure field settings and hit Create Collection.

And just like that, your custom content type is defined!

But Droip’s Content Manager doesn’t stop there — it lets you add, manage, and display data dynamically and with ease.

Add Data to Your Custom Content Type

Your collection is ready to store entries and organize your custom content. In Droip, this is easily done in just a few steps:

Step 1: Select the collection you just created, then click on +Add New Item if it’s empty or +Add New in the top right corner.

Step 2: Next, fill in the fields of your collection.

Step 3: Lastly, click Save to store your data. This saves it as a draft by default, but you can use the dropdown arrow to choose Publish or Schedule instead.

Repeat these steps until all your items are added. 

You’ll see your items listed within the collection, where you can select multiple items at once and perform bulk actions like duplicate, delete, etc. You can also use search and filter the list to quickly find exactly what you need.

Display Custom Content Dynamically on Website

You’ve got your custom content organized. Now, it’s time to display it dynamically on your WordPress website.

In Droip, you can show dynamic content as:

• Listings through the Collection element
• Single-Page Templates for each individual item

To display dynamic content as listings:

Step 1: Click on the plus icon on the left sidebar and open Elements. 

Step 2: Drag and drop the Collection element onto your page.

Step 3: From the Collection element’s inline editor, open its settings, set its Source to Posts, and Type as the collection you want to connect to.

From here, you can also apply filters, sorting, and other customizations to tailor your dynamic listing.

Step 4: Finally, select an element inside the Collection Item element. 

From its dynamic content settings, set Type to the collection you want to connect, and Value to the field you want to display.

Similarly, add or select other elements within the Collection Item and connect them to the fields you want to showcase.

To create single-page templates that display each item’s details:

Step 1: Click on the Pages icon on the left sidebar.

Step 2: Click on the plus icon on the top-right corner of this side panel, then select the Template option.

Step 3: Set Collection as Post and Post Type as the collection you want the template to connect with.

Step 4: Design your single-page template as you would any page in Droip.

Step 5: Then, select an element and from its dynamic content settings, set the Type to the appropriate collection and value to the relevant field.

To preview the details page template for each item, use the dropdown at the top of the canvas to switch between items.

💡 Tip: For single-page templates, you can also use dynamic tags to set SEO so it is unique for every item’s page.

Connect Related Custom Content Types

When showcasing related content in one place, it seems harmless to simply repeat the related data across different content types.

But this approach is inefficient and prone to inconsistencies, as every change means manually updating in multiple places.

Luckily, with Droip’s Single & Multi-Reference Fields, you can easily link separate but related collections without duplicating data, eliminating repetition, inconsistencies, and wasted effort.

Here’s how to connect related content using Single Reference Field:

Using single reference fields, you can pair an item in a collection with another item in another collection.

Step 1: Create your collections and add their data in the Dynamic Content Manager.

Step 2: In your main collection, add a Reference field, set Ref. Collection to the collection you want to link, and hit Save.

Step 3: Finally, for each item in this main collection, choose a value for the reference field (pulled from the referenced collection), and save.

Here’s how to connect related content using Multi-Reference Field:

Using multi-reference fields, you can link an item in a collection to multiple items in another collection.

Step 1: Create your collections and add their data in the Dynamic Content Manager.

Step 2: In your main collection, add a Multi-Reference field, set Ref. Collection to the collection you want to link, and hit Save.

Step 3: Finally, for each item in this main collection, select one or more values for the multi-reference field (pulled from the referenced collection), and save.

To learn more, check out Droip’s Dynamic Content Manager documentation. 

Working With Custom Content Types in WordPress

And that’s a wrap on how to create custom content types in WordPress without extra plugins!

With the Droip WordPress website builder, you can not only create custom content types, but also insert, manage, and dynamically display custom content effortlessly with no code. 

So what are you waiting for? Get Droip to build stunning, dynamic websites with custom content types tailored to your needs today!

Glass Effect, or Glassmorphism, is a design trend that’s all the rage for users seeking to craft sleek, modern websites. And so, today, we’re here to show you how to create Apple style glass effects on WordPress websites without any extra plugins or complex code!

What is Glass Effect

As the name suggests, the Glass Effect gives elements a translucent, liquid glass-like appearance, including characteristics like light refraction and fluidity.

Using a combination of depth, light, and blur, it creates the most eye-catching visuals and adds interest to your pages.

Apart from being aesthetically pleasing, glass effects are also a great way to visually separate content, enhance focus, and even elevate the user experience.

How to Create Glass Effects in WordPress

Glass Effect isn’t new to web design, but it can be tricky to pull off without the right tools.

And for WordPress websites, many of you might assume you’ll need yet another plugin or add-on to make it happen.

But what if you didn’t?

With an all-in-one solution like the Droip WordPress website builder, you can create glass effects right from the editor, no extra plugins, wasted time, costs, or risks whatsoever.

And that’s not all it’s got. As a powerful no-code website builder, it goes beyond the basics with features like the Dynamic Content Manager, Instant Figma to WordPress handoff, Real-time Collaboration, and more.

With Droip, you’re free to visually design liquid glass effects in multiple ways and effortlessly elevate your website.

Designing Glass Effects in Droip

Now that we’ve covered how easy it is to add glass effects on WordPress websites using the right tools, it’s time to start designing Glass Effects in Droip!

To give you the full picture, we’ll walk you through the different ways glass effects can elevate website design.

Frosted Navigation Menu

Frosted Navbars created with Glass Effect instantly add a sleek, modern touch to your websites! Placed over contrasting static or video backgrounds to make them pop, they’re sure to grab attention.

To create Frosted Navigation Menus in Droip:

Step 1: Set Up Your Hero Section

Take a Section and rename it Hero Section. 

Inside it, create your Navigation Menu. (For detailed steps, see this Droip video tutorial.)

Step 2: Apply the Glass Effect

Select your Navigation element, go to Effects > Filters, and choose Glass.

Then, set the following values or adjust them as you see fit:

• Refraction: 80
• Depth: 20
• Dispersion: 50
• Blur: 13
• Light: 30
• Angle: 35
• Depth: 5

And voila — you’ve got your frosted navigation bar! To make it pop, make sure you use a background with high contrast. Or better yet, you can even overlay your glass effect elements on a video background:

Step 1: Add a Video Background

Take a Div and add a Video element inside it. Then add this to the Hero Section, layered before your Navigation wrapper. 

Next, rename the Div to Video Wrapper and set its Position to Relative. (Similarly, be sure to also reposition the other elements within the Hero Section so they overlay the video.)

Then, select the Video element and from its Video Options:

• Upload or link your video
• Enable Loop and Plays Inline
• And finally, disable Audio and Controls

It’s optional, but you can also add a tinted overlay so your video matches better with your design:

Step 2: Layer a Tinted Overlay

Add a Div to the Video Wrapper, give it a background color, and lower its opacity.

Lastly, set its Position to Absolute, Left & Top Offset to 0, and from Size, set Width and Height to 100%.

Glass Effect Button

You can even add the Glass Effect to Buttons, giving them that extra impact and modern flair, easily directing focus to important call-to-actions.

To create one, do the following:

Step 1: Adjust Button Style

Select your button and remove its background or lower its opacity.

Step 2: Apply the Glass Effect

Select your button again, go to Effects > Filters, and choose Glass.

Then, set the following values or adjust them as you see fit:

• Refraction: 100
• Depth: 26
• Dispersion: 16
• Blur: 8
• Light: 80
• Angle: 45
• Depth: 5

And just like that, you have a futuristic-looking button to add interest to your design!

In the same way, you can apply the glass effect to various other elements and adjust their values to create different styles of glass effects.

Frosted Cursor Trail

Next, let’s dive in to create a Frosted Cursor Trail.

This playful effect involves a glass-style element following the direction of the cursor, and works to enhance both the user experience and interactivity.

To pull it off, you actually need to combine two design concepts: Glass Effects and Cursor Trail — both of which you’ll find built-in with Droip.

Follow these steps to implement it:

Step 1: Design Your Trailing Element

Add a Div element to the top of your page and nest another div inside it. Rename the parent div Cursor and the child div Circle.

For the Cursor div, set its Structure to Flex, Align to Center, and Justify to Center.

Then, set its Position to Absolute and give it a high enough Z-index so it layers over all your page elements.

Next, set its Radius to 100 from Borders and define its Width and Height from the Size Panel. Do the same for the Circle Div, but make sure its size is smaller in comparison.

Lastly, give the Circle div a Background.

Step 2: Apply the Glass Effect

Select the Cursor div, go to Effects > Filters, and choose Glass.

Then, set the values or adjust them as you see fit:

• Refraction: 10
• Depth: 10
• Dispersion: 10
• Blur: 0
• Light: 80
• Angle: 315
• Depth: 5

Step 3: Implement Cursor Trail Animation

While the Cursor div is selected, head to the Interaction panel, and click on the Plus icon.

Then, choose Scroll Into View, click on the Plus icon, and select Cursor Trail.

Set Container to Viewport, adjust the Smoothing as desired, and you’re done!

Build Modern Websites With Droip

So that was how to create Apple style glass effects on WordPress websites, now made effortless with Droip!

Of course, the examples shown here are just a drop in the ocean of what’s possible using Glass Effects.

To explore all the possibilities, get Droip and start creating yourself and build fluid, modern websites in no time!