Web page maker for marketing specialist.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templates. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Absolute control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
With themes, you can craft a consistent site design
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Deep select
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter 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.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
Under this section, you can find element display properties.
Typography
To find the text style properties, go to this section.
Indents
You can configure margins and paddings in these settings.
Background
This section consists of props for element backgrounds.
Borders
The properties for borders and border radius can be found here.
Position
This category helps you configure element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
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
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Wonderful opportunities for business.
Collaboration
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
You can make a component act as a tag by setting the “as” property to the desired value.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Web page maker for marketing specialist.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project