Formosa Pixels | Website Builder Blog

FLEX Introduction

Mon, 17 Jun 2024 19:59:52 GMT

Welcome To FLEX Mode

Flex mode offers an exciting new way of designing responsive sections and pages. New inline editing technology allows pixel-perfect accuracy for any element, and offers control of breakpoints.

Flex is seamlessly integrated into the builder and can be used in individual sections of a site or used throughout an entire site build. This type of integration allows users to choose when elements are best arranged in a responsive layout and when it’s not needed; as Flex sections can be mixed and matched with standard rows at will. Integrating Flex into the builder as an optional editing mode also allows longtime users the ability to learn to use Flex at whatever pace you prefer, rather than forcing an editor change all at once.

In this article, we will show you how to add a Flex section to a site, and provide an overview of the components of a Flex section.

AI Generated Sections:

Fri, 14 Jun 2024 21:01:54 GMT

AI-Assisted Design

AI tools are becoming more and more powerful, and the latest addition to the Without Code site builder brings us into an all new territory of AI-assisted design. AI Generated Sections take a few simple text prompts and turn them into fully-designed sections, complete with images, headlines and paragraph text.

Earlier AI implementations in the WOCode builder focused on generating text for meta tags, image alt text and general text through AI integration into the Text widget. AI Generated Sections now allow you to combine several functions to create beautiful, fully-completed sections for your site.

When you can generate high quality sections in just a few seconds, it’s easy to imagine how powerful this can be while building sites. Consider using AI generated sections to speed up your build times, create gorgeous wireframes, or add design versatility to your site using a beautiful layout option from the section results.

Getting Started with AI Generated Sections

To get started with AI generated sections, begin by adding a section as normal (see our Sections doc if you’re new to sections). Hover on the dividing line between two rows in the center of the screen and click the “Add Section” button.

Choose the “AI-Generated” option.

AI Section Assistant

The AI Section Assistant provides the input fields that the AI will use to generate section features. And as always with any AI tool, the better the prompts, the better the results.

Enter a description of the content that you would like the section to include. And be sure to include any important details within the description. For an example, see the placeholder copy in the text field:

e.g. About us section that captures the essence of the bakery's origins, the passion for baking, and the commitment to the local community

AI Business Profile

Before we move on to the AI generated section results, let’s briefly discuss your AI Business Profile. AI Assistant uses your AI Business Profile as a basis for much of the content it generates. If you’ve used AI Assistant elsewhere in the site editor, you’ve likely been prompted to set up your AI Business Profile. This is the case for page SEO, site SEO, and business text.

If you have not yet set up an AI Business Profile for your site, you will be prompted to set this up when using AI generated sections for the first time. Enter all of the required details about your business and click Save. You can update this information anytime using the links in various AI Assistant tools.

AI Generated Section Results

After submitting your prompts for the AI Section Assistant, you will see you results. In the center of the screen, in the large preview, you will see your first AI generated section. This section will use the prompt details to write a compelling headline, descriptive paragraph text, and images suited to your content.

In the side menu on the left, you will see a variety of layout options. Use these to choose a design style that fits your site. Each layout can be previewed with a click. As you preview various layouts, you will see that the AI generated text is customized in length to fit the design elements of each.

If you see a layout you like, but the text or images need refinement, you can use the “Regenerate” button above the preview. When you click Regenerate, you have the option to regenerate images only , or text and images .

If you don’t see a layout you like initially, click the “Show More Layouts” link in the side menu to see dozens more options.

Refining the Results

As you review the AI Generated Sections, view as many layouts as you like, and regenerate as needed in order to achieve the perfect results. If you’re still not seeing something you like, you can always go back to the AI Section Assistant and provide more or different details.

Once you’ve found a great option, click the Save Section button to add the section to your page. Once you’ve left AI Section Mode, you can edit all elements of the section, just as you would with any text or image throughout the site.

Spring Feature Roundup – 5 New Updates to Level-Up Your Site Designs

Tue, 21 May 2024 21:13:00 GMT

Spring has sprung! And just as this is a great time for a bit of Spring cleaning, we thought it would be the perfect time to report on a roundup of features that have been newly added to the Without Code site editor.

Included in the updates are improvements to global styling, a great new feature for mobile sites, a Flex update and a cool new function for a classic widget. Read on to learn details, see how to use these features and view a short demonstration video.

Display an Alternate Image On Hover

Our first feature adds clever functionality to a core widget: the Image widget. You can now choose a secondary image to appear on hover. This simple effect can be extremely effective for showing an alternate product image, a different angle of the same photo subject, a color variation and much more.

On-hover image changes create a clean and non-intrusive way to add content variation that your customers will love!

To Use:

Place an Image widget on your site and select an image. Locate the “Alternate image on-hover” setting at the bottom of the widget option panel and select your alternate image. For best results, use an alternate image with the same aspect ratio (shape) as the main image.

Click to Call Icon

Click-to-call is a highly useful function that has been improving mobile sites since the earliest days when users first began visiting websites on mobile devices. And now that more people visit websites on mobile than any other device , this feature is more valuable than ever.

The click to call icon is now available in the Social Icons widget.

To Use:

Place the Social Icons widget on your site where you’d like the click to call icon to be seen. Be sure to enter the phone number at the bottom of the content panel.

Improved Corner Radius

Did you know you can adjust any corner radius separately (top left / top right / bottom left / bottom right)? While this has been possible for quite a while, we’ve added a dropdown that allows for a new radius style: percentage-based. Percentage-based radii are calculated differently from pixel-based radii, as they are calculated based on the entire object shape. Therefore, percentage-based radii will offer different radius shapes depending on the shape of the element.

Consider leveraging corner radius adjustments to create dramatic styling in your site, such as a maxed-out corner radius on just one corner of an image. Using this technique consistently on a site can create its own unique aesthetic across an entire site! Corner radius is available on most elements, including things you may not have thought of, like galleries, rows and columns.

To Use:

In the Design tab, locate the Corner Radius option. Click the gear icon to select all corners, individual corners or a combination of individual corners. To choose between pixel-based and percentage-based, click the “px” box next to the numerical value. This will display a dropdown, allowing you to select your method of choice.

Global Styling for On-Hover & Clicked Text Links

Do you utilize the “Theme” section for setting global styling across your site? This is a massively efficient way of making instant styling updates across the site all at once. Setting global styles also creates a highly consistent site experience for visitors.

We’ve added two new global style controls for text: Link on hover & Link clicked.

To Use:

Click “Theme” in the side menu. Click “Text” to open up all styling attributes (including Link on hover & Link clicked)

Convert Sections and Columns Into Image Sliders (Flex)

You can now add more than one background image in a Flex section in order to create an instant image slider. Image sliders as backgrounds are subtle and transition images automatically. Use this feature to expose your best media content and drive customer actions.

To Use:

In Flex mode, apply a background image to a section. Then click the “Create background slider” button and add the additional images for the slider.

Blog Improvements for Better Management and Enhanced Visitor Experience

Mon, 26 Feb 2024 16:00:00 GMT

Several new updates to our built-in blogging system will enhance the experience for you, your clients, and site visitors. These changes will allow you to filter posts, make better use of tags, and sort blog content in more powerful ways.

These improvements affect both sides of the blog – the backend where you manage content and the frontend where site visitors interact and discover new content. And best of all – these changes are live on the platform now. Let’s jump in!

Enhanced Filtering With Multiple Tags

Tags are an excellent way to create blog post categories. And if you’re using tags now (or you’re ready to start) – then this feature is for you.

You can now filter blog posts using multiple tags. This means that you can combine categories as needed to display smarter, focused content for site visitors. This feature is available on frontend widgets All Posts and Recent Posts.

Use Case:

If you have a site dedicated to tourism in NYC, and have tagged blog posts with separate tags for “bars”, “restaurants” and “cafes”, these articles can be combined and displayed on a Dining page. Similarly, tags like “broadway”, “concerts” and “walking tours” can be combined and displayed on an Activities page.

Better Sorting Capabilities

All blog posts may now be sorted in ascending or descending order, using either the created date or the published date. This simple improvement will make locating and managing blog posts simpler for you and your clients.

To Use:

Click Blog in the side menu
Click the sort dropdown in the top right of the Manage Posts page.

Bulk Publish and Republish

For blogs with a large number of posts, bulk actions can be a big time saver. You can now select multiple posts to publish or republish in one click.

To Use:

Tick the checkboxes for any number of posts, then click the “Publish Selected” button.

Smarter Context-Based Searches

Posts may now be searched by descriptions (in addition to search by post title, author and tag) in both the site editor and the live site. Context-enhanced searches such as this result in more efficient blog management overall, and improve the experience of visitors to the site.

Search-by-description is available in:

Manage Posts page (site editor): finding posts faster results in better blog management
Search Posts widget (live site): improved searches help to better connect visitors with the content they’re interested in

We hope that these improvements will help to make blog management better not only for you and your client, but also enhance the experience for visitors on the live site. Keep an eye out for for more improvements on the way!

Several Improvements to Collections Make Them Behave More Like Excel

Mon, 29 Jan 2024 19:15:00 GMT

We're excited to announce several improvements to Pixel Builder Collections. As the capabilities of Collections grow – so does your ability to build powerful and effective Dynamic Pages. And with the latest round of updates, you will find that working in Collections will now have more in common with your favorite spreadsheet editor, with easier data portability, new export features, webhooks and more.

A Compendium of Collections Improvements

If you're new to this, think of Collections as the basis for generating Dynamic Pages and managing the content that appears in Connected Widgets . Dynamic Pages can be used to generate multiple site pages automatically – perfect for real estate listings , product pages or recipes .

Export Collection to CSV File

Do you need to duplicate your entire Collection in an outside platform or third-party app? You can now export an Internal Collection into a CSV file and use it outside of the Without Code editor as needed.

To export a CSV file, click Content in the side menu, select Collections, then open the context menu for the desired Internal Collection by clicking the three dots icon. Select Export to CSV. Note that this can only be done with Internal Collections.

Copy/Paste Cells, Rows & Columns

For those that are comfortable working in Excel, Google Sheets or Numbers, this update is for you. Navigating around an Internal Collection is now much more intuitive, with behavior and responsiveness more like your favorite spreadsheet editor. You can now select groups of cells and copy/paste in and out of Collections.

To select a group of cells in a Collection, simply click and drag. You can also select a single cell, then shift-click another cell to select all the cells in a row or column. With a group of cells selected, you're all set to copy & paste...

Copying & pasting opens many doors when working in Collections. If you'd like to move data from an outside source, like Excel, you can now paste data directly into a Collection. Similarly, you can move data from a Collection to an outside spreadsheet in the same manner. And lastly, if you need to move or duplicate data entirely within a Collection, now you can.

Publish or Republish Individual Collections

You may have noticed that there have been several recent improvements that allow you to save time by publishing single pages and blog posts, instead of republishing the entire site. The same is now true in Collections.

If you've updated a Collection and just want those changes to go live, you can publish individual Collections. This is great for cases when you have other work on the site staged but not ready to become public. To publish a single Collection, click Content in the side menu, select Collections, then open the context menu for the desired Internal Collection by clicking the three dots icon. Select Publish Collection.

Add Custom Headers in External Collections

You can now create custom headers for your External Collections. If the data you're working with requires additional headers to fetch data, this update is for you. To add a custom header, open an External Collection and click the "Add custom header" link at the bottom.

Utilize Webhooks for Advanced Integrations

Do you integrate with automation tools like Zapier? We've added Webhooks to Internal Collections to let you know whenever your Collection has been created, updated or deleted. And the same applies to Collection rows.

Take advantage of this new improvement to trigger actions for you or your client, such as sending an email based on a change, or syncing with your business's internal systems.

Boost Your SEO Performance With These New Builder Features

Tue, 04 Jul 2023 16:58:00 GMT

There’s another round of improvements available right now in our builder. This time around, it’s all about SEO & Schema. With these new tools, you can ensure that you’re empowering your site for optimum performance in search results, and maybe even gain an edge on the competition!

Within the updates, you’ll find a handful of new SEO-focused features, as well as Schema tools that will help search engines understand your site better by being handed the exact context they’re looking for. We’ll start off with the SEO options, followed by the new Schema tools, and be sure to catch the Schema overview for a refresher on what it is and why you want to use it!

Alt Text Tags Now Available in the Tabs Widget

You’re probably familiar with alt tags for images. Alt tags are very important because they help to tell search engines what’s in the image, as well as the purpose of the image. Alt tags also act as an accessibility aid for site visitors that aren’t able to view the image.

Our Tabs widget now includes an Alt Text field, which allows you to enter information for each tab’s image. If you’re not using alt text on every single image on your site, you should consider making this a habit!

Multilingual Pages Now Included in Your Default Sitemap

The sitemap file for your site now includes your translated multilingual pages (if they exist on your site). This is yet another way for search engines to better understand your site and display more relevant results in searches.

And even more good news – this new feature is automatic. Multilingual pages are added behind the scenes, so there’s nothing you need to do to take advantage.

Several New No Index & No Follow Options

Last month we announced a new attribute for the Button widget: No Follow. This option disallows search engines from crawling the links on that page.

We’ve extended the ways you can use the no follow setting throughout your site. And in addition, we’ve added the No Index option anywhere you find a No Follow option. No Index tells a search engine that even though it can crawl the page, it cannot add the page into its search index.

There are some great opportunities to take advantage of these rules. For example, you may want to use No Index when you don't want a search engine to index your web page, but you do want it to follow the links on the page. And you may want to use both No Index and No Follow when you don't want search engines to index a page in search, and you don't want it to follow the links on that page either. This is useful for form-response pages or thank you pages, where you don’t want your thank you page indexed, nor do you want search engines following links to the great offer on that page (where the search engine could then index the content of that offer).

Here are the new opportunities for using No Index & No Follow in the builder:

➡️ Entire Site

You can now tell Google and other search engines not to crawl or index your entire site.

To do this: Go to SEO & Settings > SEO > Set entire site to no index and use the toggle to enable this feature.

➡️ Blog Posts

Individual blog posts can be set to No Index.

To do this: Locate the blog post, go to the settings for that post, and scroll to the Set post to no index toggle. Note that a republish is required when this setting is changed.

➡️ External Links

You will notice when you create a link on your site that there are several new options for the Website URL option. You may now choose to enable one or more additional options:

• No follow: This tells search engines to not pass any link authority from your page to the website that you are linking to

• Sponsored link: This tells search engines this link was paid for.

• User Generated Content This tells search engines this link’s authority and reliability can’t be vouched for.

➡️ Downloadable Files

You may now set a downloadable file on your site to No Index. An example use case for this feature would be when your client’s site contains files that may serve site visitors, but might not align with the site’s overall SEO optimization.

To do this: Go to Content > Media Manager > Files tab and select a file. Then enable the Set file to no index option.

What IS Schema Anyways?

You may have noticed times when Google displays a very complete listing in a search result, with much more information than a standard link to a website. In these cases, you will see the item, with relevant information related to the type of item.

In the example above, we see that Prairie Animal Clinic is displaying not just a link to its website, but Google is also displaying its address, hours, phone number, email address and more. When this type of search result is served, it is called a rich result, or rich snippets.

It’s Schema that allows Google and other search engines to better understand information on your website and display results like these when it’s appropriate. Schema is a language used to represent data, and the actual data is called structured data.

By providing search engines with the correct type of data, they can display rich results in searches for a variety of elements. And when your site content is displayed as rich results, it can give it a competitive advantage and better click-through rates.

Over the last couple of years, we’ve added the ability to enable schema for local businesses, as well as FAQ information. With our most recent schema updates, you can also benefit from rich results for blog posts and videos:

Schema Markup for Videos

You may now add three new video details that together provide Google with the structured data needed to display your video in rich results in relevant searches. To take advantage of this new feature, Open the Video widget, and scroll down to the Video Schema section in the Content tab. Enter the video’s name, description and upload date.

Schema Markup for Blog Posts

The builder now automatically generates the necessary schema for every new blog post you publish. To take advantage of this, simply ensure that you’re entering all of the important information about your blog post, such as post meta title and description. This information can be added by entering the settings (gear icon) for individual blog posts.

New Improvements for More Powerful Dynamic Pages and Collections

Wed, 14 Jun 2023 20:35:00 GMT

We’re always working to find ways to make Dynamic Pages more powerful and flexible. Dynamic Pages allow you to easily generate multiple pages with the same structure and design, but with different content on each page. This is a great solution for pages like:

Product catalog pages
Real estate listings
Recipe pages
Team pages

And at the heart of Dynamic Pages are Collections. Collections allow you to organize all of the data that populates your Dynamic Page content. We’re excited to announce several improvements to Internal Collections that will make it easier to manage your Dynamic Page content.

Let’s dig in!

Link to Dynamic Pages

Link pickers now allow you to choose Dynamic pages for link destinations. This means that any content on your site can be linked to a Dynamic page – even navigation menu items. When choosing a Dynamic page layout as a link destination, you can further specify which Collection you’d like to connect to, using the Item dropdown.

This update helps to make Dynamic pages feel more thoroughly integrated into your site, even though they don’t count against your page count.

Show or Hide Collection Rows

You may now show or hide one or more Internal Collection rows with just one click. This gives you the ability to easily control the visibility of certain Dynamic pages on your site.

Previously, rows could only be deleted. By hiding a Collection row, you can choose to hide Dynamic pages temporarily – which is a useful thing. For example, if you’ve built a client site that displays real estate listings and one of the listings has gone under contract, you can hide that listing page to keep it from displaying on the site any longer. But if the property goes back on the market, you can simply set that Collection row’s visibility back to Show, enabling the page on the site again.

Duplicate, Rearrange and Drag & Drop

While the improvements above open up exciting opportunities for expanding what’s possible in your site, our next improvement is actually a full set of helpful updates that makes working with Internal Collections much easier, and just feel more natural.

You can now:

Duplicate entire Collections
Drag & drop columns to reorder them
Duplicate rows

In a world where we may use spreadsheet-style tables on multiple platforms such as Excel, Google Sheets and Airtable, we certainly appreciate features and behaviors that are common to all of these services. And with the latest improvements, we think you should feel more comfortable working in Collections than ever!

Feature Focus: Duplicating Collections

Even though we already mentioned duplicating entire Collections in the section above, it's worth taking a moment to illustrate just how powerful this improvement can actually be.

Keep in mind that a Collection can represent all of the content for an entire page. And by duplicating a collection, you can essentially generate a new page worth of content with just one click! For example, if you've built a client site for a school with different sport pages that display wins, losses and scores, you can generate content for entirely new sport pages by duplicating Collections. To do this, we can take an existing collection – let's say Football – and duplicate the Collection and simply change the name to Basketball. Repeat this process and change the name to Baseball. You get the idea.

By duplicating entire Collections, it's easy to generate full dynamic page content on the fly.

5 Reasons Why Designers Love Without Code

Wed, 06 Apr 2022 11:41:00 GMT

Curious why our community chose our builder and how we add value to their workflow. Read on to find out the most common answers!

Unique Widgets and Visual Effects

We care deeply about creating cool stuff, not pumping out cookie cutter sites. Without the limitations that other website builders have – shareholders and big company rules – we don’t have any restrictions on what we’re “allowed” to release. Our focus is on creating unique tools that can only be found at Without Code along with visual effects that help your websites stand out from the crowd.

The Perfect Blend of Customization and Simplicity

There are a lot of web builder options that tout “ease of use,” but come with a lot of restriction on customization. Others can deliver extreme flexibility, but they are challenging to learn (and may require coding knowledge). We know how important both features are for many designers – we love hearing that this marriage between customization and a simple UI allows our members to create productively.

Speed of Build

Subscribers remark on how fast they are able to build their site and push it live. With the intuitive drag and drop system combined with extensive documentation and video training we aim to significantly improve your productivity.

Superior Customer Service

Although we’re small, we’ve invested a lot in our support offerings – both in number of agents, as well as resources. Our approach to support has always been offering real solutions as real people; we want to help you succeed, not close tickets.

Constant Updates and Improvements

Small but nimble, our team works fast. We’re constantly updating and improving our tools, while ongoing testing maintains functionality and security. We want to give our members peace of mind with tools that work, secure sites, and constant improvements. Each person on our team plays an important role and there is no passing the buck – this ensures things are done properly.