Landing page builder for web agencies.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Get all the power of graphic design tools and website builders
Create Project
Absolute control over the design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Using themes you can create a consistent design for your site
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
If you want to use element display properties, look at this section.
Typography
Browse text style properties in this section
Indents
You can configure margins and paddings in these settings.
Background
This section has props you can use to set up element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can create your own React components using the Quarkly code editor and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Debugger
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Fantastic opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
A unique attribute of the "Image" element.
Favicons
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
User-friendly URL
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Landing page builder for web agencies.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project