jpearson

About jpearson

Posts by :

October 26 2020

How to Add a New Post in WordPress and Utilize all the Features

Source: WordPress

Are you trying to create a new post in WordPress? Do you want to learn about all the WordPress post features you see on your screen?

While some may think that adding a new WordPress post is quite self-explanatory, many beginners find the interface a bit overwhelming.

Not to mention, sometimes even the more savvy users are surprised to find the hidden gems on the post edit screen.

In this beginner’s guide, we will walk you through all the features on the add new post screen, and how you can utilize them to create better content.

Creating a New Post in WordPress Using The Default Editor

In December 2018, WordPress introduced a new modern block-based editor also known as Gutenberg. It is clean and simple, but don’t let the looks deceive you.

Behind its clean interface, there are tons of powerful features neatly tucked away. We’ll explain all of them and help you unlock its true potential.

Adding Title and Content Blocks

The WordPress block editor comes with a clean writing interface. At the top, you will enter your post’s title.

To add content, you need to add a block. There are multiple add block buttons on the screen that you can click to select and add a block.

If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.

All content elements are wrapped in a block. WordPress comes with blocks for all the common content items including paragraphs, columns, images, gallery, embeds, shortcodes, widgets, and more.

Some WordPress plugins may also add their own blocks to add other features like contact forms, SEO, etc (more on this later in the article).

Adding Images, Videos, & Other Media

You can add images by simply adding the image block and then upload or select the image you want to add.

If you want to text and image next to each other, then you can use the ‘Media & Text’ block. This block helps you wrap text around the image in WordPress.

WordPress editor also comes with a Gallery block that you can use to display images in rows and columns with a grid layout.

Simply add the Gallery block and then upload or select the images from your WordPress media library.

While the gallery block is powerful, you may need other advanced gallery features like albums, image sorting, etc. In that case, we recommend using one of these WordPress gallery plugins.

Want to embed a video in your content? No problem.

The default WordPress editor comes with embed blocks for all popular providers.

You can also just copy and paste the video URL to a paragraph block, and WordPress will automatically convert it into a video embed block.

While you use the video block to upload videos directly to your website, we recommend against that because it will slow down your website and can even crash your WordPress hosting server.

Instead, we recommend uploading your videos on a service like YouTube or Vimeo, and then embed it in your WordPress posts.

For more details, see our guide on why you should never upload videos to your WordPress site.

Adding Categories and Tags

WordPress allows you to sort your posts into categories and tags. These taxonomies help you organize your content into sections and topics.

They also help with SEO and make it easier for your users to find the content they are looking for.

The categories and tags meta boxes are located in the right-hand column, under the Document settings.

Adding Featured Image

A featured image (also known as post thumbnail) is the main article image which represents the content. They’re prominently displayed on your website on single posts, blog archive pages, as well as on the homepage of news, magazine, and blog websites.

Almost all WordPress themes support the featured image functionality. You will find the option to add a featured image to your post in the right column under the Document settings.

Simply click on the ‘Set featured image’ button and then select or upload the image you want to be used as the featured image.

It’s important that you don’t confuse featured images with cover images which is a new feature. See our article on cover image vs featured image for more details.

Adding Excerpts (Article Summary)

Excerpts are the summary of a blog post or article. Most WordPress themes can automatically generate the excerpt from the first few lines of your post.

However, this automatic excerpt may not always be meaningful or catchy. In that case, you may want to manually add an excerpt.

You can do so by adding it in the excerpt box located under document settings column on the right.

Changing Post URL Slug or Permalink

By default, WordPress uses SEO friendly URLs for your blog posts. It automatically uses your post’s title as the permalink.

However, some users may want to change it to be more SEO and user friendly. There are two ways to do that.

You can click on the post title, and you’ll notice the option to change the permalink above the title field. Alternatively, you can change it from the Permalink tab under the document settings column.

Changing Author

If you run a multi-author WordPress site, then you can also change a post’s author and assign it to a different author on your website.

You will find the option to change author under the ‘Status and Visibility’ tab in the right column.

Turn Comments On / Off

WordPress comes with a built-in commenting system that allow users to leave comments on your post. You can turn off comments for individual posts from the Discussion tab under the Document tab.

You’ll also see the option to allow pingbacks and trackbacks. These allow you and other blogs to notify each other when they link to an article.

However, it is mostly used for spam, so we recommend completely disabling pingbacks and trackbacks.

Options Added by WordPress Plugins

Most popular WordPress plugins will also add their own options to the post edit screen. Some will be available as blocks while others will be available as meta boxes.

For example, WPForms, the best WordPress contact form plugin adds a block to insert contact forms in your posts and pages.

Another great example would be Yoast SEO. They add a meta box below the editor for SEO settings and another one in the top toolbar.

Publishing Options

The default WordPress edit screen is divided into two columns. The left column is where you write content, and the right column has all post settings including publishing options.

Let’s take a look at publishing options in the right column.

1. Save draft link allows you to quickly save changes you made to a WordPress post. The editor will also automatically save your changes as you write.

2. The preview button will open a live preview of your post or page in a new browser tab.

3. Once you are done editing your post, you can click on the Publish button to make your post go live.

4. WordPress gives you a few options to control the visibility of your post. The default option is ‘Public’ but clicking on it will show you options to make a post private or password protected.

5. WordPress also allows you to control when a post is published. The default option is to publish immediately, but you can also schedule your posts to publish later or even select a past date.

6. Checking the box next to ‘Stick to front page’ will make a post sticky or featured. This makes the specific post appear on top of other posts. Learn more about sticky posts and what you can do with them.

7. Pending review option will add a custom status next to your post as ‘Pending review’. This feature is particularly helpful on multi-author blogs where contributors can just save posts and not publish them.

8. If you want to delete a post, then you can click on ‘Move to trash’ button. WordPress will send the post to trash. Deleted posts will remain in the trash folder for upto 30 days. After that, they will be deleted permanently.

Edit Screen Options

WordPress allows you to show and hide panels from the edit screen. You can do so by clicking on the three-dot menu at the top-right corner of the screen and then clicking on the ‘Options’ button.

This will bring up a popup where you can check or uncheck the panels.

Themify Builder Documentation

jpearson Blog Themify Builder Tutorial 0

Source: Themify

This documentation is an extensive guide on how to use the Themify Builder, a drag and drop page builder with live edits and previews. Themify Builder works with WordPress posts and pages, as well as custom post types. Shortcodes and HTML tags are supported with the Text or Plain Text module. The Builder can be used in both backend edit mode and frontend edit mode.

NOTE: The Themify Builder is included in the framework of all themes. If you are using a Themify theme, you don’t need to install the standalone Builder plugin additionally.

Backend Edit Mode
To use the Themify Builder in the backend:

First add or edit a post/page.
If you are using WordPress 5+ with Gutenberg enabled (default), you should see a Builder Block like the screenshot below.
If Gutenberg is disabled, you will find the “Themify Builder” tab below the WordPress classic editor.

TOOLBAR
On the Builder Toolbar, you will find these buttons:

Plus Button = To open module panel.
Responsive Styling = Customize styling on Desktop, Tablet Landscape, Tablet Portrait, or Mobile.
Undo/Redo = Undo/redo (you can use keyboard shortcuts Cmd+Z and Cmd+Shift+Z).
Import = Import Builder content from a data file, existing posts, or pages.
Export = Export the Builder content (export will generate a ZIP file which can be imported later using the import option).

Layouts:

Load Layout = Import pre-designed Builder Layouts to the current page.
Save as layout = Save current layout to use on another page.
Duplicate This Page = duplicate the page along with the Builder content.
Page Custom CSS = Allows you to add custom CSS to the specific page.
Interface Options = Choose your interface options such as enable hover mode and right-click menu.
Help = Click to open the Builder Tutorial video lightbox and view the keyboard shortcuts.
Save = Save the Builder content.
Revisions = Revisions allow you backup and restore your previous layout. To access revisions, click on the arrow button beside the Save button. You can select to save or load a revision.

ADDING MODULES

Click on the plus (+) icon found on either the top left of the toolbar or in the last row, to open the module panel.
To add modules, you can drag & drop module to the canvas area or click on the green plus (+) button in the top right corner.

ROW OPTIONS
To access the row options:

If you have hover mode enabled, just hover over the row action button (the small purple dot). To enable/disable hover mode, go to the top toolbar > Interface Options, then toggle the “Hover Mode” switch off.
If you have hover mode disabled, click the row action button or click any where on the row, then click the row button on the action breadcrumb.

On the row action, click on the gear icon to trigger the row option dropdown menu. The row option dropdown has these options:

Responsive Grids: To have a different grid on desktop, tablet, and mobile: first click the device icon, then click the row grid icon.
Row Grids: You can also set the column arrangement on mobile or tablet.
Column Alignment: Set modules in the entire row to top, middle, or bottom alignment (Click here for more info).
Column Direction: Set column float direction either from left-to-right or right-to-left.
Column Gutter: The spacing/gap between columns.
Column Height: By default, all columns within the row are full height. You can change it to auto height which means the height of the column will vary depending on the content inside the column.

On the row option dropdown menu, click the “Row Options” tab to see more options:

Row Width:

Default = Row background and row content area is within the container width.
Boxed = Row background will be fullwidth, but the row content area will be within the container width.
Fullwidth = Both row background and row content area will be fullwidth completely.

Row Height:

Default = Row height varies depending on the content inside the row.
Full Height = Row will be 100vh (viewport height) and the content inside will be by default middle aligned vertically.

CSS Class: Add additional custom CSS classes.

Row Anchor: Add row anchor for scrollTo anchor feature.
ID Name: Add ID name for Sticky Scrolling feature.

Frontend Edit Mode
The frontend edit mode works similar to the backend mode except it provides a live preview.

To use the Themify Builder on the frontend:

View any post or page on the frontend (NOTE: WordPress’ default homepage is actually a blog archive page, so you would need to create a static front page to use the Builder on a homepage).
On the frontend, from the top admin bar (make sure your WP Admin Toolbar is enabled), click “Turn On Builder”.
You will see the Builder toolbar at the top.
Click on the green (+) icon found on the top left corner, or in the last row to open the module container.
Drag and drop, or click the green (+) button, to add a module to the column/grid.
On the frontend, you can dock the panel to either left or right side by dragging the panel to the left/right edge of the screen.

Using Builder on Homepage

The default WordPress homepage is actually a blog archive page which shows all of your latest posts. Please note that the Builder does not work on archive pages. To use the Builder on the homepage, first you must create a static page (e.g. “Home”) and then go to WP Settings > Reading and set that “Home” static page as the front page.

To use the Themify Builder on the homepage:

First add a new page (e.g. Home).
Publish the page and create the Builder layout as you like.
When you are done, go to WP Settings > Reading, on the “Front page displays” option, select the “A static page” radio button, then from the “Front page” dropdown menu, select the “Home” page that you’ve created.
Leave the “Posts page” option empty (if you need to create a “Blog” page, please refer to this tutorial).

Responsive Grids

The Builder grid is responsive by default. But if you want the row grid to be different on tablet and mobile, you can use the responsive grid feature. For example: you can set the row grid to a 4-column on desktop, then change it to a 2-column on tablet, and a 1-column on mobile.

To use responsive grids:

On desktop mode, select your desired row grids
To change a row grid on tablet: click on the tablet icon on the toolbar, then change the row grid option
To change a row grid on mobile: click on the mobile icon on the toolbar, then change the row grid again

Responsive Styling

This features allows you to style how your site looks like on a tablet, mobile, or desktop. To access this feature, first turn on the Builder > on the Builder toolbar select to view your site on Desktop, Tablet Landscape, Tablet Portrait, or Mobile. When these icons are selected you’ll see a live preview where you can customize the styling and the module data.

Notes: When you edit the styling in both tablet or mobile view, you can add or edit the Builder content. But when you do this, note that it will apply on the desktop version as well. Only the styling is applied specific to the device you’re viewing (ie. mobile styling only applies on mobile).

Builder Shortcuts

Below are some Builder shortcuts that can improve your productivity and save you time: (Watch Video)

Double-click = Double clicking on a row, column, or a dropped module will bring up the options lightbox
Cmd + S (PC: Ctrl+S) = Save (if a lightbox is open, it will save changes made in the lightbox, otherwise it will save changes made with the Builder)
Escape = When the module/row option lightbox is open, press escape key to cancel/close the lightbox
Cmd + Z (PC: Ctrl+Z) = Undo
Cmd + Shift + Z (PC: Ctrl+Shift+Z) = Redo
Cmd + C (PC: Ctrl+C) = Click on a module to select it, then press Cmd + C to copy the selected module
Cmd + V (PC: Ctrl+V) = Click on a module to select it, then press Cmd + V to paste data in the selected module
Cmd + Shift + V (PC: Ctrl+Shift+V) = Click on a module to select it, then press Cmd + Shift + V to paste styling data in the selected module
Cmd + Up (PC: Ctrl+Up) = Click on a module to select it, then press Cmd + Up arrow key to move module up
Cmd + Down (PC: Ctrl+Down) = Click on a module to select it, then press Cmd + Down arrow key to move module down

Builder Predesigned Layouts

Builder Layouts are predesigned layouts which you can import to any page for quicker prototyping. You can use the predesigned layouts to get your page started or create your own from scratch using the Builder.

TO IMPORT PREDESIGNED LAYOUTS:

On the Builder Toolbar > click Layouts > click Load Layouts
Select the thumbnail you’d like to import. Then choose to either replace your current Builder layout or append it.
If you already have custom Builder Layouts created/saved, it will be available on the “Saved” tab.

CREATING CUSTOM BUILDER LAYOUTS

You can either create custom layouts from scratch or save from an existing post/page created with the Builder.

Method 1) To create new Layouts from scratch:

Go to WordPress Admin > Themify > Builder Layouts.
Click on “Add New” button.
Enter the title, upload the Featured Image (optional) and click “Publish”.
Use the Builder edit panel to create the Layout as desired and click “Save” when you are done.
The new Layouts will be available on the “Saved” tab of the “Load Layouts” lightbox.

Method 2) To save Layouts from an existing post/page:

Go to the frontend of the page you want to save as a Layout, and turn on the Builder.
On the Builder Toolbar > click Layouts > click Save as Layout.
Then enter the title and upload the Image Preview (optional), and click “Done”.

Layout Parts

Layout Parts are re-usable parts of a layout that can be included into the Builder content or anywhere in the post content or widget using its shortcode. Layout Parts can be edited live on the spot without directing yourself to another page or opening a lightbox. When the Layout Part is updated, any post or page using that same Layout Part will be also updated simultaneously. Layout Parts are extremely useful for showing the same content in multiple areas/pages (e.g. client logos, contact info/map, banner ads, service list, etc.).

HOW TO CREATE LAYOUT PARTS

You can create Layout Parts from scratch or by saving any existing module/row.

Method 1) Save any existing row/module as a Layout Part:

To save any row/module as a Layout Part, click on the element, then click on the save () icon, enter the title and check the “Layout Part” checkbox.

Method 2) Create Layout Parts from scratch:

Go to WordPress Admin > Themify > Builder Layout Parts.
Click on “Add New” button.
Enter the title, upload the Featured Image (optional) and click “Publish”.
Use the Builder edit panel to create the Layout as desired and click “Save” when you are done.
The new Layout Parts will be available on the “Saved > Parts” tab of the module panel.

HOW TO DISPLAY THE LAYOUT PARTS

There are 2 methods to show the Layout Parts:

Using the “Layout Part” module.
Using the shortcode.

Method 1) Using the “Layout Part” module

The “Layout Part” module works exactly the same as all other modules. Simply drop in the “Layout Part” module and select the Layout Part.

Method 2) Using the shortcode

You can also display Layout Parts using the following shortcodes in the post content, Text widget, and inject it in the page using the Hook Content.

The Layout Part can be queried by its slug name or post ID.

= this means show the layout part with slug name ‘client-logos’.
= this means show the layout part ID# 12 (find out how to post the ID number).
You can get the Layout Part shortcode from WP-Admin > Themify > Layout Parts

Builder Import/Export

The Builder Import/Export tool can be used to share Builder layouts with clients or use it as a backup to create different versions of your layouts (i.e. export the Builder content for backup purposes which you can roll back in the future).

To Export: on the Builder Toolbar, click Export (it will prompt you to download a zip file).
To Import: on the Builder Toolbar, click Import, then click either import from a zip file or from existing posts/pages.

To achieve scrollTo row anchor:

Step 1) First enter in a Row Anchor name in Row Options (e.g. “portfolio”)

Step 2) Then go to WP-Admin > Menus and create a new menu. Add a new “Custom Links”, on the URL option, enter the anchor name with a number sign (#) in front of it (eg. “#portfolio”)

Result: When the #portfolio link is clicked, or when users go the URL with the #portfolio anchor (e.g. http://yoursite.com#portfolio), it will scroll to the row where you’ve specified that Row Anchor = “portfolio”

Fullwidth Page Layout

Fullwidth layout is only available in Themify themes. You can create a complete fullwidth page without a sidebar and page title.

To set a fullwidth layout (available in Themify themes only):

Add or edit a page, on the Themify Custom Panel, select:
- Sidebar Option = no sidebar icon
- Content Width = fullwidth
- Hide Page title = Yes (optional: this will hide the page title so everything can be built with the Builder)

Video Background

To display a background video:

With the Builder turned on, select the row where you want to show the video background > select Styling icon > Styling Tab
Background Type: Select “Video”
Background Video: Choose to upload an mp4 video, or insert a YouTube/Vimeo link.
- NOTES:
  - Audio must be disabled in order to have video auto play in background.
  - Inserting a YouTube/Vimeo link won’t allow users to toggle the video (i.e. play, pause, or mute). It will just auto play the video when users visit your site.
- Background Image: This is a fallback background image. You’ll need to insert a fallback background image because the video background does not work on mobile.

Parallax Scrolling Background Image

To display a parallax scrolling background image:

With the Builder turned on, select Row > Options > Styling Tab, upload a “Background Image” and select “Parallax Scrolling” in the “Background Mode”
Optional: select a “Background Position” for the image.

Slider & Ken Burns Background

To display an image background slider:

With the Builder turned on, select Row > Options > Styling Tab
Click “Insert Gallery” and insert a gallery by selecting library images or upload images (it will then insert a [gallery]shortcode in the textarea)
Image size = Select the size of the image that you would like the images to appear
Under “Background Slider Mode”, you can select:
- Fullcover = slider images will scale to fully cover the row.
- Best Fit = slider images will automatically fit within the row.
- Ken Burns = the background images will pan, zoom, and fade slowly providing a unique visual effect.

Gradient Background

To display a gradient background:

With the Builder turned on, select the row where you want to show the gradient background > select Styling icon > Styling Tab
Background Type: Select “Gradient”.
Background Gradient: Here you can select to showcase the gradient effect as linear or radial, and also adjust the rotation on how you would like the color gradient to appear.
- Color gradient Bar: The color selector bar gives a preview of how your color gradient will look on your row or column.
  - Click on the color bar to add a new color to the gradient color scheme.
  - Drag the color circles to adjust the gradient.

Row/Column Frame Styling

Style all row/column edges (from top, bottom, left, and right) with the row frame styling. You can choose from 25 beautiful preset shapes or upload your own shapes (eg. you can upload your SVG or PNG file as the frame style). There are options to set frame width, height, color, and repeat. It can also be styled differently for desktop, tablet, and mobile.

To apply row/column frames:

Row: select a Row > Styling tab (or click the brush icon) > Frames. Select the tab where you’d like to place the frame: Top, Bottom, Left, or Right. Each tab will show the following options:
- Type = Choose from the 25 presets or add your own custom frame (support SVG or PNG files).
- Color = Set the color and opacity of the frame (Does not apply if you set custom frame).
- Width = Width of the frame in px, %, or em.
- Height = Height of the frame in px, %, or em.
- Repeat = Set the number of times you would like the frame to repeat.
- Display below content or Display above content = Choose whether you’d like the frame to appear below or above the row content.

Entrance Animation

Animation is the transition effect that triggers when the elements enters the viewing area. It can be set to rows and modules individually.

To apply: edit any row or module and click on the “Animation” tab and you’ll see the following animation effects:

Entrance Animation: The animation will trigger when the element is visible in the viewport.
- Delay: Enter a number of seconds to delay the animation (eg. if you enter “1.5”, it will wait 1.5 seconds before the animation is triggered)
- Repeat: Enter the number of times you’d like the animation to repeat.
Hover Animation: Animation will trigger when you hover over the element.

Scroll Effects

A scroll effect is the movement of an element that is triggered by the scrolling of a page (ie. as you scroll the page, the element has an animation effect). View the demo here to see how it works.

To enable scroll effects:

Edit any module or row, go to the Animations tab > Effects > Motion and you’ll see all of the scroll effects listed:
- Vertical: Make an element scroll up or down, at various speeds and viewport.

- Horizontal: Make an element scroll left or right, at various speeds and viewport.
- Transparency: Make an element fade in, fade out, fade in out, or fade out in.
- Blur: Make an element’s blur effect fade in, fade out, fade in out, or fade out in.
- Rotate: Make an element rotate left or right, at various speeds and origin points.
- Scale: Make an element grow bigger or shrink smaller, at various speeds and origin points.

Vertical Scroll:
To enable vertical scroll, select a Direction, Speed, and Viewport:

Direction: select ‘Up’ or ‘Down’ to change the direction your element travels (up moves the element to the top of the screen, down moves the element to the bottom of the screen)
Speed: selecting a speed will change how fast or slow the scroll effect animates (level 1 is the slowest, 10 is the fastest)
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

Horizontal Scroll:
To enable horizontal scroll, select a Direction, Speed, and Viewport:

Direction: select ‘To Left’ or ‘To Right’ to change the direction your element travels (left makes the element move toward the left of the screen, right makes the element move toward the right of the screen)
Speed: selecting a speed will change how fast or slow the scroll effect animates (level 1 is the slowest, 10 is the fastest)
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

TIP: To create a Diagonal Scroll effect, add both a Vertical + Horizontal Scroll!

Transparency:
To enable transparency, select a Direction and Viewport:

Direction: select one of the following options
- Fade In: the element will fade in from invisible to visible
- Fade Out: the element will fade out from visible to invisible
- Fade Out In: the element will fade out, then fade back in
- Fade In Out: the element will fade in, then fade back out
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

Blur:
To enable blur, select a Direction, Level, and Viewport:

Direction:
- Fade In: the element will go from blurry to clear
- Fade Out: the element will go from clear to blurry
Level: selecting a level will determine the severity of the blur effect (level 1 is the least blurry, level 10 is the most blurry)
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

Rotate:
To enable rotate, select a Direction, Number of Spins, Transform Origin, and Viewport:

Direction: select ‘To Left’ or ‘To Right’ to change the direction your element will spin (left makes the element spin counter-clockwise, right makes the element spin clockwise)
Number of Spins: select a number to determine the number of spins you want
- TIP: For more subtle movements, opt for any decimal numbers under 1. For eg. A spin number of 0.25 will cause a quarter turn, or 0.05 will cause an even slighter movement)
Transform Origin: the transform origin determines at which point on the element the spin will occur. Select a transform origin by dragging the blue dot anywhere in the transform origin box or leave it at the default Center, Center position. (eg. Selecting a transform origin of Top Left means that the Top Left corner of the element will be the most static and the rest of the element will spin around this origin point)
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

TIP: To create cool multiple effects, you can set one or two scroll effects, for example, to start at 10-40%, and a third and fourth to begin at 41-90%.

Scale:
To enable scale, select a Direction, Scale Ratio, Transform Origin, and Viewport:

Direction: select ‘Scale Up’ or ‘Scale Down’ to change the way the element will resize (Scale Up increases the element’s size, Scale Down decreases the element’s size)
Scale Ratio: select a number to determine the how big or small the element will resize to relative to it’s current size
- TIP: Scale Up at a Scale Ratio of 1.1 means the element will become 10% bigger, a Scale Ratio of 2 means the element will double in size
Transform Origin: the transform origin determines at which point on the element the scale will occur. Select a transform origin by dragging the blue dot anywhere in the transform origin box or leave it at the default Center, Center position.
Viewport: selecting a viewport range will control where on your screen an element’s scroll effect will be active (0% is at the very bottom of your browser’s screen, 100% is at the very top of the browser’s screen)

TIP: To check your scroll effects on the fly, keep another tab open of the live page you’re working on to refresh and quickly view your changes. View our demo here for inspiration.

Builder Sticky

The sticky effect allows you to make certain rows/modules stick on the screen when it scrolls to a certain point.

To apply: edit any row or module and click on the “Animation” tab, click on the “Sticky” tab, and you’ll see the following options:

Sticky:
- Check “Stick at” checkbox and then select the position, either “Top Position” or “Bottom Position”, that you’d like the module to stick at. Then enter the position value (eg. if you select stick at top position 0px, it means the element will stick when it is scrolled to 0px from the top of the page).
- If you don’t enable the “un-stick” option, the element will remain sticky. With the un-sticky option, you can specify when to un-stick the element. To specify un-stick: check “Un-stick when” checkbox, then select the un-stick conditions (eg. if you select un-stick when row #contact-row hits this element, it means the element will un-stick when the row with the ID name ‘contact-row’ scrolls to the element).
- Z-index: Module with a greater stack order number is always in front of a module with a lower stack order. If you find an element is behind a certain element, you can increase the z-index to adjust the stacking order.

Global Style

Global Style (GS) is a time-saving feature that allows you to reuse the same styling in multiple instances across the entire site. Simply style any row, column, or module to your liking, then save it as a GS (Global Style), and reuse it by inserting it onto any other element of your choice. When you edit a GS, all the changes are automatically applied to any element using that same GS (read the announcement post for more details).

How to Save Styling as a Global Style:
You can save any element’s style settings as a Global Style to have for safe keeping, or to reuse it on another module.

To save as a Global Style: edit any module or row, go to the Styling tab > click the Global Styles big paintbrush icon (in the top right corner), click ‘Save as Global Style’, enter a Global Style name, click ‘Yes’ to apply your new Global Style.

How to Insert a Global Style:
You can reuse a Global Style by inserting it onto another module of your choice. NOTE: Once you insert a GS, the paint icon will be highlighted in a purple colour to indicate that a GS has been inserted.

To insert a Global Style: edit any module or row, go to the Styling tab > click the Global Styles paint icon, click ‘Insert Global Style’ and select your Global Style of choice.

How to Edit a Global Style:
You can edit any saved Global Style. NOTE: Any changes you make will automatically be reflected on any module that is occupied by that same Global Style (ie. the changes will apply site-wide on any module with that GS).

To edit a Global Style: edit any module or row that has an existing Global Style inserted, go to the Styling tab > click the Global Styles paint icon, click the pencil icon next to the Global Style name, make your styling changes, then click ‘Save Style’ to save.

How to Import, Export, and Delete a Global Style (In the Backend):
You can manage all of your Global Styles on the backend, including importing, exporting, deleting, and editing any saved Global Style.

To access the backend of Global Styles:

Option A) Edit any module or row that has a GS inserted, go to the Styling tab > click the Global Styles paint icon, click ‘Insert Global Styles’ > click ‘Manage Styles’ from the top right corner.

Option B) Go to WP Admin > Themify > Global Style.

On the GS backend, you can do the following:

Export: Click the green export icon to export a GS.
Import: Click the import button to import a GS.
Delete: Click the X icon to delete a GS. NOTE: Once you delete a GS, it will affect the styling of all modules that have the GS inserted throughout the entire site.
Edit: Click the thumbnail to edit the GS.

Visibility Control

You can set the rows and modules to be visible on specific device views (desktop, tablet, and mobile). By default, all device views are visible.

To set Visibility: edit any row or module, click on the Styling tab, toggle the buttons to hide the device view.
- Desktop = Hide desktop will hide object when viewport is larger than 1024px.
- Tablet = Hide tablet will hide object when viewport is between 680px and 1024px.
- Tablet Landscape = Hide tablet will hide object when viewport is between 680px and 1024px and the orientation is on landscape mode.
- Mobile = Hide mobile will hide object when viewport is less than 680px.
- Sticky Visibility = The element will be hidden when its parent row’s sticky effect is active.
- Hide All = Means the element will be hidden on all devices.

Page Break

This new feature allows you to break your Builder layout into multiple pages. Making your pages load faster while still allowing your readers access to read all of your content.

How to use Page Break:

To add a Page Break: on the module panel, drag the “Page Break” module under the row where you want to break the page. You can drop as many Page Break modules as you want (each Page Break module will create an inner page).
To remove the dropped Page Break: hover over the Page Break module on the layout and click on the “X” button.

Revisions

Builder Revisions gives you a “save as” like feature, allowing you to save your Builder layout with unlimited versions. The Builder will log this revision and allow you to revert back to it, if you’d like. This is great for users who suddenly make a mistake when changing something from their site and don’t know how to fix it.

To save Revisions: on the frontend Builder, next to the Save button, hover over the arrow and select “Save as Revision”
To load Revisions: select “Load Revision” and it will prompt you whether to save the current state before loading a revision.
- NOTE: If the revision list on the option lightbox shows a gray color and the revision link is not clickable, it means the revision does not have a Builder layout, thus it won’t allow you to load an empty Builder revision.

More Tag

You can insert a read more button to trim down the text and focus on the visuals in the text module. Readers who want to read the full content can click the “read more” button.

To add a More Tag:

Drag and drop a Text module and click on the “More” option toolbar.

Default Modules

These are the default modules that come with the Builder:

Accordion = Displays expandable/collapsible content.
Alert = Schedule, display for a specific number of times, show to either login/public visitors, or auto close after a certain number of seconds.
Box = Displays text content in a box.
Button = Display button links (it could be a single button or multiple).
Callout = Displays a “call for action” box (heading with a link button).
Divider = Displays a divider between modules.
Fancy Heading = Displays a main heading and a sub-heading with border divider in the middle.
Feature = Displays an animated circle with a large icon.
Gallery = Displays a gallery with image lightbox/zoom.
Icon = Displays a decorative icon with an option to include an icon label.
Image = Displays an image with title and caption.
Layout Part = Displays the Layout Part that you’ve saved.
Login = Displays the WordPress login form with password reset feature.
Map = Displays a Google Map.
Menu = Displays a WordPress custom menu created in Appearance > Menus.
Plain Text = Uses Plain Text to display HTML, JS, and shortcodes.
Optin Form = Displays newsletter subscription forms (Mailchimp, etc.).
Post = Displays posts from any category.
Service Menu = Displays service/pricing menus.
Slider = Displays a slider of posts, images, videos, or text content.
Tab = Displays tabbed content.
Testimonials = Displays customer testimonials in a slider or grid layout.
Text = Visual text editor with shortcodes and HTML support.
Video = Embeds videos from YouTube, Vimeo, etc.
Widget = Displays any WordPress widget.
Widgetized = Displays a widget area.

Themify Builder Settings

BUILDER SETTINGS (THEMIFY THEME VERSION)

If you are using a Themify theme, the Builder settings can be found in the Themify panel > Settings > Themify Builder.

On the Builder setting panel, you should see:

Themify Builder Options:
- Enable/disable the Builder completely (NOTE: when the Builder is disabled, the entire Builder content will not appear on all pages)
Animation Effects:
- Disable appearance animation, parallax background, float scrolling and sticky scrolling on tablet, mobile, or on all devices.
Builder Modules:
- Disable the modules individually (NOTE: when a module is excluded, only the excluded module will not appear on the page).
Tools:
- Find & Replace: Find and replace all content entered in the Builder. For example: if you’ve moved to another domain, you can use the find & replace tool to replace all URLs in the Builder to the new domain.
- Regenerate CSS Files: Use this tool to regenerate the Builder styling (ie. it will re-generate the Builder styling CSS files on the server when a visitor views the page).
- Maintenance Mode: Enable maintenance mode if you don’t want public visitors to see your site (ie. when you are still building the site or in the progress of setting up something on the site, you can use this tool to display a maintenance/coming soon page). When the maintenance mode is enabled, all pages on the frontend will be redirected to the selected maintenance page.

BUILDER SETTINGS (BUILDER PLUGIN VERSION)

If you are using the Themify Builder plugin, the Builder settings can be found on the WordPress admin sidebar > Themify Builder > Settings. The available options on the Builder plugin settings are the same as the Themify settings (only the option interface is different).

Builder Cache & Minified Scripts

Script minification and caching allows you to improve the page site load on the frontend. Since script minification/compiling is a common cause to Javascript conflicts between plugins, it is disabled by default.

To enable script minification & Builder Cache:

Go to Themify panel > Theme Settings > Builder Cache & Minified Scripts
Select “Enable minification” radio to enable it. You can also enable Builder cache and gzip caching.
To reduce file size, all Themify themes and Builder scripts (Javascript and CSS files) are minified. You can disable the minified scripts if you want to use the un-minified version.

NOTE: If you don’t see the Builder Script Minification option in the Theme Settings option, it means caching is not supported with your server (either due to old PHP version or server not permitting to write cache files).

Builder Static Content

If you have WordPress Gutenberg editor enabled (Gutenberg is the new WP editor introduced in v5), you will see the Builder Block which you can move up/down like all other Gutenberg Blocks. If you have Gutenberg editor disabled, you will see the Builder content placeholder like the screen below.

The Builder content placeholder represents where the Builder content will be displayed. You can add content before or after the content placeholder. If you don’t see the Builder Content Placeholder, make sure you are using the latest version and try to re-save the post/page again.

NOTES:

The Builder static content serves as your fallback content when the Builder is disabled/removed. It also allows WordPress to search your content in the Builder.
When you update the post/page, the Builder static content will refresh/regenerate (this is normal). It will not appear on the frontend when the Builder is active.
The Builder Content Placeholder badge only applies to WordPress versions prior to 5.0 or if you have Gutenberg disabled. If you are using WP 5.0+, the Builder content is treated as a Gutenberg Block.

Custom CSS Class

Custom CSS class is used by developers to write custom CSS to apply styling to specific elements that contain the CSS class name. The advantage of using custom CSS class is when you update the CSS styling, it will apply to all elements that contain the target class name. You only need to write the custom CSS once, then it can be reused to as many elements as you want by adding the custom class name.

Sample Usage:

Lets say you have a few rows or modules that you want to have the same yellow background and black text color, you would add ‘yellow-box’ in the “Additional CSS Class” field (all rows and modules have this field in the option lightbox).
Then add the sample custom CSS as below. Now whichever rows or modules have that additional CSS class will have a yellow background with black text styling. When you change the CSS code, it will apply to elements automatically without having to edit the Builder.

Builder Addons

The Builder is extendable with Addons. Installing Builder Addons is the same as installing standard WordPress plugins. Here is a detailed tutorial on how to install addons.

FAQs

Does the Builder work on the homepage?
The Builder works with all posts, pages, and any post type that has the_content enabled. The default WordPress homepage is actually an archive page that shows the latest posts. To use the Builder on the homepage, first create a new Page and then assign that page as the Front Page in WP > Settings > Reading.
I’ve logged in, but I don’t see the WP admin top bar. Why?
If you don’t see the top admin bar (WP Admin Topbar) on the frontend, it is likely disabled. To enable top admin bar, edit your user Profile and check the “Show Toolbar when viewing site” option.
I can turn on the Builder, but there is no grid to drop modules.
If you don’t see the Builder grid after turning on the Builder (but the module panel presents), it is likely because the template does not have the required WordPress function, the_content() or the template is using the_excerpt(). In this case, try to add a new post or page.
The Builder won’t turn on in the frontend. Why?
– First, make sure that you are viewing a single post or page, not an archive page (examples of archive page: search, tag, category, taxonomy archive, etc.).
– Second, make sure the top admin toolbar is enabled in your WordPress site.
– Lastly, it is likely due to plugin conflicts. Try to disable all plugins and check again.
Can I use the Builder to edit the header, sidebar, and footer?
You can use Builder Pro to do this. It allows you to create custom header, footer, and other templates for post, page, WooCommerce and custom post types.

I don’t use the Builder. Can I disable it?

Method 1) You can disable the Builder in Themify > Settings > Themify Builder. If you are using the standalone Builder Plugin, deactivate the plugin will disable the Builder.

Method 2) You can also disable the Builder in the child theme functions.php with this code:


<?php
add_filter('themify_enable_builder','custom_disable_builder',100,1);
if(!function_exists('custom_disable_builder')){
	function custom_disable_builder($enable){
		return 'disable';
	}
}
?>

To hide the Themify Builder tab on the Themify panel:
– Paste the following code in the child theme functions.php:


/* Add custom styles for admin part */
function custom_child_admin_stylesheet() {
	wp_enqueue_style( 'child-admin-style', trailingslashit( get_stylesheet_directory_uri() ) . 'child-admin-style.css' );
}
add_action( 'admin_enqueue_scripts', 'custom_child_admin_stylesheet' );

– Create a child-admin-style.css file. In the css file, paste the following code:


#themify li[aria-controls="setting-themify-builder"] {
    display: none;
}

Once I disable the Builder, will the layouts I created with the Builder show?
No, the Builder is required to render the layouts that are created with the Builder. Once the Builder is disabled, it will show the static content of the Builder (ie. it will show the text content without the dynamic content and styling).
Where are the old custom post types (Slide, Highlight, Portfolio, and Testimonial)?
Note: The updated Themify framework 2.1.2 and Builder plugin 1.3.1. have obsolesced the following custom post types: Slide, Highlight, Portfolio, and Testimonial. To provide backward compatibility, the Highlight posts will remain functional if your site has existing Highlight posts. If you would like to continue using these custom post types, we’ve created a free plugin called Builder Deprecated CPT. This plugin will unlock the deprecated custom post types.
When I try to import/upload Builder layouts zip or txt file, it says “Sorry, this file type is not permitted for security reason”?
This is because the file format is not allowed in your WordPress network setting. To allow more file extensions, please go to your WP Network Admin > Settings > “Upload File Type” > Add file format extensions (i.e. txt zip).
My WP Admin is HTTPS, when I switch to frontend that is HTTP, the Builder doesn’t work.
When you login in admin that is secured (HTTPS), the login session is captured as HTTPS domain. If your frontend URL is not HTTPS, the frontend Builder will not work because the browser treats HTTPS as a different domain. To fix this: go to WP Admin > Settings, change the “WordPress Address” and “Site Address” to HTTPS URL.
How do I trigger an active Tab or Accordion by using URL hash?
First drop in a Tab module and create the tabs as you like. View the page on the frontend with Google Chrome, right-click on the tab navigation (https://cl.ly/2g2n183x2n3c) and select “Copy Link Address”, now you can paste that URL as hyperlink (eg. the link URL would be something like http://yoursite.com/page-url/#tab-tab-6925-0-0-0-6925-2). This works the same for Accordion module (just right-click on the accordion title and then copy link).
I’m using a Themify theme and Builder, there is padding between the header and content area. How to remove it?
That is the content container padding. To remove it, edit the page in the backend, on Themify Custom Panel, select “Content Width = Fullwidth”.

Disable URL change with scrollTo anchors
On the row anchor option, you can select “Hide anchor on URL” or you can disable it with custom code: https://themify.me/docs/theme-code-snippets#disable-url-change-with-scrollto-anchors
Offset scrollTo position with third party themes
Using ScrollTo anchor feature in Builder, by default it scrolls to the top of the row. To set the scrollTo position, go to Themify > Theme Settings > Themify Builder, enter the “ScrollTo Offset” position.
The theme/Builder shows broken interface due to .gz issue
Make sure your server supports .gz file. Our themes come with pre-packaged .gz compressed files to reduce file size. On Nginx server, it picks up .gz file and serves them instead of the actual asset. Please contact your host provider and ask them to enable this feature.

October 12 2020

How to use Google Fonts in Your Next Web Design Project

jpearson Blog Google fonts 0

Source: FreeCodeCamp

So you’ve probably heard that Google has hundreds of free web fonts ready to be used for your next project. But how do you use them on your website? This article will walk you through the steps to take in order to get them running on your website. It should take less than 10 minutes!

What are Google Fonts?
“Google Fonts first launched in 2010 as an engineering initiative to move the web forward and make it faster.” — Google Design

Google Fonts launched in 2010, quickly becoming the Internet’s largest, free, open-source selection of fonts. All Google Fonts are free for commercial and personal use. The Google Fonts website makes it easy for anyone to quickly select and utilize different fonts for their own design needs.

Who uses Google Fonts?
Everyone does! Graphic designers, UX designers, researchers, developers, web designers, bloggers, social media managers, entrepreneurs, artists, students, teachers, photographers, and many more. I’ve seen Google Fonts used on billboards, posters, presentation decks, wedding invitations, websites, and books.

Who creates the fonts?
Google Fonts collaborates with type designers, type foundries, and the design community all over the world. These people and organizations design the fonts that you see on Google Fonts. For example, Łukasz Dziedzic is an independent typeface designer who designed the popular typeface, Lato. A typeface foundry named ParaType designed the typeface PT Serif.

Why does Google care about fonts?
Every Google Fonts API link on a website gives Google the opportunity to do more data mining. Does that sound gross? Yes, but I don’t think it should stop you from using Google Fonts.

Another more comforting reason Google cares about fonts is that they want to make open-source web fonts accessible to the masses. They want to make a faster, more beautiful web that is easier to navigate and use. They also started Google Fonts back in 2010 when a service like this was much needed, so they solved yet another problem we were having on the Internet. #dontbeevil

How to Use Google Fonts — Step by step
1) Go to the Google Fonts website
Visit the Google Fonts website where you will be able to choose from 853 font families and counting! The website allows you to filter results by font style, languages, popularity, and weight. Google Fonts also features new fonts if you visit the “featured” page.

2) Search for fonts you like
If you have a font family name in mind you can search for it.

3) Click “+” when you are ready to use it
Each font family has a plus button in the upper right-hand corner. Click the plus button to add the font family to the “selection drawer” that appears at the bottom of the screen.

4) Repeat steps 1–3 if you are looking for more than one font to use
5) Click the “selection drawer” to show all the fonts you’ve chosen
The “selection drawer” is where you will see all the fonts you’ve added. It’s where you will find the code to add to your website. You also have the option to download the fonts to your desktop.

6) The “selection drawer” is where you will grab the code that you will copy/paste into your websites HTML and CSS code
From the “selection drawer,” you will copy the code to paste in your HTML and CSS. In order for Google Fonts to work on your website, you must have both the font family linked to the Google Fonts API (in the HTML) and you must have the font family specified (in the CSS).

7) Add different font weights and styles if you wish by clicking the “customize” tab
This is your last chance to add different font weights and styles to your font families before adding them to your website. Only add the font weights and styles you know you will need, because the more fonts you add the slower they will load on your site.

8) Copy the HTML code and paste it in your website’s <head>
Alright, we are almost done! All we need to do now is copy and paste the HTML and CSS code into your website. First, copy the HTML link into the head of your HTML doc.

9) Copy the CSS rule and paste it in your website’s CSS file
Finally, we also need to copy and paste the CSS rules into your CSS file. If you’re adding one Google Font for your website, you can add the CSS font-family rules into your body tag. Otherwise, you will need to be sure you are adding it to the correct elements in your CSS files.

10) Save both files (HTML and CSS) then refresh your website and view the new font
Don’t forget to save and refresh!

Refresh your local files and you should see the new font family… in this case it’s a Google Font called Lato.

There ya go! You have successfully implemented your first Google Font on your website. Congrats, you coder you. It’s fair to say Google Fonts are basically…

September 24 2020

Best Practices for Using a Background Image for Website

jpearson Blog background images 0

Your background image for your website is not just something that looks good. It actually affects the entire user experience. It has the potential to become a powerful storytelling tool that can reel your audience in and entice them to stick around. This is why a lot goes into deciding on which web background image to use — be it a simple solid block color, an actual image, or even a video. Here’s a guide on the best practices when choosing website backgrounds to help you make the right choice.

Choosing the Right Image

Cool website backgrounds are designed to set the tone for your website content. They can be used to emphasize the text content and reinforce your site’s message. With that said, choosing the right image is important. For starters, you must be mindful of recommended website background sizes. A good rule of thumb is to go for the largest possible file but keep within the maximum recommended website background size so as to not slow down the site.

Stay away from busy images

When choosing website page background images, it’s important to go for photos that are not too busy. This is particularly important when adding text content over the image. You want to select a beautiful visual but it shouldn’t take away from the message of the text. For instance, landscapes with sufficient headspace can make a great web background image.

Backgrounds

We also recommend going for more subdued colors or adjust the contrast on the web background image so it doesn’t overpower your text.

Where to source images

While it’s highly recommended that you invest in professional photography to create website background images, not everyone has the budget for such a service. There are a lot of places on the internet where you can source for free web backgrounds. Patternico has an integrated image library that offers a collection of free web patterns that will suit most websites. Royalty-free image websites like Unsplash are also great sources for free backgrounds.

When in doubt, use abstract images

Abstract and gradient backgrounds are commonly used in modern website design as a way to make a minimalist layout look more punchy. When used against a lot of whitespace, it adds character to a website and makes it more engaging. The only thing about abstracts is that they only work with specific types of websites. Gradienta has a collection of gradients to use with your website.

Gradient

Another option is to go for block colors against text instead of actual images. You will need to put a lot of work on creating attractive text content, however. But on the flip side, this means that you get more room to get your message across because the background doesn’t distract the user from what your text content is trying to say.

Use video backgrounds

Modern website design trends are now starting to embrace the use of video in place of image backgrounds. Videos are known to increase engagement because visitors are more drawn to them than still images. Use a video background introducing your brand or what your website is about. It can be the first thing that a user sees as soon as he lands on your site.

We are easily distracted by anything that moves – just like that dog that ignores everything in its world to chase that pesky little squirrel!

“Okay, you got me to look at your silly video, what does this have to do with my website design?”

What a great question and I’m glad you asked.

Video background on your website, if used properly, can help you capture your website visitors’ attention too!

Video background is one of the most popular website design trends that seems to be here to stay.

Marketers love video backgrounds because they make websites look modern and create a sense of artistry that static background images simply can’t match up to.

Many website conversion experts and regular people alike see their visitors stay on their websites longer and more likely to sign up or opt-in to their product/service offers.

September 18 2020

10 Things to do Before Starting your Website

jpearson Blog Starting a new website 0

Building a website for the first time? We’ve pulled together this beginner’s 101 telling you what’s needed.

Getting to grips with something completely new takes time, patience, good-old-fashioned practice… oh, and plenty of planning.

1. Establish the aim of your website

Is the aim of your site to inform people that your business exists and encourage them to get in touch? Is it to sell your products online? Or how about to showcase your creative work? Having a clear focus will help you as well as your visitors.

2. Research, research, and research some more

Have a look at other websites in your field. Identify those you like the style of and take notes – what is it about their layout and design that works?

3. Know your target market

Make sure you clarify this early on as it will affect your theme, design, content, usability, networking efforts and search engine optimization (we’ll come to this later). In short, everything revolves around your target market.

4. Choose your domain name wisely

Pick something that’s short, easy to remember, and reflects the nature of your site. It’s not easy to change it at a later date, so now’s the time to get it right. Of course, if your site is for your business, then it kinda makes sense for your domain name to incorporate it.

5. Decide on design and layout

Having done your research, you’ll hopefully already have an inkling of the design style you want to go for. Try creating a mood board with screen grabs from sites you like. For layout try sketching out a few drawings to see how your ideas come together on a page.

6. Plan and create your pages and content

What is it that you want to tell visitors? What’s going to get them excited about your work and keep them on your site? How many pages do you need to create to do this effectively? Don’t rush in with long, rambling paragraphs. Keep your copy relevant and concise to hold your visitors’ attention.

7. Get SEO savvy

Search Engine Optimization is going to play a big part in attracting people to your website. As well as incorporating keywords or search terms that your audience is likely to be typing into Google, you need to provide the search engines with a succinct explanation of what those visitors will find when they get there.

8. Get your images ready

Get the images you want to use prepped and lined up. It’ll save you a lot of time when it comes to pulling your pages together.

9. Create your logo

Having your own logo will ensure your brand is recognizable.

10. Set yourself a deadline

Web design can take a long time if you don’t manage your time properly. Set yourself daily or weekly targets of having certain areas of your site done – this way you won’t get bogged down doing too much at once.

Here’s a link to download our Design Questionnaire for your convenience. As always, at Apis Productions we’re here for you. Contact us today with any questions.

September 10 2020

What’s New in WordPress 5.5

jpearson Blog WordPress 5.5 0

source: Cpanel

From auto-updates to new improvements and block updates, WordPress 5.5 is feature-packed! Let’s jump in and take a look at some of the most significant updates:

Automatic Theme and Plugin updates:

Maintaining a WordPress site can be a time-consuming task, especially if you run multiple WordPress sites. A simple plugin update across numerous websites can range from minutes to hours, depending on how many websites you manage.

Keeping the WordPress core and your plugins and themes updated is crucial in keeping your site secure.

What was once only a feature available from a plugin or managed WordPress Accessibility Improvements:

WordPress takes accessibility seriously. Version 5.5 includes 34 Accessibility fixes and enhancements.

Alternate view modes for List tables.
Convert Link-list widgets to HTML5 navigation blocks.
Copying links in media screens and modal dialogs can now be done with a simple click of a button.
New disabled button styling.
Move Meta boxes with the keyboard.
Custom logo on the front page no longer links to the front page.
Status messages in the Image Editor for Assistive devices.
The shake animation indicating a login failure now respects the user’s choices in the prefers-reduced-motion media query.
Redundant Error: prefixes have been removed from error notices.

Block Updates:

WordPress 5.5 includes eleven releases of the Gutenberg plugin, bringing a long list of exciting new features. In all, Version 5.5 brings more than 1,500 useful improvements to the block editor experience. Here are just a few:

Inline image editing: Crop, rotate and zoom photos inline right from image blocks.
Block patterns: Building elaborate pages can be a breeze with new block patterns. Several are included by default.
Device previews: See how your content will look to users on many different screen sizes.
End block overwhelm: The new block inserter panel displays streamlined categories and collections. As a bonus, it supports patterns and integrates with the new block directory right out of the box.
Block Directory: Discover, install, and insert third-party blocks from your editor using the new block directory.
Backgrounds and gradients: You can add backgrounds and gradients to more kinds of blocks, like groups, columns, media & text.
Advance measurements support: Choose ems, rems, percentages, vh, vw, and more! Plus, adjust line heights while typing, turning writing and typesetting into the seamless act.
Smoother editing experience with:
Refined drag-and-drop
Block movers that you can see and grab
Parent block selection
Contextual focus highlights
Multi-select formatting lets you change a bunch of blocks at once
Ability to copy and relocate blocks easily
And, better performance
An expanded design toolset for themes.

Image Lazy Load:

WordPress 5.5 now includes native support for lazy load images utilizing new browser standards. Lazy-loading images will not be sent to the user’s browser until they approach the viewport, saving bandwidth, and increasing site speed. WordPress 5.5 makes it a default option by adding the ‘loading’ attribute to img tag. This attribute is supported by most modern web browsers.

ZIP file theme and plugin updates:

Before WordPress 5.5, users could not update a theme or a plugin via a ZIP file install without using a plugin. In this latest version updating a theme or plugin works in the same fashion as uploading a new one. WordPress now directs users to a new screen that compares the currently-installed version with the uploaded version after clicking the Install Now button.

XML Sitemaps:

Sitemaps are essential to SEO and users discovering the content on your website. XML Sitemaps are now included in WordPress and enabled by default.

September 8 2020

Five Steps to Writing a Killer Call-to-Action

jpearson Blog Call to action writing 2

As a business owner, you’re constantly striving to stay on the same page with prospects and clients.

But does your message actually have a compelling substance, or are you just telling beautiful stories that keep your readers entertained for a short while?

Lack of a call to action automatically affects that website’s relationship with clients and ultimately, their competitiveness and profit margins.

To consolidate your position on any market, interact with clients the easy way and make them act in a certain manner, you have to upgrade your copy using the right calls to action, designed to convince your readers to do something (besides reading and bouncing off your page).

Maybe you want them to request a quote, download an eBook, give you a call or contact your staff members via email. Either way, to achieve your goal you have to master the art of writing killer, super-effective calls to action.

Here’s a strange fact that may make you spend a little more time working on your CTAs: sometimes, you can boost your conversions by simply changing one of the words comprised by your calls to action. A case study mentioned by Unbounce indicates that a B2B website owner has reported a 38.26% increase in conversions after replacing just one action verb with another. This is an older study, but the results hold true today.

Call to action

So what does this example actually tell us, aside from the fact that one single word can influence the actions of your prospects in a considerable manner?

This case study reveals that small tweaks can return amazing results, as long as they are focused on ways to add value to your copy. In this particular situation, the term “order” refers to the course of action that the prospect should take, and doesn’t actually highlight the benefit that the user would experience after doing what’s expected of him. On the other hand, the term “get” is more focused on the advantages, rewards, and satisfaction that a potential client will automatically profit from after responding to a certain CTA.

All in all, a combination of value and relevance is the winning formula enabling you to take your CTAs to a whole new level and boost their effectiveness.

So now what? Start by revisiting your old calls-to-action positioned on your landing pages. Replace generic orders like “Buy Now”, “Download Now”, which emphasize the action that you want your readers to take, with personalized copy that stresses out the perks that your audience can actually get from you after following your lead.

For example, instead of just writing “Buy Now”, create a button with a message reading “Add to Cart- Save 50% Today”. The latter option is much more personalized and specific than the first one. Always remember that your readers dislike overly generic messages and want you to talk to them like you’ve known each other for decades. Therefore, don’t hesitate to replace a low-impact, concise message like “Submit”, “Call Us” or “Download” with a more meaningful construction that commands attention and also stimulates your reader to take action by focusing on benefits.

Begin your sentences with verbs and subjects to help people grasp the meaning of your CTA at a first glance. According to an article published by Hubspot, you should include numbers to keep your message straightforward and clear. Avoid fluff that could bore and distract your readers.

The copy that you create for your CTAs is an extremely important element that influences the actions of your readers just as much as other key factors, such as the color, size, and shape of the CTA button.

Under these circumstances, you are probably wondering how you could polish your copy and come up with the most impactful words to seduce the minds of your prospects and get them in your door.

The good news is that you can count on a great variety of templates that have already returned positive results in any given set of circumstances. But before taking a closer look at key formulas that have already been tested, approved and used by skilled content creators, let’s focus on the main aspects that influence the quality and effectiveness of CTAs.

1. Goals

First of all, what kind of actions are you trying to stimulate?

Craft your message based on the objectives that you want to reach. For instance, a download now button is the right choice for lead generation, while a “send me info” is more suitable for business relationship building.

2. A Short String of Action-Oriented Words

Did you know that even the smallest changes in terms of copy can trigger major impact on your conversion rates? From this point of view, it’s always best to choose your words wisely and stick to a formula that has already proven to be effective.

3. Original Food for Thought Delivered in an Interesting Package

Create a bond with your visitors by using pronouns such as “me” and “you” and focus on the needs of your potential clients. Use the right visuals to support your message and go for a tasteful mix of contrasting colors to capture your visitors’ attention.

4. Size

Keep your message short and clean. Studies have shown that some of the best calls-to-action are under 150 characters. Think about it this way: a CTA like “Buy Now” will most likely convince you that brevity is not the best card that you could play while trying to seduce your readers. At the same time, you have to keep your CTA short and sweet to help your public respond.

In addition, the size of your CTA buttons is also important. A too-small version won’t command attention, while a supersized one will make you seem desperate.

5. Tone and Flow

Use action-oriented words that imply thought leadership and expertise. However, avoid technical jargon that may confuse or deter your readers. Stress out the benefits of your offer in as few words as possible.

In an article presenting the main ways in which bad copywriting can kill and bury your product, UserTesting reveals just how important it is to speak the language of your readers. Write copy that your visitors can understand and relate to. If possible, avoid industry-specific terms that are difficult to comprehend and humanize your content by using everyday words and adopting a conversational tone.

August 27 2020

The Anatomy of a Great Sales Page

jpearson Blog 0

A sales page is your best opportunity to explain your products and services to visitors and make them want to buy. It needs to be attention-grabbing, informative, and persuasive, all at the same time. If it’s not optimized for conversions, you’re losing money.

Wouldn’t it be great if you knew the secrets of writing high converting sales pages? You’ll know it by the end of this article.

Ok, let’s get started.

1. Understand Your Audience

First things first: You can’t write good sales copy unless you know who you’re talking to.

Before putting pen to paper (or fingers to keys), it’s essential to understand who your audience is and what they’re looking for when they consider buying your product or service.

One of the best ways to do this is to create a customer avatar or buyer persona. That’s a fictional person who represents your ideal customer. While the persona may be fictional, it’s based on real data collected from:

Customer surveys
Web analytics
Social media analytics
Other online research

Once you’ve got a buyer persona, you’ll understand your prospective customer’s influences, pain points, challenges, and motivations so you can create copy that addresses them.

And you can use this information in your copy to specify the audience you’re targeting,

2. Create a Value Proposition

When you know who your customers are, you’ll be able to articulate your value proposition. That’s a statement of the benefit you provide and the problem you solve for your customer, and why you’re the best person to do so.

Ideally, this will be a single sentence or short phrase that’ll guide the rest of your copy.

Here’s a straightforward fill-in-the-blank example. We help [X] to [Y] by [Z]. This translates to:

We help insurance business owners and bga’s to build their websites and boost sales by providing high-converting websites.

3. Get the Price Right

One last thing to determine before you start writing: How much does your product or service cost?

One of the big sticking points for many prospective buyers is the price. To succeed in winning the value vs. cost argument, it’ll help if you can make your product’s price less of a sticking point.

Some proven techniques to try include:

Offering more than one price point
Labeling your price points with descriptive names to help users to self-select
Make sure your price ends with the number 9 because research shows that more people gravitate towards this

4. Determine the Right Length

After you understand your target audience and what you have to offer them, it’s time to start writing your sales page.

But how long should a sales page be?

The short answer is: as long as it needs to be to get the job done. That’ll vary depending on what the copy is for, and how your visitors respond.

As QuickSprout points out, long copy lets you deal with more customer objections, so that when people click the call to action (CTA), they’re definitely convinced. Long copy is also useful for products and services that need a lot of explanation.

But if you can explain your offer simply, then you don’t need to add more copy. For example, Groupon explains its purpose in a sentence and takes you straight to the deals.

Even long sales pages will include both short and long copy.

The short copy caters to those who are already convinced. It’s usually accompanied by a call-to-action near the top of the page. The long copy helps you make a case for those who are less easy to persuade and will include a couple more CTAs.

5. Nail the Headline and Subheadings

Now you’re ready to start writing.

The first step is to create the headline. This is the most crucial part of your sales page because if you get it wrong, your visitors will be quick to leave.

The best headlines are short and to the point. For example, here’s one headline from marketing expert Neil Patel:

This is a sales page for a consultation with Neil, but that headline doesn’t waste any space. In some cases, you’ll need a subheading to add a bit more context if your message is more complex.

6. Describe Your Product

Now, it’s time to go into more detail about what your product is and what it does. This is where you’ll reiterate the core problems your visitors face, and break down your solution.

The more descriptive and unique you can get, the better your description will be. By writing detailed descriptions of each feature, you’ll not only have an easier time convincing shoppers to convert, but you can also get some SEO ranking benefits in the process.

7. Get the Language Right

How do you write a sales landing page? Use the right language. Visitors want to know you understand them, so you can use techniques like:

Addressing your customer directly, using “you”
Making them feel like part of the family by using “we”
Showing that you empathize
Telling a story that they can relate to
Using power words to elicit and show emotion

July 27 2020

The Ultimate Guide to Image File Types and When to Use Them

jpearson Blog File TYpes 0

Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you’re just trying to figure out which program opens an INDD.

Unless you’re a graphic designer by training, chances are you’ve never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness.

We’ve put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use.

Vector vs. Raster

First things first: What is the difference between vector and raster?

Rastor Image Files

Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEG, GIF, and PNG are all raster image extensions. Every photo you find online or in print is a raster image. Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images.

In order to retain pixel quality, you cannot resize raster images without compromising their resolution. As a result, it is important to remember to save raster files at the exact dimensions needed for the application.

Vector Image Files

Vector images are far more flexible. They are constructed using proportional formulas rather than pixels. EPS, AI, and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector, and you should always have a master file on hand. The real beauty of vectors lies in their ability to be sized as small as a postage stamp, or large enough to fit on an 18-wheeler!

If you’re not sure whether you have a vector version of your logo, here’s a little trick for you: Call the company that printed your business cards or the vendor that embroidered your logo on a shirt. Often they’ll have a vector file of your logo that they can send to you for your records.

High Resolution vs. Low Resolution

Have you heard your designer talk about DPI or PPI? DPI stands for “dots per inch” and PPI translates to “pixels per inch.” These units of measure are essential for determining if the density of pixels in an image is appropriate for the application you are using.

The biggest thing to note when determining what DPI or PPI you require is if you are using an image for print or web. Websites display images at 72dpi, which is low resolution; however images at this resolution look really crisp on the web. This is not the case for print. Best practices for printing an image will require it to be no less than 300dpi.

Don’t try to trick the system. A lot of magic can happen in Photoshop, but creating pixels out of thin air isn’t one of them. Pulling an image off of the web and trying to get it to fit the dimensions of your print project just won’t work. You will end up with a pixelated image that appears stretched and distorted.

Types of Image Files

JPEG (or JPG) – Joint Photographic Experts Group
PNG – Portable Network Graphics
GIF – Graphics Interchange Format
TIFF – Tagged Image File
PSD – Photoshop Document
PDF – Portable Document Format
EPS – Encapsulated Postscript
AI – Adobe Illustrator Document
INDD – Adobe Indesign Document
RAW – Raw Image Formats

1. JPEG (or JPG) – Joint Photographic Experts Group

JPEGs might be the most common file type you run across on the web, and more than likely the kind of image that is in your company’s MS Word version of its letterhead. JPEGs are known for their “lossy” compression, meaning that the quality of the image decreases as the file size decreases.

You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential in order to produce a nice looking project.

2. PNG – Portable Network Graphics

PNGs are amazing for interactive documents such as web pages, but are not suitable for print. While PNGs are “lossless,” meaning you can edit them and not lose quality, they are still low resolution.

The reason PNGs are used in most web projects is that you can save your image with more colors on a transparent background. This makes for a much sharper, web-quality image.

3. GIF – Graphics Interchange Format

GIFs are most common in their animated form, which is all the rage on Tumblr pages and in banner ads. It seems like every other day we have a new Grumpy Cat or Honey Boo Boo animated GIF. In their more basic form, GIFs are formed from up to 256 colors in the RGB colorspace. Due to the limited number of colors, the file size is drastically reduced.

This is a common file type for web projects where an image needs to load very quickly, as opposed to one that needs to retain a higher level of quality.

4. TIFF – Tagged Image File

A TIF is a large raster file that doesn’t lose quality. This file type is known for using “lossless compression,” meaning the original image data is maintained regardless of how often you might copy, re-save, or compress the original file.

Despite TIFF images’ ability to recover their quality after manipulation, you should avoid using this file type on the web — it can take forever to load. TIFF files are also commonly used when saving photographs for print.

5. PSD – Photoshop Document

PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing software ever. This type of file contains “layers” that make modifying the image much easier to handle. This is also the program that generates the raster file types mentioned above.

PSD File Type

The largest disadvantageof PSDs is that Photoshop works with raster images as opposed to vector images.

6. PDF – Portable Document Format

PDFs were invented by Adobe with the goal of capturing and reviewing rich information from any application, on any computer, with anyone, anywhere. I’d say they’ve been pretty successful so far.

PDF FIle Type

If a designer saves your vector logo in PDF format, you can view it without any design editing software (as long as you have downloaded the free Acrobat Reader software), and they have the ability to use this file to make further manipulations. This is by far the best universal tool for sharing graphics.

7. EPS – Encapsulated Postscript

EPS is a file in vector format that has been designed to produce high-resolution graphics for print. Almost any kind of design software can create an EPS.

EPS File Type

The EPS extension is more of a universal file type (much like the PDF) that can be used to open vector-based artwork in any design editor, not just the more common Adobe products. This safeguards file transfers to designers that are not yet utilizing Adobe products, but may be using Corel Draw or Quark.

8. AI – Adobe Illustrator Document

AI is, by far, the image format most preferred by designers and the most reliable type of file format for using images in all types of projects from web to print, etc.

AI File Types

Adobe Illustrator is the industry standard for creating artwork from scratch and therefore more than likely the program in which your logo was originally rendered. Illustrator produces vector artwork, the easiest type of file to manipulate. It can also create all of the aforementioned file types. Pretty cool stuff! It is by far the best tool in any designer’s arsenal.

9. INDD – Adobe Indesign Document

INDDs (Indesign Document) are files that are created and saved in Adobe Indesign. Indesign is commonly used to create larger publications, such as newspapers, magazines and eBooks.

ID File Types

Files from both Adobe Photoshop and Illustrator can be combined in Indesign to produce content rich designs that feature advanced typography, embedded graphics, page content, formatting information and other sophisticated layout-related options.

10. RAW – Raw Image Formats

A RAW image is the least-processed image type on this list — it’s often the first format a picture inherits when it’s created. When you snap a photo with your camera, it’s saved immediately in a raw file format. Only when you upload your media to a new device and edit it using image software is it saved using one of the image extensions explained above.

RAW File Types

RAW images are valuable because they capture every element of a photo without processing and losing small visual details. Eventually, however, you’ll want to package them into a raster or vector file type so they can be transferred and resized for various purposes.

As you can see from the icons above, there are multiple raw image files in which you can create images — many of them native to certain cameras (and there are still dozens more formats not shown above). Here’s a brief description of those four raw files above:

CR2: This image extension stands for Canon RAW 2, and was created by Canon for photos taken using its own digital cameras. They’re actually based on the TIFF file type, making them inherently high in quality.
CRW: This image extension was also created by Canon, preceding the existence of the CR2.
NEF: This image extension stands for Nikon Electric Format, and is a RAW file type created by (you guessed it) Nikon Cameras. These image files actually allow for extensive editing without changing file types, provided the editing takes place using a Nikon device or Nikon Photoshop plugin.
PEF: This image extension stands for Pentax Electronic Format, a RAW image file type created by Pentax Digital Cameras.

Working with images is a lot more complicated than you’d think at first glance. Hopefully, this guide has provided a better understanding of the standard file types and which are most appropriate for your project.

July 16 2020

5 Features Your Homepage Should Have

jpearson Blog WEbsite Tips 0

Websites are now the first port of call for consumers and are the face of a business. This means it’s more important than ever for companies to create engaging homepages that simultaneously provide essential information while encouraging users to explore further. On a homepage, design, layout and content have to work in conjunction, so we’ve put together a helpful checklist to help you improve conversion and increase session times.

The first impression counts – if users fail to find key features on your home page, they will be quick to sign off your site as a poorly designed one. The user experience on your site’s main landing page can make or break their perception of your business. What are some key things that you should have on your home page, upfront, and center? You can’t go wrong with these 5 features incorporated into your home page.

Company Identity and Visuals

Whether it’s introducing yourself to a new visitor or reinforcing the message to someone who uses your services frequently, business owners should leverage on the marketing and branding capabilities of their site. The company logo and tagline should be clearly visible on the homepage, and one of the first few design elements that your audience interacts with. These quick identifiers will let your users know quickly that they have found the right page and can move on to discover and explore your products and services. Don’t let your users take too long trying to figure out who you are!

Headlines and Sub-Headlines

Now that you’ve told your audience who you are, give them a sense of what you do. The headline tells your audience what you have to offer and your sub-headlines provides a brief elaboration of your services. Get rid of all the fillers that are there just to make up the word count, and speak to your audience in a clear, simple tone. Let the headlines speak for themselves.

Images

It’s time for your portfolio to shine. Add in some photos to show off your work, products, and your team. A picture says a thousand words, so be sure to align the images with your branding. Based on your target audience, your homepage should feature the images that your audience can relate to, and are likely to make them linger around your page a little longer.

Contact Information

A lot of times, consumers seek out the website of a company to find out how to get in touch with them. Whether it’s for customer support or a simple inquiry, poor visibility of your contact information can be very frustrating to the user. Those browsing your site may not want to sieve through irrelevant content and tabs just to find out how to reach you. So keep your contact information center stage on the home page.

Social Media

Get connected. There’s a very good reason why most sites have their social media links on their home page. Keep your audience apprised of your latest updates and promotions. You never know who might see your digital posts at just the right moment when they need to. The current trend is to link sites directly to social media, where swiping up can lead a user directly to your website. Can you get more targeted than that?

At Apis Productions, we specialize in website design and development services and so much more such as social media management, video creation, and SEO services. If you are interested in creating a site, it’s time to tell us about your project or have a chat about what we can do. We’re listening.