Landing page maker for marketing managers.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. Choose from one of many pre-made blocks
Create Project
Absolute creative control of your design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
It's simple to give your website a unified look with themes.
Extended Styling
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Ready-made Content
Enhance your page with ready-made blocks including maps, videos, pop-ups, and more.
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
Here you can find all the styles and functional properties.
Layout
Get access to element display properties in this section.
Typography
Browse text style properties in this section
Indents
Open these settings to configure margins and paddings.
Background
For element backgrounds, look in this section for props.
Borders
This section allows you to configure borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can easily import modules from NPM to your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
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
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Fantastic opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Any part can serve as a tag. Just choose the "as" property's desired value.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
A special property of the “Image” element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
Landing page maker for marketing managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project