Jemi Website Editor Basics
🔨

Jemi Website Editor Basics

Blocks

Blocks are the types of content you can add to your website. Continue reading to see the different types of blocks.

Basic blocks

Text - Simple text you can use to describe yourself

Bio - A block with social links like IG, Twitter, etc. Here's an example

Link - Links to anything with custom background color

Image - Upload any image

Vertical space - Perfect if you want to add space between blocks

Follow form - Collect emails of followers. See followers in the followers tab or connect directly to Mailchimp

image

Embeds

Music - Embed your music from Soundcloud, Spotify, Bandcamp, Mixcloud, and more

Tweet - Embed tweets. Here's an example

TikTok - Embed your TikToks by copying and pasting the link

Video - Embed videos from Youtube, Twitch, and Vimeo.

Advanced blocks

Import links - If you're moving from Linktree, Beacons, or Solo.to, you can copy and paste your URL to directly import all of your links

Card - Create completely custom cards with links, images, and text. Here's an example.

Post list - Display all of your posts in one place as a single block. You can create a post in the Blog tab.

Shop item list - Display your existing shop items all in one place. This will show up as a single block on your page.

Adding a block

Login to your dashboard. To add a block, clicking on the "+" that appears around the area that you'd like to add a particular block. Choose the block type that you want to add.

image

Removing blocks

To remove a block, select the block you want to remove and click on "Remove block".

Reordering blocks

You can re-order blocks by clicking on the block you want to move and use the up and down arrows to place the block where you'd like for it to be.

Currently, you can only re-order blocks up & down that are in the same column, but we'll be adding ways for you to re-order blocks to other parts of your website soon!

image

Sections

Sections are containers with their own unique style properties. Each page on Jemi starts with 1 section that you can add blocks into. For example, this page has 3 sections each with its own background & style. There are pre-designed section templates that you can choose from that have blocks pre-arranged for you for different use cases.

You'd want to add more sections onto your page if you want your page to have different parts with different background color, button styling, etc.

Adding a section

If you want to add another section, hover over the area that you want to add the section to and click "Add section" and choose the type section you'd like to add.

Styling your section

You can modify the style of each section by clicking "Edit Section" → "Style Section". From here, you can style the background, text color, buttons, and the overall layout of the section.

If you want to change the font of you website, you can go to "Website Setting" → Font. Read more here.

image

Layouts

There are 2 different types of layouts. Pre-built layouts and Empty layouts.

Pre-built Layout

Prebuilt layouts are prearranged blocks of content for specific use cases. These can be dropped into existing sections and will have the same style (background color, font color, etc) as its current section.

image

Empty Layouts (i.e. Placeholders)

Simply put, empty layouts are placeholders for where you can drop in blocks. You can choose between 3 column, 2 column, basic (1 column), and grid layouts. Take a look at the mockups for each layout type to see how they would look on desktop and mobile.

image

Pages

Adding Pages

You can add more pages by going to the "Manage Pages" tab in your dashboard. If you're under the free plan, you can add up to 3 pages. You can upgrade to the Pro plan if you want to add more pages.

Deleting Pages

If you want to delete a page completely, go to the "Manage Pages" tab and select "Page settings" for the page you want to delete. Click "Delete". Please note that this action cannot be undone.

Active vs Inactive pages

You can make your page "inactive" if you don't want it to appear as an option on your navigation bar. This is perfect if you're planning on making this page active at some point in the future, but aren't ready for others to have access to it. To make a page active, you can just toggle off the "Active" toggle.

Editing Pages

You can edit pages directly in the website builder once you login. To edit a different page, you can choose the page selector at the top of the builder to select the page you want to edit.

image

Navigation menu

Navigation menu refers to the page selector that appears at the top of your website.

You can change the way your navigation menu appears for your website by hovering over the navigation menu at the top and clicking "Edit Menu". From there, you can choose the one with the style you'd like your navigation menu to have.

Currently, we only support 3 different types (Centered button, Text menu, and hamburger menu) of navigation menu options. If you don't find what you like, feel free to shoot us an email at assistant@jemi.app describing exactly what you want!

image

Style

Font

You can change the font by clicking on the top left gear icon that can be found once you login to the editor.

You can have different fonts for the body and header font. And this font will be consistent throughout your whole website. This is why it appears under "Website Settings" rather than "Section Settings".

Supported fonts

We support all fonts from Google Fonts. You can search for the font you're looking for in the "Search for a font" field.

image

Background

You can change the background color and image of each section. To do this click on "Edit Section" → "Style section" → "Background style".

From there, you'll be able to add a background photo and/or modify the background color.

If you want your website to have the same styling properties (background color, font color, etc), then you should NOT add multiple sections to your site.

Instead, you should add blocks, pre-built layouts, and empty layouts so you can just add in more content with the style being consistent throughout.

image

Website Templates

Templates can be used as a starting point for designing your website! Browse all the templates here. You can also turn your website into a template for others to use by toggling on "Allow duplicate as template" at the bottom of your website settings page.

More Customization

Resizing

You can resize blocks and layouts by dragging the outline of the block/layout you want to adjust the sizing for.

image

Block alignment

To align blocks to the left, right, or center of the given column, you can click on the block → "Layout" → "Align" and choose the alignment that you want.

Removing Jemi Branding

To remove the "Built with Jemi" logo at the bottom, go to "Website Setting" gear icon placed at the top left of the website editor, and click "Toggle Jemi Branding".

You'll have to be on the Pro or Business plan to be able to do this.

image
image

Website Domain

Where to find your URL

You can find your website link at the top right of your website builder where it says "Share". You can copy and paste that link anywhere you want to share your website!

How to edit your Jemi URL

If you want to modify the URL, you can go to "My Domain" and click "Edit" for the Jemi URL at the top.

Linking to a custom domain

If you want to link a custom domain (i.e. mypage.com), read more here.

image