How to install and set up Elementor with Child Theme (Hello Elementor)

Edo Begagic — Tue, 22 Sep 2020 17:30:23 +0000

Step 1: Initial Setup & Adding a new page

I. SEARCH for and INSTALL the Elementor plugin. If you prefer to use the premium version, you will have to PURCHASE, UPLOAD and INSTALL the Elementor Pro plugin as well.
(If you prefer not to pay you don't have to install the Elementor Pro Plugin, just the Elementor plugin. Keep in mind that the premium version has more features. For more information about the differences between the premium and the free version you can check following link: https://themeisle.com/blog/elementor-free-vs-pro/

II. DOWNLOAD the Hello Elementor theme:
https://github.com/elementor/hello-theme

UPLOAD the theme to Wordpress.

DOWNLOAD the Hello Elementor Child theme:
https://github.com/elementor/hello-theme-child

UPLOAD the child theme to Wordpress and ACTIVATE IT.

GO TO Pages and ADD a New Page.

Step 2: Add full width & Publish page

Step 3: Set page as Homepage & Delete page title and tagline

Step 4: Edit blank page with Elementor

That's it! Now you can edit your site using the Elementor Builder.

Add custom fonts to react native (expo) app

Edo Begagic — Sun, 03 Nov 2019 23:39:55 +0000

STEP 1:

1. In your assets folder (or anywhere you prefer) create a new 'fonts' folder.

2. Go to https://fonts.google.com/ (or any other fonts library) and download your preferred font or multiple fonts.

3. Extract the TrueTypeFont (.ttf) file to your fonts folder. (If you are using VSCode text editor, you can drag the extracted files directly into the editor.

4. I added three different fonts: 'Roboto-Bold.ttf', 'Roboto-Italic.ttf' and 'Roboto-Regular.ttf'.

STEP 2:

In your project root, using the command prompt, install expo-font with following command: expo install expo-font

STEP 3:

1. In your App.js import following:

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

2. Write following function

const fetchFonts = () => {
return Font.loadAsync({
'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
'roboto-italic': require('./assets/fonts/Roboto-Italic.ttf'),
'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf')
});
};

I am using the 'roboto-bold', 'roboto-italic' and 'roboto-regular' fonts. You will use the name of the font you downloaded.

3.Add state

4. Add if statement to check if the fonts loaded and style the text components to check if your custom fonts are working.

You should see the different custom fonts on your screen:

If you have any additional questions or suggestions, feel free to leave a comment! :)

DEV Community: Edo Begagic