Fancify is compatible and works alongside the popular page builder, Elementor.
It is one of the newest page builders and allows you to create and customize pages quickly and easily.
This visual page builder, allows you to create pages by using sections and columns to add different widgets to your age content. Sections consist of columns and widgets that you are able to move and manipulate between sections. Each section is draggable, as well. This builder makes use of drag and drop to customize with ease, but there are many other tools to customize content further, for example margin, padding, column width, content position and background color. With the pro version of Elementor, you are also able to write custom CSS into your pages.
To install Elementor Page Builder Plugin:
- Go to your WordPress Admin Panel
- Click Fancify on the Dashboard Sidebar
- Navigate Recommended Plugins tab
- Install Elementor
You can also install Elementor from the plugins tab on the WordPress dashboard.
After installing, Elementor adds an extra tab to the standard WordPress editor. To find this tab and create a page or post with the page builder, follow these steps:
- Go to your WordPress Admin Panel
- Click the Pages on the Dashboard
- Click the Add New
- Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
On the right side of the page, you will find the editing screen. There, you can add, edit, and move elements, or even choose a layout for your page. The Elementor panel is on the left side.
You can use the available widgets to add elements to your page individually or choose one of the prebuilt templates or block designs.
Elementor Editing Screen
Add New Section
As mentioned before, with this page builder you can make your page consisting of sections, columns, and widgets.
You can add new section by clicking the “+” sign, then choose a column structure. After, you will be able to drag widgets from the Elementor panel to the columns.
Inserting a Template
The Template Library is accessible on the Elementor editing screen next to the “Add Section” button. Click Add Template button. A window will appear with the following tabs: Blocks, Pages and My Templates.
Under the Block tab, you will find some premade sections that you can insert to your page rather than building from scratch. These blocks are basic and common content for websites and can help you shape your pages. You can also search for specific kinds of blocks using the Category and search features at the top. After you choose a block, you will still be able to customize and manipulate your selection, as well as Favorite the block for easy selection on other pages.
Under the Pages tab, you will find many pre-designed templates that you can insert to your page and further customize. You can search through templates, or use the “New,” “Trend,” and “Popular,” tabs at the top. After inserting the template, you can edit the text, and customize some of the styles.
Under the My Templates tab, you will find all of the templates you have saved. Here, you can preview, delete and export your templates as a JSON file so you can import and reuse on other websites. To import templates, you should navigate to the Elementor Settings on the WordPress dashboard.
Saving Pages or Sections as Templates
You can save your entire work on a page as a template to use on other pages, websites, or to save for the future. Once you are content with the changes on your page that you would like to consider for a template, navigate to the bottom left of the page and click on the arrow next to “Publish.” Here you will find additional Publish options. Choose “Save as Template,” enter the name, and then save. It will automatically be added to your “My Templates” area.
To save a specific section, you can hover over it and select the save icon. Name this section and save it to add it to My Templates area.
There are many widgets and features included in the Elementor Page Builder, as well as some advanced settings that affect the entirety of your website. From your Elementor Page Editor, navigate to the icon in the top left of the screen to find the advanced configurations. Here, you will find dropdowns for Style and Settings.
In this section, you can see your website color palette. You can create your own palette by clicking in the squares at the top and selecting a color, or select a premade palette suggestion. As you change colors, you will see the changes in the editor to the right. When you are content with your changes, click “Apply” and the palette will be implemented website wide.
In this section, you can change your website fonts. You are able to change the font family and weight of headlines (primary and secondary), body and accents.
In this section you are able to select up to 8 colors to be included in the editor’s color for each color option in a widget. Using this tool often saves a lot of time when customizing widget styles.
This section has two tabs: Style and Lightbox
Under the Style tab, you can set a default generic font, should you not choose a custom font, as well as the default content width. You can also set the distance between widgets and the element stretched sections will fit to.
Under the Lightbox tab, you can enable an image lightbox on any link that leads to an image file, or enable lightbox in editor. Also, you can customize the background color, UI color, and UI hover color.
To access Elementor settings on WordPress Admin Panel, you can click on dashboard settings.
About Elementor gives you more information about this plugin.
You can find some options to change for each section. Just hover over a section to see a blue line indicator. There are up to 5 icons to customize your section: Edit Section, Duplicate Section, Add Section, Save Section and Remove Section
Enable this option to make a section the full width of a page.
The width of content can be Boxed or Full Width. Also, you are able to change it manually by adjusting the amount or typing your desired value.
Here, you are able to change the size of the gap between columns. Your options are: Default, No Gap, Narrow, Extended, Wide, Wider
Here, you can choose the height of your section. The height of your section can be Default, Fit to Screen, Min Height. If you choose min height, you are able to manually change the min height.
This option lets you change the position of your content. Your options include: Default, Top, Middle, and Bottom.
Here, you can change the HTML Tag of the section. It can be changed to div, header, footer, article, section, aside or nav.
Background and Background Overlay
A Section background can be Normal or have a Hover effect. Also, it can be Gradient, an image or even a video.
You can have a Normal or Hover effect border and change the color. You can also change the style of it to Solid, Double, Dotted, Dashed, or Groove as well as adjust Border Radius and Box Shadow.
There are almost 20 available Shape Dividers and you can add it to Top or Bottom of your section.
With this option, you can change typography parameters: Text Alignment, and the color of section Heading, Text, Link, and Link Hover.
Under the advanced tab, you can change Margins, Paddings, Z-Index, Entrance Animation, CSS ID and CSS Classes.
Responsive options let you Reverse Columns. It means you can choose to reverse the order of your columns on mobile or tablet views.
You can also choose to Hide your section on Desktop, Mobile, or Tablet.
This option is available for pro users of Elementor, only. However, this option allows you to add custom CSS to any section.